JavaScript Flashcards
What is the purpose of variables?
store information for use later
How do you declare a variable?
var keyword eg var fullName
How do you initialize (assign a value to) a variable?
assignment operator =
What characters are allowed in variable names?
letters, numbers, dollar sign, underscore
What does it mean to say that variable names are “case sensitive”?
upper case and lower case are treated independntly. eg car is not the same as Car
What is the purpose of a string?
represent text
What is the purpose of a number?
represent numeric data type
What is the purpose of a boolean?
represent true or false
What does the = operator mean in JavaScript?
assignment eg var name = “jon”
How do you update the value of a variable?
variable name = (new value)
note that keyword var is not needed
What is the difference between null and undefined?
undefined is a primitive value automatically assigned to variables that have just been declared, or to formal arguments for which there are no actual arguments.
a null value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address.
Why is it a good habit to include “labels” when you log values to the browser console?
clarity in the output - makes it easier to identify.
A console log “label” is simply a short string that describes the variable or value being logged.
Give five examples of JavaScript primitives.
string, number, Boolean, undefined, null – bigint, symbol
What data type is returned by an arithmetic operation?
number
What is string concatenation?
joining together strings
What purpose(s) does the + plus operator serve in JavaScript?
addition and concatenation
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
addition assignment, adds value and assigns the result to the variable
What are objects used for?
group together a set of properties and methods
What are object properties?
tell us about the object
Describe object literal notation.
similar to css rulesets.
var hotel = {
name: "quay"
}How do you remove a property from an object?
delete keyword followed by the property name and object name
What are the two ways to get or update the value of a property?
dot notation
object.property
bracket notation
object{‘property’]
What are arrays used for?
storing a list of values that are related to each other
Describe array literal notation.
colors = [‘red’, ‘white’, ‘blue’]
How are arrays different from “plain” objects?
the key for a value in an array is its index number
order matters in an array
arrays have length property
each piece of data is not named
What number represents the first index of an array?
0
What is the length property of an array?
holds the number of items in an array
How do you calculate the last index of an array?
array.length - 1
What is a function in JavaScript?
a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output
Describe the parts of a function definition.
function keyword, name of the function, function parameters, javascript statements in curly braces
Describe the parts of a function call.
name of the function, parenthesis with parameters
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call does not need the function keyword and includes the values for the parameters
What is the difference between a parameter and an argument?
parmeter - placeholder for an argument, value is not known until argument is passed.
argument- actual values passed to the function in place of the parameter
Why are function parameters useful?
they act as placeholders
What two effects does a return statement have on the behavior of a function?
causes the function to produce a value we can use in our program
exits the code block
Why do we log things to the console?
so we can see the output (debugging tool)
What is a method?
a function as a property inside of an object
How is a method different from any other function?
method is associated with an object
How do you remove the last element from an array?
with the pop method
How do you round a number down to the nearest integer?
with the floor method
How do you generate a random number?
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 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,
console log the original string
Is the return value of a function or method useful in every situation?
no. eg push will return length of new string
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.
not equal to (!=) strict equal to (===) >< >= <=
What data type do comparison expressions evaluate to?
boolean, true or false
What is the purpose of an if statement?
evaluates a condition, if condition is true then the code block is executed
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
keyword, condition, opening curly brace
if (condition >= condition) {
}
What are the three logical operators?
logical and ( && ) logical or ( | | ) logical not ( ! )
How do you compare two different expressions in the same condition?
logical and or logical or operator
eg
((5<2) && (2>=3))
What is the purpose of a loop?
repeat a condition until the loop ends
What is the purpose of a condition expression in a loop?
loop will continue until the condition reaches a specific state or number
What does “iteration” mean in the context of loops?
running the loop once
When does the condition expression of a while loop get evaluated?
before executing the statement
When does the initialization expression of a for loop get evaluated?
once at the start
When does the condition expression of a for loop get evaluated?
before each loop iteration
When does the final expression of a for loop get evaluated?
after each iteration
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?
it increments its operand and returns a value
How do you iterate through the keys of an object?
with a for-in loop
Why do we log things to the console?
so we can see the output
What is a “model”?
a representation of something else
Which “document” is being referred to in the phrase Document Object Model?
html document
What is the word “object” referring to in the phrase Document Object Model?
data type object in javascript
All of the properties, methods, and events available for manipulating and creating web pages are organized into objects.
What is a DOM Tree?
an element plus all of its children
Give two examples of document methods that retrieve a single element from the DOM.
getElementsById(‘id’)
querySelector(‘css selector’)
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName(‘class’)
Why might you want to assign the return value of a DOM query to a variable?
it saves the browser looking through the DOM tree to find the same elements again
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?
so that the html can load before the javascript
What does document.querySelector() take as its argument and what does it return?
it takes a css selector and returns the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
it takes a css selector and returns all that match
What is the purpose of events and event handling?
create user interactivity
events - things that happen (could be user interactivity)
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
What is a callback function?
a function passed as an argument into another function, 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 selected node, you can console log or console dir
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
the top is a reference to handleClick while the bottom is being executed immediately with no parameters
What is the className property of element objects?
className getsor sets the value of the class attribute
How do you update the CSS class attribute of an element using JavaScript?
element.classname and assignment operator
What is the textContent property of element objects?
represents the text content of the node and its descendents
How do you update the text within an element using JavaScript?
element.textContent = text content
Is the event parameter of an event listener callback always useful?
no
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. html only has string data type and would need to be converted
Why is storing information about a program in variables better than only storing it in the DOM?
our program cannot be changed by the user changing text content
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 form
submit event
What does the event.preventDefault() method do?
prevents the events default behavior
