JAVASCRIPT Flashcards
1
Q
What is the purpose of variables?
A
A script will have to temporarily store the bits of information it needs to do its job. It can store this data in variables.
Computers require more information than you think.
2
Q
How do youdeclarea variable?
A
You need the variable keyword & variable name.
3
Q
How do you initialize (assign a value to) a variable?
A
With the variable name, you need the assignment operator and variable value.
4
Q
What characters are allowed in variable names?
A
Variable names can only contain letters, numbers, underscores, or dollar signs.
Variable name cannot start with a number.
5
Q
What does it mean to say that variable names are “case sensitive”?
A
Capitalized letters vs lowercase letters are not the same value, meaning they make a difference and are “case sensitive”.
6
Q
What is the purpose of a string?
A
Strings are made so that Javascript won’t read it as a code.
7
Q
What is the purpose of a number?
A
Tasks that involve counting or calculating sums, numeric values.
8
Q
What is the purpose of a boolean?
A
They are helpful when determining which part of a script should run.
9
Q
What does the”=”operator mean in JavaScript?
A
It is the assignment operator. Assigns right operand value to left operand.
10
Q
How do you update the value of a variable?
A
Re-write the new value on the right operand and declare it again.
The “var” keyword isn’t necessary for that second time.
11
Q
What is the difference betweennullandundefined?
A
Null: It is the intentional absence of the value.
Null can’t be determined by Javascript.
Undefined: It meansthe value does not exist in the compiler.
Undefined can be determined by javascript.
12
Q
Why is it a good habit to include “labels” when you log values to the browser console?
A
So you know what each value represents.
Easier for other people on your team who are also working on the same file.
13
Q
Give five examples of JavaScript primitives.
A
String, number, boolean, null, undefined.
14
Q
What data type is returned by an arithmetic operation?
A
A number data type.
15
Q
What is string concatenation?
A
Joining together two or more strings to create one string, which is the string concatenation.
16
Q
What purpose(s) does the”+”plus operator serve in JavaScript?
A
It can either add numbers, or join strings together like previous question.
It can also join variables together.
17
Q
What data type is returned by comparing two values (,===, etc)?
A
A boolean data type.
18
Q
What does the+=”plus-equals” operator do?
A
That operator adds the value of the right operand to a variable and assigns the result to the same variable on the left (this variable on the left will have a new value).
19
Q
What are objects used for?
A
To keep a collection of related data, of primitive or reference types, in the form of “key: value” pairs.
20
Q
What are object properties?
A
Properties are the values associated with a JavaScript object.
21
Q
Describe object literal notation.
A
Opening and closing curly brace.
22
Q
How do you remove a property from an object?
A
Use the delete operator.
“objectName”.”propertyName”
23
Q
What are the two ways to get or update the value of a property?
A
Dot & Bracket Notation.
24
Q
What are arrays used for?
A
When working on any kind of a list or with a set of values that are related to each other.
25
Describe array literal notation.
The square brackets.
26
How are arrays different from "plain" objects?
They hold a related set of key/value pairs like “plain” objects, but the key for each value is its index number.
Arrays don’t have individual named indexes.
27
What number represents the first index of an array?
0
28
What is the length property of an array?
It is a number that represents how many items are in that array.
29
How do you calculate the last index of an array?
"arrayName".length - 1.
30
What is a function in JavaScript?
Packing up code for reuse throughout a program, making code "dynamic": meaning that it can be written once to handle many (or even infinite!) situations.
31
Describe the parts of a function definition.
1. The name of the function.
2. A list of parameters to the function, enclosed in parentheses and separated by commas.
3. The JavaScript statements that define the function, enclosed in curly brackets.
4. (usually) Return statement.
32
Describe the parts of a function call.
We are writing the name of the function and placing () parentheses next to it. This causes the code block within the function's definition to be executed.
It doesn't always require arguments.
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
A function definition is longer because it actually contains the Javascript statement that defines the function. Calling the function just requires writing the name with or without an argument.
34
What is the difference between a parameter and an argument?
Parameter is what’s in the parentheses when the function is being defined, an argument is when it’s being called.
35
Why are function parameters useful?
With no parameters, the end result is always the same.
| They pass values into functions.
36
What two effects does a return statement have on the behavior of a function?
A return statement ends the execution of a function, and returns control to the calling function.
37
Why do we log things to the console?
It is a method for developers to write code to inconspicuously inform the developers what the code is doing. Only useful for developers!
Also, DEBUGGING.
38
What is a method?
A method is a function which is a property of an object.
39
How is a method different from any other function?
Function is a set of logic that can be used to manipulate data. While, method is function that is used to manipulate the data of the object where it belongs.
40
How do you remove the last element from an array?
The pop() method.
41
How do you round a number down to the nearest integer?
The floor() method.
42
How do you generate a random number?
The random() method.
43
How do you delete an element from an array?
The splice() method.
44
How do you append (add to end) an element to an array?
The push() method.
45
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, strings are immutable.
| To make sure, double check with console.log.
47
Roughly how many string methods are there according to the MDN Web docs?
45-50.
48
Is the return value of a function or method useful in every situation?
No.
| For example, push() method already gives you a return value.
49
Roughly how many array methods are there according to the MDN Web docs?
40 to 50.
50
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN.
51
Give 6 examples of comparison operators.
== (is loosely equal to), != (is not equal to), === (strict equal to), > (greater than), >= (greater than or equal to), < (less than), <= (less than or equal to).
52
What data type do comparison expressions evaluate to?
Boolean data type.
53
What is the purpose of an "if" statement?
If statement evaluates & checks a condition. If the condition evaluates as true, any statements in the subsequent code block are executed.
54
Is "else" required in order to use an if statement?
No.
55
Describe the syntax (structure) of an if statement.
An “if” statement consists of the keyword ‘if’, followed by the condition written inside of the parentheses, an opening curly brace, a code to execute if the value is actually true, followed by the closing curly brace.
56
What are the three logical operators?
&& (logical and), || (logical or), ! (logical not).
57
How do you compare two different expressions in the same condition?
You use a comparison operator.
58
What is the purpose of a loop?
The purpose of loops is to repeat the same, or similar, code a number of times.
59
What is the purpose of a condition expression in a loop?
The condition is a boolean expression that determines whether the ‘for’ should execute the next iteration.
“Should I stop?”
60
What does "iteration" mean in the context of loops?
The repetition of going through the condition.
61
When does the condition expression of a while loop get evaluated?
An expression evaluated before each pass through the loop (iteration). If this condition evaluates as true, statement is executed. When condition evaluates to false, execution continues with the statement after the while loop.
62
When does the initialization expression of a for loop get evaluated?
When the loop begins.
63
When does the condition expression of a for loop get evaluated?
It is evaluated before each iteration.
64
When does the final expression of a for loop get evaluated?
At the end of every loop iteration, before the condition runs again.
65
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break.
66
What does the ++ increment operator do?
Adds one to the operand.
Returns a value.
If used postfix, with operator after operand (for example, x++), the increment operator increments and returns the value before incrementing.
If used prefix, with operator before operand (for example, ++x), the increment operator increments and returns the value after incrementing.
67
How do you iterate through the keys of an object?
Using the “for in” statement.
68
Why do we log things to the console?
The console.log() is a function in JavaScript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.
It's used for debugging purposes.
69
What is a "model"?
A model is a replica of something else.
70
Which "document" is being referred to in the phrase Document Object Model?
Your HTML document.
71
What is the word "object" referring to in the phrase Document Object Model?
The datatype object in javascript.
72
What is a DOM Tree?
DOM is the makeup of an element & all of its contents.
73
Give two examples of document methods that retrieve a single element from the DOM.
querySelector(), getElementByID().
| *personal note: try to stick with just using querySelector().*
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?
You can access it again, especially when we’re working with a very complicated HTML document.
76
What console method allows you to inspect the properties of a DOM element object?
console.dir() method.
77
Why would a script 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.
78
What does document.querySelector() take as its argument and what does it return?
It takes in as argument a CSS selector string.
| It returns the first element within the document that matches the specified selector.
79
What does document.querySelectorAll() take as its argument and what does it return?
It takes in as an argument a CSS selector string.
The document.querySelectorAll() returns a static node list representing a list of the document’s elects that matched the specified group of selectors.
80
What is the purpose of events and event handling?
Interactivity with users.
81
Are all possible parameters required to use a JavaScript method or function?
No.
| There are optional parameters.
82
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener().
83
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.
84
What object is passed into an event listener callback when the event fires?
An event object, which is about the event that just occurred while you are browsing.
85
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
The read-only target property of the event interface is which points to the element where the event occurred.
You can check on MDN if you are not sure.
86
What is the className property of element objects?
It sets or returns an element’s class attribute.
87
How do you update the CSS class attribute of an element using JavaScript?
You use a method to find the specific element of the DOM you want to work with (in our case the querySelector method), followed by a period, then the className property. On the right side of the = sign, you put the new CSS string class you want to change it to.
88
What is the textContent property of element objects?
The textContent property where it represents the text content of the node and its descendants.
89
How do you update the text within an element using JavaScript?
You use a method to find the specific element of the DOM you want to work with (in our case the querySelector method), followed by a period, then the textContent property. On the right side of the = sign, you put the new CSS string class you want to change it to.
90
Is the event parameter of an event listener callback always useful?
No. The “event” parameter is implicit. It’s already implied that the function is run w/ the event parameter being that the addEventListener() method only runs when the specified event is delivered to the target.
91
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
Why is storing information about a program in variables better than only storing it in the DOM?
More complicated. Setting variables makes it easy for future references when we’re dealing with many elements & makes it easier for Javascript.
92
What event is fired when a user places their cursor in a form control?
Focus event.
93
What event is fired when a user's cursor leaves a form control?
Blur event.
94
What event is fired as a user changes the value of a form control?
Input event.
95
What event is fired when a user clicks the "submit" button within a form?
Submit event.
96
What does the event.preventDefault() method do?
To prevent the browser from doing the default behavior.
97
What does submitting a form without event.preventDefault() do?
The browser will reload and have the form’s values in the URL.
98
What property of a form element object contains all of the form's controls?
Element property.
99
What property of a form control object gets and sets its value?
value property.
100
What is one risk of writing a lot of code without checking to see if it works so far?
There are too many codes involved, so double check your work at every minor steps.
101
What is an advantage of having your console open when writing a JavaScript program?
You’ll notice your potential mistake sooner and fix it sooner.
102
Does the document.createElement() method insert a new element into the page?
No - it only creates the element node. the appendChild method actually adds to the DOM.
103
How do you add an element as a child to another element?
With the appendChild( ) method.
104
What do you pass as the arguments to the element.setAttribute() method?
A name: string that represents the attribute & a value.
105
What steps do you need to take in order to insert a new element into the page?
1. Create the element - createElement ( )
2. Give it content - createTextNode( ) (optional) or textContent property.
3. Query the DOM that is going to hold the child aka the parent
4. Add it to the DOM/append it to the parent element - appendChild( ).
106
What is the textContent property of an element object for?
The textContent property in HTML is used to set or return the text content of the specified node and all its descendants.
107
Name two ways to set the class attribute of a DOM element.
Element.setAttribute( );
| className( );
108
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
We have a piece of data that will always be reusable.
| Allows us to test whether or not our code works.
109
What is the event.target?
The event.target points to the target of the event, which is the most specific element interacted with.
110
Why is it possible to listen for events on one element that actually happen its descendent elements?
Because of event bubbling.
111
What DOM element property tells you what type of element it is?
event.target.tagName
112
What does the element.closest() method take as its argument and what does it return?
The closest() method searches up the DOM tree for elements which matches a specified CSS selector.
113
How can you remove an element from the DOM?
The element.remove(); method.
114
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?
Structure the HTML so that you are able to add the event listener method to the PARENT element, and the new DOM elements will be added as child elements.
115
What is the affect of setting an element to display: none?
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist).
116
What does the element.matches() method take as an argument and what does it return?
The element.matches() method returns a boolean.
The matches() method checks to see if the element aka event target would be selected by the provided selectorString, in other words, checks if the element "is" the selector. The selector string is the argument.
117
How can you retrieve the value of an element's attribute?
getAttribute() method.
118
At what steps of the solution would it be helpful to log things to the console?
Every step.
119
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?
We wouldn’t be using the querySelectorAll(); rather we would just be using the querySelector(); method. We would not be needing to use a for loop in our function for the listener parameter in our addEventListener() method.
We would have to re-do the event handling steps basically.
120
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?
If we didn’t use a for loop, we wouldn’t be able to delegate the event from parent to child. That being said, we would have a querySelector() method to indicate where we are wanting that interactive response, individually set an event & function for the addEventListener() method, and create a function that only specifies to that one event target.
121
What is JSON?
JSON stands for JavaScript Object Notation.
JSON is a format for storing and transporting data, and is often used when data is sent from a server to a web page.
Data turns into a string, then turns back into objects.
122
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 send it over the network. (Use the stringify() method to do this).
Deserialization is the reverse process: turning a stream of bytes into an object in memory. (Use the parce() method to do this).
123
Why are serialization and deserialization useful?
Serialization allows us to convert the state of an object into a byte stream, which then can be saved into a file on the local disk or sent over the network to any other machine. And deserialization allows us to reverse the process, which means reconverting the serialized byte stream to an object again.
124
How do you serialize a data structure into a JSON string using JavaScript?
The data has to be in the form of strings. This conversion of an object to a string can be easily done with the help of the JSON.stringify() method.
125
How do you deserialize a JSON string into a data structure using JavaScript?
The data received from a web server is always a string. In order to use that data you need to parse the data with the JSON.parse() method which will returns a JavaScript object or array of objects.
126
How to you store data in localStorage?
The setItem() method. Pass the key and value.
127
How to you retrieve data from localStorage?
The getItem() method. Pass the key.
128
What data type can localStorage save in the browser?
String data type.
129
When does the 'beforeunload' event fire on the window object?
When window, document and the resources are about to be unloaded. Close or refresh the page.
People tend to use this event to confirm to the user if they actually want to leave this page to prevent data loss.
130
What is a method?
A method is a function which is a property of an object.
131
How can you tell the difference between a method definition and a method call?
A method definition actually describes what the method is doing. Calling it just gets the method to do what it is supposed to do.
Method definition has the “function” word as it is being defined. Calling does not.
Method has a code block, calling does not.
132
Describe method definition syntax (structure).
Property name, colon, function key word, parameter (optional), then code block.
133
Describe method call syntax (structure).
Property name, colon, function key word, parameter (optional), then code block.
134
Describe method call syntax (structure).
Object, period, followed by the type of method, then an argument.
135
How is a method different from any other function?
A method, like a function, is a set of instructions that perform a task. The difference is that a method is associated with an object, while a function is not.
136
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data (as properties) & behavior (as methods).
137
What are the four "principles" of Object-Oriented Programming?
Encapsulation, abstraction, inheritance, and polymorphism.
138
What is "abstraction"?
The most important part of the term "abstraction" boils down to being able to work with (possibly) complex things in simple ways.
139
What does API stand for?
API is the acronym for Application Programming Interface.
140
What is the purpose of an API?
API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you’re using an API.
In depth explanation: When you use an application on your mobile phone, the application connects to the Internet and sends data to a server. The server then retrieves that data, interprets it, performs the necessary actions and sends it back to your phone. The application then interprets that data and presents you with the information you wanted in a readable way. This is what an API is - all of this happens via API.
141
What is "this" in JavaScript?
This is an implicit (implied) parameter of all Javascript functions.
Variable that holds the object you are currently working with.
142
What does it mean to say that "this" is an implicit parameter?
Implicit parameter means that it is available in a function’s code block even thought it was never included in the function’s parameter list or declared with var.
143
When is the value of this determined in a function; call time or definition time?
It is determined when the function is called, not when it is defined.
144
How can you tell what the value of this will be for a particular function or method definition?
You can’t. It’s determined at the call time.
145
How can you tell what the value of this is for a particular function or method call?
The object that is to the left of the dot. If there is no value to the left of the dot when the function is called, then by default, this will be the global window object.
146
What kind of inheritance does the JavaScript programming language use?
Prototypal inheritance.
147
What is a prototype in JavaScript?
An object that contains properties and methods that can be used by other objects!
Definition of prototype not in javascript context: a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied.
148
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?
Through the setPrototypeOf() method.
149
If an object does not have its own property or method by a given key, where does JavaScript look for it?
In its prototypes!
150
What does the new operator do?
It creates a new object, binds "this" to our new object, adds a property to "this" called prototype, which points to the constructor function.
151
What property of Javascript can store shared behavior for instances created with new?
The property prototype.
152
What property of Javascript can store shared behavior for instances created with new?
The prototype property.
153
What does the "instanceof" operator do?
1. Returns a boolean value.
2. Checks to see if the prototype property of a constructor function appeals anywhere in the prototype chain of an object.
3. Syntax: object, instanceof, then constructor function.
154
What is a "callback" function?
A callback function is a function that is passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
155
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?
The setTimeout() function.
156
How can you set up a function to be called repeatedly without using a loop?
The setInterval() function.
157
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
Value of 0 is used, which means to execute immediately.
158
What do setTimeout() and setInterval() return?
A numeric value which identifies the timer created by the call to pass to the cleartimeout() or clearinterval() method to cancel the timeout.
159
What is a "callback" function?
A callback function is a function that is passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
160
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?
The setTimeout() function.
161
How can you set up a function to be called repeatedly without using a loop?
The setInterval() function.
162
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
Value of 0 is used, which means to execute immediately.
163
What do setTimeout() and setInterval() return?
A numeric value which identifies the timer created by the call to pass to the cleartimeout() or clearinterval() method to cancel the timeout.
164
What is a client?
Client-server denotes a relationship between cooperating programs in an application, composed of clients initiating requests for services and servers providing that function or service.
165
What is a server?
The server component provides a function or service to one or many clients, which initiate requests for such services.
166
Which HTTP method does a browser issue to a web server when you visit a URL?
Get method.
167
What three things are on the start-line of an HTTP request message?
HTTP method, request target, HTTP version.
168
What three things are on the start-line of an HTTP response message?
The protocol version, a status code, a status text.
169
What are HTTP headers?
HTTP headers let the client and the server pass additional information with an HTTP request or response.
170
Where would you go if you wanted to learn more about a specific HTTP Header
MDN.
171
Is a body required for a valid HTTP request or response message?
No.
Not all requests have one: requests fetching resources, like GET, HEAD, DELETE, or OPTIONS, usually don’t need one. Some requests send data to the server in order to update it: as often the case with POST requests (containing HTML form data).
Not all responses have one: responses with a status code that sufficiently answers the request without the need for corresponding payload (like 201 Created or 204 No Content) usually don’t.
172
What is AJAX?
It is a technique for loading data into part of a page without having to refresh the entire page. The data is often sent in a format called JSON.
173
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML.
174
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest.
175
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
The load event.
176
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
Prototypal inheritance.
