JavaScript Flashcards
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
What is the purpose of variables?
to store data for the computers to use in the future
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
How do you declare a variable?
use a keyword (var, let, const) and variable name and =
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
How do you initialize (assign a value to) a variable?
use an equal sign
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
What characters are allowed in variable names?
letter, numbers, $, underscore,
numbers cant be first
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
What does it mean to say that variable names are “case sensitive”?
Car= and car= are different variables
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
What is the purpose of a string?
for storing text that wouldn’t make sense to JavaScript
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
What is the purpose of a number?
for doing calculations
if the number is a zipcode then store as string
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
What is the purpose of a boolean?
it is for letting computers make a decision that is true or false
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
What does the = operator mean in JavaScript?
assignment operator
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
How do you update the value of a variable?
by assigning a new value to the variable name without the keyword.
let a = 2; for declaring a variable a = 5; for updating a variable (no need for keyword)
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
What is the difference between null and undefined?
- null is absents of value intentionally (ex: optional user input)
- undefined is not trustworthy
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
Why is it a good habit to include “labels” when you log values to the browser console?
to know where you’re getting values from. for organization purposes
JAVASCRIPT-PRIMITIVES-AND-VARIABLES
Give five examples of JavaScript primitives.
string, number, boolean, null, and undefined
JAVASCRIPT-OPERATORS-AND-EXPRESSIONS
What data type is returned by an arithmetic operation?
a number data
JAVASCRIPT-OPERATORS-AND-EXPRESSIONS
What is string concatenation?
glueing strings together
JAVASCRIPT-OPERATORS-AND-EXPRESSIONS
What purpose(s) does the + plus operator serve in JavaScript?
addition of numbers and concatination if strings
JAVASCRIPT-OPERATORS-AND-EXPRESSIONS
What data type is returned by comparing two values (, ===, etc)?
booleans
JAVASCRIPT-OPERATORS-AND-EXPRESSIONS
What does the += “plus-equals” operator do?
left operand = left operand + right operand
JAVASCRIPT-OBJECTS
What are objects used for?
to group together data that can represent something
JAVASCRIPT-OBJECTS
What are object properties?
variables that is glued to an object
JAVASCRIPT-OBJECTS
Describe object literal notation.
var obj = { properties: value }
JAVASCRIPT-OBJECTS
How do you remove a property from an object?
use the delete as ex: delete object.property or delete object[‘property’]
JAVASCRIPT-OBJECTS
What are the two ways to get or update the value of a property?
dot notation or bracket notation
JAVASCRIPT-ARRAYS
What are arrays used for?
storing values in a grouped list like a grocery list where orders are not essential
JAVASCRIPT-ARRAYS
Describe array literal notation.
var variable = [ ]
JAVASCRIPT-ARRAYS
How are arrays different from “plain” objects?
objects have individual assigned properties but arrays have automatic number indexes assigned
JAVASCRIPT-ARRAYS
What number represents the first index of an array?
0
JAVASCRIPT-ARRAYS
What is the length property of an array?
to find the length of an array
JAVASCRIPT-ARRAYS
How do you calculate the last index of an array?
array.length - 1
JAVASCRIPT-FUNCTION
What is a function in JavaScript?
a reusable block of code
JAVASCRIPT-FUNCTION
Describe the parts of a function definition.
keyword, optional name, optional number of parameters, code, return
JAVASCRIPT-FUNCTION
Describe the parts of a function call.
name, ( ) and arguments
JAVASCRIPT-FUNCTION
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call doesnt have keyword function and uses ( ) to call the function
JAVASCRIPT-FUNCTION
What is the difference between a parameter and an argument?
parameter = placeholder for potential value argument = actual value being placed in the argument
JAVASCRIPT-FUNCTION
Why are function parameters useful?
pass information to a function, to be able to reuse the function code block
JAVASCRIPT-FUNCTION
What two effects does a return statement have on the behavior of a function?
1. will replace the function called in that line of code. ex: function(3) = 10 var x = function(3) will become var x = 10
- stops the function entirely once a value is returned
JAVASCRIPT-METHODS
Why do we log things to the console?
to debug our code, to check if our output is as expected, etc
JAVASCRIPT-METHODS
What is a method?
function that is a property of an object
JAVASCRIPT-METHODS
How is a method different from any other function?
methods have to be called on an object, functions do not
JAVASCRIPT-METHODS
How do you remove the last element from an array?
pop( )
JAVASCRIPT-METHODS
How do you round a number down to the nearest integer?
Math.floor( )
JAVASCRIPT-METHODS
How do you generate a random number?
Math.random( )
JAVASCRIPT-METHODS
How do you delete an element from an array?
pop for last item, shift for first item, splice for specific index
JAVASCRIPT-METHODS
How do you append (to the end) an element to an array?
push
JAVASCRIPT-METHODS
How do you break a string up into an array?
split(‘ ‘)
JAVASCRIPT-METHODS
Do string methods change the original string? How would you check if you weren’t sure?
does not change the original string. to check: console.log( )
JAVASCRIPT-METHODS
Roughly how many string methods are there according to the MDN Web docs?
like 50
JAVASCRIPT-METHODS
Is the return value of a function or method useful in every situation?
no
JAVASCRIPT-METHODS
Roughly how many array methods are there according to the MDN Web docs?
a lot
JAVASCRIPT-METHODS
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
JAVASCRIPT-IF
Give 6 examples of comparison operators.
greater than equal, greater than, less than equal, less than, ==, ===
JAVASCRIPT-IF
What data type do comparison expressions evaluate to?
boolean, true or false
JAVASCRIPT-IF
What is the purpose of an if statement?
to let the computer make a decision based on conditions
JAVASCRIPT-IF
Is else required in order to use an if statement?
no
JAVASCRIPT-IF
Describe the syntax (structure) of an if statement.
if (conditions) { } else { }
JAVASCRIPT-IF
What are the three logical operators?
&& and || and !
JAVASCRIPT-IF
How do you compare two different expressions in the same condition?
&& or ||
JAVASCRIPT-LOOPS
What is the purpose of a loop?
to continuously iterate through a code block until the condition is met
JAVASCRIPT-LOOPS
What is the purpose of a condition expression in a loop?
to know when to stop the loop
JAVASCRIPT-LOOPS
What does “iteration” mean in the context of loops?
iteration = looping through once
JAVASCRIPT-LOOPS
When does the condition expression of a while loop get evaluated?
at the start of every loop
JAVASCRIPT-LOOPS
When does the initialization expression of a for loop get evaluated?
before the loop begins and only once
JAVASCRIPT-LOOPS
When does the condition expression of a for loop get evaluated?
before each iteration
JAVASCRIPT-LOOPS
When does the final expression of a for loop get evaluated?
after each iteration
JAVASCRIPT-LOOPS
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
JAVASCRIPT-LOOPS
What does the ++ increment operator do?
increments by 1
JAVASCRIPT-LOOPS
How do you iterate through the keys of an object?
for in loop
DOM-QUERYING
Why do we log things to the console?
to see what we’re doing and for debugging
DOM-QUERYING
What is a “model”?
a representation of something
DOM-QUERYING
Which “document” is being referred to in the phrase Document Object Model?
the html document
DOM-QUERYING
What is the word “object” referring to in the phrase Document Object Model?
data type
DOM-QUERYING
What is a DOM Tree?
representative chunk of the page that shows the element and their element’s configuration
DOM = model that represents an html document in the form of javascript data types
DOM-QUERYING
Give two examples of document methods that retrieve a single element from the DOM.
document. querySelector( )
document. getElementById( )
DOM-QUERYING
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll( )
DOM-QUERYING
Why might you want to assign the return value of a DOM query to a variable?
to be able to use it again in the future
DOM-QUERYING
What console method allows you to inspect the properties of a DOM element object?
console.dir( )
DOM-QUERYING
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
html loads from top to bottom and the elements need to load first
DOM-QUERYING
What does document.querySelector() take as its argument and what does it return?
a css selector and returns first one that matches
DOM-QUERYING
What does document.querySelectorAll() take as its argument and what does it return?
a css selector and returns a NodeList
DOM-EVENTS
Why do we log things to the console?
in this exercise, to debug and check if action happened
DOM-EVENTS
What is the purpose of events and event handling?
- something that happens
- to set up a list of action whenever an event occurs
DOM-EVENTS
Are all possible parameters required to use a JavaScript method or function?
no, 3rd parameter of addEventListener is optional
DOM-EVENTS
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
DOM-EVENTS
What is a callback function?
a function that is called as an argument in another function
DOM-EVENTS
What object is passed into an event listener callback when the event fires?
- object that is built in the moment as a reference of data
DOM-EVENTS
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
- the button that you interact with
- target = the dom element where the event originated from
- console.log(event.target);
- in the browser’s console
DOM-EVENTS
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick( ) )
2nd one always gets called without having to click it??
DOM-MANIPULATION
What is the className property of element objects?
property that can get or set the value of class attribute
DOM-MANIPULATION
How do you update the CSS class attribute of an element using JavaScript?
use the className property on an element
select your element.className = new value
DOM-MANIPULATION
What is the textContent property of element objects?
get or set a text element
DOM-MANIPULATION
How do you update the text within an element using JavaScript?
select your element.textContent = ‘whatever’
DOM-MANIPULATION
Is the event parameter of an event listener callback always useful?
no, if it’s not necessary, then no need
DOM-MANIPULATION
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 if we did not have variable
DOM-MANIPULATION
Why is storing information about a program in variables better than only storing it in the DOM?
makes it easier to know what’s going on in your own code. store it in javascripts in variables and use that data to influence the DOM.
JAVASCRIPT-FORMS
What event is fired when a user places their cursor in a form control?
focus event
JAVASCRIPT-FORMS
What event is fired when a user’s cursor leaves a form control?
blur event
JAVASCRIPT-FORMS
What event is fired as a user changes the value of a form control?
input event
JAVASCRIPT-FORMS
What event is fired when a user clicks the “submit” button within a form?
submit
JAVASCRIPT-FORMS
What does the event.preventDefault() method do?
stops the default behavior from happening or in this form case = browsers from refreshing
JAVASCRIPT-FORMS
What does submitting a form without event.preventDefault() do?
the page will refresh because of the action attribute (outdated)
JAVASCRIPT-FORMS
What property of a form element object contains all of the form’s controls.
elements property
JAVASCRIPT-FORMS
What property of a form control object gets and sets its value?
value
JAVASCRIPT-FORMS
What is one risk of writing a lot of code without checking to see if it works so far?
wont be able to see if your code works
JAVASCRIPT-FORMS
What is an advantage of having your console open when writing a JavaScript program?
can check to see if your code works as you’re working on it
DOM-CREATION
Does the document.createElement() method insert a new element into the page?
no, still have to append it
DOM-CREATION
How do you add an element as a child to another element?
appendChild method
DOM-CREATION
What do you pass as the arguments to the element.setAttribute() method?
setAttribute(attribute, value)
DOM-CREATION
What steps do you need to take in order to insert a new element into the page?
var h1 = document.createElement('h1')
someDiv.appenchild(h1)DOM-CREATION
What is the textContent property of an element object for?
to get or set text content
DOM-CREATION
Name two ways to set the class attribute of a DOM element.
- someElement.className = ‘classssss’
- setAttribute (‘className’, ‘classVaues’)
DOM-CREATION
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
- saves a lot of time
- makes it reusable
DOM-EVENT-DELEGATION
What is the event.target?
where the event originated from
DOM-EVENT-DELEGATION
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
DOM-EVENT-DELEGATION
What DOM element property tells you what type of element it is?
event.target.tagName
DOM-EVENT-DELEGATION
What does the element.closest() method take as its argument and what does it return?
closest CSS selector and matches with closest ancestor (parent) element
DOM-EVENT-DELEGATION
How can you remove an element from the DOM?
someElement.remove( )
DOM-EVENT-DELEGATION
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?
addEventListener to the parent element, use tagName method to check if you’re targeting the right element
JAVASCRIPT-VIEW-SWAPPING
What is the event.target?
where the event originated from
JAVASCRIPT-VIEW-SWAPPING
What is the affect of setting an element to display: none?
it will hide the element from the viewer
JAVASCRIPT-VIEW-SWAPPING
What does the element.matches() method take as an argument and what does it return?
css selectors and returns a boolean value
JAVASCRIPT-VIEW-SWAPPING
How can you retrieve the value of an element’s attribute?
call it on the dom element
JAVASCRIPT-VIEW-SWAPPING
At what steps of the solution would it be helpful to log things to the console?
every step
JAVASCRIPT-VIEW-SWAPPING
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?
have to add event listener for each individual element
JAVASCRIPT-VIEW-SWAPPING
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?
have to write many conditional statements
JAVASCRIPT-AND-JSON
What is JSON?
JavaScript Object Notation and lets us store them that is not in memory space
JAVASCRIPT-AND-JSON
What are serialization and deserialization?
- stringifying and parsing data for network transmission
- breaks up data to put them into 1 sequence from beginning to end to be able to transmit
JAVASCRIPT-AND-JSON
Why are serialization and deserialization useful?
breaks down data to byte size and easy to transmit data and load data throughout the web and store data
JAVASCRIPT-AND-JSON
How do you deserialize a JSON string into a data structure using JavaScript?
use JSON.parse(someJSONString)
returns an array or object
JAVASCRIPT-LOCAL-STORAGE
How do you store data in localStorage?
localStorage.setItem( keyName , keyValue )
JAVASCRIPT-LOCAL-STORAGE
How do you retrieve data from localStorage?
localStorage.getItem( keyName )
JAVASCRIPT-LOCAL-STORAGE
What data type can localStorage save in the browser?
-strings
JAVASCRIPT-LOCAL-STORAGE
When does the ‘beforeunload’ event fire on the window object?
- is fired when the window, the document and its resources are about to be unloaded.
JAVASCRIPT-CUSTOM-METHODS
What is a method?
method is a function of a property
JAVASCRIPT-CUSTOM-METHODS
How can you tell the difference between a method definition and a method call?
- a method definition is an anonymous function of the value of a property
- method call is property.method (parameter)
JAVASCRIPT-CUSTOM-METHODS
Describe method definition syntax (structure).
var object = {
methodName: function (parameters) {
function block code
return something;
}
};JAVASCRIPT-CUSTOM-METHODS
Describe method call syntax (structure).
object.method(parameters)
JAVASCRIPT-CUSTOM-METHODS
How is a method different from any other function?
it’s not.
JAVASCRIPT-CUSTOM-METHODS
What is the defining characteristic of Object-Oriented Programming?
it’s a concept based on objects which contain data (known as attributes or properties) and code (known as methods)
JAVASCRIPT-CUSTOM-METHODS
What are the four “principles” of Object-Oriented Programming?
Abstraction, encapsulation, inheritance, polymorphism
JAVASCRIPT-CUSTOM-METHODS
What is “abstraction”?
being able to work with (possibly) complex things in simple ways.
JAVASCRIPT-CUSTOM-METHODS
What does API stand for?
Application Programming Interface
JAVASCRIPT-CUSTOM-METHODS
What is the purpose of an API?
connects computers to computer programs
JAVASCRIPT-THIS
What is ‘this’ in JavaScript?
‘this’ refers to the current object being worked on currently
JAVASCRIPT-THIS
What does it mean to say that ‘this’ is an “implicit parameter”?
can use ‘this’ even though it is not listed as a parameter (which shouldnt have a parameter named ‘this’)
JAVASCRIPT-THIS
When is the value of ‘this’ determined in a function; call time or definition time?
call time
JAVASCRIPT-THIS
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);
}
};
since greet function is never called, the value of ‘this’ is nothing since ‘this’ only gets a value when something is called.
JAVASCRIPT-THIS
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
It’s a me, Mario.
JAVASCRIPT-THIS
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet; hello();
it’s a me ‘undefined’
- because ‘this’ only refers to the object from the left of the dot and nothing
JAVASCRIPT-THIS
How can you tell what the value of ‘this’ will be for a particular function or method definition?
we dont know yet until it is called
JAVASCRIPT-THIS
How can you tell what the value of ‘this’ is for a particular function or method call?
it would be the object that it is working with (object to the left of the dot)
JAVASCRIPT-PROTOTYPES
What kind of inheritance does the JavaScript programming language use?
prototype based
JAVASCRIPT-PROTOTYPES
What is a prototype in JavaScript?
JAVASCRIPT-PROTOTYPES
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?
JAVASCRIPT-PROTOTYPES
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
in the prototype
JAVASCRIPT-CONSTRUCTOR
What does the new operator do?
The new operator lets developers create an instance of a object
- 4 steps that the new operator will take
- create a black, plain JS object
- Points new Instances to the constructor function’s prototype property
- ‘this’ will now be the new object
- if you do not return anything(99.99% wont return anything) then object is returned instead
JAVASCRIPT-CONSTRUCTOR
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
JAVASCRIPT-CONSTRUCTOR
What does the instanceof operator do?
check whether an object is an instance of a particular class or not.
JAVASCRIPT-TIMERS
What is a “callback” function?
a function passed into another function as an argument
JAVASCRIPT-TIMERS
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(function, timeInMiliseconds)
JAVASCRIPT-TIMERS
How can you set up a function to be called repeatedly without using a loop?
setInterval(function, imeInMiliseconds)
JAVASCRIPT-TIMERS
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
JAVASCRIPT-TIMERS
What do setTimeout() and setInterval() return?
HTTP-MESSAGES
What is a client?
a desktop computer or workstation that is capable of obtaining information and applications from a server.
a program that is requesting data
HTTP-MESSAGES
What is a server?
A server is a computer program or device that provides a service to another computer program and its user, also known as the client.
HTTP-MESSAGES
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
HTTP-MESSAGES
What three things are on the start-line of an HTTP request message?
HTTP method, the request-target (website) and what version
ex:
GET / google.com / 1.0
HTTP-MESSAGES
What three things are on the start-line of an HTTP response message?
a start line describing the message, a block of headers containing attributes, and an optional body containing data.
protocol version, status code, status text
HTTP-MESSAGES
What are HTTP headers?
a field of an HTTP request or response that passes additional context and metadata about the request or response. For example, a request message can use headers to indicate it’s preferred media formats, while a response can use header to indicate the media format of the returned body.
HTTP-MESSAGES
Where would you go if you wanted to learn more about a specific HTTP Header?
mdn
HTTP-MESSAGES
Is a body required for a valid HTTP request or response message?
no
JAVASCRIPT-AJAX
What is AJAX?
an application that allows you to update 1 part of the website without having to reload the entire page
JAVASCRIPT-AJAX
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
JAVASCRIPT-AJAX
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
JAVASCRIPT-AJAX
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
‘load’ event
JAVASCRIPT-AJAX
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototypal inheritence
