Building Interactive JavaScript Websites

Question 1

HTML script element src attribute

Answer 1

The src attribute of a element is used to point to the location of a script file.

The file referenced can be local (using a relative path) or hosted elsewhere (using an absolute path).

Question 2

HTML script element defer attribute

Answer 2

The defer attribute of a tag is a boolean attribute used to indicate that the script can be loaded but not executed until after the HTML document is fully parsed. It will only work for externally linked scripts (with a src attribute), and will have no effect if it is applied to an inline script.

In the example code block, the tag will be loaded and parsed before the script is executed due to the defer attribute.

Question 3

HTML script tag async attribute

Answer 3

Scripts are loaded synchronously as they appear in an HTML file, before the following HTML is loaded and parsed. The async attribute can be used to load the scripts asynchronously, such that they will load in the background without blocking the HTML parser from continuing.

In the example code block, the script will load asynchronously in the background, without blocking the HTML parser.

Question 4

Nodes in DOM tree and HTML DOM

Answer 4

A node in the DOM tree is the intersection of two branches containing data. Nodes can represent HTML elements, text, attributes, etc. The root node is the top-most node of the tree. The illustration shows a representation of a DOM containing different types of nodes.

The DOM is an interface between scripting languages and a web page’s structure. The browser creates a Document Object Model or DOM for each webpage it renders. The DOM allows scripting languages to access and modify a web page. With the help of DOM, JavaScript has the ability to create dynamic HTML.

Question 5

The DOM Parent-Child Relationship

Answer 5

The parent-child relationship observed in the DOM is reflected in the HTML nesting syntax.

Elements that are nested inside the opening and closing tag of another element are the children of that element in the DOM.

In the code block, the two

tags are children of the

, and the is the parent of both

tags.

Question 6

The removeChild() Method

Answer 6

The .removeChild() method removes a specified child from a parent element. We can use this method by calling .removeChild() on the parent node whose child we want to remove, and passing in the child node as the argument.

In the example code block, we are removing iceCream from our groceryList element.

Question 7

The element.parentNode Property

Answer 7

The .parentNode property of an element can be used to return a reference to its direct parent node. .parentNode can be used on any node.

In the code block above, we are calling on the parentNode of the #first-child element to get a reference to the #parent div element.

Question 8

The document.createElement() Method

Answer 8

Question 9

The element.InnerHTML Property

Answer 9

Question 10

The document Object

Answer 10

Question 11

The document.getElementById() Method

Answer 11

Question 12

The .querySelector() Method

Answer 12

Question 13

The element.onclick Property

Answer 13

Question 14

The element.appendChild() Method

Answer 14

Question 15

The element.style Property

Answer 15

The element.style property can be used to access or set the CSS style rules of an element. To do so, values are assigned to the attributes of element.style.

In the example code, blueElement contains the HTML element with the ID colorful-element. By setting the backgroundColor attribute of the style property to blue, the CSS property background-color becomes blue.

Also note that, if the CSS property contains a hyphen, such as font-family or background-color, Camel Case notation is used in Javascript for the attribute name, so background-color becomes backgroundColor.

Question 16

.addEventListener()

Answer 16

The .addEventListener() method attaches an event handler to a specific event on an event target. The advantage of this is that you can add many events to the event target without overwriting existing events. Two arguments are passed to this method: an event name as a string, and the event handler function. Here is the syntax:

eventTarget.addEventListener(“event”, eventHandlerFunction);

Question 17

.removeEventListener()

Answer 17

We can tell our code to listen for an event to fire using the .addEventListener() method. To tell the code to stop listening for that event to fire, we can use the .removeEventListener() method. This method takes the same two arguments that were passed to .addEventListener(), the event name as a string and the event handler function. See their similarities in syntax:

Question 18

Event handler

Answer 18

When an event fires in JavaScript (such as a keystroke or mouse movement), an event handler runs in response. Each event handler is registered to an element, connecting the handler to both an element and a type of event (keystroke, eg.). A method called an event listener “listens” for an event to occur, specifies what should happen as a response, and calls the event handler.

Question 19

Event object

Answer 19

Event handler functions are passed an argument called an event object, which holds information about the event that was fired.

Event objects store information about the event target, the event type, and associated listeners in properties and methods. For example, if we wanted to know which key was pressed, the event object would store that information.

Question 20

Keyboard events

Answer 20

Keyboard events describe a user interaction with the keyboard. Each event describes a separate interaction with a key on the keyboard by the user, which are then stored with the .key property.

• keydown events are fired when the key is first pressed.
• keyup events are fired when the key is released.
• keypress events are fired when the user presses a key that produces a character value (aka is not a modifier key such as CapsLock).

Question 21

javascript event

Answer 21

On a webpage, a trigger such as a user interaction or browser manipulation can cause a client-side JavaScript event to be created. Events can be used to manipulate the DOM by executing a JavaScript function.

Events can include anything from a click to hovering a mouse over an element to a webpage loading or being refreshed. Events are defined as a part of the JavaScript API built into the web browser.

Question 22

JS Event Handlers

Answer 22

The goal of JavaScript is to make a page dynamic, which frequently means responding to certain events (for example, button clicks, user scrolls, etc). DOM elements can have functions hook onto events. The functions are called event handlers and the DOM element is known as an event target.

The example code block shows how to register a function as an event handler. The property name for event handlers starts with ‘on’ with the event appended afterwards. Examples: onload, onclick, onfocus, onscroll.

Question 23

Mouse events

Answer 23

A mouse event fires when a user interacts with the mouse, either by clicking or moving the mouse device.

• click events are fired when the user presses and releases a mouse button on an element.
• mouseout events are fired when the mouse leaves an element.
• mouseover events are fired when the mouse enters an element’s content.
• mousedown events are fired when the user presses a mouse button.
• mouseup events are fired when the user releases the mouse button.

Question 24

Handlebars.compile()

Answer 24

Handlebar.compile() can be used to produce a templating function. A template string with expressions must be passed into Handlebar.compile(). That function then takes an object as an argument, interpolates the object’s values into the template expressions, and returns a completed HTML string.

Question 25

Handlebars {{each}} block helper

Answer 25

Handlebars {{each}} block helper is a built-in helper expression that can accept an array to iterate through. Inside an {{each}} block, this serves as a placeholder for the current iteration value.

Question 26

Handlebars block helpers

Answer 26

Handlebars comes with built-in block helpers which allow us to embed HTML or other expressions in between helper expression tags.

The starting expression of the block helper will have a # that appears before a keyword, and the ending expression will have a / followed by the same keyword to denote the end.

Question 27

The Handlebars.js JavaScript Library

Answer 27

Handlebars.js is a Javascript library used to create reusable webpage templates. The templates are combination of HTML, text, and expressions. The expressions are included in the html document and surrounded by double curly braces.

These expressions are placeholders for content to be inserted by our Handlebars.js code in our js document. When the compiled templated function is called, values are substituted into the expressions.

Question 28

Handlebars.js and the Element

Answer 28

An HTML element with type value of text/x-handelbars-template can be used to contain Handlebars.js template text and expressions. This allows writing Handlebars.js templates in an HTML document.

Question 29

Handlebars {{if}} block helper

Answer 29

The Handlebars {{if}} block helper is one of the built-in helpers that will conditionally render a block of code. The given block of code contains an example of the usage of it.

Question 30

The Handlebars {{else}} expression

Answer 30

The Handlebars {{else}} expression can be inserted into an {{if}} block helper. Template contents inside the else section comes into play when the previous condition(s) are falsy. In the given example, isAdult is set to false. Hence, You can enter the ride. will not be in the returned template string.