Intermediate JavaScript

Question 1

What is The Document Object Model?

Answer 1

A way to manipulate the structure and style of an HTML page. It represents the internals of the page as the browser sees it, and allows the developer to alter it with JavaScript.

Question 2

HTML is an ______ structure in that the elements form a structure of parents’ nodes with children, like the branches of a tree.

Answer 2

XML-like

Question 3

The DOM is also called?

Answer 3

The DOM tree

Question 4

What is the root element of the DOM tree?

Answer 4

html

Question 5

To access the DOM from JavaScript, the _______ object is used.

Answer 5

document

Question 6

The document objects is provided by the _______ and allows code on the page to interact with the content.

Answer 6

browser

Question 7

How do you get an element by its id?

Answer 7

document.getElementById

getElementById is a method of the document object

Example: 
var pageHeader = document.getElementById('page-header');

Question 8

What are the ways to retrieve an element?

Answer 8

1. ) ID – getElementById
2. ) Tag name – getElementsByTagName
3. ) Class name – getElementsByClassName
4. ) CSS selector – querySelector or querySelectorAll

Question 9

What is a NodeList?

Answer 9

An array of DOM Elements

Question 10

What’s the difference between querySelector and querySelectorAll

Answer 10

querySelector, like getElementById, returns only one element whereas querySelectorAll returns a NodeList

Question 11

What happens if multiple elements match the selector you pass to querySelector?

Answer 11

If multiple elements match the selector you pass to querySelector, only the first will be returned.

Question 12

What is event-driven programming?

Answer 12

Writing interactive applications in JavaScript is often about waiting for and reacting to events, to alter the behavior of the browser in some way.

Question 13

To react to an event you listen for it and supply a function which will be called by the browser when the event occurs. This function is known as a ________.

Answer 13

Callback

Question 14

What is needed to listen for an event?

Answer 14

1. ) The callback function
2. ) An element
3. ) The call to listen for an event

Question 15

________ is a method found on all DOM elements used to add an event to listen for.

Answer 15

addEventListener

Question 16

Developers got more ambitious with the web, attempting to build interactive applications sometimes called _______.

Answer 16

“native-like”

Question 17

________ is a way to load new content into a page without a full reload.

Answer 17

AJAX

Question 18

What does AJAX stand for?

Answer 18

Asynchronous JavaScript and XML

Question 19

What is the underlying tech used to create AJAX pages?

Answer 19

XML HTTP Request (XHR)

Question 20

Who originally created XMLHttpRequest?

Answer 20

Microsoft developing Outlook Web Access

Question 21

What is the difference between asynchronous and synchronous calls?

Answer 21

If synchronous the execution of the code will pause at this line until the data is retrieved (blocking).

Question 22

XMLHttpRequest can load what kind of data over http and https or other protocols like FTP and file?

Answer 22

HTML, JSON, XML and plain text

Question 23

What is a single-page app?

Answer 23

One main request loads JavaScript code which then loads, asynchronously, other content from the server.

Question 24

What does JSON stand for?

Answer 24

JavaScript Object Notation

Question 25

What is JSON?

Answer 25

A set of text formatting rules for storing and transferring data in a machine and human readable way

Question 26

True or False? JSON is not JavaScript

Answer 26

True. It’s a totally different language with its own spec

Question 27

What is JSON used for?

Answer 27

JSON is used to transfer information - between your browser to a server, or saved in text files for retrieval later.

Question 28

True or False? JSON can’t store complex data like a function

Answer 28

True.

You can store arrays, objects containing simple data, strings and numbers.

Question 29

What technology is JSON replacing?

Answer 29

XML

Question 30

What method is used to create JSON?

Answer 30

stringify

Question 31

What method is used to retrieve JSON?

Answer 31

parse

Question 32

What does this do?

var car = JSON.parse(jsonString);

Answer 32

Parse JSON back into an object.

It could then be used:
Example: var car = JSON.parse(jsonString);

Question 33

What does scope mean?

Answer 33

Variable visibility

A variable’s scope is the part of your code that can access and modify that variable.

Question 34

What type of scope does JavaScript use?

Answer 34

Function SWcope

This means that variables are not visible outside of the function in which they were declared.

Question 35

What are global variables?

Answer 35

Variables that can be read and modified anywhere in your application

Question 36

Why are global variables bad?

Answer 36

They can expose security issues and make code much harder to maintain.

Question 37

What happens if variables are not declared inside a function?

Answer 37

They are available globally.

Question 38

_______ scope allows a function to see the variables of it’s parent function.

Answer 38

Child Scope

Question 39

What is the most popular DOM library?

Answer 39

jQuery

Question 40

What do DOM libraries do?

Answer 40

The set of tools used to allow modification and control of the DOM are a bit of mess because they differ across browsers, generally for historical reasons. To make your job easier, a number of libraries have been created that hide these differences, providing a more uniform way of interacting with the DOM. They also provide AJAX functionality.

Question 41

The way you interact with a service via code.

Answer 41

API – Application programming interface

Question 42

Why is it not always the best idea to use a DOM library?

Answer 42

jQuery is a large file to introduce to a page and will slow the downloading of that page, particularly on mobile browsers with potentially weak connections.

Question 43

$(‘.note’).css(‘background’, ‘red’).height(100);

Answer 43

Selects all the elements with a class of note on the page and then we set the background of all of the note boxes to red and their heights to 100px.

Question 44

What is the jQuery selector function?

Answer 44

$( )

A function that returns a jQuery wrapper around an element.

Question 45

What are methods that get and set the values of properties?

Answer 45

Getters and setters

Question 46

It’s sometimes useful to limit the area of the DOM from which an element can be selected. How is this done in jQuery?

Answer 46

Context

To tell jQuery which area you want to select from you pass a second argument that can be a DOM element, a string selector (selecting an element that jQuery will find and use) or a jQuery object. jQuery will only search within this context for your selector.

Question 47

What variable naming convention is used when storing jQuery objects?

Answer 47

The variable begins with a dollar sign.

Example: var $header

Question 48

What are the AJAX helper methods?

Answer 48

1. ) $.get
2. ) $.post
3. ) $.ajax

Question 49

What does DOMContentLoaded do?

Answer 49

Run JavaScript only when the DOM is loaded and ready (but before stylesheets are fully loaded).

Question 50

What does this jQuery do?

$(window).load(doSomething);

Answer 50

Wait for the page to fully load - that is, when all stylesheets and images have been downloaded then doSomething.

Question 51

What type of type-checking functions does jQuery provide?

Answer 51

1. ) $.isArray()
2. ) $.isFunction()
3. ) $.isNumeric()
4. ) $.isPlainObject()