- Standard Selectors
- Pseudo Classes
- Pseudo Elements
- Precedence
- Specificity
- Link Pseudo Class Selectors
- jQuery Selectors
- Positioning
- Fonts
- Properties
- Animations
- Flexbox
- Grid
- Regions
- Exclusions
- 2D Tranforms
- 3D Transforms
- AJAX
- Serialization and Forms
- RegEx and Validation
- Async with jQuery
- Web Workers
- Web Messaging
- Web Sockets
- Web Storage
- Prototype Inheritance
- Functions
- Arrays
- Geo-location API
- DOM Manipulation
- Canvas
- Drag and Drop
This study guide is what I created prior to taking the Microsoft 70-480 test. There is a lot of shorthand and the code samples are not complete. I studied and read a couple of books prior to making this study guide. This guide does not include a lot of basic CSS, HTML, or JavaScript concepts. If you haven't learned about a topic in this study guide or the Microsoft 70-480 Skills Measured section I would recommend trying one of the books or resources below.
Books I read
- JavaScript: The Good Parts by Douglas Crockford
- Training Guide Programming in HTML5 with JavaScript and CSS3 by Glenn Johnson
Resources I used
button //element
#someId
.someClass
* //universal selector, avoid
table td //descendent
div > p //child
div + h1 //subsequent adjacent sibling
div ~ h1 //subsequent sibling
a[href] //attribute
a[href='http://localhost'] //equals
a[href*='localhost'] //contains
a[href^='https'] //starts with
a[href$='.png'] //ends with
a[data-bind~='css'] //contains - space separated
:link
:visited
:active
:hover
:focus
:checked
:lang(language)
:not(selector)
:first-child
:last-child
:nth-child(an+b)
:nth-last-child(an+b)
:only-child
:only-of-type
:first-of-type
:last-of-type
:target //ID at end of URL - e.g. 'http://a.com/index.html#test'
//examples
p:lang(en) {}
div p:nth-child(3n+2) {}
::first-line
::first-letter
::before //can set content
::after //can set content
//examples
#myParagraph::after {
color: #FFF;
content: 'test content';
}
#myParagraph::first-letter {
font-weight: bold;
}
- browser - lowest precedence
- user
- author
- author !important
- user !important - highest precedence
a is most significant, followed by b, then c
- a = # of id selectors
- b = # of class, attribute, and pseudo class selectors
- c = # of element selectors
Order is important
a:link
and/ora:visited
a:hover
a:active
- when clicked
:contains('blah') //matches elements containing the specified text
:header //h1, h2, etc.
//example
$("p:contains('blah')")
- fixed - positioned relative to view-port, taken out of flow
- absolute - positioned relative to nearest positioned (non-static) ancestor, taken out of flow
- relative - normal flow, then offset by
top
andleft
- static - default, normal flow
@font-face {
font-family: "Some Name";
src: local("Arial"),
url("YourCustomFont.ttf");
font-weight: bold;
}
p {
font-family: "Some Name", Serif;
}
The initial
and inherit
values have been left off intentionally. The first value listed is the default.
/* determines how far background extends */
background-clip: border-box | padding-box | content-box;
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
border: 1px solid black;
border-radius: <top-left> <top-right> <bottom-right> <bottom-left>; //or just one
border-style: none | solid | dotted | dashed | double | groove | ridge | inset | outset;
box-shadow: none | h-offset v-offset blur spread color | inset
box-sizing: content-box | padding-box | border-box;
clip: auto | shape /* shape e.g rect (top, right, bottom, left) */
clip-path: url(blah.svg#test1) | polygon() | rect() | circle() | ellipse();
columns: <min-column-width> <max-number-of-columns>; /* AKA column-count and column-width properties */
column-gap: <length> /* to be used in conjunction with columns rule */
column-rule: 1px solid black; /* same as border rule */ /* to be used in conjunction with columns rule */
font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 900 ;
font-style: normal | italic | oblique;
letter-spacing: normal | <length>;
opacity: <decimal in range 0 to 1>;
overflow: visible | hidden | scroll | auto; /* auto adds scroll bars if needed */
padding: <all> | <top&bottom> <left&right> | <top> <right> <bottom> <left>;
text-align: left | right | center | justify;
text-indent: <size>; /* first text in element */
text-shadow: <x-offset> <y-offset> <blur-radius> <color>;
white-space: normal | nowrap | pre | pre-line | pre-wrap;
word-break: normal | break-all | keep-all | break-word;
word-spacing: normal | <length>;
word-wrap: normal | break-word;
Axis for x, y offsets
(0, 0)
----------- +x (horizontal / row)
|
|
|
+
y
(vertical / column)
Some properties such as color
inherit by default. For other properties you can force inheritance by using the inherit
value.
.classToAminate {
/* <name> <duration> <delay> <# of times> <fill mode> */
animation: Your-Animation 5s 1s infinite backwards;
}
@keyframes Your-Animation {
0% { opacity: 0.1; } /* can use 'from' instead of '0%' */
50% { opacity: 0.2; }
100% { opacity: 0.8; } /* can use 'to' instead of '100%' */
}
Supported by all latest browsers
.container {
display: flex; /* or inline-flex */
flex-direction: row | row-reverse | column | column-reverse; /* this is for orientation of the main axis */
flex-wrap: nowrap | wrap | wrap-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around; /* spread of items for main-axis */
align-items: start | end | center | stretch | baseline; /* spread of items for for cross-axis */
}
.item {
order: <integer>; /* default 0 */
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: main-size | <length>; /* size before distributing space according to flex factors */
flex: <flex-grow> <flex-shrink> <flex-basis>; /* default 0 1 100% */
/* overrides container align-items setting */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Interactive demo that allows you to see how modifying properties affect the layout: http://demo.agektmr.com/flexbox
.container {
display: grid; /* or inline-grid */
grid-columns: 100px 2% 1fr; /* A fr is a fraction of the available space */
/* in this case the 3rd column will use all available space since there are no ther fr column values specified */
grid-rows: auto 10px auto 10px auto; /* auto means content will determine size */ |
grid-gap: <row-gap> <column-gap>; /* Note that this is shorthand for grid-gap-row / grid-gap-column */
justify-items: stretch | start | center | end; /* all cells will exibit this behaviour (default width) */
align-items: stretch | start | center | end; /* all cells will exibit this behaviour (default height) */
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer"; /* Every word in the code represents a cell and every pair of quotation marks represent a row */
grid-template-columns: repeat(<repeat times>, <value(s) to repeat>);
grid-template-rows: repeat(<repeat times>, <value(s) to repeat>);
}
.item {
/* grid has concept of grid track */
/* lines that start at an index of 1 and encasulate all rows and columns so a 3 by 3 grid */
/* would have a column track of 1 / 4 and a row track of 1 / 4 */
grid-column: <grid line start horizontal> / <grid line end horizontal>;
grid-row: <grid line start vertical > / <grid line end vertical>;
justify-self: stretch | start | center | end; /* By default will fill the width of the cell */
align-self: stretch | start | center | end; /* By default will fill the height of the cell */
grid-area: <single grid template area> /* E.g using example above `grid-area: header` would fill the top three cells */
| <horizontal line to start at> / <vertical line to start at> / <horizontal line to end at> / <vertical line to end at>
/* note that this is shorthand for grid column and grid-row */
}
/* Functions */
repeat(<repeat times>, <value(s) to repeat>); /* repeat times can be set to value auto-fill | number | auto-fit */
minmax(<min length>, <max length>)
Use relative position on parent, absolute on child. Set child width to 100%.
transform:
translate(x, y) /* e.g. translate(200px, 150px) */
rotate(angle) /* e.g. rotate(30deg) */
scale(sx, sy); /* e.g. scale(1.5, 2.2) */
Use relative position on parent, absolute on child. Set child width to 100%.
perspective: 1000px; /* enables 3d space for children */
/* child styles */
transform-style: preserve-3d;
transform:
perspective(500px) /* gives depth */
rotateX(10px)
rotatey(10px)
rotateZ(10px)
translateZ(10px)
scaleZ(10);
<link rel="stylesheet" media="screen and (min-width: 700px)" href="a.css"/>
@media screen {}
@media print {}
/* all is implied, not necessary */
@media all and (max-width: 699px) and (min-width: 520px), (max-width: 200px) {}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>A Title</title>
<link href="css/style.css" rel="stylesheet" />
<script src="js/test.js"></script>
</head>
<body>
<header>
<h1>Header</h1>
<nav>
<ul>
...
</ul>
</nav>
</header>
<section>
<article>
<header>
<h1>...</h1>
<h2>...</h2>
</header>
<p>...</p>
</article>
</section>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
- section
- nav
- article - self contained
- aside - loosely related, could be removed
- header
- footer
- figure
- figcaption
- details - just the summary is displayed unless clicked
- summary
- strong
- em
- abbr - set title attribute
- address - contact info for the author of a document
- blockquote, q - use cite within for the name of the
- code, samp - use
white-space: pre
to preserve white space - pre
- var
- wbr - suggested breaking point
- dfn
- dl - description list
- dt, dd - term, description- don't nest
- caption - table caption - first element in table
Name must be specified on the element for validation to work
- type - email, date, number, range, color, search, tel, url
- required
- min, max, step
- autofocus, placeholder
- pattern - must match entire value - regex
Including in html:
<html manifest="example.appcache">...</html>
The cache is cleared if the manifest changes, including a date is a good option. Example cache manifest file:
CACHE MANIFEST
# 11/16/2014
CACHE:
img/logo.jpg
NETWORK:
*
FALLBACK:
index.aspx staticIndex.html
images/ backup/notFoundImage.jpg
Scalable Vector Graphics. SVG example:
<svg width="500" height="300" xmlns="...">
<path ... />
<circle ... />
<polygon ... />
<rect ... />
<text ... />
</svg>
<!-- viewBox="minX minY x y" controls what portion of the image is displayed -->
<svg width="100%" height="100%" viewBox="0 10 15 15">...</svg>
Usage:
<image src="test.svg" />
<video controls="controls" height="500">
<source src="..." type="..." />
<source src="..." type="..." />
</video>
Attributes: autoplay, controls, height, loop, muted, poster, preload, src, width
Formats
- .ogv - not IE, iPhone, or Android
- .webm - not iPhone
- .mp4 - not Firefox or Opera
<audio id="test" controls="controls">
<source src="..." type="..." />
<source src="..." type="..." />
</audio >
Attributes: autoplay, controls, loop, preload, src
Formats
- .oga/.ogg
- .mp3,
- .mp4/.mp4a/.aac
- .wav
Using ogg and acc should give full browser support.
<table>
<colgroup span="3">
<col width="15px" />
<col width="15px" />
<col class="col3" />
</colgroup>
<colgroup span="1"></colgroup>
<tr>
<td>Column A</td>
<td>Column B</td>
<td>Column C</td>
<td>Column D</td>
</tr>
</table>
$.ajax({
url: 'url',
type: 'POST',
data: formData,
async: true, //default is true
cache: true, //default is true
complete: someFunc, //called after success and error
//error, password, success, username
}).done(function(data) {...}).fail(func).always(func);
Without jQuery
var request = new XMLHttpRequest();
request.onload = function test() {
console.log(this.responseText);
};
request.open("get", "yourService", true /* async */);
Events: progress, load, error, abort, readystatechange Properties: responseText, responseXML, response, readyState, status
readyState:
- 0 - READYSTATE_UNINITIALIZED
- 1 - READYSTATE_LOADING
- 2 - READYSTATE_LOADED - sent
- 3 - READYSTATE_INTERACTIVE - some data received, still receiving
- 4 - READYSTATE_COMPLETE
$("form").serialize() //to URL encoded string
$("form").serializeArray() //to array of name value pairs
$.parseXML("string") //XML string to XML document that can be passed to jQuery to parse
JSON.parse(str)
JSON.stringify(obj)
$.parseJSON(str)
encodeURI(str) //encodes string for use as a URL
encodeURIComponent(str) //encodes string for use in part of a URL
$.toJSON(data) //removed from jQuery in 1.9
JSON.stringify($("form").serializeArray()) //string [{"name":,"value":}] for POSTing
Regex
var str = "test";
var re = /[a-z]+/; //or new RegExp("[a-z]+") to be dynamic
var array = re.exec(str);
var newStr = str.replace(re, "blah"); //access groups created with () by $1, $2, ... in the replacement string
re.test(str);
Handy validation functions
typeOf(x)
isNaN(x)
parseFloat(x)
isFinite(x)
Promises created from a $.Deferred() object
Deferred methods
- resolve
- resolveWith
- notify
- notifyWith
- reject
- rejectWith
- promise
Promise methods
- always
- done
- fail
- pipe
- progress
- state
- then
Non blocking, can't access DOM
var worker = new Worker("myWorker.js");
worker.onmessage = function(e) {
console.log(e.data);
}
worker.onerror = function(e) {
console.log(e.data);
}
worker.postMessage("blah");
worker.terminate(); //force kills without cleanup
//worker itself can call close()
Web worker timeouts and intervals
var timeoutId = setTimeout(func, delay /*ms*/);
clearTimeout(timeoutId);
var intervalId = setInterval(func, delay); //runs repeatedly
clearInterval(intervalId);
Communication with other tabs, windows, and frames.
window.postMessage("message", "http://test.com");
window.addEventListener("message", messageHandler, false /*capture*/);
function messageHandler(e) {
if (e.origin == "http://a.com") {
//use e.data
}
}
TCP based, full-duplex continuous connection.
Functions: send, close, onclose, onerror, onmessage, onopen, porotocol, readystate, url, binaryType, bufferedAmount
var webSocket = new WebSocket(url);
function sendMessage() {
if (webSocket.readyState !== WebSocket.OPEN) { return; }
webSocket.send("test");
}
webSocket.onmessage = function(e) {
// use e.data
}
webSocket.close();
Libraries
- SignalR - ASP.Net
- Socket.IO - Node.js
localStorage and sessionStorage
localStorage["test"]; //same as localStorage.getItem("test")
localStorage["test"] = foo; //same as localStorage.setItem("test", foo);
localStorage.removeItem("test");
localStorage.clear();
storage
event fires on any change
window.addEventListener("storage", storageHandler, false);
storage event object properties
- key
- oldValue
- newValue
- url
- storageArea
var b = Object.create(a); //inherit from a
//same as Object.create()
function inherit(proto) {
function F() {}
F.prototype = proto
return new F()
}
for (var x in b) {
if (object.hasOwnProperty(x)) { ... }
}
someObject.prototype
someObject.prototype.constructor
getElementById
getElementsByTagName
getElementsByName
getElementsByClass
querySelector //first match - CSS selector
querySelectorAll
addEventListener(eventName, function, optionalCascadeRule)
/* default optionalCascadeRule is false (events cascade outwards FIRST in the DOM when set to false and inwards when set to true note that this still means the same events are triggered) */
attachEvent(eventName, function) //older IE & Opera
removeEventListener(eventName, function, useCapture)
detachEvent(eventName, function) //older IE & Opera
e.stopPropogation()
e.preventDefault()
var target = event.target || event.srcElement; //srcElement is legacy IE only
//fire an event
var event = new Event("test");
element.dispatchEvent(event);
element.fireEvent("on"+event.eventType, event); //IE9 and below
//iterate through object properties
for (var x in object) {
if (object.hasOwnProperty(x)) { ... }
}
//use for loop for arrays
//execute function immediately, bind to 'this'
func.call(this, arg1, arg2, ...);
func.apply(this, argArray);
//returns new function that is bound to 'this'
func.bind(this, arg1, arg2, ...);
new Array()
new Array('blah', 'test')
arr = ['blah', 'test']
.length
.concat()
.indexOf()
.lastIndexOf()
.join() //blah,test - takes optional separator parameter
.pop() //removes last item, returns it
.push() //adds to end, can pass multiple items to add
.reverse()
.shift() //removes first item, returns it
.slice(start, end)
.sort(func) //func is optional
.splice(start, numToRemove, itemsToAdd, ...) //returns removed elements
.toString() //comma separated like join
.unshift() //adds to beginning, can pass multiple items to add
.valueOf() //comma separated like join
Use navigator.geolocation object.
.getCurrentPosition(func(position){}, func(error){}, options);
position
- coords
- latitude
- longitude
- altitude
- accuracy
- altitudeaccuracy
- heading
- speed
- timestamp
options
- enableHighAccuracy
- timeout - default is none (-1)
- maximumAge in ms - default is no caching (0)
var watchId = .getWatchPosition(func(position){}, func(error){}, options);
function endWatch() {
if (watchId !== 0) {
.clearWatch(watchId);
watchId = 0;
}
}
parent.removeChild(item) //returns removed node
element.cloneNode(deep) //deep = whether or not to clone children
parent.appendChild(newChild) //adds to end of children
parent.insertBefore(newElement, elementToInsertBefore)
parent.replaceChild(newChild, oldChild)
element.style.display = "none";
element.style.visibility = "hidden"; //still takes up space just not visible
$("#test").show()
$("#test").hide()
element.className //space delimited string
element.classList //.add(), remove(), toggle(), contains()
HTML
<canvas id="a" width="200" height="150"></canvas>
JavaScript
var canvas = document.getElementById("a");
var context = canvas.getContext("2d");
.fillStyle, strokeStyle, lineWidth, lineJoin
.fillRect(x, y, width, height), strokeRect(...), clearRect(...)
.beginPath()
.moveTo(x, y)
.lineTo(x, y)
//draws clockwise by default
//radians = (Math.PI/180)*degrees
.arc(x, y, radius, startAngle, endAngle, anti-clockwise)
.arcTo(x1, y1, x2, y2, radius) //x0, y0 are current position draws from current position through arc
.quadraticCurveTo()
.bezierCurveTo()
.closePath()
.stroke() //or .fill()
.font, textAlign, textBaseline
context.font = "bold 12px sans-serif";
context.fillText("test", 150, 200);
var gradient = context.createLinearGradient(x0, y0, x1, y1)
//.createRadialGradient(x0, y0, r0, x1, y1, r1)
gradient.addColorStop(0, "black"); //range 0 to 1
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(0, 0, 200, 100);
context.save() //restore() - state context, stack
var image = new Image();
image.src = "...";
image.onload = function() {
context.drawImage(image, x, y);
}
Set attribute draggable
to true
to allow element to be dragged. In most browsers links, images, and selected text are draggable by default.
Use css cursor: move
to give a visual cue that the element is draggable.
Drag events
-
dragstart
-
drag //fires while element is being dragged
-
dragenter
-
dragleave
-
dragover
-
drop
-
dragend //fires when operation completes, whether or not it succeeded
function handleDragStart(e) { dragSource = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); }
function handleDrop(e) { e.stopPropogation(); e.preventDefault(); if (dragSource !== this) { dragSource.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); } }
Handle dragging from desktop to browser
function handleDrop(e) {
e.stopPropogation();
e.preventDefault();
var files = e.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
//read file objects
}
}