JavaScript Flashcards
1
Q
What is the purpose of variables?
A
the purpose of variables is to store data for future use
2
Q
How do you declare a variable?
A
with keyword “var” and an assignment operator and value
3
Q
How do you initialize (assign a value to) a variable?
A
with the assignment operator “=”
4
Q
What characters are allowed in variable names?
A
letters, numbers, $, and _
5
Q
What does it mean to say that variable names are “case sensitive”?
A
it means that
var score
and
var Score
are different
6
Q
What is the purpose of a string?
A
to store text
7
Q
What is the purpose of a number?
A
to store number data
8
Q
What is the purpose of a boolean?
A
to be a light switch
it stores “true” or “false”
and is the logic in JavaScript
9
Q
What does the “=” operator mean in JavaScript?
A
it’s the assignment operator and assigns values to variables
10
Q
How do you update the value of a variable?
A
with the assignment “=” operator
11
Q
What is the difference between “null” and “undefined”?
A
null is an object and intentional. a placeholder
undefined is automatically assigned to a variable
12
Q
Why is it a good habit to include labels when you log values to the browser console?
A
to add context to what you’re doing. also makes the data easier to read
13
Q
Give five examples of JavaScript primitives
A
null undefined string number boolean
symbol
bigint
14
Q
What data type is returned by an arithmetic operation?
A
number
15
Q
What is a string concatenation?
A
It’s the combination of two strings by using the “+” operator
16
Q
What purpose(s) does the + operator serve in JavaScript?
A
it’s used as addition in arithmetic, as concatenation with strings and variables
17
Q
What data type is returned by comparing two values (, ===, etc)
A
boolean
18
Q
What does the += “plus-equals” operator do?
A
It adds whatever value is specified to the variable and then reassigns it to the variable
19
Q
What are objects used for?
A
They’re used to store related data in one place
20
Q
What are object properties?
A
Object properties serve as the “variables” of an object
21
Q
Describe object literal notation
A
a list of key value pairs within an object
a key is assigned a value and each pair is separated by a comma
var = {
key: value,
secondKey: value
};
22
Q
How do you remove a property from an object?
A
with the “delete” keyword
23
Q
What are the two ways to get or update the value of a property?
A
dot notation or bracket notation
24
Q
What are variables called in an object?
A
they are called properties
25
What are the names of properties and methods called in an object?
they're called keys
26
What are arrays used for?
arrays are used when storing a list of data that's all related to each other and especially when you're unsure of how many items you'll be storing
27
Describe array literal notation
var array = ['value1', 'value2', 'value3'];
28
How are arrays different from "plain" objects?
Instead of properties, they have indexes
Arrays are ordered, objects aren't
objects 'values' are given property names
arrays aren't.. they're just indexed
29
What is the length property of an array?
It tells us how long an array is
30
How do you calculate the last index of an array?
array.length - 1
| since the first index is array[0]
31
What is a function in JavaScript?
repeatable, named block of code that does
32
Describe the parts of a function definition
```
function keyword
optional function name
names for parameter list
{
return some work;}
```
33
Describe the parts of a function call
```
function keyword
optional name
optional parameter
opening brace of function code block
code
optional return statement
closing brace of function code block
```
34
When comparing them side-by-side, what are the differences between a function call and a function definition?
definition has a code block
call does not
definition passes parameters
call (passes arguments)
definition has function keyword
call does not
35
What's the difference between a parameter and an argument?
parameters are part of a function definition
arguments are part of a function call
36
Why are function parameters useful?
to add context and to pass info
37
What two effects does a return statement have on the behavior of a function?
1. ) it returns a value
| 2. ) it stops the function
38
Why do we log things to the console?
to double check our work and make sure that everything is working as intended
39
What is a method?
a method is a function within an object
just like how variables become properties within a function
a function stored within the property of an object
40
How is a method different from any other function?
a function is called by name and passed parameters
a method is called along with a object using dot-notation and can access the data in said object
41
How do you remove the last element from an array?
with the pop() method
array.pop()
42
How do you round a number to the nearest integer?
with the Math.floor() method
43
How do you generate a random number?
with the Math.random() method
44
How do you delete an element from an array?
with the splice() method
array.splice()
45
How do you append an element to an array?
with the push() method
array.push()
46
How do you break a string up into an array?
with the split() method
string.split()
47
Do string methods change the original string?
no, but if i wasn't sure, i'd log to the console
48
Roughly how many string methods are there according to MDN Web docs?
40-ish
49
Is the return value of a function or method useful in every situation?
no
50
Roughly how many array methods are there according to MDN?
30 ish
51
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
M
D
N
52
Give 6 examples of comparison operators
```
less than <
less than or equal to <=
greater than >
greater than or equal to >=
is equal to ==
strictly equal to ===
is not equal to !==
is strictly not equal to !===
```
53
What data type do comparison expressions evaluate to?
booleans
54
What is the purpose of an if statement?
to execute an action depending on if a condition is met
allows the computer to make decisions
55
Is else required in order to use an if statement?
no
56
Describe the syntax (structure) of an if statement
if statement
condition (x > y)
IF condition is met, then one or more expressions is executed
ELSE a different expression is executed
return
57
What are the three logical operators?
&& AND, || OR, ! NOT
58
How do you compare two different expressions in the same condition?
by using a logical operator
59
What is the purpose of a loop?
to repeat a block of code many times
60
What is the purpose of a condition expression in a loop?
to let the loop know when to stop
61
What does "iteration" mean in the context of loops?
a single time that the code block of the loop runs
62
When does the condition expression of a while loop get evaluated?
before the code is ran
| before each iteration
63
When does the initialization expression of a for loop get evaluated?
before the condition
| before the loop runs
64
When does the condition expression of a for loop get evaluated?
after the initialization
| and before each iteration
65
When does the final expression of a for loop get evaluated?
after each iteration
66
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break;
67
What does the ++ increment operator do?
it increments a var by 1
| and gets us closer to ending the loop
68
How do you iterate through the keys of an object?
for... in loop
69
Why do we log things to the console?
to make sure things are loading and working correctly.
| to check work.
70
What is a "model"
It's a smaller representation of something
71
Which "document" is being referred to in the phrase Document Object Model?
The HTML document
72
What is the word "object" referring to in the phrase Document Object Model?
it's referring to the JavaScript data types
73
What is a DOM tree?
a representative chunk of the page built as JavaScript objects
74
Give one example of a document method that retrieves multiple elements from the DOM at once
.querySelectorAll
75
Why might you want to assign the return value of a DOM query to a variable?
if you wanted to re-use the value, it's best to assign it to a variable
76
Why might you want to assign the return value of a DOM query to a variable?
if you wanted to re-use the value, it's best to assign it to a variable so that you won't have to query the DOM again
77
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
because all of the HTML needs to load first
78
What does document.querySelector take as its argument and what does it return?
it takes an HTML element/class/ID as a string as an argument and returns the first instance of that
79
What does document.querySelector take as its argument and what does it return?
it takes a CSS selector as a string as an argument and returns the first instance of that element
80
What does document.querySelectorAll() take as its argument and what does it return?
it takes a CSS selector as a string and returns a static NodeList of all of the elements that match the specified group of selectors
81
Why do we log things to the console?
to check our work and make things are working as intended
82
What is the purpose of events and event handling?
The purpose of events is to run a script when an event is fired. Event handling is important for making a web page more interactive
83
Are all possible parameters required to use a JavaScript method or function ?
no!
84
What method of element objects lets you set up a function to be called when a specific type of event occurs?
the .addEventListener method
85
What is a callback function?
A function called within a function
86
What object is passed into an event listener callback when the event fires?
an event object
87
What is the event.target ? If you weren't sure, how would you check? Where could you get more information about it?
it tells us what element the eventlistener is listening on. if i was unsure, i would log it to the console or look it up on MDN ;)
where the event is actually originating from
88
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
the first snippet is waiting until the click event is fired to call the handleClick function
the second is calling the handleClick function as soon as the page loads
89
What is the className property of element objects?
it gives us and allows us to change the className of an element
90
How do you update the CSS class attribute of an element using JavaScript
you would use the className property of the object who's class you're trying to change and assign that a string value of what you want the className to be
91
What is the textContent property of element objects?
It tells us and allows up to change the text content of a given object
92
How do you update the text within an element using JavaScript?
you would use the textContent property of the object who's textContent you're trying to change and assign that a string value of whatever you want the new text to be
93
Is the event parameter of an event listener callback always useful?
YES!
94
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
way more complicated
95
Why is storing information about a program in variables better than only storing it in the DOM?
it makes the information reusable and allows us to track and update values
96
What event is fired when a user places their cursor in a form control?
the focus event is fired
97
What event is fired when a user's cursor leaves a form control?
the blur event is fired
98
What event is fired as a user changes the value of a form control?
the input event is fired
99
What event is fired when a user clicks the "submit" button within a form?
the submit event is fired
100
What does the event.preventDefault() method do?
it tells the browser that if the event does not get "explicitly handled", then it's default action should not be taken
101
What property of a form element object contains all of the form's controls?
the ".elements" property of forms contains all of the form's controls
102
What property of a form control object gets and sets its value?
the ".value" property
103
What is one risk of writing a lot of code without checking to see if it works so far?
writing all of that code just to realize it doesn't work would be a colossal waste of time and much harder to diagnose and fix where it broke
104
What is an advantage of having your console open when writing a JavaScript program?
you can see your code working (or not working) in real time.
| makes it very easy to spot errors
105
Does the document.createElement() method insert a new element into the page?
no! it just creates the element node in the DOM
106
How do you add an element as a child to another element?
you use the appendChild() method on the parent element and pass the child as an argument
107
What do you pass as the arguments to the element.setAttribute() method?
two strings
the first one is the attribute name and the second one is the value of the attribute
('attribute', 'value')
108
What steps do you need to take in order to insert a new element into the page?
createElement()
| appendChild()
109
What is the textContent property of an element object for?
the textContent property allows us to get the textContent of a node
it also allows us to set the textContent of a node
110
Name two ways to set the class attribute of a DOM element.
node. textContent gets the value
| nod. textContetnt = 'Sets text content';
111
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
saves a LOT of time if many elements are going to be created when an event is fired
112
What is the event.target?
the element where the event originates from
113
Why is it possible to listen for events on one element that actually happen in its descendent elements?
because of event bubbling
114
What DOM element property tells you what type of element it is?
.tagName
115
What does the element.closest() method take as its argument and what does it return?
it takes in a CSS selector and returns the closest ancestor that matches the selector
116
How can you remove an element from the DOM?
you can call the .remove() method on whichever element you want to remove...
WITH NO ARGUMENT
117
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?
you can take advantage of event delegation and more specifically, bubbling, and just add an event listener to it's parent element
can use tagName to make sure it matches
118
What is event.target?
where the event originated from
119
What is the affect of setting an element to display: none?
It's removed from the document flow entirely
120
What does the element.matches() method take as an argument and what does it return?
it takes a CSS selector as a string and returns a boolean value
121
How can you retrieve the value of an element's attribute?
assign it to a value
122
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 eventlisteners to each element
123
What is JSON?
JavaScript Object Notation
allows us to transmit objects
124
Why are serialization and deserialization useful?
TO MAKE IT POSSIBLE TO SEND DATA ELSEWHERE
and to turn that data into objects
125
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
126
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
127
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
128
How do you store data in localStorage?
you use the setItem() method on the localStorage object and pass two arguments
the first is the name of your storage and the second will be a JSON array
129
How do you retrieve data from localStorage?
you would use the getItem() of the localStorage object and pass an argument that is the key of the data you're trying to retrieve. you can then parse it
130
What data type can localStorage save in the browser?
strings !
131
When does the 'beforeunload' event fire on the window object?
Right before the page unloads all of its data
| such as when the page is closed or refreshed
132
What is a method?
A method is a function that is a property of an object
133
How can you tell the difference between a method definition and a method call?
a method definition is done within an object
a method call is called on an object with dot notation
134
Describe method definition syntax (structure)
a method definition is done within an object
we define it as we would with a property, starting with a :
followed by the function keyword, name, parameters, and then code block
135
Describe method call syntax (structure)
a method is called on an object with dot notation and optional arguments
136
How is a method different from any other function?
a method is defined within an object and only called on objects
137
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods)
138
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
139
What is abstraction?
It's doing potentially complex things in a simpler way.
140
What does API stand for?
Application Programming Interface
141
What is the purpose of an API?
To give programmers a way to interact with a system in a simplified, consistent fashion.... AKA Abstraction
142
What is "this" in JavaScript?
"This" is an implicit parameter in JavaScript that is given its value based on when it's called. By default, it's value is window
143
What does it mean to say that "this" is an implicit parameter?
It means that it can be used within a function without ever being explicitly defined.
144
When is the value of "this" determined in a function; call time or definition time?
It's determined at call time
145
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);
}
};
```
it's undefined
146
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
it should return, 'It's-a-me, Mario!'
because the value of "this" in this function is the character object
147
Given the above character object, what is the result of the following code snippet? Why?
```
var hello = character.greet;
hello();
```
it should return, "It's-a-me, undefined!"
this' value changed when it was reassigned to the hello variable.
hello doesn't have a firstName property
148
How can you tell what the value of "this" will be for a particular function or method definition?
for a function or method definition, the value of "this" will always be it's default value, window
149
How can you tell what the value of "this" is for a particular function or method call?
The value of "this" would become whichever object it was being used within.
150
What kind of inheritance does the JavaScript programming language use?
Prototype-based inheritance
| or Prototypal inheritance
151
What is a prototype in JavaScript?
A prototype is a very broad object that descendant objects can delegate to and use the functions of
152
How is it possible to call methods on strings, arrays, and numbers even though those methods don't actually exist on strings, arrays, and numbers?
because each of those are able to refer to a larger, prototype class that contains all of those methods.
prototypal inheritance
153
If an object does not have its own property or method by a given key, where does JavaScript look for it?
JavaScript would search in that object's prototype for a property/method
154
What does the new operator do?
it let's us create an instance of an object of a constructor function
1. ) creates a blank, object
2. ) sets prototype to the prototype of the constructor
3. ) assigns this to the prototype
155
What property of JavaScript functions can store shared behavior for instances created with new ?
prototype
156
What does the instanceof operator do?
it tells us if the prototype property appears anywhere in the prototype chain of an object. if it is a descendant.
returns a boolean
157
What is a callback function'?
a function defined within another function
158
How can you set up a function to be called repeatedly without using a loop?
setInterval(function, delay, arg1, arg2, arg n)
159
How can you set up a function to be called repeatedly without using a loop?
setInterval(function, delay, arg1, arg2, arg n)
160
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0ms
161
What is AJAX?
AJAX is an asynchronous process that allows the client to make requests while the page is loading. When the server responds with data, an event is fired.
162
What does AJAX stand for ?
Asynchronous Javascript and XML
163
Which object is built in the browser for making HTTP requests in JavaScript?
the XMLHttpRequest() constructor
164
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
the 'load' event
165
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
What is prototypes???
