JavaScript Flashcards
What is the purpose of variables?
to see data from the past and preserve for the future (store and organize data)
How do you declare a variable?
var, let, or const
How do you initialize (assign a value to) a variable?
use equal sign assignment operator
What characters are allowed in variable names?
letters, underscore, dollarsigns, and numbers (cannot be first letter)
What does it mean to say that variable names are “case sensitive”?
casing matters (N and n matter when calling a variable)
What is the purpose of a string?
gives a variable a text value that is not code
what is the purpose of a number?
can give numerical values that mostly is used for math
What is the purpose of a boolean?
compare values using true or false
What does the = operator mean in JavaScript?
assigns a value
How do you update the value of a variable?
assign a new value using the equal operator
What is the difference between null and undefined?
null is assigned, where as undefined is when javascript tell you something is empty
Why is it a good habit to include “labels” when you log values to the browser console?
gives an identifier for your console log
Give five examples of JavaScript primitives.
numerical value, string, boolean, null, undefined,
What data type is returned by an arithmetic operation?
number
What is string concatenation?
appending a string to the end of another string
What purpose(s) does the + plus operator serve in JavaScript?
addition in math and concatention for strings
What data type is returned by comparing two values (, ===, etc)
boolean
What does the += “plus-equals” operator do?
it is the addition assignment plus whatever string or data type is being added from the original variable
What are objects used for?
group together data, create subdivisions of data
What are object properties?
they are sub divisions of objects that store similar data
Describe object literal notation.
curly braces
How do you remove a property from an object?
delete (name of propert)
What are arrays used for?
to store items with similar data with an order.
Describe array literal notation.
square bracket with data values inside
How are arrays different from “plain” objects?
data is indexed, with a set order
What number represents the first index of an array?
0
What is the length property of an array
number of values within the array
How do you calculate the last index of an array?
.length-1
what is a function in Javascript?
function does code repeatable without typing out the code over and over
Describe the parts of a function definition
function keyword, name(optional), parameters, curly brace, followed by code and return statement(optional). then closing curly brace
Describe the parts of a function call.
the function name followed by parenthesis
When comparing them side-by-side, what are the differences between a function call and a function definition?
no function keyword on a function call, no curly braces, and parameters in the function definition versus arguments in function calls
What is the difference between a parameter and an argument?
parameter is a placeholder, arguments fills the parameters of the data
Why are function parameters useful?
individual data for multiple uses
What two effects does a return statement have on the behavior of a function?
spit a value, and stop the the code after it to execute
Why do we log things to the console?
verify output and track progress for (debugging)
What is a method?
function stored in a object
How is a method different from any other function?
methods are attached to objects functions can be called by itself
How do you remove the last element from an array?
.pop method
How do you round a number down to the nearest integer?
math.floor
How do you generate a random number?
math.random method
How do you delete an element from an array?
.splice( where to start, how many items to remove)
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
Is the return value of a function or method useful in every situation?
not all the time
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?
booleans
What is the purpose of an if statement?
to check a condition if yes or no do it
Is else required in order to use an if statement?
no not necessary
Describe the syntax (structure) of an if statement
if keyword , condition and then conditional code block
What are the three logical operators?
and, or, not
How do you compare two different expressions in the same condition?
logical and logical or
What is the purpose of a loop?
keep executing a code until the condition is false
What is the purpose of a condition expression in a loop?
it gives it a stop point so that the loop does not run infinite, a break point
What does “iteration” mean in the context of loops?
it is 1 execution of a loop, so 4 iterations mean 4 loops
When does the condition expression of a while loop get evaluated?
before the code block executes
When does the initialization expression of a for loop get evaluated?
it is the very first action (before anything else)
When does the condition expression of a for loop get evaluated?
it runs right before each itteration
When does the final expression of a for loop get evaluated?
after the code block executes and then it
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?
adds the value by one
How do you iterate through the keys of an object?
for in loop
Why do we log things to the console?
check for debugs and make sure code is correct
What is a “model”?
create something on a smaller scale to represent the real value
Which “document” is being referred to in the phrase Document Object Model?
the HTML document
What is the word “object” referring to in the phrase Document Object Model?
javascript object
What is a DOM Tree?
Collection of HTML elements similar to a family tree. The element plus all its child element
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.
querySelector(all)
Why might you want to assign the return value of a DOM query to a variable?
make storage and will I need it in the future
What console method allows you to inspect the properties of a DOM element object?
dir method
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
since the page loads top to bottom
What does document.querySelector() take as its argument and what does it return?
selectors, argument is string from CSS, it returns an object.
What does document.querySelectorAll() take as its argument and what does it return?
it takes everything , and returns NodeLists
What is the purpose of events and event handling?
Be able to respond to user interaction
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?
addEvenListener
What is a callback function?
when u have a function passed into another as an argument
What object is passed into an event listener callback when the event fires?
event
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
object referencing the element
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
second one has the function call which will not work
What is the className property of element objects?
class attribute’s name s for that specific element
How do you update the CSS class attribute of an element using JavaScript?
classname property and classlist property
What is the textContent property of element objects
It is what is written within the text Content of an element
How do you update the text within an element using JavaScript?
element.textContent
Is the event parameter of an event listener callback always useful?
Not always as anonymous functions can be used
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 not know how many clicks unlesss we console log it.
Why is storing information about a program in variables better than only storing it in the DOM?
It gives it a way to organize and see data, otherwise it would be hard to tell
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?
blurr
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks the “submit” button within a ?
submit
What does the event.preventDefault() method do?
prevent default functions of the code
What does submitting a form without event.preventDefault() do?
the page will refresh
What property of a form element object contains all of the form’s controls.
elements
What property of a form control object gets and sets its value?
value
What is one risk of writing a lot of code without checking to see if it works so far?
code may not be working, and may need to be changed therefore
What is an advantage of having your console open when writing a JavaScript program?
Does the document.createElement() method insert a new element into the page
not yet, until it appended to the body
How do you add an element as a child to another element?
parentElement.appendChild(childElement)
What do you pass as the arguments to the element.setAttribute() method?
(name of attribute, value)
What steps do you need to take in order to insert a new element into the page?
document.createELement(‘name of element’), then assign to a variable, then call appenedChild to the parent element they want
What is the textContent property of an element object for?
to change
Name two ways to set the class attribute of a DOM element.
.className, and setAttribute
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)
It can be copied into more than one
What is the event.target?
point of interaction, the event area that is happening
Why is it possible to listen for events on one element that actually happen its descendent elements?
because of bubbling
What DOM element property tells you what type of element it is?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
takes a css selector and it returns the ancestor that is closest to it(parent)
How can you remove an element from the DOM?
.remove method
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?
Using DOM Delegation
What is the event.target?
read only property, element where the even started
What is the affect of setting an element to display: none?
Not visible and rendered in the output
What does the element.matches() method take as an argument and what does it return?
string name of the class or css selector, it checks if the element matches and returns a boolean
How can you retrieve the value of an element’s attribute?
getAttribute( string of the name of the attribute)
At what steps of the solution would it be helpful to log things to the console?
declaring a variable, going through a value for a loop, changing values. At every step.
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 add a new event listener and queryselector
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?
What is JSON?
converting objects and arrays into strings
What are serialization and deserialization?
serialization is object and arrays rendered into string
deserialization is taking it from a string back into an array and object
Why are serialization and deserialization useful?
Its easy to store and read as well as transmit
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?
localStorage.setItem()
How to you retrieve data from localStorage?
localStorage.getItem()
What data type can localStorage save in the browser?
strings
When does the ‘beforeunload’ event fire on the window object
before the page is refreshed or tab is closed
