JavaScript Flashcards
What is the purpose of variables?
to hold data (numbers, strings, booleans)
How do you declare a variable?
by creating a variable name
How do you initialize (assign a value to) a variable?
adding an equal sign next the variable name and then giving it a value/data
What characters are allowed in variable names?
letters, $, numbers but we shouldn’t use numbers
What does it mean to say that variable names are “case sensitive”?
it means that the capitalization needs to be the same in order to call that variable (ex. var myName and var MyName is two different variables)
What is the purpose of a string?
it holds the data type of letters and other characters
What is the purpose of a number?
it holds the data type of numbers (integers, decimals, etc)
What is the purpose of a boolean?
it holds the data type of one of two values, true or false
What does the = operator mean in JavaScript?
a value is being assigned to a variable
How do you update the value of a variable?
by assigning it to a new value
What is the difference between null and undefined?
null is subject to change, there is nothing but it could change into something. while undefined is literally nothing
Why is it a good habit to include “labels” when you log values to the browser console?
so that you won’t get confused to what is being logged
Give five examples of JavaScript primitives.
string, number, boolean, null, undefined
What data type is returned by an arithmetic operation?
a number
What is string concatenation?
when two or more strings are added together
What purpose(s) does the + plus operator serve in JavaScript?
used to add one value to another
What data type is returned by comparing two values (<, >, ===, etc)?
boolean
What does the += “plus-equals” operator do?
it adds and re-assigns a new value to a variable
What are objects used for?
to hold a set of variables that all link to one thing/object
What are object properties?
it tells us about the object, stores info ab the object (ex. name:, age:,)
Describe object literal notation.
an array of keys and values
How do you remove a property from an object?
using the delete operator
What are the two ways to get or update the value of a property?
using a dot notation or bracket notation (ex. example.name, example[‘name’])
What are arrays used for?
to store multiple values
Describe array literal notation.
values within brackets [ ]
(ex. var colors = [‘red’, ‘white’, ‘blue’]
How are arrays different from “plain” objects?
arrays store actual variables in an index starting from 0
What number represents the first index of an array?
0
What is the length property of an array?
it shows the amount of variables inside of an array
How do you calculate the last index of an array?
by subtracting the length of an array by 1
(ex. var lastIndex = example.length -1;)
What is a function in JavaScript?
it is a “power” tool, it is used to run a sequence of code when it is called
Describe the parts of a function definition.
a function definition is the name used for that function so you have something to call it, also contains parameters
(ex. function sayHello(name) {} )
Describe the parts of a function call.
you can call a function using the function definition and parenthesis (ex. sayHello(‘Tim’) )
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call has the value inside(a parameter) the parenthesis while the function definition has a variable (argument) inside
What is the difference between a parameter and an argument?
a parameter is like a placeholder for the value like a variable, an argument has a value. when we define a function we declare a parameter, when we call a function we pass it arguments
Why are function parameters useful?
it’s a placeholder so that we know what will come out as an argument
What two effects does a return statement have on the behavior of a function?
it produces a value for us to use and it prevents any more code in the function’s code block to run
Why do we log things to the console?
so that we able to see what the code is producing
What is a method?
it is a function which is a property of an object
How is a method different from any other function?
methods are associated with objects while function just performs a task when called
How do you remove the last element from an array?
using the pop() method
How do you round a number down to the nearest integer?
using the Math.floor() method
How do you generate a random number?
using the Math.random() method
How do you delete an element from an array?
using the slice() , pop(), shift() method
How do you append an element to an array?
using the push() method
How do you break a string up into an array?
using the split() method
Do string methods change the original string? How would you check if you weren’t sure?
string methods doesn’t change the original string. to double check you can log it to the console
Roughly how many string methods are there according to the MDN Web docs?
about 50
Is the return value of a function or method useful in every situation?
no
Roughly how many array methods are there according to the MDN Web docs?
about 40
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?
so that the code will only run if the requirements are met
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if (x = y) {
return ‘yay;
}
What are the three logical operators?
&&, ||, !
How do you compare two different expressions in the same condition?
by using a logical operator && or | |
What is the purpose of a loop?
to run code over and over until the outcome is false or when it is capped
What is the purpose of a condition expression in a loop?
to see if the expression is true or not so it knows when to stop
What does “iteration” mean in the context of loops?
a sequence of code run repeatidly
When does the condition expression of a while loop get evaluated?
after the initialization expression
When does the initialization expression of a for loop get evaluated?
after the incrementation in the final expression or at the beginning of the iteration if it is the first time
When does the condition expression of a for loop get evaluated?
before starting a new iteration
When does the final expression of a for loop get evaluated?
after the iteration of the loop
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?
goes up 1
How do you iterate through the keys of an object?
using for in loops
Why do we log things to the console?
it is a debugger, it helps inspect a certain element
What is a “model”?
a model is the looks and design of a document that is being put on a page from memory. models are made with objects
Which “document” is being referred to in the phrase Document Object Model?
the document that is in the script element
What is the word “object” referring to in the phrase Document Object Model?
the nodes
What is a DOM Tree?
a dom tree consists of multiple nodes each representing an text content, elements, attributes, etc.
Give two examples of document methods that retrieve a single element from the DOM.
document.querySelector()
document.getElementById()
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
it is easier to console log and console dir
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?
because html loads top to bottom and you want everything to load before you can use dom elements
What does document.querySelector() take as its argument and what does it return?
a css selector and returns the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
a css selector and returns all matching elements
What is the purpose of events and event handling?
it dictates an action that follow an event (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?
element.addEventListener()
What is a callback function?
a function passed into another function as an argument, which is then called 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?
the event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
a reference to the specific element in the document (whether its a class, id, input, etc). if we are not sure we can log it into the console, more info at mdn
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
the second one will return the result of the function
What is the className property of element objects?
it updates the class for the element
How do you update the CSS class attribute of an element using JavaScript?
you use the .className next to the variable that has the element selected
What is the textContent property of element objects?
updates the text content of the element being selected
How do you update the text within an element using JavaScript?
you use .textContent next to the variable that has the element selected
Is the event parameter of an event listener callback always useful?
no, sometimes this will limit what you can do
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
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’
What does the event.preventDefault() method do?
prevents the default action
What property of a form element object contains all of the form’s controls.
dot notations of the properties
What property of a form control object gets and sets its value?
What is one risk of writing a lot of code without checking to see if it works so far?
you could be making mistakes along the way without realizing then you have to change everything. wastes time
Does the document.createElement() method insert a new element into the page?
no it does not
How do you add an element as a child to another element?
appendChild()
What do you pass as the arguments to the element.setAttribute() method?
the attribute you want to set and the value
What steps do you need to take in order to insert a new element into the page?
createElement(), setAttribute(), appendChild()
What is the textContent property of an element object for?
to update the text content of the object
Name two ways to set the class attribute of a DOM element.
setAttribute() or className
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
so that we can just call it multiple times easily
What is the event.target?
it shows the event that is being targeted during the bubbling and capture phase
Why is it possible to listen for events on one element that actually happen its descendent elements?
because if we want to target a specific element within the parent element we can use event.target to do so (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?
it takes a css selector and it returns the closest specified selector
How can you remove an element from the DOM?
Element.remove()
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?
create a div that holds everything inside and then select that div and add the event listener to it
What is the affect of setting an element to display: none?
it removes the element from the page
What does the element.matches() method take as an argument and what does it return?
it takes a selector and it returns true or false
How can you retrieve the value of an element’s attribute?
getAttribute()
At what steps of the solution would it be helpful to log things to the console?
after 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?
querySelect each and every element?
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?
a lot of if else statements
What is JSON?
a text based data with object syntax
What are serialization and deserialization?
converting the data into bytes so you can save it on a local drive. deserialization is the opposite
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
How do you deserialize a data structure into a JSON string using JavaScript?
JSON.parse()
How do you store data in localStorage?
setItem()
How do you retrieve data from localStorage?
getItem()
What data type can localStorage save in the browser?
JSON strings
When does the ‘beforeunload’ event fire on the window object?
when the window/document is about to be unloaded
What is a method?
a method is a function which is the property of an object
How can you tell the difference between a method definition and a method call?
method definition is where you create your own custom methods, when you call a method you call it of the object
(object.method())
Describe method definition syntax (structure).
var obj = {
property: function () {
return example;
}
}
Describe method call syntax (structure).
object.method()
How is a method different from any other function?
methods are associated with objects while functions are not
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods)
What are the four “principles” of Object-Oriented Programming?
abstraction, encapsulation, inheritance, polymorphism
What is “abstraction”?
being able to do complex things in simple ways
What does API stand for?
application programming interface
What is the purpose of an API?
an API simplifies programming by abstracting the underlying implementation and only exposing objects or actions the developer need
What is this in JavaScript?
this is an implicit parameter of all Javascript functions
What does it mean to say that this is an “implicit parameter”?
that it is available in a function’s code block even though it was never included in the function’s parameter list or declared with var
When is the value of this determined in a function; call time or definition time?
call time
What does this refer to in the following code snippet?
var character = {
firstName: ‘Mario’,
greet: function () {
var message = ‘It's-a-me, ‘ + this.firstName + ‘!’;
console.log(message);
}
};
it will be the window until we call it then it will be the variable character
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
‘It’s a me, Mario!’
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
undefined
How can you tell what the value of this will be for a particular function or method definition?
technically you can’t until you call it but we assume that it is the object that the this is in
How can you tell what the value of this is for a particular function or method call?
if it is in a function code block it is part of a function but if it is not then it is for a method call
What kind of inheritance does the JavaScript programming language use?
prototype-base
What is a prototype in JavaScript?
an object that contains properties and (predominantly) methods that can be used by other objects
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on strings, arrays, and numbers?
inheritance from the prototype chain
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
the prototype
What does the new operator do?
it creates a new instance for user-defined objects that has a constructor function
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
What does the instanceof operator do?
it checks to see if the prototype property of the constructor matches with the prototype chain of an object and it returns a boolean
What is a “callback” function?
a function that goings in another function as an argument
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
setTimeout()
How can you set up a function to be called repeatedly without using a loop?
adding to the setInterval() as a callback function
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0 so it would execute immediately
What do setTimeout() and setInterval() return?
it returns an id (timeoutID and intervalID) so that it can be identified and cleared using clearInterval() or clearTimeout()
