JavaScript Flashcards
What data type is returned by an arithmetic operation?
number
What is string concatenation?
Strings are combined using the addition operator
What purpose(s) does the + plus operator serve in JavaScript?
It either adds numbers together or concatenates strings
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
Takes the variable and either adds a number or concatenates a string to itself
What are objects used for?
They are used to store a group of variables
What are object properties?
The individual variables stored in an object
Describe object literal notation.
Declare a variable, use opening curly brace, then list each property (name: value,) then close with a curly brace
How do you remove a property from an object?
Use the delete keyword (delete object.propertyname)
What are the two ways to get or update the value of a property?
dot notation (object.newproperty) or bracket notation (object[‘newproperty’]) - dot notation is preferred
How are arrays different from “plain” objects?
- Arrays have order.
- Arrays have methods to remove items and the array will adapt/update for any changes made
- They are simply listed, they don’t have an additional value or label assigned to them and they operate differently
What number represents the first index of an array?
0
What is the length property of an array?
Tells you how many items there are in an array
How do you calculate the last index of an array?
Length - 1
Describe the parts of a function definition.
Function keyword, function name (optional), parameters separated by commas and surrounded by parentheses, code block, return statement (optional)
Describe the parts of a function call
Function name, arguments
When comparing them side-by-side, what are the differences between a function call and a function definition?
The function definition has parameters and a code block which set everything up, whereas the call simply plugs arguments into the parameters
What is the difference between a parameter and an argument?
Parameter is a placeholder, whereas an argument is what’s plugged into that placeholder
Why are function parameters useful?
- Allows for more concise code, since they only have to be written once
- Allows for different results for each function
What two effects does a return statement have on the behavior of a function?
- Ends the function
- Returns the value of the function
Why do we log things to the console?
To check that everything is working properly and to keep track of output
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?
- Attached to an object, whereas functions a free-floating
- Can access data within objects
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 method
How do you generate a random number?
Math.random method
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?
Use the split method
Do string methods change the original string? How would you check if you weren’t sure?
Yes. You would log the string to the console or go to MDN
Is the return value of a function or method useful in every situation?
no
Give 6 examples of comparison operators.
==, ===, !=, >,
What is the purpose of an if statement?
Allows functions to execute different types of code depending on if a condition is met; makes a decision
Is else required in order to use an if statement?
No, but not including it could result in undefined variables
Describe the syntax (structure) of an if statement.
If keyword, condition, code block
What are the three logical operators?
&& (and), || (or), ! (not)
How do you compare two different expressions in the same condition?
Use the ‘and’ or the ‘or’ logical operators
What data type do comparison expressions evaluate to?
numbers
What is the purpose of a loop?
Allows code to be run multiple times automatically
What is the purpose of a condition expression in a loop?
Determines how many times the code is executed and when it stops
What does “iteration” mean in the context of loops?
Each time the code is run and the loop is repeated
When does the condition expression of a while loop get evaluated?
Before each iteration (is checked to see if code meets the condition)
When does the initialization expression of a for loop get evaluated?
The first time the loop is run
When does the condition expression of a for loop get evaluated?
Every time the loop is run, before the iteration
When does the final expression of a for loop get evaluated?
Every time the loop is run and still meets the condition expression
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?
Increases value by one and assigns it to the same variable
How do you iterate through the keys of an object?
Use a for in loop
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?
The javascript object datatype
What is a DOM Tree?
A representation of all the objects within an HTML document and how they are related
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, querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
To make it easier to access and to prevent the computer from having to search thru entire html doc every time
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?
It needs to be run at the end when every HTML object has been established
What does document.querySelector() take as its argument and what does it return?
Argument: css selector, returns: the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
Argument: CSS selector, returns: a node list of every element that matches that selector
What is the purpose of events and event handling?
Allow for interactivity and for code to be triggered when an event happens
What do [] square brackets mean in function and method syntax documentation?
Used to implement optional object
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
What is a callback function?
A function passed into another function as an argument, which is then invoked inside the outer function to complete an action
What object is passed into an event listener callback when the event fires?
Huge object which contains all of the info of an event
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The section of html code that the event is targeting. You could log the event target to the console or select it with the query selector. Go to MDN.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
The second snippet runs the function first, whereas the first snippet runs it after the event
What is the className property of element objects?
holds the name of an element’s class attribute
How do you update the CSS class attribute of an element using JavaScript?
You use the className method
What is the textContent property of element objects?
Holds the text content of an element
How do you update the text within an element using JavaScript?
Use the text content method
Is the event parameter of an event listener callback always useful?
No because you don’t always need info about the event (i.e. as seen in the exercise)
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
Vastly more complicated
Why is storing information about a program in variables better than only storing it in the DOM?
Easier to access for both the programmer and the computer
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 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?
Prevents an event’s default action from happening