Section1: Implement and Manipulate Document Structures and Objects Flashcards Preview

MCSD 70-480 > Section1: Implement and Manipulate Document Structures and Objects > Flashcards

Flashcards in Section1: Implement and Manipulate Document Structures and Objects Deck (102)
Loading flashcards...
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
Q

fill

A

canvas method fills the area created by prev drawing command

26
Q

fillRect(x1,y1,x2,y2)

A

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

27
Q

font

A

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

28
Q

fillText(text, x,y)

A

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

29
Q

strokeText(text,x,y)

A

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

30
Q
A

scalable vector graphics is an xml based vector drawing language

31
Q

svg shapes

A

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

32
Q

svg attributes

A

width, height, viewPort, version, xmlns

33
Q

svg shape attributes

A

x, y, width, height

34
Q

static

A

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

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.

36
Q

relative

A

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

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.

38
Q

non static elements

A

fixed, relative, absolute

39
Q

non static element properties

A

top, bottom, left, right

40
Q

z-index

A

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

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 }