JavaScript Flashcards
What is the purpose of variables?
Variables are used to store data that can be referenced and/or changed later on.
How do you declare a variable?
You can declare a variable using var (global scoped) or let, const (block scoped).
How do you initialize (assign a value to) a variable?
You assign a value to a variable using =
What characters are allowed in variable names?
Variables must start with a letter, underscore, or $ sign. You may not use any JavaScript keywords.
What does it mean to say that variable names are “case sensitive”?
This means that the variable names must always be typed with consisted capitalization of characters. Otherwise, they will be treated as different variables entirely.
What is the purpose of a string?
A string is used to store and manipulate text.
What is the purpose of a number?
JavaScript numbers are used to store numerical values as double precision floating point numbers
What is the purpose of a boolean?
Boolean variables are used to store a value of true or false, and are often used to evaluate the truth of an expression.
What does the = operator mean in JavaScript?
It is the assignment operator that is used to store the operand on the right side to the operand on the left side.
How do you update the value of a variable?
There are various ways to update the value of a variable. Besides the assignment operator, we can use +=, -=, *=. /=
What is the difference between null and undefined?
Null is an assigned value that means nothing. Undefined means that the variable has been declared but not defined yet.
Why is it a good habit to include “labels” when you log values to the browser console?
It is a good practice to include labels as it allows the developer to know exactly context of the data being displayed.
Give five examples of JavaScript primitives.
Undefined, null, boolean, number, string
What data type is returned by an arithmetic operation?
If both operands are numerical data, the operation will result in numerical data. However, if an operand is a string, then operation will result in a string.
What is string concatenation?
The arithmetic operation of two string operands.
What purpose(s) does the + plus operator serve in JavaScript?
The + operator is used to add operands on the left and right side of the operator.
What data type is returned by comparing two values (<, >, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
The += operator adds the value of the right operand with the left operand and stores the result in the left operand.
What does the += “plus-equals” operator do?
The += operator adds the value of the right operand with the left operand and stores the result in the left operand.
What are objects used for?
An object is a self-contained component with its own properties, functions, and data structures. They are used to encapsulate their own actions from the rest of the program.
What are object properties?
Properties are values associated with a JavaScript object. Properties are in the form of key:value
Describe object literal notation.
The Object literal notation is basically an array of key:value pairs, with a colon separating the keys and values, and a comma after every key:value pair, except for the last, just like a regular array.
How do you remove a property from an object?
By using the delete operator.
What are the two ways to get or update the value of a property?
By using the dot nation or bracket notation
myCar.make
myCar[‘make’]
What are arrays used for?
An array allows for a collection of multiple items under a single variable name.
Describe array literal notation.
An array literal is a list of zero or more expressions, each of which represents an array element, enclosed in square brackets ( [] ).
How are arrays different from “plain” objects?
An array is used to store multiple items under a single variable. An object is used to contain self-related items under a single object name.
What number represents the first index of an array?
0
What is the length property of an array?
The amount of items stored in the array.
How do you calculate the last index of an array?
By placing length-1 in the index.
What is a function in JavaScript?
A function is a block of instructions that accomplished a certain task (described by the name of the function).
Describe the parts of a function definition.
function keyword optional name opening curly bracket code block return value closing curly bracket
When comparing them side-by-side, what are the differences between a function call and a function definition?
A function call causes the function code to execute. A function definition simply lays out the steps but doesn’t cause code to execute.
What is the difference between a parameter and an argument?
A parameter is used as an input in a function definition. An argument is used as input in a function call.
Why are function parameters useful?
They allow the function to be reusable with a variety of arguments.
What two effects does a return statement have on the behavior of a function?
The return statement ends the execution of the function and returns the value to the caller.
Why do we log things to the console?
We log to the console so we know what the code is doing. This ensures that the code is functioning as intended.
What is a method?
A method is a property of an object that contains a function definition.
How is a method different from any other function?
A method is associated with an object while a function is not.
How do you remove the last element from an array?
pop() method
How do you round a number down to the nearest integer?
You use the Math.floor() method.
How do you generate a random number?
Math.method() function
How do you delete an element from an array?
splice() method
How do you append an element to an array?
push() method
How do you break a string up into an array?
split() method
Do string methods change the original string? How would you check if you weren’t sure?
No, they
Roughly how many string methods are there according to the MDN Web docs?
According to MDN, there are roughly 50 string methods.
Is the return value of a function or method useful in every situation?
No, it certain situations, the return value is irrelevant to the functionality.
Roughly how many array methods are there according to the MDN Web docs?
There are roughly 41 array methods.
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators.
===, !==, <, >, <=, >=
What data type do comparison expressions evaluate to?
Boolean
What is the purpose of an if statement?
To execute code if a condition is met.
Is else required in order to use an if statement?
No, not all if statements need an else statement.
Describe the syntax (structure) of an if statement.
if conditional keyword
(........) conditional expression
{ opening curly brace
code block
} closing code blockWhat are the three logical operators?
&& (AND), || (OR), ! (NOT)
How do you compare two different expressions in the same condition?
By using a logical operator to connect the two different expressions.
What is the purpose of a loop?
Loops exist to run repeated code until a condition is met. This prevent us from having to rewrite many lines of code and allow us to dynamically set the number of repetitions.
What is the purpose of a condition expression in a loop?
The condition expression is tested each time the loop repeats. If the condition evaluates to false, the loop exits.
What does “iteration” mean in the context of loops?
Iteration is the process of repeating steps
When does the condition expression of a while loop get evaluated?
The conditional expression is evaluated first before the statements inside the the loop execute.
When does the initialization expression of a for loop get evaluated?
The initialization expression for a for loop comes first.
When does the condition expression of a for loop get evaluated?
The condition expression is evaluated at the end of every loop iteration.
When does the final expression of a for loop get evaluated?
The final evaluation is the end of the loop. It is the evaluation that determines to end the loop as condition returns false.
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
What does the ++ increment operator do?
In increments a variable’s value by 1.
How do you iterate through the keys of an object?
By utilizing a for…in loop to traverse each property of the object.
Why do we log things to the console?
What is a “model”?
Which “document” is being referred to in the phrase Document Object Model?
What is the word “object” referring to in the phrase Document Object Model?
What is a DOM Tree?
Give two examples of document methods that retrieve a single element from the DOM.
Give one example of a document method that retrieves multiple elements from the DOM at once.
Why might you want to assign the return value of a DOM query to a variable?
What console method allows you to inspect the properties of a DOM element object?
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
What does document.querySelector() take as its argument and what does it return?
What does document.querySelectorAll() take as its argument and what does it return?
Why do we log things to the console?
What is the purpose of events and event handling?
Are all possible parameters required to use a JavaScript method or function?
What method of element objects lets you set up a function to be called when a specific type of event occurs?
What is a callback function?
What object is passed into an event listener callback when the event fires?
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
What is the difference between these two snippets of code?
What is the className property of element objects?
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
How do you update the CSS class attribute of an element using JavaScript?
You can utilize the setAttribute method or the .className method
What is the textContent property of element objects?
The textContent property of the Node interface represents the text content of the node and its descendants.
How do you update the text within an element using JavaScript?
Node.textContent
Is the event parameter of an event listener callback always useful?
Not always. The event parameter is not always used in the event handler function.
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
More complicated as we would have no way to keep track of the amount of times the button was clicked.
Why is storing information about a program in variables better than only storing it in the DOM?
Storing information in variables allows you to dynamically alter the content of the website.
What event is fired when a user places their cursor in a form control?
mouseover event
What event is fired when a user’s cursor leaves a form control?
Blur event
What event is fired as a user changes the value of a form control?
Input event
What event is fired when a user clicks the “submit” button within a ?
The submit event
What does the event.preventDefault() method do?
It tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.
What does submitting a form without event.preventDefault() do?
It causes the page to refresh after the form is submitted.
What property of a form element object contains all of the form’s controls.
HTMLFormElement.elements
What property of a form control object gets and sets its value?
HTMLFormElement.elements
What is one risk of writing a lot of code without checking to see if it works so far?
You may have made a mistake early on that affects every step thereafter. It’s best to check your code through each step in the terminal.
What is an advantage of having your console open when writing a JavaScript program?
You can follow along with the code to see how the values stored in variables change as you progress through your code.
Does the document.createElement() method insert a new element into the page?
No, it simply creates an element node that will need to be appended by the programmer.
How do you add an element as a child to another element?
The appendChild method of the Node interface
What do you pass as the arguments to the element.setAttribute() method?
The attribute and the value of the attribute.
What steps do you need to take in order to insert a new element into the page?
First, you must querySelect the parent element to append to. Then you must utilize the createElement method of the Document object with an element specified as an argument. The return of the that express is stored in a variable. The variable is then appended as a Child to the parent element.
What is the textContent property of an element object for?
The text that is displayed to the user when viewing the element.
Name two ways to set the class attribute of a DOM element.
.className = value
setAttribute(‘class’, value)
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
They allow you to dynamically render content rather than rely on static predefined HTML
Give two examples of media features that you can query in an @media rule.
min-width, max-width
Which HTML meta tag is used in mobile-responsive web pages?
HTML Viewport meta tag
What is the event.target?
The target is the property of an event that references the element upon which the event was fired.
Why is it possible to listen for events on one element that actually happen its descendent elements?
By default, the events bubble up the DOM tree unless specified not to.
What DOM element property tells you what type of element it is?
element.tagName
What does the element.closest() method take as its argument and what does it return?
The element.closest() method takes in an element as its argument and returns the first ancestor of the argument.
How can you remove an element from the DOM?
remove() method of the element
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?
Assuming that the new clickable DOM elements share the same parent, you can utilize bubble-up by applying a selector for the inner element and using the closest() method to select the parent. Then any new DOM elements will have the event listener applied to them.
What is the affect of setting an element to display: none?
It causes the element (and it’s descendants) to not be rendered and not affect document flow. It acts as if the element does not exist at all.
What does the element.matches() method take as an argument and what does it return?
It takes in a specified CSS selector and returns a boolean value.
How can you retrieve the value of an element’s attribute?
You can utilize the getAttriibute() method which returns of the value of an element’s attribute in the form of a string.
At what steps of the solution would it be helpful to log things to the console?
At the start of every implementation to ensure we are accessing the correct data.
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?
You would need to manually query and append the tab and view rather than utilize the reusable pattern with event delegation.
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?
You would need to utilize a nested conditional statement which would we inefficient.
What is JSON?
JSON is a data representation of a JavaScript object in string format.
What are serialization and deserialization?
Serialization refers to the process of converting a JavaScript object to string format known as JSON. Deserialization is the process of converting the JSON object to JavaScript.
Why are serialization and deserialization useful?
Serialization allows us to convert data to string format for storage and data transmission while deserialization allows us to recreate the objects from JSON.
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?
setItem() method of the localStorage object
How do you retrieve data from localStorage?
getItem() method of the localStorage object
What data type can localStorage save in the browser?
JSON
When does the ‘beforeunload’ event fire on the window object?
When the window is closed or reloaded.
What is a code block
What does block scope mean
We cannot access the variable declared within a block when we are outside that block.
What is the scope of a variable declared with const or let?
block
What is the difference between let and const?
Let can be reassigned while cosnt is read only.
Why is it possible to .push() a new value into a const variable that points to an Array?
We are not reassigning the value of the variable since it is still referencing the same position in memory.
How should you decide on which type of declaration to use?
If you plan on changing the value of the variable, use let. Otherwise, use const.
