HTML Tags <article>: Self-contained area on a page <aside>: Smaller content area outside the flow of a page. Examples: Sidebar, alert, ad. <figure>: Contains a figure such as an image, chart or picture <figcaption>: In <figure> tags, contains the caption for a figure <hgroup>: A group of headings (H1-H6 elements) <mark>: Highlights text <nav>: Navigation to other parts of the site. Put <a> tags in it. <progress>: Progress bar. “Value” and “Max” attributes <section>: Distinct content of a document DOM getElementById getElementsByClassName querySelector: Example - document.querySelectorAll(“p”); querySelectorAll: Returns node list childNodes: List of child nodes (eg, list items in an unordered list) firstChild lastChild hasChildNodes removeChild: Returns reference to removed node appendChild Video Attributes src autoplay controls: include built-in play/pause. Don’t set to true. Just use the word. height/width loop poster: Image to be shown when not playing Video Methods/Properties play() pause() Volume currentTime Canvas Put <canvas> in HTML Get in JavaScript by ID var ctxt = (canvas).getContext(“2d”); ctxt.beginPath() ctxt.moveTo(x,y) ctxt.lineTo(x,y) ctxt.stroke() ctxt.arc(x, y, radius, startAngleRadians, endAngleRadians, counterclockwise[boolean]) Radians = degrees * Math.PI / 100 ctxt.quadraticCurveTo(controlX, controlY, endX, endY) ctxt.bezierCurveTo(controlX, controlY, control2X,control2Y, endX, endY) Styling ctxt.lineWidth = number; ctxt.strokeStyle=‘colour code’ ctxt.rect(x, y, x2, y2) ctxt.fillStyle = “blue” ctxt.fill() var grad = ctxt.addLinearGradient(x1, y1, x2, y2) grad.addColorStop(0, “black”) grad.addColorStop(0.5, “gray”) grad.addColorStop(0, “white”) ctxt.fillStyle = grad ctxt.fill() addRadialGradient works the same way var img = new Image() img.src = “file.png” img.onload = function { ctxt.drawImage(img, x, y) ctxt.stroke() } ctxt.font = “12px arial” ctxt.strokeText("1. Text with default font", 100, 100); SVG Graphics <svg> <circle id= “circ” cx=“50” cy=“45” radius=”250” fill=“green”> <rect id=“rect” x=“50” y=“45” width=“60” height=“50” fill=“blue”> <polygon points=“10,150 20,170 50,180 150,100 140,90” fill=“purple”> </svg> Generally, canvas is better than SVG for performance Arrays arr3 = arr1.concat(arr2) makes two arrays one array indexOf() and lastIndexOf() accept two parameters, something to search for and an index to start searching at join() uses a delimiter to turn an array into a string reverse() sort() slice(starting index, ending index) removes part of an array splice(starting index, ending index, replacement value, replacement value…) replaces values in an array push() and pop() add stack functionality, affecting the last value of the array shift() and unshift() do the same with the first value. Shift removes, unshift adds. arr.every(name of function returning boolean and taking in value/index) checks if something is true in every case arr.some() works the same but returns true if even just one element matches the criteria arr.forEach(functionName) calls the function for each element, function takes in value, index and array arr2 = arr.filter(functionName) creates new array taking only the elements from the first array that returned true arr2 = arr.map(functionName) replaces each value with the return value from the function arr2 = arr.reduce(functionName) works like map except function has two params, “current” and “previous” values arr.reduceRight works like reduce except goes from right to left instead of from left to right For In Works like the C# version of foreach for (var element in array) {} Local and Session Storage Local: Persistent, isn’t lost when user closes closes browser Session: Only available for the duration of the current session localStorage and sessionStorage objects provide the exact same API LoadFromStorage localStorage.key localStorage.getItem localStorage.clear() <html manifest="(fileName).appcache"> … </html> Specifies that page should be have some offline use CACHE MANIFEST: First line of a manifest file CACHE: All files that must be cached offline NETWORK: All files that must come from the internet and cannot be cached FALLBACK: Takes pairs of files, a file that’s cached and one to be used as a replacement if it isn’t available window.applicationCache.status: Shows status of application cache window.applicationCache.update: Update the cache if an update is available window.applicationCache.swapCache: Replace the cache with a newer version oncached and onerror: Events Geolocation API var geoLocator = window.navigator.geolocation; getCurrentPosition, watchPosition, and clearWatch getCurrentPosition(callback function, optional error callback function, optional object called PositionOptions) Can be used for PositionOptions: var posOptions = {enableHighAccuracy: true,timeout: 45000}; Success Callback Function(pos) Pos.coords.latitude / pos.coords.longitude watcher = geoLocator.watchPosition(successPosition, errorPosition, posOptions) Calls function on every new location detected geoLocator.clearWatch(watcher); Events window.addEventListener(event name [eg: “load”], event function) or Anonymous function: window.onload = function () {} Cancel an event: Make a new event where the function simply returns false, or sets window.returnValue to false Event bubbling: When an element in inside another element and both have events, the events will happen in the order the two elements received the events focus/blur don’t bubble, focusin/focusout do keydown when a key is push, keyup when released keypress when key completely pressed window.event.keyCode gives code representing key that was pressed Click, dblclick, mousedown, mouseup, mouseenter/mouseover, mouseleave, mousemove clientX and clientY relative to viewport boundaries offsetX and offsetY relative to target element screenX and screenY relative to top-left corner of the screen Input Type = (New to HTML5) color: Provides colour picker date: Provides date picker datetime: Provides date/time picker email: Must match the format of a valid email address month: Numeric month and year week: Numeric week and year time: Select time of day number: Forces numeric input Range: Slider within a range. Uses “min”, “max” and “value” tel: Telephone number url: Formatted url Input Type = (Not new to HTML5) Radio: Can select 1 and only 1 option. Each button has its own id, but the name attribute links them together Checkbox: A checkbox (“check = checked” to check by default) Password: Glyphs entered password Button: Simple button Reset: Resets all elements in the form Submit: Posts form data to destination Inputs not using Type Attribute <text> can be used instead of <input type= “text”> <textarea> can be used instead of <input type= “textarea”>. <button> can be used instead of <input type= “button”> Validation on Text Inputs Can use “spellcheck=true” Pattern = “^[a-zA-Z0-9\-\.]+\.(com|ca)$” to accept only .com or .ca email addresses Placeholder is example text that doesn’t interfere with the user typing their own value Just use the word required for required fields. No “=true” Regular Expressions ^ (Beginning of string) $ (End of string) . (Any character) [A-Z] (Any capital letter character) [a-z] (Any lowercase letter character) \d (Any numeric character) + (At least one of the previous character or character set) * (Zero or more of the previous character or character set) [^] (Negation. For example [^a] means a string that doesn’t contain the ‘a’ character) ? (Previous character is optional) \w (A word containing and upper or lowercase letters plus underscores) \ (Used to mean the literal character. For example \\ would mean a backslash and \$ would mean a dollar sign) \s (A space character) {} (Limits the occurrences. For examples \s{2} would limit it to two space characters) Using Regular Expressions When setting regular expressions, use slashes instead of quotes. var example = /^[a-z]$/ example.test(string) returns true if the string matches the format example.exec(string) returns the part(s) of the string that matches the format as a string array XML vs JSON syntax Examples: XML <Person> <firstName>Kyle</firstName> <lastName>McSheffery</lastName> </Person> JSON {Person firstName: “Kyle”, lastName: “McSheffery”} Extending JSON objects var popupBook = Object.create ( Book.protoType, { hasSound: {value:true}, showPopUp:{ value: function showPop() { //do logic to show a popup } ); Parent object, new properties Replace Prototype with New Prototype PopUpBook.prototype = Book.prototype; PopUpBook.prototype.hasSound = false; PopUpBook.prototype.showPopUp = function ShowPop() { }; Basically make a copy of the parent class and add some stuff onto it XMLHttpRequest <script> $("document").ready(function () { $("#btnGetXMLData").click(function () { var xReq = new XMLHttpRequest(); xReq.open("GET", "myXMLData.xml", false); xReq.send(null); $("#results").text(xReq.response); }); }); </script> .responseText shows reponse in a human readable format Set .responseType to blob for binary data Serialising and Deserialising Serialise with JSON.stringify() Deserialise with JSON.parse() Serialise HTML form data with JQuery $("form").submit(function () { var qString = $(this).serialize(); alert(qString); $.ajax({ url: 'processSignUp.aspx', type: "POST", data: qString, success: function (r) {} }); return false; }); CSS Attributes text-indent: indent text letter-spacing: s p a c e b e t w e e n l e t t e r s word-spacing: space between words Z-index: when positioning is absolute, this decides what goes on top of what CSS Transitions The following code makes div widen when mouse hovered over it div { width: 100px; transition: width 2s; } div:hover { width: 200px; } Replace “transition: width 2s” with “transition: width 2s 1s” to delay by a second Media Query Example @media screen and (min-width: 1200px) { #blogPage { } } Flexboxes https://www.w3schools.com/css/css3_flexbox.asp