JavaScript Flashcards
1
Q
all algorithm are made with 3 parts, what are they?
A
variable, conditionals, and loops. how to save, decide, and repeat.
2
Q
What is a script?
A
is a series of instructions a computer can follow step-by-step
3
Q
how should you start writing a script?
A
start with the big picture of what you want to achieve and break down into smaller steps.
- define the goal
- design the script
- code each step
4
Q
what are 2 ways to design a script
A
p. 18
1. tasks (flowchart)
2. steps (list)
5
Q
flowchart keys
A
generic step (rectangle)
event (hexogon 6 sides)
input or output (slanted rectangle)
decision (diamond)
6
Q
What is the purpose of variables?
A
to store values. easier to call upon the information and easier to reuse for future.
7
Q
How do you declare a variable?
A
variable-keyword variable-name;
var name;
8
Q
How do you initialize (assign a value to) a variable?
A
variable-keyword variable-name = value; var word = "word";
9
Q
What characters are allowed in variable names?
A
lower and capital letters, $, _, and numbers, but cannot start.
10
Q
var is what scope variable keyword
A
function scope
11
Q
what is let and const variable keyword function
A
block scope
12
Q
What does it mean to say that variable names are “case sensitive”?
A
score and Score are different
13
Q
What is the purpose of a string?
A
for text
14
Q
What is the purpose of a number?
A
to calculate and measure stuff, financial stuff.
15
Q
What is the purpose of a boolean?
A
for decision making
16
Q
What does the = operator mean in JavaScript?
A
assignment operator, it assigns/store the value to the variable. value will correlate with the variable.
16
Q
What does the = operator mean in JavaScript?
A
assignment operator, it assigns the value to the variable
17
Q
How do you update the value of a variable?
A
with an assignment operator, no need for keyword. variable = value
name = “yay”;
18
Q
What is the difference between null and undefined?
A
undefined is never assigned by a user/programmer, it is a result that only the browser/javascript will give.
null is a value and is assigned and meant to on purpose.
19
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
to see what that console log is for and easier to read/know when coming back to it later. makes it clear.
20
Q
Give five examples of JavaScript primitives.
A
number, string, boolean, null, undefined.
21
Q
example of uniary operator
A
typeof
22
Q
What data type is returned by an arithmetic operation?
A
number
23
Q
What is string concatenation?
A
adding 2 or more strings to make it into one string
24
What purpose(s) does the + plus operator serve in JavaScript?
it can add 2 numbers, can add two strings into one
25
What data type is returned by comparing two values ( less than, greater than, ===, etc)?
boolean
26
What does the += "plus-equals" operator do?
shorthand for adding the variable with an additional value and the result of that get the new value for the variable.
27
What are objects used for?
to group together a set of variable and functions to create a model of something that are related.
28
What are object properties?
they are variable. properties tells us about the object
29
Describe object literal notation.
it is to create an object. object is in curly braces and the object gets stored in a variable
keyword-variable variable = {
property: key value,
property: key value,
method: key(function-name) value(function)
};
*in object, functions are known as methods
variables are known as property
30
How do you remove a property from an object?
with delete operator
| delete object.property
31
What are the two ways to get or update the value of a property?
with a dot notation or the bracket notation
32
how do you read vehicle['color']?
vehicle at string color
| [] usually read as at
33
what is delete?
delete operator
| Ex. delete pet.name . delete operator is being used on name property of pet object.
34
What are arrays used for?
used when working with a list or a set of values that are related to each other. full view of that category
35
Describe array literal notation.
with an open bracket and closing bracket [ ]
36
How are arrays different from "plain" objects?
array: number index, know how many data there are, can add data by using method, numerical order
object: property names, cannot know how many property/method there are, can add by using assignment operator, not a numerical order
37
What number represents the first index of an array?
[0]
38
What is the length property of an array?
it gives the result of how many values are in an array.
39
How do you calculate the last index of an array?
length - 1
40
What is a function in JavaScript?
reusable tool that give directions on what to do/process
41
Describe the parts of a function definition.
```
function keyword with the function name(optional) parameters list(s) (optional) opening a function code block {
what to process or the optional return statment
closing a function code block }
```
42
Describe the parts of a function call.
the function's name with the arguments(optional if more than one-separated with commas)
43
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call needs only the funtion name and parentheses, arguments are optional. function definition is basically structuring the function so that it can be used when called. it has what is to be processed once called.
44
What is the difference between a parameter and an argument?
arguments are the data we are asking to use as an input from a function call.
parameters are the data that is unknown until the function is called with arguments. we take to use it inside the function: a placeholder.
45
Why are function parameters useful?
it can take on the values of the arguments that were passed to be used in the function. ability to have utibility. provides a functionality of same process but with different data.
46
What two effects does a return statement have on the behavior of a function?
it will exit the function, codes after the return statment will not executed.
it will produce a value in place of the function call.
47
What is the purpose of a loop?
to have a condition of iterate trough a number of times. to repeat functionality
48
What is the purpose of a condition expression in a loop?
to make a stop condition
49
What does "iteration" mean in the context of loops?
number of time it repeats the code block
50
When does the condition expression of a while loop get evaluated?
in the beginning, before it executes the while loop code block.
51
When does the initialization expression of a for loop get evaluated?
only once in the beggining before executing the for loop code block
52
When does the condition expression of a for loop get evaluated?
on the first time, it will execute after the initialization and, everytime before it executes the code block, but after the final expression on every iteration
53
When does the final expression of a for loop get evaluated?
before the condition and after the code block
54
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break;
55
What does the ++ increment operator do?
it increaments a number by one
56
How do you iterate through the keys of an object?
by using for...in loop
57
Why do we log things to the console?
to make sure it does what you are expecting to do. To keep track and know what the ouput is coming out as expected.
58
What is a "model"?
representation of something
59
Which "document" is being referred to in the phrase Document Object Model?
html document
60
What is the word "object" referring to in the phrase Document Object Model?
list of properties and values.
61
DOM
Document Object Model, javascript object that is modeling html document contents
62
What is a DOM Tree?
collection of all the information that conveys one content, children, text content, elements,
63
Give two examples of document methods that retrieve a single element from the DOM.
getElementById, querySelector
64
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll, getElementsByClassName, getElementsByTagName
65
Why might you want to assign the return value of a DOM query to a variable?
easier to access or to call
66
What console method allows you to inspect the properties of a DOM element object?
dir method. console.dir
67
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
because the document flow, the load order, it will load from top to bottom. it will not have the info to load if script is above since it didn't load all the body.
68
What does document.querySelector() take as its argument and what does it return?
takes a string css select, and will return the first element from top to bot
69
What does document.querySelectorAll() take as its argument and what does it return?
takes the string and will return all the elements in that string, in NodeList.
70
what is NodeList
array-like object, can't easily add content like the array.push, push method will not word since NodeList is not a true array. can use like array.
71
What is the purpose of events and event handling?
the purpose of events is to process how to take action when user interacts with the HTML web page.
event handling 3 steps to trigger JS codes.
1. select the element
2. what even will trigger the response (specify event)
3. execute the code. (call code)
purpose, to be aware of when the action happens, handling allows us to do something when it occures
72
Are all possible parameters required to use a JavaScript method or function?
no
73
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
74
What is a callback function?
a function passed into another function as argument.
75
What object is passed into an event listener callback when the event fires?
event object. when event occurs, JS will create an object of that event.
76
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
it is what the event is targeting. place where the even occured from, originated. log out event.target, or MDN
77
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
handleClick => call back function. name of the function to call, passing the function as an argument/parameter to the addEventListener() method
handleClick() => it will just call the function without there is no argument/parameter. not a call back function. will call the function loads
78
What is the className property of element objects?
property containing the value of p
79
How do you update the CSS class attribute of an element using JavaScript?
with className, elementObject.className = value
80
What is the textContent property of element objects?
property containing the text of element
81
How do you update the text within an element using JavaScript?
assignment operator
82
Is the event parameter of an event listener callback always useful?
not always useful, if we know what exact element we want to change.
83
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
complicated. to be readily available in a form we understand
84
What event is fired when a user places their cursor in a form control?
focus
85
What event is fired when a user's cursor leaves a form control?
blur
86
What event is fired as a user changes the value of a form control?
input
87
What event is fired when a user clicks the "submit" button within a ?
submit, for the form, the addevent should be submit
88
What does the event.preventDefault() method do?
prevents the default action to be taken.
89
What does submitting a form without event.preventDefault() do?
it reloads the page, and data input will be lost.
90
What property of a form element object contains all of the form's controls.
elements, every form element has elements
91
What property of a form control object gets and sets its value?
value of form control element
92
What is one risk of writing a lot of code without checking to see if it works so far?
potential risk is that the code from the beginning might be wrong.
93
What is an advantage of having your console open when writing a JavaScript program?`
you can check your work in real time
94
Does the document.createElement() method insert a new element into the page?
no, it only creates the access to DOM
95
How do you add an element as a child to another element?
appendChild
called on parent and the argument is child
parent.appendChild(child)
96
What do you pass as the arguments to the element.setAttribute() method?
string with the attribute and the value
97
What steps do you need to take in order to insert a new element into the page?
createElement, setAttribute and or add textContent, appendChild, if we have something we want to append to is already on the DOM, use querySelector.
98
What is the textContent property of an element object for?
adding/changing text to Node or retrieve the current text value.
99
Name two ways to set the class attribute of a DOM element.
setAttribute(), className()
100
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
reuse and able to remember easily
101
What is the event.target?
the element that the event is targeting. property that is a reference to the event that is fired from.
where event originated from
102
Why is it possible to listen for events on one element that actually happen its descendent elements?
since we query to DOM of the parent, due to event bubbling.
103
What DOM element property tells you what type of element it is?
tagName <= should use for when targeting element, nodeName <= use for text name?
104
What does the element.closest() method take as its argument and what does it return?
argument is CSS selector, and return closest ancester.
| querySelector looks inward decendents whereas closest looks outward ancestor.
105
How can you remove an element from the DOM?
remove method, on the object for the DOM element you want to remove
106
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?
add to nearest parent/ancestor
107
What is the event.target?
where the event is originated from,
108
What is the affect of setting an element to display: none?
it removes the display of the element with that property pair.
gets removed from document flow
109
What does the element.matches() method take as an argument and what does it return?
takes CSS Selector in a string as an argument and returns boolean, true/false. if it matches the selector with element.
110
How can you retrieve the value of an element's attribute?
getAttribute() / method, the argument will be the string of the name of attribute.
111
At what steps of the solution would it be helpful to log things to the console?
when expecting something to happen and checking if it matches your expectation.
to check when you grab something to assign to variable and checking if the variable is actually storing it
112
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?
will have to add eventListener for each one, it is a code that is not scaleable.
113
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?
will have to manually do if statement for each of the new thing to check
114
What is JSON?
JS Object Notation, format for rendering data follows JavaScript
115
What are serialization and deserialization?
serialization: JSON.stringify is an example, making a data into all string and is stored in one location all in a row, in one continuous stream.
deserialization: taking the serialized data and making it into a javascrip object, making efficient accessible.
like packing for a trip, toothbrush, clothes, accessories into one bag.
116
Why are serialization and deserialization useful?
deserialized data is easier to work with, good for interaction with the data
serializaed is good for getting info
117
How do you serialize a data structure into a JSON string using JavaScript?
stringify method of the JSON obj
118
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
119
How do you store data in localStorage?
setItem() method of localStorage
120
How do you retrieve data from localStorage?
getItem() method of localStorage
121
What data type can localStorage save in the browser?
only strings
122
When does the 'beforeunload' event fire on the window object?
when the resouses are about to be unloaded, close a tab, refresh tab, close the broswer or crashes.
123
What is a method?
is a function
A function which is a property of an object. 2 kinds of methods:
instance methods, which are built-in tasks performed by an object instance.
Static methods which are tasks that are called directly on an object constructors.
124
How can you tell the difference between a method definition and a method call?
in method definition, will have to assign function with the parameter, if needed, and the function code block to the method's name (property). funtion keyword.
in a method call, you will actually use that method to process what is inside the function code block by calling the property name with () and argument if needed.
125
Describe method definition syntax (structure).
within an object.
method_name: function () { }
126
Describe method call syntax (structure).
object.method_name(arguments);
127
How is a method different from any other function?
a method is a property of an object while function is not. associated/attached with an object,
in order to call a method, need a dot notation and the object.
object.method
128
What is the defining characteristic of Object-Oriented Programming?
it can have both data (as properties and values) and behavior (as methods)
129
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
130
What is "abstraction"?
able to work with (possibly) complex things in simple ways.
| It only displays the relevant attributes of objects and hids the unnecessary details
131
What does API stand for?
Application Programming Interface
132
What is the purpose of an API?
to give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction.
133
What is "this" in JavaScript?
"this" is a keyword and it determines by how a function is called. always a reference to an object.
when it's being provoked
134
What does it mean to say that this is an "implicit parameter"?
it is availalbe in a function's code block even though it was never included in the function's parameter list or declared with "var"
it's alway there, able to get the value of it.
135
When is the value of "this" determined in a function; call time or definition time?
it is determined in the call time.
136
```
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);
}
};
```
nothing, since it's not called yet.
137
Given the previous (card #137) character object, what is the result of the following code snippet? Why?
character.greet();
It's-a-me, Mario!
because it is using this object's (character) firstName.
since we invoked character.greet();
138
```
Given the previous (card# 137) character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
```
it will console.log "It's-a-me, undefined!"
because there is no firstName property in hello object?
hello() is free floating function. when there is no object, it will try to access window and windows doesn't have a property named firstName.
139
How can you tell what the value of "this" will be for a particular function or method definition?
use the object and the method without the parantheses
can't guarantee it's going to be anything.
140
How can you tell what the value of "this" is for a particular function or method call?
use the object and the method with the parantheses
whatever is the left of the dot.
141
What kind of inheritance does the JavaScript programming language use?
prototype-based (prototypal inheritance). In prototypal inheritance, an object “inherits” properties from another object via the prototype linkage.
move properties and methods that we'd like to reuse into a "prototype" object and then tell other objects to simply delegate to that "prototype" object when they aren't able to perform the required tasks themselves
142
What is a prototype in JavaScript?
an object that is associated with every functions and objects by default. where function's prototype property is accessible and modifiable and object's prototype property (aka attribute) is not visible. every function includes prototype object by default.
JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects. created a tool that can be passed to be used by others.
143
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?
these methods are defined on a "prototype" object and arrays and strings simply borrow those methods when they're needed. will have a prototype that will have the shared behavior
144
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
prototype object. it will search it's nearest paraent and nearest parent and so on. prototypal chain. will look at prototypal chain ancestor.
145
What does the "new" operator do?
creates an instance of a user-defined object type or one of the built-in object types that has a constructor function.
1. makes an empty object
2.
3. run the function block
4. it returns an object if no return is specified.
146
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property.
147
What does the instanceof operator do?
tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.
object instanceof class(constructor function)
148
What is a "callback" function?
function passed arond as a variable inside function to be called later
149
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()
150
How can you set up a function to be called repeatedly without using a loop?
setInterval()
151
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0, it runs immediately or more accurately, the next event cycle
action gets pushed into que immediately
152
What do setTimeout() and setInterval() return?
timeoutID and intervalID, which is a positive integer
153
What is AJAX?
Asynchronous JS and XML. allows you to update parts of the DOM of an HTML page without need for a full page refresh
154
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
155
Which object is built into the browser for making HTTP requests in JavaScript?
new "XMLHttpRequest" ()
156
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
'load' event
157
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototypal inheritance. they share a prototype
158
How do you remove the last element from an array?
pop() method
159
How do you round a number down to the nearest integer?
Math.floor(). Math.trunc = will chop the decimals
160
How do you generate a random number?
Math.random()
161
How do you delete an element from an array?
splice
162
How do you append an element to an array?
push
163
How do you break a string up into an array?
split
164
Do string methods change the original string? How would you check if you weren't sure?
string methods do not change. use console.log
165
Roughly how many string methods are there according to the MDN Web docs?
a lot refer to string in MDN
166
Is the return value of a function or method useful in every situation?
NOT ALL, push and unshift are not really useful
167
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
168
Give 6 examples of comparison operators.
>, >=, <, <=, ===, !==
169
What data type do comparison expressions evaluate to?
BOOLEAN true/false
170
What is the purpose of an if statement?
to check if the condition stated in the if statement is true and if true, process the code inside the conditional code block. evaluates/checks a condition, if true, any statement in the subsequent code block are executed.
171
Is else required in order to use an if statement?
no it is not required, else is used when the condition in the if statment is false.
172
Describe the syntax (structure) of an if statement.
if (condition) {
}
173
What are the three logical operators?
and &&, or ||, not !
174
How do you compare two different expressions in the same condition?
by using the logical operator &&, ||
175
does the condition in if statment have to be true/false
no, it can also look at truthy/falsy values
