JavaScript Flashcards
(160 cards)
1
Q
JavaScript-Primitives-and-Variables
What is the purpose of variables?
A
To store data or information so that we can use those data or information later.
2
Q
JavaScript-Primitives-and-Variables
How do you declare a variable?
A
Write a variable keyword and a variable name. For example, var FullName;
3
Q
JavaScript-Primitives-and-Variables
How do you initialize (assign a value to) a variable?
A
Use the equal sign(=) as an assignment operator
4
Q
JavaScript-Primitives-and-Variables
What characters are allowed in variable names?
A
The name can contain letters, numbers, dollar sign($) or an underscore. But you cannot start with numbers.
5
Q
JavaScript-Primitives-and-Variables
What does it mean to say that variable names are “case sensitive”?
A
If two variables are the same words but one has upper-case and other one has lower-case, it becomes different variables.
6
Q
JavaScript-Primitives-and-Variables
What is the purpose of a string?
A
Strings can be used when working with any kind of text
7
Q
JavaScript-Primitives-and-Variables
What is the purpose of a number?
A
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.
8
Q
JavaScript-Primitives-and-Variables
What is the purpose of a boolean?
A
-To make decisions. For example, yes or no, turn switch on or off.
9
Q
JavaScript-Primitives-and-Variables
What does the = operator mean in JavaScript?
A
is assignment operator. Assign value to the variable
10
Q
JavaScript-Primitives-and-Variables
How do you update the value of a variable?
A
Assign new variable value
11
Q
JavaScript-Primitives-and-Variables
What is the difference between null and undefined?
A
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.
12
Q
JavaScript-Primitives-and-Variables
Why is it a good habit to include “labels” when you log values to the browser console?
A
Help others and myself where these values are coming from. Benefit others and yourself in the future
13
Q
JavaScript-Primitives-and-Variables
Give five examples of JavaScript primitives.
A
Null, String, Number, Boolean, undefined
14
Q
JavaScript-Operator-and-expressions
What data type is returned by an arithmetic operation?
A
Number
15
Q
JavaScript-Operator-and-expressions
What is string concatenation?
A
Combine two or more strings to create one new string
16
Q
JavaScript-Operator-and-expressions
What purpose(s) does the + plus operator serve in JavaScript?
A
Add one value to another or concatenate strings
17
Q
JavaScript-Operator-and-expressions
What data type is returned by comparing two values (, ===, etc)?
A
Boolean
18
Q
JavaScript-Operator-and-expressions
What does the += “plus-equals” operator do?
A
It is the additional assignment operator that adds the value of the right operand to a variable and assigns the result to the variable.
19
Q
JavaScript-Objects
What are objects used for?
A
Associated with information to describe to a group of a lot of information together
The object is to model a real-world object.
20
Q
JavaScript-Objects
What are object properties?
A
Key and value
Variables attached to an object
21
Q
JavaScript-Objects
Describe object literal notation.
A
Variable keyword, variable name, assignment operator, opening curly brace, key and values and closing curly brace.
22
Q
JavaScript-Objects
How do you remove a property from an object?
A
Use the delete keyword. For example, delete hotel.name;
23
Q
JavaScript-Objects
What are the two ways to get or update the value of a property?
A
Use dot notation or square brackets
24
Q
JavaScript-Arrays
What are arrays used for?
A
To store a list of values
25
JavaScript-Arrays
| Describe array literal notation.
var keyword, variable name, assignment operator, and values in the opening and closing square brackets
26
JavaScript-Arrays
| How are arrays different from "plain" objects?
Array can use an index number to access a specific item
27
JavaScript-Arrays
| What number represents the first index of an array?
Zero
28
JavaScript-Arrays
| What is the length property of an array?
Number of items in the array
29
JavaScript-Arrays
| How do you calculate the last index of an array?
Array.length - 1; Object at lengths of Array -1
30
JavaScript-functions
| What is a function in JavaScript?
Functions are objects that are reusable
31
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
32
JavaScript-functions
| Describe the parts of a function call.
Function’s name and list of arguments surrounded by parenthesis
33
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.
34
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.
35
JavaScript-functions
| Why are function parameters useful?
The parameter can hold the value of the argument until it is called.
36
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
37
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)
38
JavaScript-methods
| What is a method?
A method is a function which is a property of an object.
39
JavaScript-methods
| How is a method different from any other function?
The method is associated with an object while a function is not
40
JavaScript-methods
| How do you remove the last element from an array?
pop() method
41
JavaScript-methods
| How do you round a number down to the nearest integer?
Math.floor()
42
JavaScript-methods
| How do you generate a random number?
Math.random()
43
JavaScript-methods
| How do you delete an element from an array?
splice()
44
JavaScript-methods
| How do you append an element to an array?
push()
45
JavaScript-methods
| How do you break a string up into an array?
Split() method.
46
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
47
JavaScript-methods
| Roughly how many string methods are there according to the MDN Web docs?
Around 45
48
JavaScript-methods
| Is the return value of a function or method useful in every situation?
No
49
JavaScript-methods
| Roughly how many array methods are there according to the MDN Web docs?
Around 45 to 50
50
JavaScript-methods
| What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
51
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 (<=)
```
52
JavaScript-if
What data type do comparison expressions evaluate to?
Boolean
53
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.
54
JavaScript-if
Is else required in order to use an if statement?
No
55
JavaScript-if
Describe the syntax (structure) of an if statement.
Keyword if, condition opening and code inside the closing curly braces and
56
JavaScript-if
What are the three logical operators?
Logical AND (&&), Logical OR (||), Logical NOT(!)
57
JavaScript-if
How do you compare two different expressions in the same condition?
Use logical operators
58
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.
59
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.
60
JavaScript-loops
| What does "iteration" mean in the context of loops?
Iteration is the number of times a loop can be executed
61
JavaScript-loops
| When does the condition expression of a while loop get evaluated?
An expression is evaluated before each pass through the loop.
62
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.
63
JavaScript-loops
| When does the condition expression of a for loop get evaluated?
An expression is evaluated before each loop iteration.
64
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.
65
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
66
JavaScript-loops
| What does the ++ increment operator do?
The increment operator adds one to its operand and returns a value
67
JavaScript-loops
| How do you iterate through the keys of an object?
For-in loop
68
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
69
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
70
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
71
DOM-Querying
| Which "document" is being referred to in the phrase Document Object Model?
An HTML document
72
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
73
DOM-Querying
| What is a DOM Tree?
Model of the web page and collection of all elements
74
DOM-Querying
| Give two examples of document methods that retrieve a single element from the DOM.
getElementById() method, querySelector() method
75
DOM-Querying
| Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll() method
76
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.
77
DOM-Querying
| What console method allows you to inspect the properties of a DOM element object?
console.dir()
78
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.
79
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.
80
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.
81
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
82
DOM-Events
| What is the purpose of events and event handling?
To create interactivity in the web page
83
DOM-Events
| Are all possible parameters required to use a JavaScript method or function?
No, all parameters are not necessary
84
DOM-Events
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
85
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.
86
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
87
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.
88
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.
89
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
90
```
DOM-Manipulation
How do you update the CSS class attribute of an element using JavaScript?
```
Use the className property ex) variable name.className = value
91
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
92
DOM-Manipulation
| How do you update the text within an element using JavaScript?
Use the textContent property
| ex) Variable name.textContent = value
93
DOM-Manipulation
| Is the event parameter of an event listener callback always useful?
No, it mostly used for the form element.
94
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.
95
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.
96
JavaScript-Forms
| What event is fired when a user places their cursor in a form control?
Focus event
97
JavaScript-Forms
| What event is fired when a user's cursor leaves a form control?
Blur event
98
JavaScript-Forms
| What event is fired as a user changes the value of a form control?
Input event or change event
99
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
100
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
101
JavaScript-Forms
| What does submitting a form without event.preventDefault() do?
Reloads/refreshes the page
102
JavaScript-Forms
| What property of a form element object contains all of the form's controls.
Elements property
103
JavaScript-Forms
| What property of a form control object gets and sets its value?
Value property
104
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
105
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.
106
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
107
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
108
DOM-Creation
| How do you add an element as a child to another element?
appendChild() method
109
DOM-Creation
| What do you pass as the arguments to the element.setAttribute() method?
setAttribute(name, value)
110
DOM-Creation
| What steps do you need to take in order to insert a new element into the page?
1. Create the element node (document.createElement() method)
2. Give it content (createTextNode())
3. Query the dom (querySelector() method to add a new element of the selected the element of the parent)
4. Add it to the DOM (appendChild() method)
111
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.
112
```
DOM-Creation
Name two ways to set the class attribute of a DOM element.
```
setAttribute method, className property of the object, classList
113
DOM-Creation
| What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
1. We can reuse the function
2. We can test the function to see if the DOM tree works
3. Easily find an error
4. Easier to navigate
114
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
115
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.
116
DOM-event-delegation
| What DOM element property tells you what type of element it is?
element.tagName property
117
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.
118
DOM-event-delegation
| How can you remove an element from the DOM?
Element.remove() method removes the element from the DOM.
119
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.
120
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
121
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
122
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)
123
JavaScript-View-Swapping
| How can you retrieve the value of an element's attribute?
Element.getAttribute() method.
124
JavaScript-View-Swapping
| At what steps of the solution would it be helpful to log things to the console?
Every step.
125
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
126
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.
127
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).
128
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
129
JavaScript-and-json
Why are serialization and deserialization useful?
Transforming data across network save them to hard drive
| We can steam information
130
JavaScript-and-json
| How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify() method
131
JavaScript-and-json
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse() method
132
JavaScript-local-storage
| How do you store data in localStorage?
Storage.setItem(keyName, keyValue)
133
JavaScript-local-storage
| How do you retrieve data from localStorage?
Storage.getItem(keyName)
134
JavaScript-local-storage
| What data type can localStorage save in the browser?
ONLY JSON String
135
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
136
JavaScript-custom-methods
| What is a method?
A method is a function that is a property of an object.
137
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
138
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.
139
JavaScript-custom-methods
| Describe method call syntax (structure).
Object name. Method name (argument)
140
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.
141
JavaScript-custom-methods
| What is the defining characteristic of Object-Oriented Programming?
Object-Oriented Programming contains both data (as properties) and behavior (as methods)
142
JavaScript-custom-methods
| What are the four "principles" of Object-Oriented Programming?
Abstraction, Encapsulation, Inheritance, polymorphism
143
JavaScript-custom-methods
It is being able to work with complex things in simple ways
144
JavaScript-custom-methods
| What does API stand for?
Application programming interface
145
JavaScript-custom-methods
| What is the purpose of an API?
Its purpose is to offer a service to other pieces of software
146
JavaScript-this
| What is this in JavaScript?
this is the object. this is an implicit parameter of all JavaScript functions
147
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.
148
JavaScript-this
| When is the value of this determined in a function; call time or definition time?
When the function is called
149
```
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
150
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.
151
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.
152
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.
153
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.
154
JavaScript-prototype
| What kind of inheritance does the JavaScript programming language use?
Prototype-based (or prototypal) inheritance
155
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.
156
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
157
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
158
JavaScript-consturctors
| What does the new operator do?
1. Creates a blank, plain JavaScript object. For convenience, let's call it newInstance.
2. Points newInstance's [[Prototype]] to the constructor function's prototype property.
3. 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).
4. 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.)
159
JavaScript-consturctors
| What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
160
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.
