JavaScript Flashcards
What is the purpose of variables?
Storing values under a specific name and stores data to be called upon when needed
How do you declare a variable?
Creating the variable with the keywords let const or var and giving it a name
How do you initialize (assign a value to) a variable?
Using the assignment operator(=) giving the variable a value
What characters are allowed in variable names?
Letter dollar sign or underscore, can’t start with numbers
What does it mean to say that variable names are “case sensitive”?
That variables name like score and Score are different variable names
What is the purpose of a string?
Storing a set of characters.
What is the purpose of a number?
handles numeric data types for mathematical operations
What is the purpose of a boolean?
Denote true or false, represents is or isn’t. Make decisions.
What does the = operator mean in JavaScript?
It means a variable is being assigned to a value.
How do you update the value of a variable?
You must assign the variable a new value, and not use the keyword since the variable already exists. var is only used for the first time.
What is the difference between null and undefined?
null is assigned by the developer purposefully! and means it does not exist. undefined is assigned by the browser and free to use.
Why is it a good habit to include “labels” when you log values to the browser console?
Labels describe the value or variable being logged, makes it clear what your working when you come back to the code
Give five examples of JavaScript primitives.
Boolean, int, string, null, undefined
What data type is returned by an arithmetic operation?
number
What is string concatenation?
Combines two string values together using the add operator, never changes the original makes a new string.
What purpose(s) does the + plus operator serve in JavaScript?
summing numerical data or concantenation
What data type is returned by comparing two values (<, >, ===, etc)?
Booleans, true or false
What does the += “plus-equals” operator do?
Adds the right operand to the variable and assigns the new value to the variable.
What are objects used for?
To group together a set of variables and function
What are object properties?
A variable that is inside of an object
Describe object literal notation.
Var name assignment operator(=) { ((object literal)
Properties and values seperates by : and commas separating those
};
How do you remove a property from an object?
Delete variablename.nameofproperty
What are the two ways to get or update the value of a property?
Variablename followed by period variable.propertyname or variablename[‘property’]
What are arrays used for?
to store a list of values as a variable that are USUALLY alike, and iterate through them one ate a time if needed
Describe array literal notation.
var name = [‘string’, false, 3132];
How are arrays different from “plain” objects?
arrays are a special type of object. they have key value pairs like normal objects but the key for each value in an array is its index number. you can also know the number of pieces of data with array.length. also can add additional information with the push method
What number represents the first index of an array?
0
What is the length property of an array?
the number of items in the array array.length
How do you calculate the last index of an array?
var lastIndex= arrayname.length - 1
arrayname[lastindex]
how does one acesss an array in an object
nameofarray. propertyname.arrayname[index position]
cost. rooms1.items[0]
how does one access an object in an array
costs[2].propertyname
could also be costs[2].products[0.author
What is a function in JavaScript?
a block of code that is named and accomplishes a task
Describe the parts of a function definition.
function keyword, optional name (parameter list with optional parameters) {
optional return statement
}
Describe the parts of a function call.
function name ( arguments optional ) invoked by the parantheses.
When comparing them side-by-side, what are the differences between a function call and a function definition?
function definition is the defining the code and the keyword and calling it is to actually run the code block in the defintion with parentheses and arguments
What is the difference between a parameter and an argument?
a parameter is placeholder in a function definition, an argument is what a function is called with
Why are function parameters useful?
parameters gives us muteability (ability to change) the function.
What two effects does a return statement have on the behavior of a function?
it exits the code block and also produces a value we can use in our program
Why do we log things to the console?
so that we can check our returned value, debugging tool
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 associated with objects, functions are not
How do you remove the last element from an array?
.pop() removes the last element and returns it
How do you round a number down to the nearest integer?
math.floor() returns nearest integer that is less than or equal to given number
How do you generate a random number?
Math.random()
How do you delete an element from an array?
splice(index position, number of items)
How do you append an element to an array?
push() adds the elements to the end of an array
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?
No they do not, console.log(stringname) strings are immutable
Roughly how many string methods are there according to the MDN Web docs?
a lot
Is the return value of a function or method useful in every situation?
no example pop method
Roughly how many array methods are there according to the MDN Web docs?
a lot
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?
booleans. true and false
What is the purpose of an if statement?
to check a condition true or false whether to run a certain code block
Is else required in order to use an if statement?
no it is not
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?
logical operators || &&
What is the purpose of a loop?
offer. a quick way to do something repeatedly, repeat functionality
What is the purpose of a condition expression in a loop?
a conditional expression in a loop signifies a decision to either execute the code block if condition is met or stop
for loop parts
inital expression, conditional statement,
code block
final expression
What does “iteration” mean in the context of loops?
each time the code inside the block is run
When does the condition expression of a while loop get evaluated?
before it executes the code block
When does the initialization expression of a for loop get evaluated?
before anything, one time
When does the condition expression of a for loop get evaluated?
after the initialization, before the code block, and after the final expression
When does the final expression of a for loop get evaluated?
after the code block executes and before the condition runs again
Besides a return statement, which exits its entire function block, which keyword
break;
What does the ++ increment operator do?
incremenes by 1 and adds it to the variable and reassigns to the variable
How do you iterate through the keys of an object?
for in loop
Why do we log things to the console?
to debug, and check values
What is a “model”?
a framework or representation 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?
javascript object that is modeling the html documents content
What is a DOM Tree?
all the info necessary to describe an element and its content
div which branches to children, and there child content
Give two examples of document methods that retrieve a single element from the DOM.
querySelector() and getElementById
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll() getElementsByClassName
Why might you want to assign the return value of a DOM query to a variable?
so that you can save that reference to the object in the dom tree for multiple uses
reference to the object in the dom tree is an element
What console method allows you to inspect the properties of a DOM element object?
console.dir
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
it needs to parse all the data before javascript code can access them
What does document.querySelector() take as its argument and what does it return?
it takes a string of css selector, and returns the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
takes a string of css selector and returns all matching elements
Why do we log things to the console?
to check the value and debug
What is the purpose of events and event handling?
Events are signals fired inside the browser window that notify of changes in the browser or operating system environment. event handling allows things to happen in response to that event occurring, interactivity
Are all possible parameters required to use a JavaScript method or function?
no parameters are optional
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 arguement to another function
What object is passed into an event listener callback when the event fires?
the event object which holds alll the detailed information about the event
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
reference onto the target in which the event was dispatched. console.log it.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
first one happens when an event occurs, other happens when the page loads
What is the className property of element objects?
contains the current className proprety of the element. The className property of the Element interface gets and sets the value of the class attribute of the specified element you can set a different value
How do you update the CSS class attribute of an element using JavaScript?
.className property
What is the textContent property of element objects?
all text hidden or not of the dom element
How do you update the text within an element using JavaScript?
query.text content = new value.
Is the event parameter of an event listener callback always useful?
no not always
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?m
more complicated
Why is storing information about a program in variables better than only storing it in the DOM?
they are in the same language you are working with.
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
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 triggers event, the event is fired on the form.
always present and at the top for submit event listeners
prevent default
What does the event.preventDefault() method do?
prevents default action from happening
always present and at the top for submit event listeners
What does submitting a form without event.preventDefault() do?
reloads the 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?
u don’t know which line of code in that block is wrong or if there are multiple issues
What is an advantage of having your console open when writing a JavaScript program?
you get to see errors quickly, keep track in real time
Does the document.createElement() method insert a new element into the page?
No it just creates the element node is not yet apart of the dom tree.
How do you add an element as a child to another element?
parentelement.appendchild(childelement)
What do you pass as the arguments to the element.setAttribute() method?
the arguements are the attribute name and value
What steps do you need to take in order to insert a new element into the page?
create element , configure, you must append the child elements to its parent element. create a reference to where to attach it too, query selector.
What is the textContent property of an element object for?
so you can change or get all the text properties of an object
Name two ways to set the class attribute of a DOM element.
setAttribute, element.className
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
multi-use, future use.
Give two examples of media features that you can query in an @media rule.
min width max-width
Which HTML meta tag is used in mobile-responsive web pages?
html viewport
What is the event.target?
its where the event is originated from
Why is it possible to listen for events on one element that actually happen its descendent elements?
through the concept of bubbling, event starts at a specific node at flows outward to the least specific nodes
What DOM element property tells you what type of element it is?
tagName
What does the element.closest() method take as its argument and what does it return?
event.target.closest(selector) closest selector ancestor element opposite of query selector
this method traverses the element and finds a node that matches the css selector that is passed as an arguement.
the return is the closest ancestor element.
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 that event listener to the parent element to see if the target.event && event.target.tagName == ‘ELEMENT’
What is the event.target?
event.target is where the event is fired at.
What is the affect of setting an element to display: none?
removes the element from the document flow
What does the element.matches() method take as an argument and what does it return?
the css selector as a string, it returns the appropriate boolean if it matches the selector
How can you retrieve the value of an element’s attribute?
getAttribute method arguement = string of the name of the attribute
At what steps of the solution would it be helpful to log things to the console?
to check the value of different variables, any 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?
u would have to make an event listner specifically for that tab?
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?
huge conditional block
What is JSON?
short for javascript object notation. text based format following object syntax that is a string.
What are serialization and deserialization?
serialization is the data turned into a serialized string of bytes, all in the same location. deserialization is taking those localized string of bytes and bringing back the complexities.
dog -> object {name:elly , age: 16} -> 01010101010 ——- 01010101010 -> object {name:elly , age: 16} -> dog
Why are serialization and deserialization useful?
you can store objects into memory which is then stored in disks or sent over a network.
How do you serialize a data structure into a JSON string using JavaScript?
json.stringify(object)
How do you deserialize a JSON string into a data structure using JavaScript?
json.parse(jsonobject)
How do you store data in localStorage?
localstorage.setItem(property name, property value)
How do you retrieve data from localStorage?
getItem(‘property name’)
What data type can localStorage save in the browser?
strings
When does the ‘beforeunload’ event fire on the window object?
when u close a tab/refresh tab close/crash browser, everything about to close
What is a method?
a method is a function that is a property of an object
How can you tell the difference between a method definition and a method call?
a method definition will have the code block and parameters property name : function keyword
Describe method definition syntax (structure).
var obj = {
property name: function () {
code block
}Describe method call syntax (structure).
objectname.methodName(arguements)
How is a method different from any other function?
it is associated with an object.
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods). shared environment
What are the four “principles” of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
What is “abstraction”?
The most important part of the term “abstraction” boils down to being able to work with (possibly) complex things in simple ways
What does API stand for?
Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.
What is the purpose of an API?
They abstract more complex code away from you, providing some easier syntax to use in its place.
What is this in JavaScript
implicit parameter allows us to view the object from when it is being invoked.
the value of this is determined when the function is called, not when it is defined.
What does it mean to say that this is an “implicit parameter”?
it exists without having to be declared on included in the paramter list.
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);
}
};nothing, has not been called yet.
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
its a me mario because greet is being invoked
Given the above character object, what is the result of the following code snippet? Why? var hello = character.greet; hello();
its a me, undefined!
no dot to the left , object = window. firstname property on window does not exist.
How can you tell what the value of this will be for a particular function or method definition?
can’t guarantee the value of this will be in a definition
How can you tell what the value of this is for a particular function or method call?
whatever is left of the dot, if no dot global scope, window object.
What kind of inheritance does the JavaScript programming language use?
prototypal inheritance. Javascript objects give certain behavors (methods) or data(properties) to other objects.
What is a prototype in JavaScript?
prototypes are the mechanism by which JavaScript objects inherit features from one another.
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?
by assigning them a prototype that has those methods
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
in its prototype. nearest prototypal chain down the line.
What does the new operator do?
The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
creates a new object.
value of prototype property and make that property a new property on the object called __proto__.
executes function with arguements.
it returns the object.
Creating an object with a user-defined constructor function requires two steps
- Define the object type by writing a function that specifies its name and properties. For example, a constructor function to create an object Foo might look like this:
- Create an instance of the object with new
What property of JavaScript functions can store shared behavior for instances created with new?
prototype.
What does the instanceof operator do?
the instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.
This usually means object was constructed with constructor.
What is a “callback” function?
a function that you call at some point in the future.
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
or setInterval
How can you set up a function to be called repeatedly without using a loop?
set Interval
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0, gets put into the queue immediately, will happen immediately if there is nothing else to do
What do setTimeout() and setInterval() return?
set timeout returns a timeoutID which is a positive integer value which identifies the timer created by the call to setTimeout().
setInterval returns a intervalID which is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval() to cancel the interval.
difference between settimeout and setinterval
setTimeout() is one time, setInterval is multiple times
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
What is AJAX?
group of technologies that offer asynchronous functionality to the browser.
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest object
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototypal inheritance
