JavaScript (Junior Side) Flashcards
What is the purpose of variables?
they are a way to store information so that we can come back to it later.
What is the purpose of a boolean?
To make logical decisions.
How do youdeclarea variable?
by using var, const, or let
How do you initialize (assign a value to) a variable?
By using the assignment operator ( = )
What characters are allowed in variable names?
letter, number, or dollar sign $
What does it mean to say that variable names are “case sensitive”?
capitalized and lowercase letters, even if they are the same letter, will have two different values if assigned to a variable
What is the purpose of a string?
For storing a sequence of characters that javScript will not try to interpret / creating “text”
What is the purpose of a number?
For numbers that may / will be used in mathematical operations
How do you update the value of a variable?
put the name of the variable with an assignment operator and a new value.
Do not use the “var, let, or const” keywords, because the variable has already been declared.
What does the=operator mean in JavaScript?
assigns the value of its right operand to its left operand.
What is the difference betweennullandundefined?
Null is an intentional assignment of no value.
Undefined is an empty value that JS is ‘free to use’
Why is it a good habit to include “labels” when you log values to the browser console?
For clarity when coming back to reference code at a later time.
Give five examples of JavaScript primitives
String, number, boolean, null, undefined
What data type is returned by an arithmetic operation?
Number
What is string concatenation?
adding strings together to make a new string
Does concat change the original string?
No, it makes new strings that consist of the previous strings
What purpose(s) does the+plus operator serve in JavaScript?
math or concatenation
What data type is returned by comparing two values (<,>,===, etc)?
boolean
What does the+=”plus-equals” operator do?
makes a lasting change / adds and assigns
What are objects used for?
a way to group together sets of data that are related to each other
What are object properties?
variables inside of an object
Describe object literal notation.
curly brace, then a property, the a colon, then a comma, then the next property declaration, etc., ended by a closing curly brace
How do you remove a property from an object?
use the delete operator
What are the two ways to get or update the value of a property?
dot notation or bracket notation
what are arrays used for?
for storing a sequence of related information for use at a later time
describe array literal notation
[ ‘word’, ‘word2’ ]
how are arrays different from “plain” objects?
arrays are indexed/ have an order, objects are not
what number represents the first index of an array?
0
what is the length property of an array?
arrayName.length, a true count of items that are indexed in the array
how do we calculate last index of an array?
array.length -1
What is a function in JavaScript?
Functions allow you to package up code for use later in your program.
Describe the parts of a function definition.
function keyword
optional name
parameters (separated , by , commas)
start of the code block ( { ) with a return…maybe
optional return statement
close of the code block (})
Describe the parts of a function call.
function name
( ) parenthesis
arguments list
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call just has the name and arguments
function definition has name, parameters, { } , and code block
What is the difference between a parameter and an argument?
when we define a function, we declare parameters and that when we call a function, we pass it arguments
parameter is placeholder, argument is the actual value
Why are function parameters useful?
They give us more control over the function
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.
- Prevents any more code in the function’s code block from being run.
What is a method?
A method is a function which is a property of an object.
why do we log things to the console?
its a debugging tool
What is a method?
a function stored in the property of an object
How is a method different from any other function?
Methods must be attached to an object, functions do not
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
floor method of the math object
How do you generate a random number?
Math.random( )
random method of the math object
0 0.999
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 string using a method
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 . push( ) or .pop( )
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
What is the purpose of an if statement?
to make logical decisions in code
Is else required in order to use an if statement?
No
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?
With a logical operator (either && or ||)
what is the purpose of a loop?
to repeat functionality when needed
What is the purpose of a condition expression in a loop?
to determine whether or not the loop continues repeating.
if true, loop continues, if false, loop stops.
What does “iteration” mean in the context of loops?
one full time that the code block has been run.
When does the condition expression of a while loop get evaluated?
before the loop code block executes
When does the initialization expression of a for loop get evaluated?
once before anything happens
When does the condition expression of a for loop get evaluated?
before code block of next iteration, and after the final expression
When does the final expression of a for loop get evaluated?
before the condition, and after the code block runs
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?
adds one to the initialization expression
How do you iterate through the keys of an object?
with a for…in loop
Why do we log things to the console?
For debugging purposes
What is a “model”?
A visual representation of something
Which “document” is being referred to in the phrase Document Object Model?
the HTML document / the web page itsself
What is the word “object” referring to in the phrase Document Object Model?
the objects / nodes of the document
What is a DOM Tree?
the model of a webpage
Give two examples of document methods that retrieve a single element from the DOM.
querySelector(), 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 we don’t have to query the DOM again
What console method allows you to inspect the properties of a DOM element object?
console.dir( )
dir method of the console object
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
document needs to be read before JS can interact with it.
What does document.querySelector() take as its argument and what does it return?
Takes the element name, returns the first element that matches
What does document.querySelectorAll() take as its argument and what does it return?
Takes an element name, returns a static (not live) NodeList representing a list of the document’s elements that match the specified group of selectors.
Why do we log things to the console?
for debugging purposes / so we know whats going on
What is the purpose of events and event handling?
they allow us to run code when the user interatcs with the page
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 that is passed as an argument to another function, to be called on at a later time during an event.
What object is passed into an event listener callback when the event fires?
event object
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
the top function will be called by the addEventListener method
the bottom function is being called manually in the method, which will not work
What is the className property of element objects?
it is a property that gets and sets the value of the class attribute of the specified element.
What is the event.target?
the element that dispatches the element. the point of interaction on the DOM.
How do you update the CSS class attribute of an element using JavaScript?
use the className property
What is the textContent property of element objects?
a property that is used to grab the text content from an element
How do you update the text within an element using JavaScript?
by using the textContent property
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
Why is storing information about a program in variables better than only storing it in the DOM?
Because they can be accessed at a later time / makes work easier
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?
tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.
What does submitting a form without event.preventDefault() do?
It can cause unwanted submissions of forms / actions to occur
What property of a form element object contains all of the form’s controls?
The elements() property of the form object
What property of a form control object gets and sets its value?
The elements property
What is one risk of writing a lot of code without checking to see if it works so far?
You will not catch any errors and waste time
What is an advantage of having your console open when writing a JavaScript program?
You can see errors as they appear
Does the document.createElement() method insert a new element into the page?
It creates a new element on the DOM tree
How do you add an element as a child to another element?
appendChild(pass in Dom element)
What do you pass as the arguments to the element.setAttribute() method?
attribute name, and values
What steps do you need to take in order to insert a new element into the page?
document.CreatElement()
add child elements to that
put the element to the DOM tree by appending it to a parent element using (appendChild) on the parent object
What is the textContent property of an element object for?
to create or change text content
Name two ways to set the class attribute of a DOM element.
className()
setAttribute()
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
- You can repeat functionality quickly.
2. You save time.
What is the event.target?
the target of the event
Why is it possible to listen for events on one element that actually happens to its descendent elements?
because of event delegation / the bubble effect
What DOM element property tells you what type of element it is?
the tagName property
What does the element.closest() method take as its argument and what does it return?
Takes a CSS selector as its argument, and returns the closest ancestor Element or itself, which matches the selectors. If there are no such element, null.
How can you remove an element from the DOM?
using the remove() method
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 the eventListener to the parent element
What is the affect of setting an element to display: none?
the element and its children disappear from the page
What does the element.matches() method take as an argument and what does it return?
takes a selector and returns a boolean value
How can you retrieve the value of an element’s attribute?
getAttribute()
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 need to add multiple listener events
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?
multiple conditionals would need to be used
What does JSON stand for?
Java Script Object Notation
What are serialization and deserialization?
Serializtion converts an object into a byte string, deserialization is when that data gets parsed
Why are serialization and deserialization useful?
it allows transfer of information across networks
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?
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?
The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.
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?
the same way you tell the difference between a function definition and a function call
Describe method definition syntax (structure).
it is the same as a function definition:
function name (){
return
}
Describe method call syntax (structure).
just like a function call
How is a method different from any other function?
it must be stored within the property of an object
What is the defining characteristic of Object-Oriented Programming?
What are the four “principles” of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
What is “abstraction”?
being able to work with (possibly) complex things in simple ways
What does API stand for?
application programming interface
What is the purpose of an API?
a way for computers to communicate with each other, and for users to interact with simply
What is this in JavaScript?
an implicit parameter of all JavaScript functions.
What does it mean to say that this is an “implicit parameter”?
a parameter that 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?
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 character object
How can you tell what the value of this will be for a particular function or method definition?
you dont know
How can you tell what the value of this is for a particular function or method call?
look to the left of the dot
What kind of inheritance does the JavaScript programming language use?
prototype-based
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?
because of the prototype object
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
within the prototype chain
What does the new operator do?
it instantiates a new javascript object
What property of JavaScript functions can store shared behavior for instances created with new?
the prototype property
What does the instanceof operator do?
tests whether or not the thing being evaluated was created by the “creator” that we are looking at.
“was ____ created from ____?”
what is a client?
the person making the request
what is a server?
a provider of services
Which HTTP method does a browser issue to a web server when you visit a URL?
GET request
What three things are on the start-line of an HTTP request message?
http method, request target, request version
What three things are on the start-line of an HTTP response message?
protocol version, status code, status text
What are HTTP headers?
they let let the client and the server pass additional information with an HTTP request or response.
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
Is a body required for a valid HTTP request or response message?
No
What is AJAX?
a technique for loading data into part of a page without having to refresh the entire page. The data is often sent in a format called JavaScript Object Notation (or JSON).
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
Which object is built into the browser for making HTTP requests in JavaScript?
The XMLHttpRequest object
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
the load event
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
because of prototypical inheritance
