JavaScript Flashcards
What is the purpose of variables?
the ability to store data that can change every time a script runs.
How do you declare a variable?
var (keyword) varName(Variable Name/Identifier) = (Assignment Operator) number/string/boolean(Value)
How do you initialize (assign a value to) a variable?
use an equals sign(=) . aka the Assignment Operator
What characters are allowed in variable names?
letters, numbers, dollar sign($), underscore(_),
cannot start with a number.
no dash(-) or period(.) in a variable name.
no keywords or reserved words.
What does it mean to say that variable names are “case sensitive”?
an example would be that var alvaro and var Alvaro would be different variable names.
try not to create variables that have the same name doing different things.
What is the purpose of a string?
strings can be used when working with some type of text.
What is the purpose of a number?
when working with any arithmetic or something with a numeric value
What is the purpose of a boolean?
to tell whether true or false, also to tell JS which path to take.
What does the = operator mean in JavaScript?
Assignment Operator
How do you update the value of a variable?
you can use dot notation or square brackets.
What is the difference between null and undefined?
null is something you place there and undefined is placed there by the browser.
Why is it a good habit to include “labels” when you log values to the browser console?
to help clarify whats being logged when you go back and review the code.
Give five examples of JavaScript primitives.
Numeric value, String, Boolean value, null, and undefined.
What data type is returned by an arithmetic operation?
always a numeric value.
What is string concatenation?
connecting two different strings or data that you want to be together.
What purpose(s) does the + plus operator serve in JavaScript?
its the addition operator, as well the concatenation operator.
What data type is returned by comparing two values (<, >, ===, etc)?
Boolean value (true or false).
What does the += “plus-equals” operator do?
the addition assignment operator adds the value of the right side(right operand) and assigns the result to the variable.
What are arrays used for?
to store a list of related values.
Describe array literal notation.
var example = [‘one’, ‘two’, ‘three’];
How are arrays different from “plain” objects?
arrays are indexed such as 0, 1, 2, 3
objects cant use .length property.
What number represents the first index of an array?
0
What is the length property of an array?
length property tells you how many items are in the array.
How do you calculate the last index of an array?
var lastIndex = arrayName.length;
use dot notation = .length
Why do we log things to the console?
to be able to check the output and see if our code is working how it should.
What is a method?
A method is a function which is a property of an object.
instance methods
static methods
How is a method different from any other function?
a method needs to be attached to an object.
How do you remove the last element from an array?
pop( )
How do you round a number down to the nearest integer?
Math.floor( )
How do you generate a random number?
Math.random( )
How do you delete an element from an array?
.splice( )
How do you append an element to an array?
.push( )
How do you break a string up into an array?
.split( )
Do string methods change the original string? How would you check if you weren’t sure?
string methods do not change original string.
console.log the string
Is the return value of a function or method useful in every situation?
not necessarily if the function or method is coded correctly you dont really need it.
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
What is the purpose of a loop?
Loops check a condition, if the condition returns true the code block will run again, it repeats until condition returns false.
Loops offer a quick way to do something repeatedly. without writing something over and over.
What is the purpose of a condition expression in a loop?
the condition is checked before a loop runs, if the condition is true the code will run until the condition is false.
What does “iteration” mean in the context of loops?
each time the computer runs through a loop its considered an iteration.
When does the condition expression of a while loop get evaluated?
The condition is evaluated before executing the code block.
before every iteration.
When does the initialization expression of a for loop get evaluated?
the initialization gets evaluated once before the loop begins.
When does the condition expression of a for loop get evaluated?
condition expression gets evaluated before each loop iteration, if evaluates to true, statement is executed, if evaluates to false it exits the loop and goes to the first statement after the for { } construct
When does the final expression of a for loop get evaluated?
Final expression to be evaluated at the end of each loop iteration. generally used to update or increment the variable.
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break statement terminates the current loop.
What does the ++ increment operator do?
The increment operator (++) increments (adds one to) its operand and returns a value.
How do you iterate through the keys of an object?
for in loop - iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols), including inherited enumerable properties.
Why do we log things to the console?
to be able to see what our code is actually doing and make sure its doing what its supposed to.
What is a “model”?
as the browser loads the webpage it creates a model, that model is called the DOM Tree, it i s stored in the browsers memory, and consists of four main types of nodes.
- The Document Node
- Element Nodes
- Attribute Nodes
- Text Nodes.
Which “document” is being referred to in the phrase Document Object Model?
the html document or the whole webpage.
What is the word “object” referring to in the phrase Document Object Model?
the dom tree is made up of objects, each object represents a different part of the page, or it could be the node which is an object with methods and properties.
What is a DOM Tree?
the model that the browser loaded is called the DOM Tree, consists of four main types of nodes, Document, Element, Attribute, and Text Nodes.
Give two examples of document methods that retrieve a single element from the DOM.
getElementById( )
querySelector( )
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName( )
Why might you want to assign the return value of a DOM query to a variable?
if your script needs to use the same element more than once, This saves the browser looking through the DOM tree to find the same element again.
What console method allows you to inspect the properties of a DOM element object?
console.dir( )
dir = directory.
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
since the html loads top to bottom, it needs to load the elements before the javascript looks for elements.
What does document.querySelector() take as its argument and what does it return?
argument: CSS selector syntax
returns: only the first of the matching elements.
What does document.querySelectorAll() take as its argument and what does it return?
argument: CSS selector syntax
returns: all elements that match.
What is the Dom
a javascript object that is modeling the html document.
Why do we log things to the console?
to be able to see what our code is actually doing and make sure its doing what its supposed to.
What is the purpose of events and event handling?
- when a user interacts with an HTML web page, events trigger the javascript code.
- three steps to trigger the javascript code is:
- select the element node(s) you want the script to respond to
- indicate which event on the selected element will trigger the response.
- state the code you want to run when the event occurs.
Are all possible parameters required to use a JavaScript method or function?
no
What method of element objects lets you set up a function to be called when a specific type of event occurs?
Event Listener
DOM Element . addEventListener(‘event’, functionName, optional event flow).
What is a callback function?
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
What object is passed into an event listener callback when the event fires?
event object -
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
the place where the event took place. check it with console.log( ), check MDN for more information.
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
first one fires once the event takes place
the bottom one takes place as soon as the page loads up.
Does the document.createElement() method insert a new element into the page?
no it does not.
How do you add an element as a child to another element?
appendChild( )
What steps do you need to take in order to insert a new element into the page?
createElement
add textContent
append textContent to element
What do you pass as the arguments to the element.setAttribute() method?
two strings the first being the attribute name, then the value of the attribute.
What is the textContent property of an element object for?
represents the text content of the node and its descendants.
Name two ways to set the class attribute of a DOM element.
setAttribute
.className
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
re using the function and debugging if it doesnt work.
How do you add an element as a child to another element?
appendChild( )
What is the event.target?
returns the element that triggered the event.
Why is it possible to listen for events on one element that actually happen its descendent elements?
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?
A string of valid CSS selector to match the Element and its ancestors against.
How can you remove an element from the DOM?
remove( ) method on the object of the dom element we want to 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 it to the nearest parent.
What is JSON?
JavaScript Object Notation
JSON is a text-based data format following JavaScript object syntax
What are serialization and deserialization?
serialization - Serialization is the process of converting an object into a stream of bytes to store the object or transmit it to memory, a database, or a file.
deserialization - Deserialization is the exact opposite - Fetch a stream of bytes from memory or database and convert it back to the Object.
Why are serialization and deserialization useful?
Its main purpose is to save the state of an object in order to be able to recreate it when needed.
Serialization is useful because you can transfer objects to main memory or across network, and deserialize them again later
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 do you store data in localStorage?
storage.setItem( keyName, keyValue) will add the key to the storage object.
How do you retrieve data from localStorage?
storage.getItem(keyName) will return that keys value
What data type can localStorage save in the browser?
string
When does the ‘beforeunload’ event fire on the window object?
The beforeunload event is fired when the window, the document and its resources are about to be unloaded.
What is a method?
A method is a function which is a property of an object.
How can you tell the difference between a method definition and a method call?
method definition is defining it within the object such as var doggo = { bark : function( ) { return ‘bark’ }} and calling it would be outside of the object such as doggo.bark( ).
Describe method definition syntax (structure).
var doggo = {
bark : function ( ) {
return ‘woof’
}
}
Describe method call syntax (structure).
object.property( param );
How is a method different from any other function?
What is the defining characteristic of Object-Oriented Programming?
What are the four “principles” of Object-Oriented Programming?
What is “abstraction”?
What does API stand for?
What is the purpose of an API?
What is this in JavaScript?
this is an implicit parameter of all JavaScript functions.
What does it mean to say that this is an “implicit parameter”?
implicit parameter means 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?
the value of this is determined when the function is called, not when it is defined.
How can you tell what the value of this will be for a particular function or method definition?
within a definition you cannot tell what the value will be.
How can you tell what the value of this is for a particular function or method call?
the value of this can be recognized as “the object to the left of the dot” when the function is called (as a method).
What kind of inheritance does the JavaScript programming language use?
prototype-based inheritance
What is a prototype in JavaScript?
a JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects.
create a tool that can be reused.
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on strings, arrays, and numbers?
you would use the Object.setPrototype ( ) method, sets the prototype of a specified object to another object.
It turns out arrays don’t actually have the methods that you’ve come to know. Instead, those methods are defined on a “prototype” object and arrays simply borrow those methods when they’re needed.
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
the prototype objects
looks up the prototypal chain to find it.
What is a “callback” function?
A callback function is a function passed into another function as an argument
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?
setTimeout( ) method
How can you set up a function to be called repeatedly without using a loop?
setInterval( ) method.
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
both return a timeoutId which is a number.
What is AJAX?
Asynchronous JavaScript and XML,
allows you to request data from a server and load it without having to refresh the entire 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?
.open( ) method?
initializes a newly-created request, or re-initializes an existing one.
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
the load event.
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
share a prototype object
What is Array.prototype.filter useful for?
Whenever you need to filter elements out of an array.
makes it simpler to filter out items in an array, makes code more concise, removes need for for loops to check conditionals.
What is Array.prototype.map useful for?
Whenever you want to call a function on every element in an array.
Whenever you need to generate a new array based on your original array?
What is Array.prototype.reduce useful for?
Whenever you need to reduce an array to a single value.
useful for returning the sum or product of all elements in an array.
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
When it is defined, Lexical Scope
What allows JavaScript functions to “remember” values from their surroundings?
Closures enable functions to remember their surroundings.
