Section1: Implement and Manipulate Document Structures and Objects Flashcards

1
Q
A

used to differ seperate articles within an HTML doc, such as post, blog entry, new story, etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q
A

hold a major chunk of site navigation such as top or side.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q
A

Contains header info for HTML doc OR or elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q
A

related to surrounding content but not a part of it, such as a quote from the article.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

HTML5 Doctype

A

<! DOCTYPE html >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

getElementsByTagName()

A

returns all the elements in the document with the matching tag name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

getElementById()

A

searches the document for the element matching the id

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

getAttribute()

A

gets the named attribute of the element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

setAttribute()

A

sets the value for the named attribute

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

attributes

A

src, controls, width, height, autoplay, loop, preload, poster, audio

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

video elements

A

src, type (mime type), codecs

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

inner HTML

A

will display if the browser does not support the video element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

onError

A

will run if video element is not supported

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

javascript

A

play(), pause()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

attributes

A

src, controls, loop, preload, autoplay

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

audio elements

A

src, type(mime type)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

inner HTML

A

will display if the browser does not support the audio element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q
A

a drawing surface for dynamically creating images, drawings or animation.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

document.getElementById(?mycanvas?).getContext(“2d”)

A

Get canvas context

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

fillStyle

A

canvas property sets the fill color on gradiant used during fills

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

moveTo(x,y)

A

canvas method moves the drawing cursor to x,y coordinate

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

lineTo(x,y)

A

canvas method draws a line from the current drawing cursor to the x,y coordinate specified

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

stroke()

A

draws line created by prev drawing command

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

fill

A

canvas method fills the area created by prev drawing command

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

fillRect(x1,y1,x2,y2)

A

canvas method fills the rectangle with x1,y1 and x2,y2 as the corner coords

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

font

A

a canvas property that sets the font face and size for text drawn on canvas

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

fillText(text, x,y)

A

canvas method draws the given “text” at the x,y coords and fills the text in.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

strokeText(text,x,y)

A

canvas method draws the outline of the given text at the x,y coords

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q
A

scalable vector graphics is an xml based vector drawing language

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

svg shapes

A

circle, ellipse, image, line, path, polygon, polyline, rect, text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

svg attributes

A

width, height, viewPort, version, xmlns

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

svg shape attributes

A

x, y, width, height

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

static

A

the default positioning. This positions the element according to the normal HTML flow without any CSS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

fixed

A

positioning is relative to the browser window, NOT the document. Fixed position elements do not move even if the window is scrolled.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

relative

A

positioning is relative to the position the element would occupy if its positioning was static.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

absolute

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

non static elements

A

fixed, relative, absolute

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

non static element properties

A

top, bottom, left, right

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

z-index

A

the element with higest z-index will be displayed on top.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

non static position via javascript

A

element.style.top, element,style.position

42
Q

inline elements

A

like , , or

43
Q

block elements

A

like

or

44
Q

display properties

A

inline, block, or none.

45
Q

hide element with javascript

A

element.style.display = ‘none’;

46
Q

tranform:translate

A

2d transform moves element in X,Y

47
Q

tranform:rotate

A

2d transform rotates clockwise positive values and counter clockwise negative values

48
Q

tranform:scale

A

2d transform increases or decreases teh size in teh x-axis and y-axis direction

49
Q

tranform:skew

A

2d transform skews the element along the x and y axis

50
Q

tranform:matrix

A

2d transform processes the element using mathmatic matrix function using 6 paramaters

51
Q

transform:rotateX

A

3d transform rotates around the x-axis by the # degrees specified

52
Q

transform:rotateY

A

3d transform rotates around the y-axis by the # degrees specified

53
Q

geolcation object

A

navigator.geolocation

54
Q

one time location request

A

navigator.geolocation.getCurrentPosition takes 3 params: success callback, error callback, options

55
Q

success callback

A

showCoordinates(position)

56
Q

success position object

A

timestamp AND position.coords: coords.latitude, coords.longitude, coords.accuracy, coords.altitude, coords.altitudeAccuracy, coords.heading, coords.speed

57
Q

error callback

A

showError(error)

58
Q

error object

A

error.message AND error.code: error.PERMISSION_DENIED, error.POSITION_UNAVAILABLE, error.TIMEOUT, error.UNKNOWN_ERROR

59
Q

repeated updat request

A

navigator.geolocation.watchPosition(showPosition) (same params as one time request)

60
Q

stop repeated update request

A

clearWatch()

61
Q

geolocation request options

A

enableHighAccuracy (bool), timeout (in milliseconds), maximumAge (milliseconds)

62
Q

local storage persistance

A

across window and browser lifetimes

63
Q

session storage persistance

A

for the session only - lost when window or browser is closed

64
Q

local storage availability

A

to any window or tab from the same location where the values were created (scheme, host & port)

65
Q

session storage availability

A

within the window or tab that created them (to prevent data leakage between windows)

66
Q

session storage object

A

window.sessionStorage

67
Q

local storage object

A

window.localStorage

68
Q

set session storage value (same for local)

A

window.sessionStorage.setItem(‘key’,’value’) OR window.sessionStorage.key = ‘value’ or window.sessionStorage[‘key’] = ‘value’

69
Q

remove session storage item (same for local)

A

window.sessionStorage.removeItem(‘key’)

70
Q

clear all session storage (same for local)

A

window.sessionStorage.clear();

71
Q

storage event listener

A

window.addEventListener(‘storage’, receiveStorageEvent, true);

72
Q

storage event handler object

A

key, oldValue, newValue, url, storageArea (sessionStorage or localStorage)

73
Q

Offline Web Applications (AppCache)

A

Create a web application that can be run offline from network.

74
Q

Enable Application Caching

A

add manifest=”application.manifest” attribute to the tag

75
Q

Application Cache object

A

window.applicationCache

76
Q

Application Manifest File

A

CACHE MANIFEST, CACHE (files to cache), NETWORK (not cached), FALLBACK (substitute offline files with online when not online), SETTINGS (controls, fast, prefer-online)

77
Q

Application Online Object Property

A

navigator.onLine(bool)

78
Q

Online Application Event Handler

A

window.addEventListener(‘online’, onlineStatusHandler, true);

79
Q

Offline Application Event Handler

A

window.addEventListener(‘offline’, offlineStatusHandler, true);

80
Q

Status Handler Status

A

0-UNCACHED, 1-IDLE, 2-CHECKING,3-DOWNLOADING,4-UPDATEREADY,5-OBSOLETE

81
Q

Status Handler Status Events

A

oncached, onchecking, ondownloading, onupdateready, onobsolete, onerror, onnoupdate, onprogress

82
Q

Update Application Cache

A

window.applicationCache.update();

83
Q

Cache manifest MIME type

A

text/cache-manifest

84
Q

Changes to the manifest file

A

trigger browser to reload application

85
Q

“this” keyword

A

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
Q

register an event handler

A

myElement.onClick = myEventHandler where myEventHandler() is a function

87
Q

global variables

A

variables available to all other areas of the program from the moment they are defined until the page is closed.

88
Q

local variables

A

variables scoped to be available only in the code block where they are declare until the execution leaves the code block.

89
Q

Basic IIFE syntax

A

(function() {// hidden code and objects go here })();

90
Q

IIFE (immediate invoked function expression)

A

keeps objects out of global namespace by declaring an anonymous function and then immediately exectuing it.

91
Q

Basic Revealing Module Pattern Syntax

A

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
Q

Revealing Module Pattern

A

keeps objects out of global namespace by using IIFE but returning an object that has accessible properties and methods.

93
Q

Common javascript native objects

A

Array, Date, Math, RegExp, String

94
Q

Math Object

A

A static native javascript object for performing mathmatical functions like Math.PI or Math.sqrt(16);

95
Q

Create new instance of native object

A

var myArray = new Array();

96
Q

Call toUpperCase() String object method

A

var myString = new String(“hello”); myString.toUpperCase(); or “hello”.toUpperCase();

97
Q

Create a custom object

A

var Cat = function(size, color) { this.size = size; this.color = color; } and var myCat = new Cat(“fat”, “white”);

98
Q

Prototypes

A

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
Q

Prototype function

A

Cat.prototype.meow = function(volume) { this.volume = volume; }

100
Q

Prototype property

A

Cat.prototype.name = ‘Whiskers’;

101
Q

Custom Methods for native objects syntax

A

String.prototype.GetFirstChar = function() { return this.charAt(0); } and myString.GetFirstChar();

102
Q

Inherit From an Object

A

function RaceCar( topspeed) { Car.call( this); // call our base class constructor to inherit from that class this.topspeed = topspeed; // extend with our new properties }