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
