Uploaded by Kyle McSheffery

pdf

advertisement
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
Download