JavaScript Flashcards
What is the purpose of a loop?
To execute a block of code as long as specified condition is true
What is the purpose of a condition expression in a loop?
The purpose of condition expression in a loop is to be tested each time loop runs. As long as condition is true loop keeps running
What does “iteration” mean in the context of loops?
repetition of a process
When does the initialization expression of a for loop get evaluated?
only first time before loop starts
When does the condition expression of a for loop get evaluated?
before each loop iteration
When does the final expression of a for loop get evaluated?
At the end of each loop iteration
What is the word “object” refers to in the phrase Document Object Model?
The word “object” refers to the structured representation of an HTML or XML document.
What is a DOM Tree?
A collection of objects in the computer memory that represent the HTML elements that define a web page.
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll()
What console method allows you to inspect the properties of a DOM element object?
console.dir()
What does document.querySelector() take as its argument and what does it return?
document.querySelector() takes a CSS selector string as its argument. And returns the first element that matches specified CSS selector.
What does document.querySelectorAll() take as its argument and what does it return?
It takes CSS string selectors as argument and returns static NodeList representing a list of documents that match argument
What is the purpose of events and event handling?
It’s to interact with users in a specific way depends on user actions
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
What object is passed into an event listener callback when the event fires?
function object
How do you update the CSS class attribute of an element using JavaScript?
by calling className property
Why is it possible to listen for events on one element that actually happen its descendent elements?
due to the event bubbling
What DOM element property tells you what type of element it is?
tagName
What does the element.closest() method take as its argument and what does it return?
As argument it takes string as CSS selector, it’s heading towards document root until it finds a node that matches provided selector string
How can you remove an element from the DOM?
By using remove() method -> element.remove()
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
add eventListener to the parent element and verify from which element event come from (condition)
Is the event parameter of an event listener callback always useful?
yes
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What does the event.preventDefault() method do?
preventing refresh the page
What does submitting a form without event.preventDefault() do?
It refreshes webpage
What property of a form element object contains all of the form’s controls.
The HTMLFormElement.elements returns an HTMLFormControlsCollection
What is the textContent property of an element object for?
textContent property let us add text value to an element object or check text value of an element object
Name two ways to set the class attribute of a DOM element.
className and setAttribute
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
it’s reusable, we can use different data, we can run it whenever we want
What is the event.target?
target property of the Event interface is a reference to the object onto which the event was dispatched.
What does the element.matches() method take as an argument and what does it return?
takes string as an argument. Checks if the element would be selected by specified CSS selector. Returns true or false
const birds = document.querySelectorAll(‘LI’)
for (const bird of birds) {
if (bird.matches(‘.endangered’)) {
console.log(‘whee’)
}
}
How can you retrieve the value of an element’s attribute?
getAttribute()
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
We would have to make a code for individual tabs
If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
we would have to use conditional statement each time
What are serialization and deserialization?
taking data and put it into order, deserialization is opposite
What is JSON?
JSON (JavaScript Object Notation) format for storing and transporting data.
Why are serialization and deserialization useful?
taking data and organize it into an order, deserialization is opposite
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse
How to you store data in localStorage?
using localstorage.setItem() method
How to you retrieve data from localStorage?
using localstorage.getItem() method
What data type can localStorage save in the browser?
strings
When does the ‘beforeunload’ event fire on the window object?
before closing application.
How can you tell the difference between a method definition and a method call?
different syntax calculator.add() vs
add function(x + x) { …}
What is the defining characteristic of Object-Oriented Programming?
methods are behavior , values are data.
data and methods can be in shared space
What are the four “principles” of Object-Oriented Programming?
abstraction, encapsulation ,inheritance, polymorphism
What is “abstraction”?
taking complex functionality and make it accessible
What does API stand for?
application programing interface
What is the purpose of an API?
all tools letting programs interact between each other
What is this in JavaScript?
the this keyword refers to an object. Which object, it depends on how this is being invoked (used or called)
What does it mean to say that this is an “implicit parameter”?
meaning that it is available in a function’s code block even though it was never included in the function’s parameter list or declared with var
When is the value of this determined in a function; call time or definition time?
call time
How can you tell what the value of this will be for a particular function or method definition?
You can’t , it’s just definition
How can you tell what the value of THIS is for a particular function or method call?
if there is no function call it’s window. If it’s . its always method of that object
What kind of inheritance does the JavaScript programming language use?
prototype-based-inheritance(prototypal)
What is a prototype in JavaScript?
It’s reusing existing objects that serve as prototype
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?
their grabbing it from prototype object
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
On it’s own prototype.
What does the new operator do?
let you create object for a function ,new create plain js object, add property to the new object, binds new object instance as this ,return this if function doesn’t return any object.
What property of JavaScript functions can store shared behavior for instances created with keyword new?
prototype property
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
using setTImeOut()
How can you set up a function to be called repeatedly without using a loop?
setInterval()
What do setTimeout() and setInterval() return?
number id
What three things are on the start-line of an HTTP request message?
one line, request method, request url and HTTP version
What is AJAX?
Programing concept, build in HTML XMLHTTPRequest object is used to execute Ajax on webpages, allowing websites to load content onto the screen without refreshing the page
What does the AJAX acronym stand for?
asynchronous JavaScript and XML
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest();
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
What is Event Bubbling
Event bubbling is the order in which event handlers are called when one element is nested inside a second element, and both elements have registered a listener for the same event (a click, for example).
What is Event Propagation
This is the blanket term for both event bubbling and event capturing
What is Event Capturing Phase?
?
What is Event Delegation
It’s event handling pattern. We put single handler on common ancestor and call an event on particular element (event.target)
