JavaScript Flashcards
What is the purpose of variables?
Variable is a container for a value, like a number we might use in a sum, or a string that we might use as a part of a sentence.
How do you declare a variable?
We type the keyword (var, let, const) followed by the name you want to call your variable.
How do you initialize (assign a value to) a variable?
First type the variable name, followed by the equals sign(=), followed by the value you want to give it.
Example: var firstName = ‘Dylan’;
What characters are allowed in variable names?
letters, numbers (cannot start with a number!) dollar sign($), or an underscore
What does it mean to say that variable names are “case sensitive”?
Variable names care about the case sensitivity of their names, meaning a variable named score and Score would be different because of the capitalization of the letter S in score.
What is the purpose of a string?
Strings are pieces of text, they must be wrapped within quote marks.
What is the purpose of a number?
calculating numbers, doing math stuff
What is the purpose of a boolean?
True or False values, they are generally used to test a condition, after which code is run as appropriate.
What does the = operator mean in JavaScript?
1 equal sign is used for assignment of variables
How do you update the value of a variable?
Once the variable has been initialized, you can change (or update) that value by giving it a different value.
What is the difference between null and undefined?
Null means empty can only be assigned, undefined means a variable is declared but has no actual arguments.
Why is it a good habit to include “labels” when you log values to the browser console?
A label in the console.log is a simple way to describe the variable or value being logged.
Give five examples of JavaScript primitives:
string, number, boolean, null, and undefined
What data type is returned by an arithmetic operation?
single numerical value (number)
What is string concatenation?
the process of appending one string to the end of another string and so on.
What purpose(s) does the + operator serve in JavaScript?
- addition in math
- string concatenation
What data type is returned by comparing two values (< , > , === . etc)?
boolean ( true or false )
What does += “plus equals” operator do?
+= or “plus-equals” adds the value of the right operand to a variable and assigns the result to the variable. The types of the two operands determine the behavior of the addition assignment operator.
What are objects used for?
It is used to store various keyed collections and more complex entities
What are object properties?
Properties are the values associated with a JavaScript object.
Describe the object literal notation:
The Object literal notation is basically an array of key:value pairs, with a colon separating the keys and values, and a comma after every key:value pair, except for the last, just like a regular array. Values created with anonymous functions are methods of your object.
How do you remove a property from an object?
delete operator
What are two ways to get or update the value of an object property?
dot notation and bracket notation
What are arrays used for?
Storing a collection of multiple items under a single variable name
Describe the array literal notation:
var arrayName = [ ];
separate indexes by commas
How are arrays different from “plain” objects?
Arrays have an order, stored within square brackets, have numeric indexes
What number represents the first index of an array?
0
What is the length property of an array?
returns the length of the array (counts each index and returns number value)
How do you calculate the last index of an array?
var variableName = array[array.length - 1]
subtract 1 from length of the array
Describe the parts of a function definition:
function (keyword) optionalName(parameters){
(code)
return
};Describe the parts of a function call
functionName(arguments,arguments);
-arguments are optional
When comparing them side-by-side, what are the differences between a function call and a function definition?
What is the difference between a parameter and an argument?
Why are function parameters useful?
they provide placeholders when writing code
What two effects does a return statement have on the behavior of a function?
1) it exits the functions code block
2) it gives back a value
Why do we log things to the console?
console.log is a debugging tool to check for errors
What is a method?
a method is a function which is a property of an object
How is a method different from any other function?
- methods are functions
- methods are attached to an object
How do you remove the last element from an array?
.pop()
How do you round a number down to the nearest integer?
math.floor()
How do you generate a random number?
math.random()
How do you delete an element from an array?
.splice()
How do you append an element to an array?
.push()
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?
They remain the same unless you assign it to a new variable. You can check by console.log()
Roughly how many string methods are there according to the MDN web docs?
around 30 string methods
Is the return value of a function or method useful in every situation?
NO
Roughly how many array methods are there according to MDN web docs?
around 25 array methods
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:
Is Equal to (==) is not equal to (!=) Greater than (>) Less than (=) Less than or equal to (<=)
What data type do comparison expressions evaluate to?
Booleans (true or false)
What is the purpose of an IF statement?
If statement is a decision-making statement that guides a program to make decisions based on specified criteria.
is ELSE required in order to use an IF statement?
NO
Describe the syntax of an IF statement:
if (condition) { return}
What are the three logical operators?
Logical And (&&) Logical Or (||) Logical Not (!)
How do you compare two different expressions in the same condition?
Logical And (&&) or Logical OR (||)
What is the purpose of a loop?
A loop is a programming structure that repeats a sequence of instruction until a specific condition is met.
What is the purpose of a condition expression in a loop?
to check if the code needs to keep iterating
What does “iteration” mean in the context of loops?
repetition of the for loop code block
When does the condition expression of a while loop get evaluated?
before each iteration of the loop
When does the initialization expression of a for loop get evaluated?
BEFORE ANYTHING , ONLY HAPPENS ONE TIME, it happens in the beginning
When does the condition expression of a FOR loop get evaluated?
after initialization, before each iteration the condition is checked to allow the loop to get running until condition is met.
When does the final expression of a FOR loop get evaluated?
at the end of each iteration and before the condition is checked again.
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 (value of variable goes up by 1 and assigns that to new variable)
ex. var i = 0
i++
i now equals 1.
How do you iterate through the keys of an object?
FOR IN loop
Why do we log things to the console?
We use it to debug our code and log our progress
What is a ‘model’?
Example of a structure, representation of an object
Which document is being referred to in the phrase Document Object Model?
HTML
What is the word ‘object’ referring to in the phrase Document Object Model?
JavaScript
What is a DOM Tree?
DOM tree is the model of the DOM, its a tree of elements with all of its children elements.
Give two examples of document methods that retrieve a single element from the DOM:
document.getElementByID(‘id’) & document.querySelector(‘css selector’)
Give one example of a document method that retrieves multiple elements from the DOM at once.
document. getElementsByClassName(‘class’)
document. getElementsByTagName(‘tag’)
document. querySelectorAll(‘css selector’)
Why might you want to assign the return value of a DOM query to a variable?
- It saves time for the browser looking through the DOM Tree to find the same element again
- It stores the variable as a reference
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?
It allows all the html in the body to load first before the javascript loads, it can prevent errors and speed up website response time.
What does document.querySelector() take as its argument and what does it return?
‘Css’ selector’ and returns a single element node
What does document.querySelectorAll() take as its argument and what does it return?
‘Css selector’ and returns one or more elements as a NodeList.
What is the purpose of events and event handling?
- Event listeners wait for a specific event to occur and does a responsive function in response to it
- Handling is creating code to create events (functions, has event parameter)
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 callback function is 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
What is the event.target? If you weren’t sure, how would you check? Where could have you get more information about it?
- It tells you were the event occurred on the page
- MDN
What is the difference between these two snippets of code?
- The second one has a callback function
- The second one has the handle click being called
What is the claaName property of element objects?
it gets and sets the value of a class attribute
How do you update the CSS class attribute of an element using JavaScript?
querySelector() first and assign to variable
use the class name property to modify
How do you update text within an element using JavaScript?
update the text within the element
is the event parameter of an event listener callback always useful?
NO
Why is storing information about a program in a variable better than only storing it in the DOM?
much more efficient and easier
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
What event is fired when a user places their cursor in a form control?
focus
What does the event.preventDefault() method do?
prevents the browser from reloading the page
What does submitting a form without event.preventDefault() do?
reload the page
What property of a form element object contains all of the form’s controls.
elements property
What property of a form control object gets and sets its value?
value property
What is one risk of writing a lot of code without checking to see if it works so far?
easy to get lost and difficult to retrace your steps, makes debugging harder
What is an advantage of having your console open when writing a JavaScript program?
check your progress, check for errors
Does the document.createElement() method insert a new element into the page?
No, you must use appendChild() method to add elements into a page
How do you add an element as a child to another element?
appendChild() method
What do you pass as the arguments to the elements.setAttribute() method?
(‘name’, ‘value)
What steps do you need to take in order to insert a new element into a page?
- createElement
2. appendChild
What is the textContent property of an element object do?
checks the text of an element or sets new text for it
Name two ways to set the class attribute of a DOM element?
setAttribute
className
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
Reusability, can use the function elsewhere in your code
gives a name to a process
What is event.target?
Finds where the event was dispatched from
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event bubbling (the event starts at the most specific node and flows OUTWARD to the least specific one).
What DOM element property tells you what type of element it is?
-event.target.tagName()
tagName is always all CAPS
What does the element.closest() method take as its argument and what does it return?
Takes a css selector as the argument, returns the event.target of the parent element where the event occured
How can you remove an element from the DOM?
remove()
closestElement.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?
assign the event to the parent of the element
What is the event.target?
DOM element where the event occured
What is the affect of setting an element to display:none?
it makes the element invisible and removes it from the document flow
What does the element.matches() method take as an argument and what does it return?
takes a css.selector as an argument as a ‘string’ and it returns the element of which you called the element on
How can you retrieve the value of an element’s attribute?
getAttribute method
At what steps of the solution would it be helpful to log things to the console?
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 have to add an eventListener to every single 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?
you would have to check each element individually instead
What is JSON?
JavaScript Object Syntax, text-based format for representing structured data based on JavaScript Object Syntax. Used for transmitting data in Web Applications. Exists as a string - Useful when you want to transmit data across a network.
What is 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?
Serialization can convert these complex objects into byte strings for such use. After the byte strings are transmitted, the receiver will have to recover the original object from the byte string
How do you serialize a data structure into a JSON string using JavaScript?
- JSON.Stringify
- Takes a JavaScript Object and then transforms it into a JSON string
How do you deserialize a JSON string into a data structure using JavaScript?
- JSON.parse
- Takes a JSON string and then transforms it into a JavaScript Object
How do you store data in LOCAL STORAGE?
SetItem()
How do you retrieve data from local storage?
getItem()
What data type can local storage save in the browser?
strings
When does the ‘beforeunload’ event fire on the window object?
Before the page unloads(close tab or refresh)
What is a method?
function that is a property of an object.
How can you tell the difference between a method definition and a method call?
- call –> object.call()–> has paranthesis.
2. definition –> funcction defintion + code block
Describe method definition syntax (structure).
have a property name: function keyword (parameters) {
code block}
object.property –>and then assign funcction
Describe method call syntax (structure).
object name.methodname();
How is a method different from any other function?
we need dot or bracket notation to show where that method is coming from.
its insidde an object
What is the defining characteristic of Object-Oriented Programming?
Objects can container datas and behavior under the object
What are the four “principles” of Object-Oriented Programming?
- abstraction
- encapsulation
- inheritance
- polymorphism
What is “abstraction”?
Making complex things into simply ways.
What does API stand for?
Application programming interface
What is the purpose of an API?
allows users to use the interface independently of the implementation (abstraction).
Allows users to work with the system in a simple way fashion
What is this in JavaScript?
Implicit parameter of every js function
What does it mean to say that this is an “implicit parameter”?
It is available in a function’s code black 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?
There is not definition because we are not in call yet, only in definition time referring to character object.
Given the above character object, what is the result of the following code snippet? Why?
The result will be the string value Its me mario. we are calling from character.
Given the above character object, what is the result of the following code snippet? Why?
“Its a me, undefined’
window doesn’t have an object
How can you tell what the value of this will be for a particular function or method definition?
Nothing - can’t tell what the value is
How can you tell what the value of this is for a particular function or method call?
Object left to the dot. If there is no dot, then it’s the window.
What kind of inheritance does the JavaScript programming language use?
Prototype-based Inheritance
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?
Prototype-based Inheritance
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
Prototype
What does the new operator do?
It creates an instance of a user-defined object type or of one of the built-in objects types that has a constructor function.
Creates blank javascript object
Adds a property to the new object (__proto__) that links to the constructor function’s prototype object
Give this variable a value
Return this if the function doesn’t retur
What property of JavaScript functions can store shared behavior for instances created with new?
.prototype
What does the instanceof operator do?
Tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.
What is a “callback” function?
A callback function is 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.
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?
clearInterval()
How can you set up a function to be called repeatedly without using a loop?
setInterval()
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
The returned intervalID 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.
What is a client?
Service requesters
What is a server?
provider of the service
WhaWhich HTTP method does a browser issue to a web server when you visit a URL?
GET
What three things are on the start-line of an HTTP request message?
HTTP method; a verb or noun that describes action being performed
The target request: either a URL or absolute path of the protocol, port, and domain are usually characterized by the request context.
HTTP version that is being used
What three things are on the start-line of an HTTP response message?
Protocol version: http version
Status code: example 404
Status text: text description of the status code to help humans understand http message
What are HTTP headers?
What are HTTP headers?
Providing more information about what we are doing. What content type, length of the content.
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, They are not required!
What is AJAX?
Ajax, which initially stood for Asynchronous JavaScript And XML, is a programming practice of building complex, dynamic webpages using a technology known as XMLHttpRequest.
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequests()
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
The both share prototypes
