Section1: Implement and Manipulate Document Structures and Objects Flashcards
used to differ seperate articles within an HTML doc, such as post, blog entry, new story, etc.
hold a major chunk of site navigation such as top or side.
Contains header info for HTML doc OR or elements.
related to surrounding content but not a part of it, such as a quote from the article.
HTML5 Doctype
<! DOCTYPE html >
getElementsByTagName()
returns all the elements in the document with the matching tag name
getElementById()
searches the document for the element matching the id
getAttribute()
gets the named attribute of the element
setAttribute()
sets the value for the named attribute
attributes
src, controls, width, height, autoplay, loop, preload, poster, audio
video elements
src, type (mime type), codecs
inner HTML
will display if the browser does not support the video element
onError
will run if video element is not supported
javascript
play(), pause()
attributes
src, controls, loop, preload, autoplay
audio elements
src, type(mime type)
inner HTML
will display if the browser does not support the audio element
a drawing surface for dynamically creating images, drawings or animation.
document.getElementById(?mycanvas?).getContext(“2d”)
Get canvas context
fillStyle
canvas property sets the fill color on gradiant used during fills
moveTo(x,y)
canvas method moves the drawing cursor to x,y coordinate
lineTo(x,y)
canvas method draws a line from the current drawing cursor to the x,y coordinate specified
arc(x,y,r,start,stop)
canvas method draws an arc centered on the x,y position, with radius r, beginning at the angle given by start and ending at the angle given by stop
stroke()
draws line created by prev drawing command
fill
canvas method fills the area created by prev drawing command
fillRect(x1,y1,x2,y2)
canvas method fills the rectangle with x1,y1 and x2,y2 as the corner coords
font
a canvas property that sets the font face and size for text drawn on canvas
fillText(text, x,y)
canvas method draws the given “text” at the x,y coords and fills the text in.
strokeText(text,x,y)
canvas method draws the outline of the given text at the x,y coords
scalable vector graphics is an xml based vector drawing language
svg shapes
circle, ellipse, image, line, path, polygon, polyline, rect, text
svg attributes
width, height, viewPort, version, xmlns
svg shape attributes
x, y, width, height
static
the default positioning. This positions the element according to the normal HTML flow without any CSS
fixed
positioning is relative to the browser window, NOT the document. Fixed position elements do not move even if the window is scrolled.
relative
positioning is relative to the position the element would occupy if its positioning was static.
absolute
positioning is relative to the first parent element that has a position other than static (meaning fixed, relative, or absolute). If no parent element exists with the correct positioning type, the < html > block is treated as the containing element.
non static elements
fixed, relative, absolute
non static element properties
top, bottom, left, right
z-index
the element with higest z-index will be displayed on top.
non static position via javascript
element.style.top, element,style.position
inline elements
like , , or
block elements
like
or
display properties
inline, block, or none.
hide element with javascript
element.style.display = ‘none’;
tranform:translate
2d transform moves element in X,Y
tranform:rotate
2d transform rotates clockwise positive values and counter clockwise negative values
tranform:scale
2d transform increases or decreases teh size in teh x-axis and y-axis direction
tranform:skew
2d transform skews the element along the x and y axis
tranform:matrix
2d transform processes the element using mathmatic matrix function using 6 paramaters
transform:rotateX
3d transform rotates around the x-axis by the # degrees specified
transform:rotateY
3d transform rotates around the y-axis by the # degrees specified
geolcation object
navigator.geolocation
one time location request
navigator.geolocation.getCurrentPosition takes 3 params: success callback, error callback, options
success callback
showCoordinates(position)
success position object
timestamp AND position.coords: coords.latitude, coords.longitude, coords.accuracy, coords.altitude, coords.altitudeAccuracy, coords.heading, coords.speed
error callback
showError(error)
error object
error.message AND error.code: error.PERMISSION_DENIED, error.POSITION_UNAVAILABLE, error.TIMEOUT, error.UNKNOWN_ERROR
repeated updat request
navigator.geolocation.watchPosition(showPosition) (same params as one time request)
stop repeated update request
clearWatch()
geolocation request options
enableHighAccuracy (bool), timeout (in milliseconds), maximumAge (milliseconds)
local storage persistance
across window and browser lifetimes
session storage persistance
for the session only - lost when window or browser is closed
local storage availability
to any window or tab from the same location where the values were created (scheme, host & port)
session storage availability
within the window or tab that created them (to prevent data leakage between windows)
session storage object
window.sessionStorage
local storage object
window.localStorage
set session storage value (same for local)
window.sessionStorage.setItem(‘key’,’value’) OR window.sessionStorage.key = ‘value’ or window.sessionStorage[‘key’] = ‘value’
remove session storage item (same for local)
window.sessionStorage.removeItem(‘key’)
clear all session storage (same for local)
window.sessionStorage.clear();
storage event listener
window.addEventListener(‘storage’, receiveStorageEvent, true);
storage event handler object
key, oldValue, newValue, url, storageArea (sessionStorage or localStorage)
Offline Web Applications (AppCache)
Create a web application that can be run offline from network.
Enable Application Caching
add manifest=”application.manifest” attribute to the tag
Application Cache object
window.applicationCache
Application Manifest File
CACHE MANIFEST, CACHE (files to cache), NETWORK (not cached), FALLBACK (substitute offline files with online when not online), SETTINGS (controls, fast, prefer-online)
Application Online Object Property
navigator.onLine(bool)
Online Application Event Handler
window.addEventListener(‘online’, onlineStatusHandler, true);
Offline Application Event Handler
window.addEventListener(‘offline’, offlineStatusHandler, true);
Status Handler Status
0-UNCACHED, 1-IDLE, 2-CHECKING,3-DOWNLOADING,4-UPDATEREADY,5-OBSOLETE
Status Handler Status Events
oncached, onchecking, ondownloading, onupdateready, onobsolete, onerror, onnoupdate, onprogress
Update Application Cache
window.applicationCache.update();
Cache manifest MIME type
text/cache-manifest
Changes to the manifest file
trigger browser to reload application
“this” keyword
Refers to the object that owns the code that is currently running. In an event handler it refers to the object that triggered the event.
register an event handler
myElement.onClick = myEventHandler where myEventHandler() is a function
global variables
variables available to all other areas of the program from the moment they are defined until the page is closed.
local variables
variables scoped to be available only in the code block where they are declare until the execution leaves the code block.
Basic IIFE syntax
(function() {// hidden code and objects go here })();
IIFE (immediate invoked function expression)
keeps objects out of global namespace by declaring an anonymous function and then immediately exectuing it.
Basic Revealing Module Pattern Syntax
var myModule = (function() { var x = 1; var y = 2; var myFunction = function() { return x + y; };return { getX: function() { return x; }, // public getter for X setX: function( newX) { x = newX; }, // public setter for X myFunction : myFunction // make myFunction public } })();
Revealing Module Pattern
keeps objects out of global namespace by using IIFE but returning an object that has accessible properties and methods.
Common javascript native objects
Array, Date, Math, RegExp, String
Math Object
A static native javascript object for performing mathmatical functions like Math.PI or Math.sqrt(16);
Create new instance of native object
var myArray = new Array();
Call toUpperCase() String object method
var myString = new String(“hello”); myString.toUpperCase(); or “hello”.toUpperCase();
Create a custom object
var Cat = function(size, color) { this.size = size; this.color = color; } and var myCat = new Cat(“fat”, “white”);
Prototypes
represent the definition of the object type, like a blueprint, and changing the prototype changes all of the objects that were built from it.
Prototype function
Cat.prototype.meow = function(volume) { this.volume = volume; }
Prototype property
Cat.prototype.name = ‘Whiskers’;
Custom Methods for native objects syntax
String.prototype.GetFirstChar = function() { return this.charAt(0); } and myString.GetFirstChar();
Inherit From an Object
function RaceCar( topspeed) { Car.call( this); // call our base class constructor to inherit from that class this.topspeed = topspeed; // extend with our new properties }
