Implement and manipulate document structures and objects (24%) Flashcards
Which HTML control defines self-contained areas on a page?
article
Which HTML control defines smaller content areas outside the flow of a webpage?
aside
Which HTML control defines the caption of a figure element?
figcaption
Which HTML control defines content that contains a figure, such as an image, chart, or picture?
figure
Which HTML control defines text that should be highlighted?
mark
Which HTML control defines the bottom of a section or page?
footer
Which HTML control defines the top of a section or page?
header
Which HTML control defines a group of headings (H1–H6 elements)?
hgroup
Which HTML control defines navigation to other pages in the site?
nav
Which HTML control defines the progress of a task?
progress
Which HTML control defines the distinct content of a document?
section
What elements are contained in a basic HTML template?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<!-- page content goes here -->
</body>
</html>What is the header tag?
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.
What is the article tag?
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.
What is the section tag?
Used to subdivide an article tag.
What is the aside tag?
Contains content outside of the scope of the main content of the page. Does not actual position the content.
How are figure and figcaption tags used together?
<figure>
<img></img>
<figcaption>Fig 1: A really juicy orange.</figcaption>
</figure>
What is the progress tag?
Displays a progress bar. Can be determinate or indeterminate. To make indeterminate, omit the value attribute.
How do you create a determinate progress tag?
<progress></progress>
How do you create an indeterminate progress tag?
<progress></progress>
What is the mark tag?
Highlights a portion of the page.
What tags do search engines primarily look for?
Article and section tags.
Which DOM method gets an individual element on the page by its unique id attribute value
?
getElementById
Which DOM method gets all the elements that have the specified CSS class applied to them?
getElementsByClassName
Which DOM method gets all the elements of the page that have the specified tag name or element name?
getElementsByTagName
Which DOM method gets the first child element found that matches the provided CSS selector criteria?
querySelector
Which DOM method removes an element from the DOM?
removeNode
Which DOM property returns a collection of all child nodes of the parent element?
childNodes
Which DOM property returns a reference to the very first child node in the list of child nodes of the parent node?
firstChild
Which DOM property returns a reference to the very last child node in the list of the child nodes of the parent node?
lastChild
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.)
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.)
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);
Which HTML tag is used to display video content?
video
<video>
</video>
Which attribute to used to set the source of a video tag?
src
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.)
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.)
Which attributes are used to set the size of the video tag?
height/width
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.)
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.
What tag is used to specify multiple formats for a video tag?
source
<video>
<source></source>
<source></source>
<object>
<p>Video is not supported by this browser.</p>
</object>
</video>
What tag is used to display a message in a browser that does not support the video tag?
object
<video>
<source></source>
<source></source>
<object>
<p>Video is not supported by this browser.</p>
</object>
</video>
What method of the video object plays the video?
play
What method of the video object pauses the video?
pause
What property of the video object controls the volume?
volume
What property of the video object controls the current position of the video?
currentTime
Which HTML tag is used to display graphics?
canvas
<canvas>
Your browser does not support HTML5.
</canvas>
How do you get a reference to the canvas object?
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");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();
Which methods of the canvas object are used to draw a curve?
arc, quadradicCurveTo, and bezierCurveTo
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();
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();
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();
Which method of the canvas object is used to draw rectangles?
rect
Which parameters are required for drawing rectangles?
x, y, width, height
ctxt. beginPath();
ctxt. rect(300, 200, 150, 75);
ctxt. stroke();
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();
What method is used to draw and fill a rectangle?
fillRect
ctxt. fillStyle = “blue”;
ctxt. fillRect(300—(x / 2), 200—(y / 2), x, y);
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();
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();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();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();
}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();
}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);
What tag is used to display an SVG on the page?
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>
What is absolute positioning?
The element is placed in the exact location specified, relative to its container’s borders.
What is relative positioning?
The element is positioned relative to its immediate left sibling’s coordinates.
How do you use CSS to rotate an element?
transform: rotate(90deg);
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
How do you use CSS to slant an element?
transform: skew(10deg, 10deg);
How do you use CSS to resize an element?
transform: scale(1.5);
How are multiple transforms combined for an element?
transform: translate(50px,0px) scale(1.5) skew(10deg, 10deg);
They are applied in order.
What are the possible values for the visibility property?
visible, hidden, collapse, inherit
How do you hide an element but preserve the layout of the page?
visibility: hidden
How do you hide an element but not preserve the layout of the page?
display: none
Which property returns the number of key-value pairs in a Web Storage object?
length
Which method adds a key-value pair into Web Storage?
setItem
Which method updates a key-value pair in Web Storage?
setItem
Which global object is used to access local storage?
localStorage
Which global object is used to access session storage?
sessionStorage
Which property returns the number of key-value pairs in the storage object?
length
Which method adds a key-value pair into storage?
setItem
Which method updates a key-value pair in storage?
setItem
Which method retrieves a key-value pair from Web Storage?
getItem
Which method clears all key-value pairs in Web Storage?
clear
Which method gets the key of the key-value pair at the specified index?
key
Which method removes a key-value from Web Storage?
removeItem
What is the AppCache API?
Makes content and web pages available in offline mode. Stores files in the application cache in the browser.
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
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
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
Which sections of the AppCache manifest file are required?
None are required.
What are the three sections of the AppCache manifest file?
cache, network, fallback
What are the possible values for the status property of the applicationCache object?
Uncached, Idle, Checking, Downloading, UpdateReady, Obsolete
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.
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
Which sections of the AppCache manifest file are required?
None are required.
Which property of the window object is used to return the AppCache object?
applicationCache
var appCache = window.applicationCache;
What are the possible values for the status property of the applicationCache object?
Uncached, Idle, Checking, Downloading, UpdateReady, Obsolete
What does the Uncached status of the applicationCache object signify?
The web application isn’t associated with an application manifest.
What method of the applicationCache object indicates that the cache be replaced with a newer version.?
swapCache
What does the Checking status of the applicationCache object signify?
The application manifest is being checked for updates.
What does the Downloading status of the applicationCache object signify?
The resources in the application manifest are being downloaded.
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.
What does the Obsolete status of the applicationCache object signify?
The manifest can no longer be downloaded, so the application cache is being deleted.
What method of the applicationCache object indicates that the cache be replaced with a newer version.?
swapCache
What method of the applicationCache object tells the browser to update the cache if an update is available?
update
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.
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.
What is the onnoupdate event of the applicationCache object for?
The application manifest has no update available.
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.
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.
What is the oncached event of the applicationCache object for?
The download of the cache has completed.
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.
What is the onobsolete event of the applicationCache object for?
A manifest file is no longer available.
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.
How is the Geolocation API accessed?
window.navigator.geolocation
Which method of the geolocation object returns the current position?
getCurrentPosition(positionCallback, [positionErrorCallback], [positionOptions])
What properties are available on the PositionObjects object?
enableHighAccuracy, timeout, maximumAge
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.
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.
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.
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.
Which two properties are exposed by the position object?
coords and timestamp
Which properties are exposed by the coordinates object?
latitude, longitude, altitude, heading and speed
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 = "";
How do you create a prototype that inherits from another prototype?
Use Object.create or the call method
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.
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...
}
}
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;
}
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–);
}
};
How do you create a prototype that inherits from another prototype?
Use Object.create or the call method
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.
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();
