JavaScript Flashcards
What is the purpose of variables?
to store data
How do you declare a variable?
use keyword “var”
How do you initialize (assign a value to) a variable?
var variable = something
What characters are allowed in variable names?
letter, digits, underscore, dollar signs
What does it mean to say that variable names are “case sensitive”?
they must be recalled exactly as they were saved
What is the purpose of a string?
store and manipulate text
What is the purpose of a number?
store and manipulate data
What is the purpose of a boolean?
to register something as true or false
What does the = operator mean in JavaScript?
it is assigning a value to a variable name
What is the difference between null and undefined?
null is intentionally given a non-existing value, undefined unintentionally lacks a value
Why is it a good habit to include “labels” when you log values to the browser console?
so that you have a better idea of what issues may have occurred when debugging
Give five examples of JavaScript primitives.
string, number, boolean, undefined, null
to update a variable
use variable followed by value… don’t need to use ‘var’ again
What data type is returned by an arithmetic operation?
a number
What is string concatenation?
the combining of two or more strings
What purpose(s) does the + plus operator serve in JavaScript?
it adds a value to another variable/value
What data type is returned by comparing two values (<, >, ===, etc)?
boolean
What does the += “plus-equals” operator do?
adds a value to a variable and re-assigns the variable
What are objects used for?
group together set of variables and functions
What are object properties?
a variable within an object
Describe object literal notation.
a saved variable followed by curly brace with key-value properties and methods (functions)
How do you remove a property from an object?
delete then object.property
What are the two ways to get or update the value of a property?
either dot or bracket notation
What are arrays used for?
storing a list of values
Describe array literal notation.
var name = [skhf,fskdjhf,skdjfh]
How are arrays different from “plain” objects?
do not use colons, do not use curly braces, etc
arrays are indexed, objects aren’t
What number represents the first index of an array?
0
What is the length property of an array?
array.length… tells you how many items are listed
How do you calculate the last index of an array?
array.length - 1
What is a function in JavaScript?
a set of statements that perform a task or calculate a value based off their parameters, and code block
Describe the parts of a function definition.
parts of a function definition include function name, parameters/arguments, curly brace, optional return statement, and the code
Describe the parts of a function definition.
parts of a function definition include function name, parameters/arguments, curly brace, optional return statement, and the code
Describe the parts of a function call.
functionName(optional arguments)
When comparing them side-by-side, what are the differences between a function call and a function definition?
no function key word and no brackets in function call… definition does have it
What is the difference between a parameter and an argument?
parameter has no value while argument does
Why are function parameters useful?
to tell you what type of value to input into a function
What two effects does a return statement have on the behavior of a function?
stops the code from running any longer, causes function to produce a value we can use in our program
Why do we log things to the console?
so that we can see the output of our code and make sure things are functioning properly
What is a method?
a function which is a property of an object…. essentially a built in function
How is a method different from any other function?
property of an object while other functions are hanging in space
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(1,0) 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, you assign the value of the string method response to a new variable and call the original string if you want to see it
Roughly how many string methods are there according to the MDN Web docs?
Around 50
roughly how many array methods are there according to the MDN web docs
40-50
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
is a return value useful in every situation
not necessarily, you might just pop something off an array and thats it
Give 6 examples of comparison operators.
< > <= >= != = ===etc
What data type do comparison expressions evaluate to?
booleans (true or false)
What is the purpose of an if statement?
if that condition is met, then run the following code
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if keyword followed by parentheses, rule, curly brace, code
What are the three logical operators?
“and” “or”, and “not”
How do you compare two different expressions in the same condition?
have both expressions in the same parenthesis
What is the purpose of a loop?
run repeated code under specific conditions
What is the purpose of a condition expression in a loop?
tells you requirements on if the loop should run and how long the loop should be run
What does “iteration” mean in the context of loops?
each “time” the code is executed
When does the condition expression of a while loop get evaluated?
beginning of each iteration
When does the initialization expression of a for loop get evaluated?
the start of the loop
When does the condition expression of a for loop get evaluated?
after initialization at first, then after every iteration
When does the final expression of a for loop get evaluated?
after the iteration
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break keyword
What does the ++ increment operator do?
increments by 1
How do you iterate through the keys of an object?
for-in loop
Why do we log things to the console?
so that we can see the output of our actions
What is a “model”?
recreation of something
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?
every tree node… the separate parts of the html
What is a DOM Tree?
a layout of all html objects
Give two examples of document methods that retrieve a single element from the DOM.
document.getElementById()
document.querySelector()
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.getElementsByClassName()
document.querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
so that you can call that variable and change another attribute about it…. or just to refer back to it
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?
code is executed line by line so it being at the top will slow down page rendering
What does document.querySelector() take as its argument and what does it return?
argument: css selector
returns: first matching element
What does document.querySelectorAll() take as its argument and what does it return?
argument: css selector
returns: all matching elements
What is the purpose of events and event handling?
so that when a specific event has occurred, we can have a desired outcome
Are all possible parameters required to use a JavaScript method or function?
no, they can be called anonymously
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 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 element being selected…
can console.log(event.target)
What is the difference between these two snippets of code?
one of these will actually call the function the other will not
What is the className property of element objects?
it has access to the name of the class
How do you update the CSS class attribute of an element using JavaScript?
element.className = ‘sdfs’
How do you update the text within an element using JavaScript?
element.textContent = ‘dsgs’
Is the event parameter of an event listener callback always useful?
useful but not always required…. not always gonna be doing something with it
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
Why is storing information about a program in variables better than only storing it in the DOM?
so that we, and other code readers have a better idea of the importance of each variable and its corresponding actions
What does the transform property do?
manipulate elements in css
Give four examples of CSS transform functions.
rotate, scale, skew, translate
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay
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 browser from automatically reloading page with form values in the url…. depends default behavior of event
What does submitting a form without event.preventDefault() do?
form values will be in the URL… default behavior will occur… reload the form/page
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 work improperly and you will struggle more to find the solution
What is an advantage of having your console open when writing a JavaScript program?
can see the output of your code
Does the document.createElement() method insert a new element into the page?
no, you must append the element for it to be included in the document
How do you add an element as a child to another element?
element.appendChild()
What do you pass as the arguments to the element.setAttribute() method?
element.setAttribute(‘name’, ‘value’)
What steps do you need to take in order to insert a new element into the page?
document.createElement, then append that to the actual pages element
What is the textContent property of an element object for?
to create/manipulate actual text
Name two ways to set the class attribute of a DOM element.
.setAttribute() and .className = ‘’
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
you can call that function to over and over again without redoing all the code,
and reusability
Give two examples of media features that you can query in an @media rule.
min-width and max-width
Which HTML meta tag is used in mobile-responsive web pages?
<meta></meta>
What is the event.target?
the full element being selected
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling goes from child up to parent
What DOM element property tells you what type of element it is?
event.tagName()
What does the element.closest() method take as its argument and what does it return?
parameter is what you are looking for and it returns the closest ancestor that meets that criteria
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?
add event listener to the parent and search for event target with the wanted tag name
What is the event.target?
the actual target of the event listener
What is the affect of setting an element to display: none?
it will not be visible
What does the element.matches() method take as an argument and what does it return?
takes css selector
returns boolean
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?
you would listen for each tab click directly
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?
use if-else statements
What is a breakpoint in responsive Web design?
the point in which we want the css changes
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
it is relative to the screen size (tablet, phone, etc)
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
because css is read from top to bottom
What is JSON?
data format that takes form of string and syntax of javascript object
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.
Deserialization is the reverse process: turning a stream of bytes into an object in memory.
Why are serialization and deserialization useful?
because it allows you to universally transmit data
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 do you store data in localStorage?
localStorage.setItem()
How do you retrieve data from localStorage?
localStorage.getItem()
What data type can localStorage save in the browser?
JSON string
When does the ‘beforeunload’ event fire on the window object?
before the window, document being unloaded/ refreshed or everything is about to get taken off the page
What is a method?
a function which is a property of an object
How can you tell the difference between a method definition and a method call?
method definition is a property with the function assigned, method call is object name with the property called on it ()
Describe method definition syntax (structure).
methodName, function() { code }
Describe method call syntax (structure).
object.method()
How is a method different from any other function?
it is a property of an object
What is the defining characteristic of Object-Oriented Programming?
contains data as properties, and behaviors as methods
What are the four “principles” of Object-Oriented Programming?
abstraction, encapsulation, inheritance, polymorphism
What is “abstraction”?
working with complex things in simple ways
What does API stand for?
application programming interface
What is the purpose of an API?
give users a way to interact with the system in a simplified efficient way
easy way to get and transmit data easily
What is this in JavaScript?
a reference to the object being used in javascript… if there is nothing to the left of the dot, then it is referring to the window
What does it mean to say that this is an “implicit parameter”?
it is not explicitly expressed in the functions parameters/arguments but you still have access to it
When is the value of this determined in a function; call time or definition time?
at 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);
}
};
the window, until we call it with character.greet
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
it should return the string
