Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Exam 70-480: Programming in HTML5 with JavaScript and CSS3 > Implement and manipulate document structures and objects (24%) > Flashcards

Implement and manipulate document structures and objects (24%) Flashcards

1
Q

Which HTML control defines self-contained areas on a page?

A

article

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

Which HTML control defines smaller content areas outside the flow of a webpage?

A

aside

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

Which HTML control defines the caption of a figure element?

A

figcaption

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

Which HTML control defines content that contains a figure, such as an image, chart, or picture?

A

figure

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

Which HTML control defines text that should be highlighted?

A

mark

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

Which HTML control defines the bottom of a section or page?

A

footer

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

Which HTML control defines the top of a section or page?

A

header

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

Which HTML control defines a group of headings (H1–H6 elements)?

A

hgroup

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

Which HTML control defines navigation to other pages in the site?

A

nav

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

Which HTML control defines the progress of a task?

A

progress

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

Which HTML control defines the distinct content of a document?

A

section

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

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

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

What is the section tag?

A

Used to subdivide an article tag.

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

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

How are figure and figcaption tags used together?

A

<figure>
<img></img>
<figcaption>Fig 1: A really juicy orange.</figcaption>
</figure>

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

What is the progress tag?

A

Displays a progress bar. Can be determinate or indeterminate. To make indeterminate, omit the value attribute.

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

How do you create a determinate progress tag?

A

<progress></progress>

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

How do you create an indeterminate progress tag?

A

<progress></progress>

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

What is the mark tag?

A

Highlights a portion of the page.

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

What tags do search engines primarily look for?

A

Article and section tags.

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

Which DOM method gets an individual element on the page by its unique id attribute value
?

A

getElementById

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

Which DOM method gets all the elements that have the specified CSS class applied to them?

A

getElementsByClassName

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

Which DOM method gets all the elements of the page that have the specified tag name or element name?

A

getElementsByTagName

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

Which DOM method gets the first child element found that matches the provided CSS selector criteria?

A

querySelector

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

Which DOM method removes an element from the DOM?

A

removeNode

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

Which DOM property returns a collection of all child nodes of the parent element?

A

childNodes

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

Which DOM property returns a reference to the very first child node in the list of child nodes of the parent node?

A

firstChild

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

Which DOM property returns a reference to the very last child node in the list of the child nodes of the parent node?

A

lastChild

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

Which DOM property returns true if the parent element has any child nodes at all?

A

hasChildNodes (A good practice is to check this property before accessing other properties, such as firstChild or lastChild.)

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

Which attribute to used to tell the browser to include its built-in video controls, such as play and pause?

A

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.)

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

How do you remove an element and all its descendants from the DOM?

A

Call removeNode and pass in true.

var innerDiv = document.getElementById("innerDiv");
innerDiv.removeNode(true);
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Which HTML tag is used to display video content?

A

video

<video>
</video>

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

Which attribute to used to set the source of a video tag?

A

src

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

Which attribute to used to start playing the video as soon as it loads?

A

autoplay (If this attribute is omitted, the video plays only when told to through player controls or JavaScript.)

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

Which attribute to used to tell the browser to include its built-in video controls, such as play and pause?

A

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.)

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

Which attributes are used to set the size of the video tag?

A

height/width

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

Which attribute to used to continuously play the video after it completes?

A

loop (If this attribute is omitted, the video stops after it plays through completely.)

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

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?

A

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.

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

What tag is used to specify multiple formats for a video tag?

A

source

<video>
<source></source>
<source></source>
<object>
<p>Video is not supported by this browser.</p>
</object>
</video>

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

What tag is used to display a message in a browser that does not support the video tag?

A

object

<video>
<source></source>
<source></source>
<object>
<p>Video is not supported by this browser.</p>
</object>
</video>

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

What method of the video object plays the video?

A

play

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

What method of the video object pauses the video?

A

pause

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

What property of the video object controls the volume?

A

volume

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

What property of the video object controls the current position of the video?

A

currentTime

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

Which HTML tag is used to display graphics?

A

canvas

<canvas>
Your browser does not support HTML5.
</canvas>

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

How do you get a reference to the canvas object?

A 
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

Which methods of the canvas object are used to draw a line?

A

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();

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

Which methods of the canvas object are used to draw a curve?

A

arc, quadradicCurveTo, and bezierCurveTo

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

Which parameters are required to draw an arc?

A

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();

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

Which parameters are required to draw a quadratic curve?

A

controlX, controlY, endX, endY

ctxt. beginPath();
ctxt. moveTo(10,380);
ctxt. quadraticCurveTo(300,-250,580,380);
ctxt. lineWidth = 25;
ctxt. strokeStyle = ‘#f00’;
ctxt. stroke();

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

Which parameters are required to draw a bezier curve?

A

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();

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

Which method of the canvas object is used to draw rectangles?

A

rect

55
Q

Which parameters are required for drawing rectangles?

A

x, y, width, height

ctxt. beginPath();
ctxt. rect(300, 200, 150, 75);
ctxt. stroke();

56
Q

Which method of the canvas object is used to fill a shape with color?

A

fill (call before the stroke method)

ctxt. fillStyle = “blue”;

ctxt. fill();

57
Q

What method is used to draw and fill a rectangle?

A

fillRect

ctxt. fillStyle = “blue”;
ctxt. fillRect(300—(x / 2), 200—(y / 2), x, y);

58
Q

How do you fill a complex shape?

A

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
Q

How do you fill a shape with a linear gradient?

A 
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
Q

How do you fill a shape with a radial gradient?

A 
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
Q

How do you fill a shape with a pattern?

A 
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
Q

How do you draw images using a canvas?

A 
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
Q

How do you draw text on a canvas?

A 
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
Q

What tag is used to display an SVG on the page?

A

svg

<svg>
<circle></circle>
</svg>

<svg>
<rect></rect>
<circle></circle>
<circle></circle>
<circle></circle>
</svg>

<svg>
<polygon></polygon>
<polyline></polyline>
<line></line>
<ellipse></ellipse>
<text>
Examples of SVG Shapes and Text
</text>
</svg>

65
Q

What is absolute positioning?

A

The element is placed in the exact location specified, relative to its container’s borders.

66
Q

What is relative positioning?

A

The element is positioned relative to its immediate left sibling’s coordinates.

67
Q

How do you use CSS to rotate an element?

A

transform: rotate(90deg);

68
Q

How do you use CSS to change an element’s relative X and Y positions?

A

transform: translate(50px,0px); // Move 50px to the right on the X-axis

69
Q

How do you use CSS to slant an element?

A

transform: skew(10deg, 10deg);

70
Q

How do you use CSS to resize an element?

A

transform: scale(1.5);

71
Q

How are multiple transforms combined for an element?

A

transform: translate(50px,0px) scale(1.5) skew(10deg, 10deg);

They are applied in order.

72
Q

What are the possible values for the visibility property?

A

visible, hidden, collapse, inherit

73
Q

How do you hide an element but preserve the layout of the page?

A

visibility: hidden

74
Q

How do you hide an element but not preserve the layout of the page?

A

display: none

75
Q

Which property returns the number of key-value pairs in a Web Storage object?

A

length

76
Q

Which method adds a key-value pair into Web Storage?

A

setItem

77
Q

Which method updates a key-value pair in Web Storage?

A

setItem

78
Q

Which global object is used to access local storage?

A

localStorage

79
Q

Which global object is used to access session storage?

A

sessionStorage

80
Q

Which property returns the number of key-value pairs in the storage object?

A

length

81
Q

Which method adds a key-value pair into storage?

A

setItem

82
Q

Which method updates a key-value pair in storage?

A

setItem

83
Q

Which method retrieves a key-value pair from Web Storage?

A

getItem

84
Q

Which method clears all key-value pairs in Web Storage?

A

clear

85
Q

Which method gets the key of the key-value pair at the specified index?

A

key

86
Q

Which method removes a key-value from Web Storage?

A

removeItem

87
Q

What is the AppCache API?

A

Makes content and web pages available in offline mode. Stores files in the application cache in the browser.

88
Q

What is the CACHE section of the AppCache manifest file used for?

A

Lists all files (html, css, js, png, etc..) that must be available offline.

CACHE
/pages/page1.html
/pages/page2.html

89
Q

What is the NETWORK section of the AppCache manifest file used for?

A

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
Q

What is the FALLBACK section of the AppCache manifest file used for?

A

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
Q

Which sections of the AppCache manifest file are required?

A

None are required.

92
Q

What are the three sections of the AppCache manifest file?

A

cache, network, fallback

93
Q

What are the possible values for the status property of the applicationCache object?

A

Uncached, Idle, Checking, Downloading, UpdateReady, Obsolete

94
Q

What is the NETWORK section of the AppCache manifest file used for?

A

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
Q

What is the FALLBACK section of the AppCache manifest file used for?

A

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
Q

Which sections of the AppCache manifest file are required?

A

None are required.

97
Q

Which property of the window object is used to return the AppCache object?

A

applicationCache

var appCache = window.applicationCache;

98
Q

What are the possible values for the status property of the applicationCache object?

A

Uncached, Idle, Checking, Downloading, UpdateReady, Obsolete

99
Q

What does the Uncached status of the applicationCache object signify?

A

The web application isn’t associated with an application manifest.

100
Q

What method of the applicationCache object indicates that the cache be replaced with a newer version.?

A

swapCache

101
Q

What does the Checking status of the applicationCache object signify?

A

The application manifest is being checked for updates.

102
Q

What does the Downloading status of the applicationCache object signify?

A

The resources in the application manifest are being downloaded.

103
Q

What is the onchecking event of the applicationCache object for?

A

The browser is checking for an update to the application manifest, or the application is being cached for the first time.

104
Q

What does the Obsolete status of the applicationCache object signify?

A

The manifest can no longer be downloaded, so the application cache is being deleted.

105
Q

What method of the applicationCache object indicates that the cache be replaced with a newer version.?

A

swapCache

106
Q

What method of the applicationCache object tells the browser to update the cache if an update is available?

A

update

107
Q

What is the process to check for, download and use an update for the AppCache?

A

Call the update method, handle the onupdateready event, check that the status is UpdateReady, and call the swapCache method.

108
Q

What is the onchecking event of the applicationCache object for?

A

The browser is checking for an update to the application manifest, or the application is being cached for the first time.

109
Q

What is the onnoupdate event of the applicationCache object for?

A

The application manifest has no update available.

110
Q

What is the ondownloading event of the applicationCache object for?

A

The browser is downloading what it has been told to do per the manifest file.

111
Q

What is the onprogress event of the applicationCache object for?

A

Files are being downloaded to the offline cache. This event fires periodically to report progress.

112
Q

What is the oncached event of the applicationCache object for?

A

The download of the cache has completed.

113
Q

What is the onupdateready event of the applicationCache object for?

A

The resources listed in the manifest have been newly redownloaded, and the swapCache method might be called.

114
Q

What is the onobsolete event of the applicationCache object for?

A

A manifest file is no longer available.

115
Q

What is the onerror event of the applicationCache object for?

A

An error has occurred. This could result from many things. Appropriate logging is necessary to get the information and resolve.

116
Q

How is the Geolocation API accessed?

A

window.navigator.geolocation

117
Q

Which method of the geolocation object returns the current position?

A

getCurrentPosition(positionCallback, [positionErrorCallback], [positionOptions])

118
Q

What properties are available on the PositionObjects object?

A

enableHighAccuracy, timeout, maximumAge

119
Q

What does the enableHighAccuracy property on the PositionOptions object do?

A

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
Q

What does the timeout property on the PositionOptions object do?

A

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
Q

What does the maximumAge property on the PositionOptions object do?

A

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
Q

How do you handle the case when the user does not grant permission to use the GeoLocation API?

A

Pass a method for the positionErrorCallback parameter of the getCurrentPosition method.

123
Q

Which two properties are exposed by the position object?

A

coords and timestamp

124
Q

Which properties are exposed by the coordinates object?

A

latitude, longitude, altitude, heading and speed

125
Q

How do you add properties and methods to a prototype?

A 
// 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
Q

How do you create a prototype that inherits from another prototype?

A

Use Object.create or the call method

127
Q

How do you create a prototype that inherits from another prototype using Object.create?

A 
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
Q

What does the this keyword signify?

A

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
Q

How do you support multiple constructors in JavaScript?

A 
// 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
Q

How do you add properties and methods to a prototype?

A 
// 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
Q

How do you create a prototype that inherits from another prototype?

A

Use Object.create or the call method

132
Q

How do you create a prototype that inherits from another prototype using Object.create?

A 
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
Q

How do you create a prototype that inherits from another prototype using the call method?

A 
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();

Exam 70-480: Programming in HTML5 with JavaScript and CSS3 (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions