JavaScript Flashcards
What is the purpose of variables?
to store data and use it later
How do you declare a variable?
by putting var ____ < name
How do you initialize (assign a value to) a variable?
use the equal operator it represents the word “assignment”
What characters are allowed in variable names?
lowercase, numbers, dollar sign, underscore. No dash(-) or (.), also do not start with a number. Start with either a letter, dollar sign, or underscore
What does it mean to say that variable names are “case sensitive”?
score and Score are considered different variables (DO NOT DO THIS)
What is the purpose of a string?
To write characters and words
What is the purpose of a number?
To give data
What is the purpose of a boolean?
It is an on off switch that can be used to determine whether something should run in a script
What does the = operator mean in JavaScript?
it means assignment
How do you update the value of a variable?
The var keyword isn’t necessary but you simply reassign it later in the document.
What is the difference between null and undefined?
null is an intentional way of saying nothing, undefined is the way the computer says nothing. Every null value you see is purposeful.
Why is it a good habit to include “labels” when you log values to the browser console?
Labels provide clarity for other people and for you in the future.
Give five examples of JavaScript primitives.
string, number, boolean, null, undefined
What data type is returned by an arithmetic operation?
numeric data type, some sort of number
What is string concatenation?
string concatenation is taking two strings together and gluing them to make a new string
What purpose(s) does the + plus operator serve in JavaScript?
arithmetic operations, string operations (concatenating)
What data type is returned by comparing two values (, ===, etc)?
boolean data types
What does the += “plus-equals” operator do?
it’s shorthand
motto+= ‘is the goat’;
motto=motto + ‘is the goat’;
they are the same, the way you read the second line is what the first one is doing
What are objects used for?
objects group together variables and functions
What are object properties?
Object properties are keys and values
Describe object literal notation.
object literals itself is the curly braces
How do you remove a property from an object?
use the delete operator object.property
What are the two ways to get or update the value of a property?
bracket notation and dot notation
anything that follows the dot notation is a string
bracket notation lets you check for an expression when accessing a property
What are arrays used for?
a list or a set of values related to each other. Especially useful if you aren’t sure how big the list will be. Also the keys are indexed automatically with a number.
Describe array literal notation.
var \_\_\_ = [ ]; the curly braces is the literal part
How are arrays different from “plain” objects?
arrays have an index automatically instead of a key, it also has a length property.
What number represents the first index of an array?
[0]
What is the length property of an array?
it stores the knowledge of how many values are in it.
How do you calculate the last index of an array?
length - 1 is how you calculate the last index of an array.
What is a function in JavaScript?
A function is a reusable part of code.
Describe the parts of a function definition.
Function has a keyword, optional name of the function. () that hold optional parameter list
{code block} return statement
Describe the parts of a function call.
A function name followed by a list of parameters
When comparing them side-by-side, what are the differences between a function call and a function definition?
function definition features a keyword and a codeblock. A call has the arguments.
What is the difference between a parameter and an argument?
Parameter is an unknown placeholder type that’s holding a spot for an eventual there (the argument).
Why are function parameters useful?
parameters allow us to leave a spot open for a value and call and get different results. You create adaptive behavior
What two effects does a return statement have on the behavior of a function?
Returns a value and ends the function
Why do we log things to the console?
console log is for debugging, it’s only for developers. When you have an issue you should log all your values.
What is a method?
a method is a function that is a property of an object.
How is a method different from any other function?
Methods are functions that are part of objects. Other then that methods and functions are interchangeable (in javascript)
How do you remove the last element from an array?
The pop method.
How do you round a number down to the nearest integer?
Call the floor method
How do you generate a random number?
The random method of the math object
How do you delete an element from an array?
splice method
How do you append an element to an array?
push (append means add to the end)
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?
console log the string if you aren’t sure. String methods destroy the string and make a new one because they are immutable
Roughly how many string methods are there according to the MDN Web docs?
45-50, there are a lot
Is the return value of a function or method useful in every situation?
not everytime do you need the return of something.
Roughly how many array methods are there according to the MDN Web docs?
around 40-50, a lot. Strings and arrays are the most common types of data we need to change so there’s a loooot of 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 too?
values, variables, whole expressions
What is the purpose of an if statement?
If statements evaluate a condition and allow different code to run depending on the results
Is else required in order to use an if statement?
No, If there’s only an if statement and it’s condition isn’t met it simply skips it.
Describe the syntax (structure) of an if statement.
if(condition) {code to execute}
What are the three logical operators?
&&, ||, !
How do you compare two different expressions in the same condition?
(condition logical operator condition)
What is the purpose of a loop?
It lets you repeat something without you having to do it yourself.
What is the purpose of a condition expression in a loop?
A condition is an expression in order to stop a loop.
What does “iteration” mean in the context of loops?
Iteration in the context of loops means iterating something with the purpose of eventually getting the loop to end
When does the condition expression of a while loop get evaluated?
Before each iteration of the loop
When does the initialization expression of a for loop get evaluated?
Initialization only happens at the start one time
When does the condition expression of a for loop get evaluated?
Before each iteration of the loop, after the first initialization.
When does the final expression of a for loop get evaluated?
final expression happens after the code block runs and before the condition runs.
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break, not super common but it does exist.
What does the ++ increment operator do?
++ substitutes the value of the variable and increments the value of the variable
How do you iterate through the keys of an object?
By using a for in loop
Why do we log things to the console?
To check, debug, or verify if what we are trying to do is correct
What is a “model”?
A representation of a structure or system that you want to follow or imitate.
Which “document” is being referred to in the phrase Document Object Model?
The doctype declaration
What is the word “object” referring to in the phrase Document Object Model?
The DOM is a javascript object that is modeling an html document. The DOM IS NOT the html document. It builds itself by observing the html document.
It refers to the document object. You always have to access individual elements via the document object.
What is a DOM Tree?
The DOM tree is a model of a web page. Parent element and all of it’s child elements, it is the makeup of the element and all of it’s contents.
Give two examples of document methods that retrieve a single element from the DOM.
getElementById() and querySelector()
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
So that way you can just store the location of the elements. This saves the browser looking through the DOM tree. Which is known as caching the selection.
What console method allows you to inspect the properties of a DOM element object?
console.dir();
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
11) What does document.querySelector() take as its argument and what does it return?
The return is the first element of the document that matches that selector
It takes a string as the argument
What does document.querySelectorAll() take as
its argument and what does it return?
It takes a string and returns a node list
Why do we log things to the console?
To debug, check, and verify that everything is working.
What is the purpose of events and event handling?
To update and give a feeling of interactivity with the user
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?
addeventlistener methods
What is a callback function?
A function passed into another function as an argument. In order to complete an action. Being passed around like a value
What object is passed into an event listener callback when the event fires?
It includes an object with all the data that the event occurs. With every event that occurs you are given the object of every property javascript thinks the event object wants you to know. An object with all data for whatever event occurred.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
You can look it up on mdn. It is a property. of event. It says where the event occurred
What is the difference between these two snippets of code?
The first one is going to work properly, the second one has a return. eventlisteners never really have returns. so element.addEventListener(‘click’, handleClick)
YOU WILL ALWAYS PUT a function definition, never do a function call
What is the className property of element objects?
It gets and sets the class value of a specified element
How do you update the CSS class attribute of an element using JavaScript?
first query for the element into a variable
get the value and use the classname method
What is the textContent property of element objects?
It represents the text content of the element node and it’s descendants
How do you update the text within an element using JavaScript?
Select the element you want with a query selector. And then get your new value and use the text content property on the new variable you queried
Is the event parameter of an event listener callback always useful?
Not always useful. It is pretty useful though
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
It would be way more complicated. Storing information on the dom without variables is a horrible scenario. Javascript functionality should be reliant on javascript variables.
Why is storing information about a program in variables better than only storing it in the DOM
Storing things in variables is easier for javascript to work with. It’s extremely inefficient.
What event is fired when a user places their cursor in a form control?
focus 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 ?
submit event
What does the event.preventDefault() method do? What does submitting a form without event.preventDefault() do?
It prevents the page from resetting. It prevents the default behavior.
It refreshes. The default behavior happens.
What property of a form element object contains all of the form’s controls.
The Name property
What property of a form control object gets and sets its value?
The value property, allows you to access the value stored
What is one risk of writing a lot of code without checking to see if it works so far?
You can waste a lot of time and make debugging difficult
What is an advantage of having your console open when writing a JavaScript program?
Just to see progress and see if what’s coming out is think is coming out
Does the document.createElement() method insert a new element into the page?
No, it is not part of the DOM tree until you use the appendChild method
How do you add an element as a child to another element?
The appendChild() method
What do you pass as the arguments to the element.setAttribute() method?
You usually set the name of the attribute you want (like class), and then the value as the second argument.
b.setAttribute(‘class’, ‘column-third’)
What steps do you need to take in order to insert a new element into the page?
assign a variable and use the createElement() method, then at some point appendChild() it to a queried variable
What is the textContent property of an element object for?
The textContent property allows you to either get the element’s text content, or set the text content
Name two ways to set the class attribute of a DOM element.
You can set it with setAttribute. I’m unsure of the second way, you can use getAttribute to get the current value as well as removeAttribute. Assign a string to the classname property of the element object.
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
We can reuse the tree/foundation as many times as we want. If something is wrong it’s very easy to test.
