Section1: Implement and Manipulate Document Structures and Objects Flashcards
(102 cards)
1
Q
A
used to differ seperate articles within an HTML doc, such as post, blog entry, new story, etc.
2
Q
A
hold a major chunk of site navigation such as top or side.
3
Q
A
Contains header info for HTML doc OR or elements.
4
Q
A
related to surrounding content but not a part of it, such as a quote from the article.
5
Q
HTML5 Doctype
A
<! DOCTYPE html >
6
Q
getElementsByTagName()
A
returns all the elements in the document with the matching tag name
7
Q
getElementById()
A
searches the document for the element matching the id
8
Q
getAttribute()
A
gets the named attribute of the element
9
Q
setAttribute()
A
sets the value for the named attribute
10
Q
attributes
A
src, controls, width, height, autoplay, loop, preload, poster, audio
11
Q
video elements
A
src, type (mime type), codecs
12
Q
inner HTML
A
will display if the browser does not support the video element
13
Q
onError
A
will run if video element is not supported
14
Q
javascript
A
play(), pause()
15
Q
attributes
A
src, controls, loop, preload, autoplay
16
Q
audio elements
A
src, type(mime type)
17
Q
inner HTML
A
will display if the browser does not support the audio element
18
Q
A
a drawing surface for dynamically creating images, drawings or animation.
19
Q
document.getElementById(?mycanvas?).getContext(“2d”)
A
Get canvas context
20
Q
fillStyle
A
canvas property sets the fill color on gradiant used during fills
21
Q
moveTo(x,y)
A
canvas method moves the drawing cursor to x,y coordinate
22
Q
lineTo(x,y)
A
canvas method draws a line from the current drawing cursor to the x,y coordinate specified
23
Q
arc(x,y,r,start,stop)
A
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
24
Q
stroke()
A
draws line created by prev drawing command
25
fill
canvas method fills the area created by prev drawing command
26
fillRect(x1,y1,x2,y2)
canvas method fills the rectangle with x1,y1 and x2,y2 as the corner coords
27
font
a canvas property that sets the font face and size for text drawn on canvas
28
fillText(text, x,y)
canvas method draws the given "text" at the x,y coords and fills the text in.
29
strokeText(text,x,y)
canvas method draws the outline of the given text at the x,y coords
30
scalable vector graphics is an xml based vector drawing language
31
svg shapes
circle, ellipse, image, line, path, polygon, polyline, rect, text
32
svg attributes
width, height, viewPort, version, xmlns
33
svg shape attributes
x, y, width, height
34
static
the default positioning. This positions the element according to the normal HTML flow without any CSS
35
fixed
positioning is relative to the browser window, NOT the document. Fixed position elements do not move even if the window is scrolled.
36
relative
positioning is relative to the position the element would occupy if its positioning was static.
37
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.
38
non static elements
fixed, relative, absolute
39
non static element properties
top, bottom, left, right
40
z-index
the element with higest z-index will be displayed on top.
41
non static position via javascript
element.style.top, element,style.position
42
inline elements
like , *, or*
43
block elements
like
or
44
display properties
inline, block, or none.
45
hide element with javascript
element.style.display = 'none';
46
tranform:translate
2d transform moves element in X,Y
47
tranform:rotate
2d transform rotates clockwise positive values and counter clockwise negative values
48
tranform:scale
2d transform increases or decreases teh size in teh x-axis and y-axis direction
49
tranform:skew
2d transform skews the element along the x and y axis
50
tranform:matrix
2d transform processes the element using mathmatic matrix function using 6 paramaters
51
transform:rotateX
3d transform rotates around the x-axis by the # degrees specified
52
transform:rotateY
3d transform rotates around the y-axis by the # degrees specified
53
geolcation object
navigator.geolocation
54
one time location request
navigator.geolocation.getCurrentPosition takes 3 params: success callback, error callback, options
55
success callback
showCoordinates(position)
56
success position object
timestamp AND position.coords: coords.latitude, coords.longitude, coords.accuracy, coords.altitude, coords.altitudeAccuracy, coords.heading, coords.speed
57
error callback
showError(error)
58
error object
error.message AND error.code: error.PERMISSION\_DENIED, error.POSITION\_UNAVAILABLE, error.TIMEOUT, error.UNKNOWN\_ERROR
59
repeated updat request
navigator.geolocation.watchPosition(showPosition) (same params as one time request)
60
stop repeated update request
clearWatch()
61
geolocation request options
enableHighAccuracy (bool), timeout (in milliseconds), maximumAge (milliseconds)
62
local storage persistance
across window and browser lifetimes
63
session storage persistance
for the session only - lost when window or browser is closed
64
local storage availability
to any window or tab from the same location where the values were created (scheme, host & port)
65
session storage availability
within the window or tab that created them (to prevent data leakage between windows)
66
session storage object
window.sessionStorage
67
local storage object
window.localStorage
68
set session storage value (same for local)
window.sessionStorage.setItem('key','value') OR window.sessionStorage.key = 'value' or window.sessionStorage['key'] = 'value'
69
remove session storage item (same for local)
window.sessionStorage.removeItem('key')
70
clear all session storage (same for local)
window.sessionStorage.clear();
71
storage event listener
window.addEventListener('storage', receiveStorageEvent, true);
72
storage event handler object
key, oldValue, newValue, url, storageArea (sessionStorage or localStorage)
73
Offline Web Applications (AppCache)
Create a web application that can be run offline from network.
74
Enable Application Caching
add manifest="application.manifest" attribute to the tag
75
Application Cache object
window.applicationCache
76
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)
77
Application Online Object Property
navigator.onLine(bool)
78
Online Application Event Handler
window.addEventListener('online', onlineStatusHandler, true);
79
Offline Application Event Handler
window.addEventListener('offline', offlineStatusHandler, true);
80
Status Handler Status
0-UNCACHED, 1-IDLE, 2-CHECKING,3-DOWNLOADING,4-UPDATEREADY,5-OBSOLETE
81
Status Handler Status Events
oncached, onchecking, ondownloading, onupdateready, onobsolete, onerror, onnoupdate, onprogress
82
Update Application Cache
window.applicationCache.update();
83
Cache manifest MIME type
text/cache-manifest
84
Changes to the manifest file
trigger browser to reload application
85
"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.
86
register an event handler
myElement.onClick = myEventHandler where myEventHandler() is a function
87
global variables
variables available to all other areas of the program from the moment they are defined until the page is closed.
88
local variables
variables scoped to be available only in the code block where they are declare until the execution leaves the code block.
89
Basic IIFE syntax
(function() {// hidden code and objects go here })();
90
IIFE (immediate invoked function expression)
keeps objects out of global namespace by declaring an anonymous function and then immediately exectuing it.
91
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 } })();
92
Revealing Module Pattern
keeps objects out of global namespace by using IIFE but returning an object that has accessible properties and methods.
93
Common javascript native objects
Array, Date, Math, RegExp, String
94
Math Object
A static native javascript object for performing mathmatical functions like Math.PI or Math.sqrt(16);
95
Create new instance of native object
var myArray = new Array();
96
Call toUpperCase() String object method
var myString = new String("hello"); myString.toUpperCase(); or "hello".toUpperCase();
97
Create a custom object
var Cat = function(size, color) { this.size = size; this.color = color; } and var myCat = new Cat("fat", "white");
98
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.
99
Prototype function
Cat.prototype.meow = function(volume) { this.volume = volume; }
100
Prototype property
Cat.prototype.name = 'Whiskers';
101
Custom Methods for native objects syntax
String.prototype.GetFirstChar = function() { return this.charAt(0); } and myString.GetFirstChar();
102
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 }
