Implement and manipulate document structures and objects (24%) Flashcards
1
Q
Which HTML control defines self-contained areas on a page?
A
article
2
Q
Which HTML control defines smaller content areas outside the flow of a webpage?
A
aside
3
Q
Which HTML control defines the caption of a figure element?
A
figcaption
4
Q
Which HTML control defines content that contains a figure, such as an image, chart, or picture?
A
figure
5
Q
Which HTML control defines text that should be highlighted?
A
mark
6
Q
Which HTML control defines the bottom of a section or page?
A
footer
7
Q
Which HTML control defines the top of a section or page?
A
header
8
Q
Which HTML control defines a group of headings (H1–H6 elements)?
A
hgroup
9
Q
Which HTML control defines navigation to other pages in the site?
A
nav
10
Q
Which HTML control defines the progress of a task?
A
progress
11
Q
Which HTML control defines the distinct content of a document?
A
section
12
Q
What elements are contained in a basic HTML template?
A
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<!-- page content goes here -->
</body>
</html>
13
Q
What is the header tag?
A
Declares a header for any part of the web page. Intended to contain H1-H6, but can contain anything. Does not have to be at the top of the page. Does not actual position the content.
14
Q
What is the article tag?
A
Represents a whole and complete piece of content like an article or blog post. Can be taken as-is and used outside the original website.
15
Q
What is the section tag?
A
Used to subdivide an article tag.
16
Q
What is the aside tag?
A
Contains content outside of the scope of the main content of the page. Does not actual position the content.
17
Q
How are figure and figcaption tags used together?
A
<figure>
<img></img>
<figcaption>Fig 1: A really juicy orange.</figcaption>
</figure>
18
Q
What is the progress tag?
A
Displays a progress bar. Can be determinate or indeterminate. To make indeterminate, omit the value attribute.
19
Q
How do you create a determinate progress tag?
A
<progress></progress>
20
Q
How do you create an indeterminate progress tag?
A
<progress></progress>
21
Q
What is the mark tag?
A
Highlights a portion of the page.
22
Q
What tags do search engines primarily look for?
A
Article and section tags.
23
Q
Which DOM method gets an individual element on the page by its unique id attribute value
?
A
getElementById
24
Q
Which DOM method gets all the elements that have the specified CSS class applied to them?
A
getElementsByClassName
25
Which DOM method gets all the elements of the page that have the specified tag name or element name?
getElementsByTagName
26
Which DOM method gets the first child element found that matches the provided CSS selector criteria?
querySelector
27
Which DOM method removes an element from the DOM?
removeNode
28
Which DOM property returns a collection of all child nodes of the parent element?
childNodes
29
Which DOM property returns a reference to the very first child node in the list of child nodes of the parent node?
firstChild
30
Which DOM property returns a reference to the very last child node in the list of the child nodes of the parent node?
lastChild
31
Which DOM property returns true if the parent element has any child nodes at all?
hasChildNodes (A good practice is to check this property before accessing other properties, such as firstChild or lastChild.)
32
Which attribute to used to tell the browser to include its built-in video controls, such as play and pause?
controls (If this is omitted, the user has no visible way to play the content. You would use autoplay or provide some other mechanism through JavaScript to play the video.)
33
How do you remove an element and all its descendants from the DOM?
Call removeNode and pass in true.
```
var innerDiv = document.getElementById("innerDiv");
innerDiv.removeNode(true);
```
34
Which HTML tag is used to display video content?
video
35
Which attribute to used to set the source of a video tag?
src
36
Which attribute to used to start playing the video as soon as it loads?
autoplay (If this attribute is omitted, the video plays only when told to through player controls or JavaScript.)
37
Which attribute to used to tell the browser to include its built-in video controls, such as play and pause?
controls (If this is omitted, the user has no visible way to play the content. You would use autoplay or provide some other mechanism through JavaScript to play the video.)
38
Which attributes are used to set the size of the video tag?
height/width
39
Which attribute to used to continuously play the video after it completes?
loop (If this attribute is omitted, the video stops after it plays through completely.)
40
Which attribute to used to specify an image to show in the place allocated to the video until the user starts to play the video?
poster (Use this when you’re not using autoplay. It’s very useful for providing a professional image or artwork to represent the video. If it’s omitted, the poster that appears is the first frame of the video.
41
What tag is used to specify multiple formats for a video tag?
source
42
What tag is used to display a message in a browser that does not support the video tag?
object
43
What method of the video object plays the video?
play
44
What method of the video object pauses the video?
pause
45
What property of the video object controls the volume?
volume
46
What property of the video object controls the current position of the video?
currentTime
47
Which HTML tag is used to display graphics?
canvas
48
How do you get a reference to the canvas object?
```
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
```
49
Which methods of the canvas object are used to draw a line?
ctxt. beginPath();
ctxt. moveTo(10, 10);
ctxt. lineTo(225, 350);
ctxt. lineTo(300, 10);
ctxt. lineTo(400, 350);
ctxt. lineWidth = 5;
ctxt. strokeStyle = '#0f0';
ctxt. stroke();
50
Which methods of the canvas object are used to draw a curve?
arc, quadradicCurveTo, and bezierCurveTo
51
Which parameters are required to draw an arc?
X, Y, radius, startAngle, endAngle, counterclockwise
ctxt. beginPath();
ctxt. arc(150,100,75,0,2 * Math.PI, false);
ctxt. lineWidth = 25;
ctxt. strokeStyle = '#0f0';
ctxt. stroke();
52
Which parameters are required to draw a quadratic curve?
controlX, controlY, endX, endY
ctxt. beginPath();
ctxt. moveTo(10,380);
ctxt. quadraticCurveTo(300,-250,580,380);
ctxt. lineWidth = 25;
ctxt. strokeStyle = '#f00';
ctxt. stroke();
53
Which parameters are required to draw a bezier curve?
controlX, controlY, control2X, control2Y, endX, endY
ctxt. beginPath();
ctxt. moveTo(125, 20);
ctxt. bezierCurveTo(0, 200, 300, 300, 50, 400);
ctxt. lineWidth = 5;
ctxt. strokeStyle = '#f00';
ctxt. stroke();
54
Which method of the canvas object is used to draw rectangles?
rect
55
Which parameters are required for drawing rectangles?
x, y, width, height
ctxt. beginPath();
ctxt. rect(300, 200, 150, 75);
ctxt. stroke();
56
Which method of the canvas object is used to fill a shape with color?
# fill (call before the stroke method)
ctxt. fillStyle = "blue";
| ctxt. fill();
57
What method is used to draw and fill a rectangle?
fillRect
ctxt. fillStyle = "blue";
ctxt. fillRect(300—(x / 2), 200—(y / 2), x, y);
58
How do you fill a complex shape?
Call the fill method before calling the stroke method.
ctxt. beginPath();
ctxt. arc(300, 200, 75, 1.75 * Math.PI, 1.25 * Math.PI, false);
ctxt. lineTo(150, 125);
ctxt. quadraticCurveTo(300, 0, 450, 125);
ctxt. lineTo(353, 144);
ctxt. strokeStyle = "blue";
ctxt. lineCap = "round";
ctxt. lineWidth = 10;
ctxt. fillStyle = "green";
ctxt. fill();
ctxt. stroke();
59
How do you fill a shape with a linear gradient?
```
var ctxt = drawingSurface.getContext("2d");
ctxt.lineWidth = 3;
ctxt.rect(150, 150, 200, 125);
var gradient = ctxt.createLinearGradient(150, 150, 200, 125);
gradient.addColorStop(0, "Black");
gradient.addColorStop(0.5, "Gray");
gradient.addColorStop(1,"White");
ctxt.fillStyle = gradient;
ctxt.fill();
ctxt.stroke();
```
60
How do you fill a shape with a radial gradient?
```
var ctxt = drawingSurface.getContext("2d");
ctxt.lineWidth = 3;
ctxt.rect(150, 150, 250, 175);
var gradient = ctxt.createRadialGradient(200, 200,5, 250, 250,100);
gradient.addColorStop(0, "Red");
gradient.addColorStop(.5, "Orange");
gradient.addColorStop(1, "Blue");
ctxt.fillStyle = gradient;
ctxt.fill();
ctxt.stroke();
```
61
How do you fill a shape with a pattern?
```
var ctxt = drawingSurface.getContext("2d");
ctxt.lineWidth = 3;
ctxt.rect(150, 150, 200, 125);
var img = new Image();
img.src = "texture.png";
img.onload = function () {
var pat = ctxt.createPattern(img, "repeat");
ctxt.fillStyle = pat;
ctxt.fill();
ctxt.stroke();
}
```
62
How do you draw images using a canvas?
```
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
var img = new Image();
img.src = "orange.jpg";
img.onload = function () {
ctxt.drawImage(img, 0, 0);
ctxt.stroke();
}
```
63
How do you draw text on a canvas?
```
var drawingSurface = document.getElementById("myCanvas");
var ctxt = drawingSurface.getContext("2d");
ctxt.strokeText("1. Text with default font", 100, 100);
```
ctxt. font = "24px arial";
ctxt. strokeText("2. Text with altered font", 100, 125);
ctxt. font = "24px arial";
ctxt. strokeStyle = "Red";
ctxt. strokeText("3. Text with altered colored font", 100, 160);
ctxt. font = "24px arial";
ctxt. fillStyle = "Red";
ctxt. fillText("4. Text with altered colored font", 100, 185);
ctxt. font = "24px arial";
ctxt. textAlign = "center";
ctxt. fillStyle = "Red";
ctxt. fillText("5. Text with altered colored font Centered.", drawingSurface.width / 2, drawingSurface.height / 2);
64
What tag is used to display an SVG on the page?
svg
65
What is absolute positioning?
The element is placed in the exact location specified, relative to its container’s borders.
66
What is relative positioning?
The element is positioned relative to its immediate left sibling’s coordinates.
67
How do you use CSS to rotate an element?
transform: rotate(90deg);
68
How do you use CSS to change an element's relative X and Y positions?
transform: translate(50px,0px); // Move 50px to the right on the X-axis
69
How do you use CSS to slant an element?
transform: skew(10deg, 10deg);
70
How do you use CSS to resize an element?
transform: scale(1.5);
71
How are multiple transforms combined for an element?
transform: translate(50px,0px) scale(1.5) skew(10deg, 10deg);
They are applied in order.
72
What are the possible values for the visibility property?
visible, hidden, collapse, inherit
73
How do you hide an element but preserve the layout of the page?
visibility: hidden
74
How do you hide an element but not preserve the layout of the page?
display: none
75
Which property returns the number of key-value pairs in a Web Storage object?
length
76
Which method adds a key-value pair into Web Storage?
setItem
77
Which method updates a key-value pair in Web Storage?
setItem
78
Which global object is used to access local storage?
localStorage
79
Which global object is used to access session storage?
sessionStorage
80
Which property returns the number of key-value pairs in the storage object?
length
81
Which method adds a key-value pair into storage?
setItem
82
Which method updates a key-value pair in storage?
setItem
83
Which method retrieves a key-value pair from Web Storage?
getItem
84
Which method clears all key-value pairs in Web Storage?
clear
85
Which method gets the key of the key-value pair at the specified index?
key
86
Which method removes a key-value from Web Storage?
removeItem
87
What is the AppCache API?
Makes content and web pages available in offline mode. Stores files in the application cache in the browser.
88
What is the CACHE section of the AppCache manifest file used for?
Lists all files (html, css, js, png, etc..) that must be available offline.
CACHE
/pages/page1.html
/pages/page2.html
89
What is the NETWORK section of the AppCache manifest file used for?
Declares any resources that must be available from the Internet. These items can’t be cached. Anything that the page requires from the Internet, such as embedded third-party elements, must be listed here. If such a resource isn’t listed here, the browser won’t know to check on the Internet for it when in offline mode. When the browser is in offline mode, it doesn’t attempt to go to the Internet for anything unless it’s listed in the NETWORK section.
NETWORK:
login.html
90
What is the FALLBACK section of the AppCache manifest file used for?
Enables you to provide fallback instructions to the browser in the event that an item isn’t available in the cache and the browser is in offline mode.
In the example file, if login.html isn’t available in the cache, render fallback-login.html.
FALLBACK:
login.html fallback-login.html
91
Which sections of the AppCache manifest file are required?
None are required.
92
What are the three sections of the AppCache manifest file?
cache, network, fallback
93
What are the possible values for the status property of the applicationCache object?
Uncached, Idle, Checking, Downloading, UpdateReady, Obsolete
94
What is the NETWORK section of the AppCache manifest file used for?
Declares any resources that must be available from the Internet. These items can’t be cached. Anything that the page requires from the Internet, such as embedded third-party elements, must be listed here. If such a resource isn’t listed here, the browser won’t know to check on the Internet for it when in offline mode. When the browser is in offline mode, it doesn’t attempt to go to the Internet for anything unless it’s listed in the NETWORK section.
95
What is the FALLBACK section of the AppCache manifest file used for?
Enables you to provide fallback instructions to the browser in the event that an item isn’t available in the cache and the browser is in offline mode.
In the example file, if login.html isn’t available in the cache, render fallback-login.html.
FALLBACK:
login.html fallback-login.html
96
Which sections of the AppCache manifest file are required?
None are required.
97
Which property of the window object is used to return the AppCache object?
applicationCache
var appCache = window.applicationCache;
98
What are the possible values for the status property of the applicationCache object?
Uncached, Idle, Checking, Downloading, UpdateReady, Obsolete
99
What does the Uncached status of the applicationCache object signify?
The web application isn’t associated with an application manifest.
100
What method of the applicationCache object indicates that the cache be replaced with a newer version.?
swapCache
101
What does the Checking status of the applicationCache object signify?
The application manifest is being checked for updates.
102
What does the Downloading status of the applicationCache object signify?
The resources in the application manifest are being downloaded.
103
What is the onchecking event of the applicationCache object for?
The browser is checking for an update to the application manifest, or the application is being cached for the first time.
104
What does the Obsolete status of the applicationCache object signify?
The manifest can no longer be downloaded, so the application cache is being deleted.
105
What method of the applicationCache object indicates that the cache be replaced with a newer version.?
swapCache
106
What method of the applicationCache object tells the browser to update the cache if an update is available?
update
107
What is the process to check for, download and use an update for the AppCache?
Call the update method, handle the onupdateready event, check that the status is UpdateReady, and call the swapCache method.
108
What is the onchecking event of the applicationCache object for?
The browser is checking for an update to the application manifest, or the application is being cached for the first time.
109
What is the onnoupdate event of the applicationCache object for?
The application manifest has no update available.
110
What is the ondownloading event of the applicationCache object for?
The browser is downloading what it has been told to do per the manifest file.
111
What is the onprogress event of the applicationCache object for?
Files are being downloaded to the offline cache. This event fires periodically to report progress.
112
What is the oncached event of the applicationCache object for?
The download of the cache has completed.
113
What is the onupdateready event of the applicationCache object for?
The resources listed in the manifest have been newly redownloaded, and the swapCache method might be called.
114
What is the onobsolete event of the applicationCache object for?
A manifest file is no longer available.
115
What is the onerror event of the applicationCache object for?
An error has occurred. This could result from many things. Appropriate logging is necessary to get the information and resolve.
116
How is the Geolocation API accessed?
window.navigator.geolocation
117
Which method of the geolocation object returns the current position?
getCurrentPosition(positionCallback, [positionErrorCallback], [positionOptions])
118
What properties are available on the PositionObjects object?
enableHighAccuracy, timeout, maximumAge
119
What does the enableHighAccuracy property on the PositionOptions object do?
This causes the method to be more resource intensive if set to true. The default is false. If true, the getCurrentPosition method tries to get as close as it can to the actual location.
120
What does the timeout property on the PositionOptions object do?
This specifies a timeout period for how long the getCurrentPosition method can take to complete. This number is measured in milliseconds and defaults to zero. A value of zero represents infinite.
121
What does the maximumAge property on the PositionOptions object do?
If this is set, the API is being told to use a cached result if available, rather than make a new call to get the current position. The default is zero, so a new call is always be made. If maximumAge is set to a value and the cache isn’t older than the allowable age, the cached copy is used. This value is measured in milliseconds.
122
How do you handle the case when the user does not grant permission to use the GeoLocation API?
Pass a method for the positionErrorCallback parameter of the getCurrentPosition method.
123
Which two properties are exposed by the position object?
coords and timestamp
124
Which properties are exposed by the coordinates object?
latitude, longitude, altitude, heading and speed
125
How do you add properties and methods to a prototype?
```
// Default constructor
function Book() {
//just creates an empty book.
}
```
```
// Overloaded constructor
function Book(title, length, author) {
this.title = title;
this.Length = length;
this.author = author;
}
```
// Adding additional properties and methods
Book.prototype = {
ISBN: "",
Length: -1,
genre: "",
covering: "",
author: "",
currentPage: 0,
title: "",
flipTo: function FlipToAPage(pNum) {
this.currentPage = pNum;
},
turnPageForward: function turnForward() {
this.flipTo(this.currentPage++);
},
turnPageBackward: function turnBackward() {
this.flipTo(this.currentPage--);
}
};
- or -
```
Book.prototype.ISBN = "";
Book.prototype.Length = 350;
Book.prototype.genre = "";
Book.prototype.covering = "";
Book.prototype.author = new Author();
Book.prototype.currentPage = 0;
Book.prototype.title = "";
```
126
How do you create a prototype that inherits from another prototype?
Use Object.create or the call method
127
How do you create a prototype that inherits from another prototype using Object.create?
```
var popupBook = Object.create(Book.protoType,{
hasSound: { value:true },
showPopUp:{ value: function showPop() {
}
);
```
Object.create is a method available from the Object class in the global namespace. The create method takes two parameters: the object you want to create and a list of property descriptors.
The first parameter expects to receive the prototype of the object to create or null. If null is specified, the object uses only those functions or properties specified in the second parameter. If an object prototype is specified, as in the case Book.prototype, the object is created with all the properties and functions declared on that object prototype.
128
What does the this keyword signify?
The this keyword always refers to the object that contains the currently running code.
//Here, "this" references the global namespace
this.navigator.geolocation...
window.onload = function () {
//Here, "this" references the window object
this...
document.getElementById("aDiv").onclick = function()
{
//Here, "this" references the DIV element
this...
}
}
129
How do you support multiple constructors in JavaScript?
```
// Default constructor
function Book() {
//just creates an empty book.
}
```
```
// Overloaded constructor
function Book(title, length, author) {
this.title = title;
this.Length = length;
this.author = author;
}
```
130
How do you add properties and methods to a prototype?
```
// Default constructor
function Book() {
//just creates an empty book.
}
```
```
// Overloaded constructor
function Book(title, length, author) {
this.title = title;
this.Length = length;
this.author = author;
}
```
// Adding additional properties and methods
Book.prototype = {
ISBN: "",
Length: -1,
genre: "",
covering: "",
author: "",
currentPage: 0,
title: "",
flipTo: function FlipToAPage(pNum) {
this.currentPage = pNum;
},
turnPageForward: function turnForward() {
this.flipTo(this.currentPage++);
},
turnPageBackward: function turnBackward() {
this.flipTo(this.currentPage--);
}
};
131
How do you create a prototype that inherits from another prototype?
Use Object.create or the call method
132
How do you create a prototype that inherits from another prototype using Object.create?
```
var popupBook = Object.create(Book.protoType,{
hasSound: { value:true },
showPopUp:{ value: function showPop() {
}
);
```
Object.create is a method available from the Object class in the global namespace. The create method takes two parameters: the object you want to create and a list of property descriptors.
The first parameter expects to receive the prototype of the object to create or null. If null is specified, the object uses only those functions or properties specified in the second parameter. If an object prototype is specified, as in the case Book.prototype, the object is created with all the properties and functions declared on that object prototype.
133
How do you create a prototype that inherits from another prototype using the call method?
```
function PopUpBook() {
Book.call(this);
}
PopUpBook.prototype = Book.prototype;
PopUpBook.prototype.hasSound = false;
PopUpBook.prototype.showPopUp = function ShowPop() { };
```
This is a better implementation as PopupBook can be created using just new PopupBook();
