JavaScript Flashcards
JavaScript-Primitives-and-Variables
What is the purpose of variables?
To store data or information so that we can use those data or information later.
JavaScript-Primitives-and-Variables
How do you declare a variable?
Write a variable keyword and a variable name. For example, var FullName;
JavaScript-Primitives-and-Variables
How do you initialize (assign a value to) a variable?
Use the equal sign(=) as an assignment operator
JavaScript-Primitives-and-Variables
What characters are allowed in variable names?
The name can contain letters, numbers, dollar sign($) or an underscore. But you cannot start with numbers.
JavaScript-Primitives-and-Variables
What does it mean to say that variable names are “case sensitive”?
If two variables are the same words but one has upper-case and other one has lower-case, it becomes different variables.
JavaScript-Primitives-and-Variables
What is the purpose of a string?
Strings can be used when working with any kind of text
JavaScript-Primitives-and-Variables
What is the purpose of a number?
Numbers can be used to calculate, determine the size of the screen, moving the position of an element on a page or setting the amount of time an element should take to fade in.
JavaScript-Primitives-and-Variables
What is the purpose of a boolean?
-To make decisions. For example, yes or no, turn switch on or off.
JavaScript-Primitives-and-Variables
What does the = operator mean in JavaScript?
is assignment operator. Assign value to the variable
JavaScript-Primitives-and-Variables
How do you update the value of a variable?
Assign new variable value
JavaScript-Primitives-and-Variables
What is the difference between null and undefined?
undefined means that the property has not been defined yet. Whereas, null means that the property has been defined but is empty. Null is intentionally not defined value. For example, null is like a parking lot where you can fill it in later, and undefined is an empty field.
JavaScript-Primitives-and-Variables
Why is it a good habit to include “labels” when you log values to the browser console?
Help others and myself where these values are coming from. Benefit others and yourself in the future
JavaScript-Primitives-and-Variables
Give five examples of JavaScript primitives.
Null, String, Number, Boolean, undefined
JavaScript-Operator-and-expressions
What data type is returned by an arithmetic operation?
Number
JavaScript-Operator-and-expressions
What is string concatenation?
Combine two or more strings to create one new string
JavaScript-Operator-and-expressions
What purpose(s) does the + plus operator serve in JavaScript?
Add one value to another or concatenate strings
JavaScript-Operator-and-expressions
What data type is returned by comparing two values (, ===, etc)?
Boolean
JavaScript-Operator-and-expressions
What does the += “plus-equals” operator do?
It is the additional assignment operator that adds the value of the right operand to a variable and assigns the result to the variable.
JavaScript-Objects
What are objects used for?
Associated with information to describe to a group of a lot of information together
The object is to model a real-world object.
JavaScript-Objects
What are object properties?
Key and value
Variables attached to an object
JavaScript-Objects
Describe object literal notation.
Variable keyword, variable name, assignment operator, opening curly brace, key and values and closing curly brace.
JavaScript-Objects
How do you remove a property from an object?
Use the delete keyword. For example, delete hotel.name;
JavaScript-Objects
What are the two ways to get or update the value of a property?
Use dot notation or square brackets
JavaScript-Arrays
What are arrays used for?
To store a list of values
JavaScript-Arrays
Describe array literal notation.
var keyword, variable name, assignment operator, and values in the opening and closing square brackets
JavaScript-Arrays
How are arrays different from “plain” objects?
Array can use an index number to access a specific item
JavaScript-Arrays
What number represents the first index of an array?
Zero
JavaScript-Arrays
What is the length property of an array?
Number of items in the array
JavaScript-Arrays
How do you calculate the last index of an array?
Array.length - 1; Object at lengths of Array -1
JavaScript-functions
What is a function in JavaScript?
Functions are objects that are reusable
JavaScript-functions
Describe the parts of a function definition.
Function keyword, optional name, zero or more parameters, opening and closing curly braces for the function’s code block, and optional return statement
JavaScript-functions
Describe the parts of a function call.
Function’s name and list of arguments surrounded by parenthesis
JavaScript-functions
When comparing them side-by-side, what are the differences between a function call and a function definition?
When function is called, the parameters in its definition take on the values of the arguments that were passed.
JavaScript-functions
What is the difference between a parameter and an argument?
A parameter is a placeholder that we don’t know the value of until we call it.
Arguments are the values that are given to the function
Parameters are the local variables.
When we call the function, the parameter becomes an argument.
When we define a function, we declare parameters, and when we call a function, we pass it arguments.
JavaScript-functions
Why are function parameters useful?
The parameter can hold the value of the argument until it is called.
JavaScript-functions
What two effects does a return statement have on the behavior of a function?
The return statement causes the function to produce a value
The return statement exits the function’s code block
JavaScript-methods
Why do we log things to the console?
The console is a debugging tool where the browser prints error and warnings as they occur in JavaScript code. (debugging mechanism)
JavaScript-methods
What is a method?
A method is a function which is a property of an object.
JavaScript-methods
How is a method different from any other function?
The method is associated with an object while a function is not
JavaScript-methods
How do you remove the last element from an array?
pop() method
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?
splice()
JavaScript-methods
How do you append an element to an array?
push()
JavaScript-methods
How do you break a string up into an array?
Split() method.
JavaScript-methods
Do string methods change the original string? How would you check if you weren’t sure?
No, use console log to find out if string methods changed the original string
JavaScript-methods
Roughly how many string methods are there according to the MDN Web docs?
Around 45
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?
Around 45 to 50
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.
Is equal to (==), is not equal to (!=), strict equal to (===), strict not equal to (!==), Greater than(>), less than (<>, greater than or equal to (>=), less than or equal to (<=)
JavaScript-if
What data type do comparison expressions evaluate to?
Boolean
JavaScript-if
What is the purpose of an if statement?
The if statement evaluates (or checks) a condition. If the condition evaluates to true, any statements in the subsequent code block are executed.
JavaScript-if
Is else required in order to use an if statement?
No
JavaScript-if
Describe the syntax (structure) of an if statement.
Keyword if, condition opening and code inside the closing curly braces and
JavaScript-if
What are the three logical operators?
Logical AND (&&), Logical OR (||), Logical NOT(!)
JavaScript-if
How do you compare two different expressions in the same condition?
Use logical operators
JavaScript-loops
What is the purpose of a loop?
To repeat the similar or the same code over time. To repeat the code without writing it out all ourselves.
JavaScript-loops
What is the purpose of a condition expression in a loop?
To check if the condition is true so that the statement can be executed.
JavaScript-loops
What does “iteration” mean in the context of loops?
Iteration is the number of times a loop can be executed
JavaScript-loops
When does the condition expression of a while loop get evaluated?
An expression is evaluated before each pass through the loop.
JavaScript-loops
When does the initialization expression of a for loop get evaluated?
An expression or variable declaration is evaluated once before the loop begins.
JavaScript-loops
When does the condition expression of a for loop get evaluated?
An expression is evaluated before each loop iteration.
JavaScript-loops
When does the final expression of a for loop get evaluated?
An expression is evaluated at the end of each loop iteration. This occurs before the next evaluation of the condition.
JavaScript-loops
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Keyword Break
JavaScript-loops
What does the ++ increment operator do?
The increment operator adds one to its operand and returns a value
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?
Debugging mechanism
Look at the data in the code that we are running and test
DOM-Querying
Why do we log things to the console?
Debugging mechanism
Look at the data in the code that we are running and test
DOM-Querying
What is a “model”?
copy/duplicate/standard not the actual thing (a representation)
e.g. model plane, model car, model home, model citizen, mental model
DOM-Querying
Which “document” is being referred to in the phrase Document Object Model?
An HTML document
DOM-Querying
What is the word “object” referring to in the phrase Document Object Model?
Data type object in JavaScript
Document is the object with all kinds of properties
DOM-Querying
What is a DOM Tree?
Model of the web page and collection of all elements
DOM-Querying
Give two examples of document methods that retrieve a single element from the DOM.
getElementById() method, querySelector() method
DOM-Querying
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll() method
DOM-Querying
Why might you want to assign the return value of a DOM query to a variable?
Because when you need to work with an element more than once, you should use a variable to store the result of this query.
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?
The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
DOM-Querying
What does document.querySelector() take as its argument and what does it return?
querySelector() takes CSS selector as the only argument and returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
DOM-Querying
What does document.querySelectorAll() take as its argument and what does it return?
querySelectorAll() Takes CSS selector as the only argument and returns a static (not live) NodeList representing a list of the document’s elements that match the specified group of selectors.
DOM-Events
Why do we log things to the console?
To make sure our script is loading properly and to debug and examine values that we use
DOM-Events
What is the purpose of events and event handling?
To create interactivity in the web page
DOM-Events
Are all possible parameters required to use a JavaScript method or function?
No, all parameters are not necessary
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 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.
DOM-Events
What object is passed into an event listener callback when the event fires?
Object with all data about event just occurred.
Event object
DOM-Events
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
Property of event and where the event occurred
Element that interact with
Use the console to check.
DOM-Events
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
Note that the parentheses are omitted where the function is called because they would indicate that the function should run as the page loads(rather than when the event fires).
- event listener does not have return statement because you are calling it.
element. addEventListener(‘click’, handleClick) is a function definition.
DOM-Manipulation
What is the className property of element objects?
The className property of the Element interface gets and sets the value of the class attribute of the specified element
DOM-Manipulation How do you update the CSS class attribute of an element using JavaScript?
Use the className property ex) variable name.className = value
DOM-Manipulation
What is the textContent property of element objects?
It represents the text content of the node and its descendants
To set and retrieve the value
DOM-Manipulation
How do you update the text within an element using JavaScript?
Use the textContent property
ex) Variable name.textContent = value
DOM-Manipulation
Is the event parameter of an event listener callback always useful?
No, it mostly used for the form element.
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?
Complicated.
DOM-Manipulation
Why is storing information about a program in variables better than only storing it in the DOM?
It is easier for JavaScript to work with more efficient organizaiton of code and ability to work and change code effectively
It allows us to show what those clicks are and direct access to it.
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 or change event
JavaScript-Forms
What event is fired when a user clicks the “submit” button within a form?
Submit event
*Submit event will include all information from all input from the form. But click event doesn’t
JavaScript-Forms
What does the event.preventDefault() method do?
It prevents the browser from automatically reloading the page with the form’s values in the URL.
Prevent default behavior of that event. preventDefault can be used at any type of event. If you put it in a click handler in anchor tag, it wouldn’t navigate to the page you point to
JavaScript-Forms
What does submitting a form without event.preventDefault() do?
Reloads/refreshes the page
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 property
JavaScript-Forms
What is one risk of writing a lot of code without checking to see if it works so far?
You want to know you are actually making progress. No way to find out what went wrong. *Do everything one minor step at a time
You may not understand why it works. It may work by accident. You have two things as wrong but work somehow
JavaScript-Forms
What is the advantage of having your console open when writing a JavaScript program?
You can see what happens as you code
Everything you make a change, you see what happens.
It helps you understand what is going on.
DOM-Creation
Does the document.createElement() method insert a new element into the page?
No, It creates an element that can be added to the DOM tree
DOM-Creation
Does the document.createElement() method insert a new element into the page?
No, It creates an element that can be added to the DOM tree
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(name, value)
DOM-Creation
What steps do you need to take in order to insert a new element into the page?
- Create the element node (document.createElement() method)
- Give it content (createTextNode())
- Query the dom (querySelector() method to add a new element of the selected the element of the parent)
- Add it to the DOM (appendChild() method)
DOM-Creation
What is the textContent property of an element object for?
To read the text context of the element OR assign new text to the element.
DOM-Creation Name two ways to set the class attribute of a DOM element.
setAttribute method, className property of the object, classList
DOM-Creation
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
- We can reuse the function
- We can test the function to see if the DOM tree works
- Easily find an error
- Easier to navigate
DOM-event-delegation
What is the event.target?
It returns the element that was triggered by the event.
The element that interacted with and related to the event
DOM-event-delegation
Why is it possible to listen for events on one element that actually happen its descendent elements?
Because the event handler is called during the bubbling or capturing phrase of the event.
DOM-event-delegation
What DOM element property tells you what type of element it is?
element.tagName property
DOM-event-delegation
What does the element.closest() method take as its argument and what does it return?
It takes a CSS selector as the argument and returns the closest ancestor element or itself, which matches the selector. If there is no such element, null.
DOM-event-delegation
How can you remove an element from the DOM?
Element.remove() method removes the element from the DOM.
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?
The event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. Add the event listener to the parent element (ex: UL). But if you add the event listener to the parent, how will you know which element was clicked? Simple: when the event bubbles up to the UL element, you check the event object’s target property to gain a reference to actual clicked node.
If you don’t know the parent element, use the Element.closest() method.
JavaScript-View-Swapping
What is the event.target?
It returns the element that was triggered by the event.
The element that interacted with and related to the event
JavaScript-View-Swapping
What is the affect of setting an element to display: none?
The element will not show on the web page.
It will hide the element. It does remove from the document flow
JavaScript-View-Swapping
What does the element.matches() method take as an argument and what does it return?
It takes a CSS selector string as an argument and returns if the element matches the selector. Otherwise, false. (returns boolean value)
JavaScript-View-Swapping
How can you retrieve the value of an element’s attribute?
Element.getAttribute() method.
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?
Without event delegation, we would have to write individual custom event handlers for the tab. We would have to have querySelector for every element we want to target. If we don’t have event flow, we cannot do event delegation
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?
Write new if statements for every single element.
JavaScript-and-json
What is JSON?
JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa).
JavaScript-and-json
What are serialization and deserialization?
Serialization is converting a native object to a string
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 sent it over the network
Deserialization is converting a string to a native object
Deserialization is the reverse process: turning a stream of byes into an object in memory
JavaScript-and-json
Why are serialization and deserialization useful?
Transforming data across network save them to hard drive
We can steam information
JavaScript-and-json
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify() method
JavaScript-and-json
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse() method
JavaScript-local-storage
How do you store data in localStorage?
Storage.setItem(keyName, keyValue)
JavaScript-local-storage
How do you retrieve data from localStorage?
Storage.getItem(keyName)
JavaScript-local-storage
What data type can localStorage save in the browser?
ONLY JSON String
JavaScript-local-storage
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.
-Before the user refresh or leave the page
JavaScript-custom-methods
What is a method?
A method is a function that is a property of an object.
JavaScript-custom-methods
How can you tell the difference between a method definition and a method call?
- Method definition has 1. Function keyword 2. function code block, 3, function is being assigned to the property.
- Method call has 1. Actual data 2. The argument, 3. Name of method
JavaScript-custom-methods
Describe method definition syntax (structure).
foo: function() {
}
property name: function keyword (parameter(s)) { }
Property name: function keyword parameter in side of parenthesis and curly braces for code block.
JavaScript-custom-methods
Describe method call syntax (structure).
Object name. Method name (argument)
JavaScript-custom-methods
How is a method different from any other function?
Function - a set of instructions that perform a task
Method - a set of instructions that are associated with an object
Method stores inside the object. The method needs to know where it is coming from.
JavaScript-custom-methods
What is the defining characteristic of Object-Oriented Programming?
Object-Oriented Programming contains both data (as properties) and behavior (as methods)
JavaScript-custom-methods
What are the four “principles” of Object-Oriented Programming?
Abstraction, Encapsulation, Inheritance, polymorphism
JavaScript-custom-methods
It is being able to work with 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?
Its purpose is to offer a service to other pieces of software
JavaScript-this
What is this in JavaScript?
this is the object. this is an implicit parameter of all JavaScript functions
JavaScript-this
What does it mean to say that this is an “implicit parameter”?
It means that it is available in a function code block even though it was never included in the function’s parameter list or declare with var.
JavaScript-this
When is the value of this determined in a function; call time or definition time?
When the function is called
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);
}
};Refers to the character object
JavaScript-this
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
It’s-a-me Mario!, because it calls the greet parameter in the character object. The character object is calling.
JavaScript-this
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
It will be It’s-a-me, undefined because the hello has the window object, not the character object. This no longer refers to the character object.
JavaScript-this
How can you tell what the value of this will be for a particular function or method definition?
You don’t know until the method is called.
JavaScript-this
How can you tell what the value of this is for a particular function or method call?
Find where the function is called and look for an object to the left of the dot.
Finding out which object is calling it.
JavaScript-prototype
What kind of inheritance does the JavaScript programming language use?
Prototype-based (or prototypal) inheritance
JavaScript-prototype
What is a prototype in JavaScript?
JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects.
JavaScript-prototype
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
JavaScript-prototype
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
Look in the prototype object of object’s name
Prototype chain
JavaScript-consturctors
What does the new operator do?
- Creates a blank, plain JavaScript object. For convenience, let’s call it newInstance.
- Points newInstance’s [[Prototype]] to the constructor function’s prototype property.
- Executes the constructor function with the given arguments, binding newInstance as the this context (i.e. all references to this in the constructor function now refer to newInstance).
- If the constructor function returns a non-primitive, this return value becomes the result of the whole new expression. Otherwise, if the constructor function doesn’t return anything or returns a primitive, newInstance is returned instead. (Normally constructors don’t return a value, but they can choose to do so to override the normal object creation process.)
JavaScript-consturctors
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
JavaScript-consturctors
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. The return value is a boolean value.
