JavaScript Flashcards
1
Q
JavaScript Primitives and Variables
What is the purpose of variables?
A
To store data so that we can go back to variables later
2
Q
JavaScript Primitives and Variables
How do you declare variable?
A
Create the variable name and give it a name.
Ex) var name
3
Q
JavaScript Primitives and Variables
How do you initialize (assign a value to) a variable?
A
The equal sign (=) is an assignment operator. It says that you are going to assign a value to the variable. It also used to update the value given to a variable
ex) var keyword variable name = value
4
Q
JavaScript Primitives and Variables
What characters are allowed in variable names?
A
A letter, dollar sign($) or an underscore(_). It must not start with a number
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.
storage for characters
7
Q
JavaScript Primitives and Variables
What is the purpose of a number?
A
To count or calculate sums and store numeric values
8
Q
JavaScript Primitives and Variables
What is the purpose of a boolean?
A
To make decisions. For example, yes or no
9
Q
JavaScript Primitives and Variables
What does the = operator mean in JavaScript?
A
It 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 is empty for some reason but we don’t know why it is empty. Undefined is a computer (JavaScript) saying nothing. cannot tell which said undefined.
- Null is assigned by humans, not JavaScript.
- Null is an empty value that needs to be assigned at some point. It made the empty on purpose to put values later.
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
Undefined, null, number, string, boolean
14
Q
JavaScript Operators and Expressions
What data type is returned by an arithmetic operation?
A
Numeric/Number
15
Q
JavaScript Operators and Expressions
What is string concatenation?
A
Join two or more strings to create one new string
16
Q
JavaScript Operators and Expressions
What purpose(s) does the + plus operator serve in javaScript?
A
Add one value to another
The additional operator (+) produces the sum of numeric operands or string concatenation.
17
Q
JavaScript Operators and Expressions
What data type is returned by comparing two values(, ===, etc)?
A
boolean
18
Q
JavaScript Operators and Expressions
What does the += ‘plus-equals’ operator do?
A
Value on the right side added to the left variable, and then get new value.
19
Q
JavaScript Objects
What are objects used for?
A
Group of data and functionality.
Data type to store further data with individual properties.
20
Q
JavaScript Objects
What are object properties?
A
Individual key correlates with value
21
Q
JavaScript Objects
Describe object literal notation
A
opening and closing curly braces
22
Q
JavaScript Objects
How do you remove a property from an object?
A
Delete operator and name of object.property
23
Q
JavaScript Objects
What are the two ways to get or update the value of a property?
A
To update the value of properties, use dot notation or square brackets.
24
Q
JavaScript Arrays
What are arrays used for?
A
list of data
25
JavaScript Arrays
Describe array literal notation
opening and closing square brackets.
26
JavaScript Arrays
How are arrays different from "plain" objects?
An Array does not need an individually named key. Only numbers.
Objects can have numbers and letters
The array is made with property length.
The array counts the total number of items.
Object has to state the name directly.
The Array can use unshift, push method to interact
27
JavaScript Arrays
What number represents the first index of an array?
Zero
28
JavaScript Arrays
What is the length property of an array?
Holds the number of items in the array
| Tells you how many items are in the array
29
JavaScript Arrays
How do you calculate the last index of an array?
Object at lengths of Array -1 ex) students[length of Array -1] -> student[array.length -1]
30
JavaScript Functions
What is a function in JavaScript?
- A set of statements that perform a task or calculate a value
- Functions are objects that are reusable.
31
JavaScript Functions
Describe the parts of a function definition.
The function keyword, the name of function, a list of parameters to the function, enclosed in parenthesis and separated by commas, and the JavsScript statements that define function, enclosed in curly braces { }.
32
JavaScript Functions
Describe the parts of a function call.
Write the name of the function and zero or more arguments with a comma surrounded by parenthesis ().
33
JavaScript Function
When comparing them side-by-side, what are the differences between a function call and a function definition?
When a function is called, the parameters in its definition take on the value of the arguments that were passed.
34
JavaScript Function
What is the difference between a parameter and an argument?
A parameter is like a placeholder.
When considering an actual “call” to the function, it becomes an argument.
-When we define a function, we declare parameters and that when we call a function, we pass it arguments.
35
JavaScript Function
Why are function parameters useful?
The parameter can hold the value of the argument until it is called.
Varying results based on data we give. The parameter is reusable.
36
JavaScript Function
What two effects does a return statement have on the behavior of a function?
Cause 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. (Exit the function; no code after the return statement is executed.)
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 other function is not.
40
JavaScript - Methods
How do you remove the last element from an array?
the pop() method
41
JavaScript - Methods
How do you round a number down to the nearest integer?
the math.floor() method
42
JavaScript - Methods
How do you generate a random number?
the math.random() method
43
JavaScript - Methods
How do you delete an element from an array?
the splice() method
44
JavaScript - Methods
How do you append an element to an array?
the push() method
45
JavaScript - Methods
How do you break a string up into an array?
the split() method
46
Do string methods change the original string? How would you check if you weren't sure?
No. String is immutable so it would not change. Inspect your value using console.log to check if you are not sure.
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 a method useful in every situation?
No
49
JavaScript - Methods
Roughly how many array methods are there according to the MDN Web docs?
Around 40 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
Greater than (>), less than (=), less than or equal to (<=), is equal to (==), is not equal to (!=), strictly equal to (===), strict not 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?
To evaluate or check a condition and make decisions.
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.
KEY word if, condition, Opening curly brace ({), code to execute if value is true, closing curly brace(}).
56
JavaScript-if
What are the three logical operators?
The logical AND (&&), logical OR (||) and logical NOT (!)
57
JavaScript-if
How do you compare two different expressions in the same condition?
Use the logical operators
58
JavaScript-loop
What is the purpose of a loop?
To repeat the similar or the same code over time and to repeat the code without writing out all ourself
59
JavaScript-loop
What is the purpose of a condition expression in a loop?
Stop to not fall into the infinity loop
60
JavaScript-loop
What does "iteration" mean in the context of loops?
How many times the loop will go through
61
JavaScript-loop
When does the condition expression of a while loop gets evaluated?
before each iteration
62
JavaScript-loop
When does the initialization expression of a for loop gets evaluated?
An expression or variable declaration that evaluated once before the loops begin.
63
JavaScript-loop
When does the condition expression of a for loop gets evaluated?
An expression to be evaluated before each loop iteration. If it evaluates to true, statement is executed. If it is false, the loop stops
64
JavaScript-loop
When does the final expression of a for loop gets evaluated?
An expression to be evaluated at the end of each loop iteration. After the code block runs. before condition runs again.
65
JavaScript-loop
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
66
JavaScript-loop
What does the ++ increment operator do?
The increment operator (++) increments (adds one to) its operand and returns a value.
67
JavaScript-loop
How do you iterate through the keys of an object?
for-in loop
68
Dom-querying
Why do we log things to the console?
To debug and examine values that we use
69
Dom-querying
What is a "model"?
Replicate, recreation of something else.
70
Dom-querying
Which "document" is being referred to in the phrase Document Object Model?
An HTML document
71
Dom-querying
What is the word 'object' referring to in the phrase Document Object Model?
Data type object in JavaScript
72
Dom-querying
What is a DOM Tree?
DOM tree has parent elements, child elements and nods.
73
Dom-querying
Give two examples of document methods that retrieve a single element from the DOM
getElementById() and querySelector();
74
Dom-querying
Give one example of a document method that retrieves multiple elements from DOM at once.
querySelectorAll()
75
Dom-querying
Why might you want to assign the return value of a DOM query to a variable?
You can access it again. Reuse that reference later.
76
Dom-querying
What console method allows you to inspect the properties of a DOM element object?
The directory method - console.dir()
77
Dom-querying
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
It gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.
JavaScript would run first and the body element would not show up
78
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.
79
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.
80
DOM-Events
Why do we log things to the console?
- To make sure our script is loading properly
| - debug and examine values that we use
81
DOM-Events
What is the purpose of events and event handling?
Create interactivity in the webpage (user driven)
82
DOM-Events
Are all possible parameters required to use a JavaScript method or function?
No, all parameters are not necessary
83
DOM-Events
What method of element objects lets you set up a function to be called when a specific type of event occurs?
EventListener
84
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.
85
DOM-Events
What object is passed into an event listener callback when the event fires?
Object with all data about event just occurred.
86
DOM-Events
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
The event.target is the target property of the event object where the event occurred. If you are not sure, use console.log to check.
87
DOM-Events
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
EventListener does not have return statement because you are calling it. What is return if we don't have return statement written? undefined. handleClick() will get call immediately with undefined return value. element.addEventListener('click', handleClick) is function definition.
88
DOM-Manipulation
What is the className property of element objects?
It is holding the value to get current value or assign a new value
89
DOM-Manipulation
How do you update the CSS class attribute of an element using JavaScript?
Document.querSelector for element.className = new value
90
DOM-Manipulation
What is the textContent property of element objects?
Property that holds in that element and its child elements
91
DOM-Manipulation
How do you update the text within an element using JavaScript?
Select argument using query, get what value is and assign to the value that you query for
92
DOM-Manipulation
Is the event parameter of an event listener callback always useful?
No, because we don’t need it sometimes.
93
DOM-Manipulation
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
More complicated. JavaScript function should rely to store data not on DOM elements
94
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 organization of code and ability to work and change code effectively
95
JavaScript-Forms
What event is fired when a user places their cursor in a form control?
Focus event
96
JavaScript-Forms
What event is fired when a user's cursor leaves a form control?
Blur event
97
JavaScript-Forms
What event is fired as a user changes the value of a form control?
Input event
98
JavaScript-Forms
What event is fired when a user clicks the "submit" button within a ?
Submit event
99
JavaScript-Forms
What does the event.preventDefault() method do?
```
The preventDefault() method is action of event.
Prevent browsers from reloading the page
ex) Default behavior of prevent default is not allowing the checkbox to be checked.
```
100
JavaScript-Forms
What does submitting a form without event.preventDefault() do?
Reloads/refreshes the page
101
JavaScript-Forms
What property of a form element object contains all of the form's controls.
Element property
102
JavaScript-Forms
What property of a form control object gets and sets its value?
Value property
103
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
104
JavaScript-Forms
What is an advantage of having your console open when writing a JavaScript program?
You can see what happens as you code
105
Dom-Creation
Does the document.createElement() method insert a new element into the page?
No, it only creates elements. It does not make elements visible. Users look at the DOM in a webpage.
106
Dom-Creation
How do you add an element as a child to another element?
The appendChild() method
107
Dom-Creation
What do you pass as the arguments to the element.setAttribute() method?
Name means name of attribute. Value means value of attribute.
108
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)
109
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.
110
Dom-Creation
Name two ways to set the class attribute of a DOM element.
1. SetAttribute method, querySelector for
| 2. Assign string to className property of the object
111
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 test the function to see the DOM Tree
| 2. Reuse the code for easily.
112
DOM - Event - Delegation
| What is the event.target?
The event.target is the target property of the event object. where the event occurred. Return the element that triggered by event.
113
DOM-Event-Delegation
What is the event.target?
The event.target is the target property of the event object. where the event occurred. If you are not sure, use console.log to check.
Return the element that triggered by event.
114
DOM-Event-Delegation
Why is it possible to listen for events on one element that actually happen its descendent elements?
Bubbling
115
DOM-Event-Delegation
What DOM element property tells you what type of element it is?
element.tagName
116
DOM-Event-Delegation
What does the element.closest() method take as its argument and what does it return?
The element.closest() method takes CSS selector string as its argument and returns itself or the matching ancestor. If no such element exists, it returns null.
117
DOM-Event-Delegation
How can you remove an element from the DOM?
Element.remove();
118
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.
119
JavaScript - view-swapping
What is the event.target?
Return the element that triggered the event.
120
JavaScript - view-swapping
What is the affect of setting an element to display: none?
When you set the value of display to none, the affected element will disappear. This means the element will no longer take up any space on the web page.
-Remove from document flow. Does not exist entirely.
121
JavaScript - view-swapping
What does the element.matches() method take as an argument and what does it return?
It takes CSS selector string as an argument and returns the result in Boolean value
122
JavaScript - view-swapping
How can you retrieve the value of an element's attribute?
getAttribute method
123
JavaScript - view-swapping
At what steps of the solution would it be helpful to log things to the console?
All the time
124
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?
Withouout event delegation, we would have to write individual custom event handler for tab. We would have to have querySelector for every element we want to target on. If we don’t have event flow, we cannot do event delegation
125
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.
126
JavaScript and JSON
What is JSON?
JSON is an extremely common data interchange format used to send and store information in computer systems. Turn into a string and turn back to object.
127
JavaScript and JSON
What are 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 sent it over the network.
Deserialization is the reverse process: turning a stream of bytes into an object in memory.
128
JavaScript and JSON
Why are serialization and deserialization useful?
Transmitting data across network save them to hard drive
129
JavaScript and JSON
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
130
JavaScript and JSON
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
131
JavaScript Local Storage
How do you store data in localStorage?
Use Storage.setItem(key, value)
132
JavaScript Local Storage
How do you retrieve data from localStorage?
storage.getItem(key name)
133
JavaScript Local Storage
What data type can localStorage save in the browser?
ONLY string
134
JavaScript Local Storage
When does the 'beforeunload' event fire on the window object?
Before the user refresh or leave the page
135
JavaScript-custom-methods
What is a method?
A method is a function which is a property of an object.
A method in object-oriented programming (OOP) is a procedure associated with a message and an object. An object consists of data and behavior; these compose an interface, which specifies how the object may be utilized by any of its various consumers.
136
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 property.
- Method call has: 1. Actual data 2. Argument, 3. Name of method
137
JavaScript-custom-methods
Describe method definition syntax (structure).
foo: function() {
}
property name: function keyword (parameter(s)) { code block }
138
JavaScript-custom-methods
Describe a method call syntax (structure).
Object . method name (argument)
139
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. Method needs to know where it is coming from.
140
JavaScript-custom-methods
What is the defining characteristic of Object-Oriented Programming?
Object-Oriented Programing contains both data (as properties) and behaviors (as methods)
141
JavaScript-custom-methods
What are the four "principles" of Object-Oriented Programming?
Abstraction, encapsulation, inheritance, polymorphism
142
JavaScript-custom-methods
What is "abstraction"?
Being able to work with possible complex things in simple ways.
143
JavaScript-custom-methods
What does API stand for?
Application Programming Interface
144
JavaScript-custom-methods
What is the purpose of an API?
An API (Application Programming Interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface. The API can be seen as a simple contract (the interface) between the application offering it and other items, such as third party software or hardware.
145
JavaScript-This
What is this in JavaScript?
This is an implicit parameter of all JavaScript functions
This is a variable that object you are currently working on. In most cases, the value of this is determined by how a function is called (runtime binding). It can't be set by assignment during execution, and it may be different each time the function is called.
146
JavaScript-This
What does it mean to say that this is an "implicit parameter"?
it's an implicit parameter, meaning that it is available in a function's code block even though it was never included in the function's parameter list or declared with var. We don’t have to state a variable in a parameter.
147
JavaScript-This
When is the value of this determined in a function; call time or definition time?
call time
148
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);
}
};
```
Method is not being called so there is nothing.
149
JavaScript-This
Given the character object, what is the result of the following code snippet? Why?
```
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
character.greet();
```
It’s-a-me Mario! //Why? Because the method is invoked(called) of character object.
150
JavaScript-This
```
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
```
```
var hello = character.greet;
hello();
```
The result is “It’s-a-me undefined”
| Here, hello has the window object not the character object.
151
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. You cannot see the function being called, then you do not know what the value of this will be.
152
JavaScript-This
How can you tell what the value of this is for a particular function or method call?
The value of this can be recognized as “the object to the left of the dot” when the function is called (as a method)
153
JavaScript-Prototypes
What kind of inheritance does the JavaScript programming language use?
Prototype-based (or prototypal) inheritance
154
JavaScript-Prototypes
What is a prototype in JavaScript?
Prototypes are the mechanism by which JavaScript objects inherit features from one another. Object that other object can build upon.
155
JavaScript-Prototypes
How is it possible to call methods on strings, arrays, and numbers even though those methods don't actually exist on objects, arrays, and numbers?
Prototype
Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.
156
JavaScript-Prototypes
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.
| Use the function Object.getPrototypeOf():
157
JavaScript-constructors
What does the new operator do?
The new operator let developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function
158
JavaScript-constructors
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype property
159
JavaScript-constructors
| What does the instanceof operator do?
The instanceof operator tests to see if the prototype property of a construction appears anywhere in the prototype chain of an object. The return value is a boolean value;
160
JavaScript-timers
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.
161
JavaScript-timers
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
setTimeout() function
162
JavaScript-timers
How can you set up a function to be called repeatedly without using a loop?
setInterval() function
163
JavaScript-timers
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
164
JavaScript-timers
What do setTimeout() and setInterval() return?
Numeric value for ID.
