Intermediate JavaScript Flashcards
What is The Document Object Model?
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.
HTML is an ______ structure in that the elements form a structure of parents’ nodes with children, like the branches of a tree.
XML-like
The DOM is also called?
The DOM tree
What is the root element of the DOM tree?
html
To access the DOM from JavaScript, the _______ object is used.
document
The document objects is provided by the _______ and allows code on the page to interact with the content.
browser
How do you get an element by its id?
document.getElementById
getElementById is a method of the document object
Example:
var pageHeader = document.getElementById('page-header');
What are the ways to retrieve an element?
- ) ID – getElementById
- ) Tag name – getElementsByTagName
- ) Class name – getElementsByClassName
- ) CSS selector – querySelector or querySelectorAll
What is a NodeList?
An array of DOM Elements
What’s the difference between querySelector and querySelectorAll
querySelector, like getElementById, returns only one element whereas querySelectorAll returns a NodeList
What happens if multiple elements match the selector you pass to querySelector?
If multiple elements match the selector you pass to querySelector, only the first will be returned.
What is event-driven programming?
Writing interactive applications in JavaScript is often about waiting for and reacting to events, to alter the behavior of the browser in some way.
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 ________.
Callback
What is needed to listen for an event?
- ) The callback function
- ) An element
- ) The call to listen for an event
________ is a method found on all DOM elements used to add an event to listen for.
addEventListener
Developers got more ambitious with the web, attempting to build interactive applications sometimes called _______.
“native-like”
________ is a way to load new content into a page without a full reload.
AJAX
What does AJAX stand for?
Asynchronous JavaScript and XML
What is the underlying tech used to create AJAX pages?
XML HTTP Request (XHR)
Who originally created XMLHttpRequest?
Microsoft developing Outlook Web Access
What is the difference between asynchronous and synchronous calls?
If synchronous the execution of the code will pause at this line until the data is retrieved (blocking).
XMLHttpRequest can load what kind of data over http and https or other protocols like FTP and file?
HTML, JSON, XML and plain text
What is a single-page app?
One main request loads JavaScript code which then loads, asynchronously, other content from the server.
What does JSON stand for?
JavaScript Object Notation
What is JSON?
A set of text formatting rules for storing and transferring data in a machine and human readable way
True or False? JSON is not JavaScript
True. It’s a totally different language with its own spec
What is JSON used for?
JSON is used to transfer information - between your browser to a server, or saved in text files for retrieval later.
True or False? JSON can’t store complex data like a function
True.
You can store arrays, objects containing simple data, strings and numbers.
What technology is JSON replacing?
XML
What method is used to create JSON?
stringify
What method is used to retrieve JSON?
parse
What does this do?
var car = JSON.parse(jsonString);
Parse JSON back into an object.
It could then be used: Example: var car = JSON.parse(jsonString);
What does scope mean?
Variable visibility
A variable’s scope is the part of your code that can access and modify that variable.
What type of scope does JavaScript use?
Function SWcope
This means that variables are not visible outside of the function in which they were declared.
What are global variables?
Variables that can be read and modified anywhere in your application
Why are global variables bad?
They can expose security issues and make code much harder to maintain.
What happens if variables are not declared inside a function?
They are available globally.
_______ scope allows a function to see the variables of it’s parent function.
Child Scope
What is the most popular DOM library?
jQuery
What do DOM libraries do?
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.
The way you interact with a service via code.
API – Application programming interface
Why is it not always the best idea to use a DOM library?
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.
$(‘.note’).css(‘background’, ‘red’).height(100);
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.
What is the jQuery selector function?
$( )
A function that returns a jQuery wrapper around an element.
What are methods that get and set the values of properties?
Getters and setters
It’s sometimes useful to limit the area of the DOM from which an element can be selected. How is this done in jQuery?
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.
What variable naming convention is used when storing jQuery objects?
The variable begins with a dollar sign.
Example: var $header
What are the AJAX helper methods?
- ) $.get
- ) $.post
- ) $.ajax
What does DOMContentLoaded do?
Run JavaScript only when the DOM is loaded and ready (but before stylesheets are fully loaded).
What does this jQuery do?
$(window).load(doSomething);
Wait for the page to fully load - that is, when all stylesheets and images have been downloaded then doSomething.
What type of type-checking functions does jQuery provide?
- ) $.isArray()
- ) $.isFunction()
- ) $.isNumeric()
- ) $.isPlainObject()
