WebDev Flashcards
(398 cards)
1
Q
Is an HTML list a block element or an inline element?
A
An HTML list is a block-level element.
2
Q
What is the difference between an ordered list and an unordered list in HTML?
A
An unordered list is a list with bullet points. An ordered list is numbered.
3
Q
How do block-level elements affect the document flow?
A
Block level elements push items on the same line as it down or up depending on orientation. To the left of the element means its pushed up and vice versa for items to the right.
4
Q
How do inline elements affect the document flow?
A
Inline elements allow for other items to be on the same horizontal space as them.
5
Q
What are the default width and height of a block-level element?
A
The default height of a block level element would be the height of the the element itself. The default width of a block-level element would be the length of the web page.
6
Q
What are the default width and height of an inline element?
A
The default height and width of an inline element would be the height and width of the element itself.
7
Q
Give five examples of HTML element types.
A
, , <h1>, , </h1><p></p>
8
Q
What is the purpose of HTML attributes?
A
To modify the behavior of a specific element.
9
Q
Give an example of an HTML entity (escape character).
A
The less-than sign ( < ) can be denoted as <
10
Q
Where do you put non-visible content about the HTML document?
A
You put non-visible content in the element of the HTML document.
11
Q
Where do you put visible content about the HTML document?
A
You place visible content about the HTML document in the element.
12
Q
Where do the and tags go in a valid HTML document?
A
They go inside of the element.
13
Q
What is the purpose of a declaration?
A
It is an instruction to the web browser about which version of HTML is being used.
14
Q
What HTML tag is used to link to another website?
A
<a> </a>
15
Q
What is an absolute URL?
A
An absolute URL contains all the information necessary to locate a resource
16
Q
What is a relative URL?
A
A relative URL locates a resource using an absolute URL as a starting point. Generally used to link to resources within the same website.
17
Q
How do you indicate the relative link to a parent directory?
A
You use the ../ to indicate the folder above the current one. EX. href=”../index.html”
18
Q
How do you indicate the relative link to a child directory?
A
Use the name of the child folder.
EX. href=”music/listings.html”
19
Q
How do you indicate the relative link to a grand parent directory?
A
You use two of the ../ operator in the file address.
EX. href=”../../index.html”
20
Q
How do you indicate the relative link to the same directory?
A
You only need to use the file name. There are no other things needed.
EX. href=”reviews.html”
21
Q
What is the purpose of an HTML form element?
A
It is a document section that allows for users to submit information
22
Q
Give five examples of form control elements.
A
Input, select, textarea, button, a
23
Q
Is an HTML element a block element or an inline element?
A
Inline-Block
24
Q
Give three examples of type attribute values for HTML elements.
A
password, image, text
25
What are the six primary HTML elements for creating tables?
table, tr, td, th, tbody, thead
26
What purpose do the thead and tbody elements serve?
The thead serves as a container for the headings of the table. The tbody serves as a container for the body of the table
27
Give two examples of data that would lend itself well to being displayed in a table.
Sports results and financial reports both lend themselves to being displayed in a table.
28
What are the names of the individual pieces of a CSS rule?
A CSS rule consists of a selector and a declaration. Each line in the declaration block has a property and a value.
29
In CSS, how do you select elements by their class attribute?
Similar to a type selector, however you add a . in front of the class name.
EX. .note {}
30
In CSS, how do you select elements by their tag name?
You simply put the name of the tag that you wish to affect.
EX. h1, h2, h3 {}
31
In CSS, how do you select an element by its id attribute?
You would add a # in front of the tag that you would like to affect.
EX. #introduction {}
32
Name three different types of values you can use to specify colors in CSS.
RGB values, Hex codes, and Color names
33
What CSS properties make up the box model?
Margins, Borders, Padding, Content of box.
34
Which CSS property pushes boxes away from each other?
Margin
35
Which CSS property add space between a box's content and its border?
Padding
36
What is a pseudo-class?
A keyword that allows for styles to be applied to an element only under specific circumstances.
37
What are CSS pseudo-classes useful for?
They are useful for denoting an element in a special state.
For example, a button can have a pseudo class that makes the button feel more like it is being pressed by changing the style or position of the element slightly
38
Name two types of units that can be used to adjust font-size in CSS.
You can use percentages or EM's
39
What CSS property controls the font used for the text inside an element?
font-family
40
What is the default flex-direction of a flex container?
In a row
41
What is the default flex-wrap of a flex container?
No Wrap is the default, namely, all items will try and be on one single line.
42
Why do two div elements "vertically stack" on one another by default?
They are default Block
43
What is the default flex-direction of an element with display: flex?
Flex Row
44
What is the default value for the position property of HTML elements?
Position: static
45
How does setting position: relative on an element affect document flow?
The element can now move in relation to where it would have been in normal flow. However, you can now move the element around the page.
46
How does setting position: relative on an element affect where it appears on the page?
Depending on offset properties, The image can be moved in relation to where it originally would have been in normal flow.
47
How does setting position: absolute on an element affect document flow?
The element is removed from normal flow and no long affects the position of other elements on the page. The other elements act as if the element doesnt exist.
48
How does setting position: absolute on an element affect where it appears on the page?
It appears relative to its nearest non-static ancestor.
49
How do you constrain an absolutely positioned element to a containing block?
You constrain it to the box of its nearest ancestor element.
Make the nearest ancestor element not static in positioning.
50
What are the four box offset properties?
top, bottom, left, and right.
51
What is the purpose of variables?
A way to store data so you can see it, manipulate it, etc. Adds permanence to data.
52
How do you declare a variable?
var variableName;
53
How do you initialize (assign a value to) a variable?
var hasName = true;
54
What characters are allowed in variable names?
Letters, numbers, dollar signs, underscores. However, variables cannot start with a number.
55
What does it mean to say that variable names are "case sensitive"?
Capital letters matter in the naming of variables.
56
What is the purpose of a string?
For storing and manipulating text/a set of characters. JS will not interpret this as code.
57
What is the purpose of a number?
For counting, measuring, or for seeing the numerical value of something.
58
What is the purpose of a boolean?
To measure if something is true or false, used for decision making.
59
What does the = operator mean in JavaScript?
This is the assignment operator. Whatever data is being declared will be stored inside of the variable.
60
How do you update the value of a variable?
To update a variable you only need to omit the var keyword :
var something = 8
something = 7
The value of variable something is now 7
61
What is the difference between null and undefined?
Null is a value that does not exist, a placeholder of sorts. Null is a value that can only be assigned. When you see null, a developer purposely set it as such.
Undefined is javascripts automatic way of saying empty. If you declare a variable without a value, JS reads it as undefined. As a developer, you should never use undefined.
62
Why is it a good habit to include "labels" when you log values to the browser console?
It can be difficult in longer projects to remember what a variables name or value is.
63
Give five examples of JavaScript primitives.
string, number, null, undefined, boolean
64
What data type is returned by an arithmetic operation?
A number data type.
65
What is string concatenation?
The combination of two strings to form one string.
66
What purpose(s) does the + plus operator serve in JavaScript?
It is the arithmetic operator for addition and it is used to add one value to another.
67
What data type is returned by comparing two values (<, >, ===, etc)?
A boolean data type.
68
What does the += "plus-equals" operator do?
The plus equals operators adds two number values together and then assigns the resulting number to a variable.
69
What are objects used for?
They are used to store multiple variables into a single container with one name (an object)
70
What are object properties?
Object Properties are variables that are defined under an object.
71
Describe object literal notation.
Object literal notation is when the object properties are directly defined inside of the object declaration
var object = {
property: propertyValue,
property2: propertyValue2
}
72
How do you remove a property from an object?
use the delete operator.
Delete student.firstName
73
What are the two ways to get or update the value of a property?
object.property
object['property']
74
What are arrays used for?
It is used to store a collection of data, a list of sorts
75
Describe array literal notation.
[index1, index2,...]
76
How are arrays different from "plain" objects?
When adding to an array, we use the method push.
When adding to an object, we use dot or bracket notation and assign it a value.
Arrays also have a length property.
77
What number represents the first index of an array?
0
78
What is the length property of an array?
styled as array.length, the length property returns the number of items inside of the array. Automatically kept up to date.
79
How do you calculate the last index of an array?
You would use the length keyword and then subtract 1 off of that value.
array[0, 1, 2, 3]
array.length = 4
lastIndex = array.length - 1 (This is equal to 3)
length[lastIndex] will return 3 I.e. length[3]
80
What is a function in JavaScript?
A set of statements that do a task or calculate a value. It can also be reused.
81
Describe the parts of a function definition.
Starts with a function keyword, has a function name, a comma separated list of parameters in parenthesis, Then there is the function code block separated by curly braces, an optional return statement.
82
Describe the parts of a function call.
Name of the function, arguments located in the comma spaced parentheses.
83
When comparing them side-by-side, what are the differences between a function call and a function definition?
A function call is just the name of the function with whatever arguments you wish to place into the function. In a function definition, the arguments are known as parameters and there is a placeholder parameter along with the definition of the actual function within curly braces. The function keyword is also present in a definition
84
What is the difference between a parameter and an argument?
A parameter is found in a function definition, an argument is used when the function is actually being called.
85
Why are function parameters useful?
Without them you lose the re-usability of functions. They allow us to use a function for multiple different situations.
86
What two effects does a return statement have on the behavior of a function?
The return statement ends the function execution and also returns a value to the user.
87
Why do we log things to the console?
Gives us a way to observe and communicate with our code.
88
What is a method?
It is a property of an object that contains a function definition.
89
How is a method different from any other function?
A method is specifically defined inside of an object. It is also technically a property of an object. To call a method you need to provide the context of its call.
ex. arr.pop()
90
How do you remove the last element from an array?
By using the .pop() method. The syntax would be arr.pop()
91
How do you round a number down to the nearest integer?
By using the Math.floor() method.
92
How do you generate a random number?
You would use the Math.random() method.
93
How do you delete an element from an array?
You could use the .splice method.
94
How do you append an element to an array?
You could use the .push() method
95
How do you break a string up into an array?
You would use the .split() method.
96
Do string methods change the original string? How would you check if you weren't sure?
The string methods don't change the original string specifically. You could console.log it to see if it has. Strings are immutable in JavaScript
97
Roughly how many string methods are there according to the MDN Web docs?
50?
98
Is the return value of a function or method useful in every situation?
No, not always. Often times, we want to delete something and we just want to make sure that thing has been removed.
I.e .pop() method
99
Roughly how many array methods are there according to the MDN Web docs?
A ton, like 50.
100
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN (Mozilla Developing Network)
101
Give 6 examples of comparison operators.
Equal to: ===
not equal to: !=
Greater than: >
Less than: <
Greater than or equal to: >=
Less than or equal to: <=
102
What data type do comparison expressions evaluate to?
Boolean data types
103
What is the purpose of an if statement?
An if statement provides a conditional for the code to make a decision.
104
Is else required in order to use an if statement?
No it is not.
105
Describe the syntax (structure) of an if statement.
if (score >= 50) {
congratulate();
}
if = keyword
(score >= 50) = condition
code block = code that will be executed if the condition is filled
106
What are the three logical operators?
And Operator = &&
Logical Or operator = ||
Logical Not = ! (inverts boolean value)
107
How do you compare two different expressions in the same condition?
You would link them with the && or the || operator
108
What is the purpose of a loop?
They are used to repeatedly run a block of code until a condition is met
109
What is the purpose of a condition expression in a loop?
The condition expression gives the loop the parameters it needs in order to stop the loop
110
What does "iteration" mean in the context of loops?
Each pass through the block of code is called an iteration
111
When does the condition expression of a while loop get evaluated?
It is evaluated prior to the execution of the statement and prior to each iteration.
112
When does the initialization expression of a for loop get evaluated?
It is evaluated once before the start of the loop. Before the first iteration.
113
When does the condition expression of a for loop get evaluated?
The condition expression is evaluated at the start of an iteration.
114
When does the final expression of a for loop get evaluated?
The final expression is executed at the end of an iteration.
115
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
The break keyword.
116
What does the ++ increment operator do?
It adds one to its operand and returns the new value.
117
How do you iterate through the keys of an object?
You would use bracket notation paired with a for...in loop
I.E
function valuesFromKeys(object) {
var keys = [ ];
for( var x in object) {
keys.push(x);
}
return keys;
}
118
What are the four components of "the Cascade".
Importance, Specificity, Source Order, !important
119
What does the term "source order" mean with respect to CSS?
Source order is the order in which CSS will display new stylings dependent on the order in which they are written in the stylesheet
120
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
When dealing with nested elements, when you apply a CSS styling to the parent element and there is no styling specified for the child element, the child will receive the same styling as the parent.
121
List the three selector types in order of increasing specificity.
Type selector, class selector, ID selector
122
Why is using !important considered bad practice?
Because it directly ignores the rules of CSS Specificity
123
What does the transform property do?
It allows you to scale, skew, rotate, or translate an element.
124
Give four examples of CSS transform functions.
Rotate, translate(Y), scale, skew
125
The transition property is shorthand for which four CSS properties?
Transition-property, transition-duration, transition-timing-function, transition-delay
126
Why do we log things to the console?
To communicate with our code and see how it is doing.
127
What is a "model"?
It is a rendition or a replica of something.
128
Which "document" is being referred to in the phrase Document Object Model?
The document is the actual webpage itself. The HTML document.
129
What is the word "object" referring to in the phrase Document Object Model?
The object in DOM refers to the nodes and objects that the webpage gets broken up into.
The JavaScript Objects.
The DOM realistically is JavaScript Objects that are representing the HTML document.
130
What is a DOM Tree?
It is a model of an element and all of its configurations and all of the contents contained.
131
Give two examples of document methods that retrieve a single element from the DOM.
.getElementByID( ) and .querySelector( )***
132
Give one example of a document method that retrieves multiple elements from the DOM at once.
.querySelectorAll( )
133
Why might you want to assign the return value of a DOM query to a variable?
So that you can reuse it in different scenarios.
134
What console method allows you to inspect the properties of a DOM element object?
console.dir( )
135
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to parse through all of the HTML elements before we can access them with JavaScript
136
What does document.querySelector() take as its argument and what does it return?
It takes in a CSS selector as its argument and it returns the first matching element that it finds.
137
What does document.querySelectorAll() take as its argument and what does it return?
It takes a CSS selector as an argument and it returns a Node list of all the matching elements that it finds. A node list is not a DOM element, it is an object that stores DOM elements.
138
What is the purpose of events and event handling?
The purpose of events is so that the webpage can react to specific things that may occur from the user. Event handling is a routine that is performed when the event that is being watched for occurs.
139
Are all possible parameters required to use a JavaScript method or function?
No
140
What method of element objects lets you set up a function to be called when a specific type of event occurs?
element.addEventListener( )
141
What is a callback function?
A callback function is when one function is passed into another function as an argument.
142
What object is passed into an event listener callback when the event fires?
The event object itself. Its contents are all of the data about said event.
143
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
Event.target is a reference to the exact element in which the event affects. If I wasnt sure I could log event.target and see what comes out. You could also check MDN.
144
What is the difference between these two snippets of code?
element.addEventListener('click', handleClick)
element.addEventListener('click', handleClick())
The first snippet calls the function as an argument or a callback function.
The second snippet actually calls the function itself without any parameters which will result in a return value for said function.
145
1) Never call an event handler function yourself
146
What is the className property of element objects?
The className property of an element gets or sets the value of the name of the class.
147
How do you update the CSS class attribute of an element using JavaScript?
You would use the className method.
EX
$someDOMvar.className = 'new class name'
148
What is the textContent property of element objects?
It is a property that returns all the text content of the element and all of its descendents.
149
How do you update the text within an element using JavaScript?
You would use the textContent method.
EX.
$domVar. textContent = 'new text content'
150
Is the event parameter of an event listener callback always useful?
No. Because there are instances where you do not want variability in your event handler functions.
151
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
I feel like it would be more difficult. The counter helped me track where I was in terms of amount of clicks.
152
Why is storing information about a program in variables better than only storing it in the DOM?
The DOM is only temporary and is applicable to only the instance of the webpage. Once you refresh it you restart to the beginning. There is also a security concern. Its better to have a variable to work off of instead of relying on output.
153
What event is fired when a user places their cursor in a form control?
focus
154
What event is fired when a user's cursor leaves a form control?
Blur
155
What event is fired as a user changes the value of a form control?
input
156
What event is fired when a user clicks the "submit" button within a ?
submit (on the form element, not on the button itself)
157
What does the event.preventDefault() method do?
If the event is not specifically handled, it should not take its normal default action.
158
What does submitting a form without event.preventDefault() do?
It will just refresh the page. ALWAYS include a preventDefault in your submit event listener
159
What property of a form element object contains all of the form's controls.
HTML form elements
160
What property of a form control object gets and sets its value?
the .values property
161
What is one risk of writing a lot of code without checking to see if it works so far?
If you run into a bug that occurred early on in the code and theres a bug, youll have to go through more debugging than if you just checked as you worked.
162
What is an advantage of having your console open when writing a JavaScript program?
You can test and see if the javascript is doing the things to the Web Document the way you want it to.
163
Does the document.createElement() method insert a new element into the page?
No not immediately, it still needs to be appended to the parent element.
164
How do you add an element as a child to another element?
parentElement.appendChild(childElement)
165
What do you pass as the arguments to the element.setAttribute() method?
You would pass two strings. The first would be the attribute you wish to set, and the second would be the value of the attribute.
166
What steps do you need to take in order to insert a new element into the page?
1) Create the element.
2) Create and append any textContent or Attributes.
3) append the new element to a parent element. (after query selecting)
167
What is the textContent property of an element object for?
It is used to either retrieve or set the text content of an element.
168
Name two ways to set the class attribute of a DOM element.
one would be to use the .setAttribute('class', 'xxx')
You could also use element.ClassName
169
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
You can return the same function to do different jobs. You can also reuse the function multiple times.
170
Give two examples of media features that you can query in an @media rule.
width and height
171
Which HTML meta tag is used in mobile-responsive web pages?
The viewport HTML meta tag
172
What is the event.target?
The property of the event object that holds the element where the event originated from.
173
Why is it possible to listen for events on one element that actually happen its descendent elements?
Because the default for JS is for the event listener to have a bubbling effect.
174
What DOM element property tells you what type of element it is?
the element.tagName property. = Actual name of the element in FULL CAPS
175
What does the element.closest() method take as its argument and what does it return?
The argument takes the selector that we are looking for. It returns the closest ancestor that fits the argument. It is the opposite of querySelector, it looks outward.
176
How can you remove an element from the DOM?
You use the .remove() method.
177
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?
Youd use Event Delegation. Put it on an ancestor and use closest to look for instances from within the parent element.
178
What is the event.target?
The property of the event object that holds the element where the event originated from.
179
What is the affect of setting an element to display: none?
The element disappears from the page. It doesnt even save space for where it would be.
180
What does the element.matches() method take as an argument and what does it return?
It takes the selector that you wish to compare against. It returns a boolean.
181
How can you retrieve the value of an element's attribute?
You can use the getAttribute() method
182
At what steps of the solution would it be helpful to log things to the console?
When checking to see what the event.target value is. When checking to see the attribute. Or checking to see if the .matches method is returning the proper boolean. Any time you have comparisons or you are calling a method on an object.
183
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 make an event listener for the new tab. Along with new event listeners for every other tab as well.
184
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?
Youd most likely need to write separate if statements for each individual tab in order to change the views on the page.
185
What is a breakpoint in responsive Web design?
The point in which a website will adjust and adapt in accordance to the code in order for the user to have a more positive experience.
186
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a "column" class in a responsive layout?
This allows for the column class to stay relatively the same regardless of the size of the viewport. As the viewport shrinks or grows, percentages will allow for the elements to stay in relatively the same position.
187
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will "win". Why is that?
The Source Order of cascade. You want to reduce the influence of source order and let the cascade do its job.
188
What is JSON?
JSON stands for Javascript Object Notation. It is a text based format used to represent data. It takes the form of a javascript object literal. It is most commonly used to transmit data to web apps.
189
What are serialization and deserialization?
Serialization is effectively the conversion of something into a series of 1's and 0's (binary code). Deserialization is the opposite, it is the construction of something out of binary code.
190
Why are serialization and deserialization useful?
Serialization allows us to convert temporary object data into bytes which allows us to store it on the hard drive for long term storage. Deserialization allows for us to take these serialized objects and convert them back into object data again.
191
How do you serialize a data structure into a JSON string using JavaScript?
You would use the method JSON.stringify( )
192
How do you deserialize a JSON string into a data structure using JavaScript?
You would use the JSON.parse( ) method.
193
How do you store data in localStorage?
You would use localStorage.setItem( )
Kebab case for keys
194
How do you retrieve data from localStorage?
Youd use the localStorage.getItem( ) method
195
What data type can localStorage save in the browser?
It can save data with the string data type.
196
When does the 'beforeunload' event fire on the window object?
It fires when the window, the document, and its resources are about to be unloaded.
197
What is a method?
A method is a function that is also a property of an object.
198
How can you tell the difference between a method definition and a method call?
The method definition will usually be in an object literal and will only have the name of the function with its parameters.
A method call will have the object its attached to in front of it in dot notation.
EX. calculator.getSum(1, 2)
199
Describe method definition syntax (structure).
var newObj = {
function(para) {
definition
},
function(para) {
definition
}
}
200
Describe method call syntax (structure).
objectName.function(arg);
201
How is a method different from any other function?
A method is actually a function that is a property of an object. Any other function exists outside of an object.
202
What is the defining characteristic of Object-Oriented Programming?
The pairing of data (properties) and behavior (methods) together in a single object.
203
What are the four "principles" of Object-Oriented Programming?
Abstraction : the generalization of data
Encapsulation: the bundling of data with methods that will interact with it
Inheritance: basing a class or object upon previously existing objects or classes
Polymorphism: the use of a single symbol to represent multiple data types
204
What is "abstraction"?
The generalization of complex data and adding it to a simple interface. "Being able to work with potentially complex things in simple ways".
205
What does API stand for?
Application Programming Interface
206
What is the purpose of an API?
In regards to OOP, an API is a description of how objects work in a given object oriented language. Abstractions created in order for you to interact with complex systems.
207
What is this in JavaScript?
'this' is a keyword in javascript. Depending on the time in which it is used, it can represent many things. However, it is most commonly used to represent the object that is being worked in.
208
What does it mean to say that this is an "implicit parameter"?
It means that 'this' is available in a functions codeblock even if it does not appear in the parameter list or is not being defined as a variable.
209
When is the value of this determined in a function; call time or definition time?
The value of 'this' is determined by call time.
210
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);
}
};
'this' does not even exist yet because the greet method is not being called.
211
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
character.greet() will console log the message "It's a me, Mario!"
(this.firstName = 'Mario')
212
Given the previous character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
This will console log "Its-a-me, undefined!" because 'this' is currently undefined because its being called outside of the object.
213
How can you tell what the value of this will be for a particular function or method definition?
because the function that holds 'this' has not been called yet, we cannot say what 'this' means definitively.
214
How can you tell what the value of this is for a particular function or method call?
You would need to look to the left of the dot operator of the method call. If there is nothing there, then it is window.
215
What kind of inheritance does the JavaScript programming language use?
Javascript uses Prototype-based or prototypal inheritance. Which is when javascript objects are able to give behaviors (methods) or data (variables) to other javascript objects.
216
What is a prototype in JavaScript?
A prototype is an object that has methods and variables that can be inherited by other objects.
217
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 strings, arrays, and numbers have prototypes that have the methods that are being used on them.
218
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
Javascript goes and looks for it in the object prototype that applies to the object.
219
What does the new operator do?
The new operator creates an instance of a user-defined object type or prebuilt object type (array, function, string)
1. Creates new blank, plain object
2. Points new instances prototype to the constructor functions prototype property
3. Executes the constructor function with the given arguments and bind the new instance as 'this'
4. If the constructor returns a non-primitive, the return value becomes the result of the 'new' expression.
The purpose of a constructor is to help us get access to the actualy prototype which houses all the methods / data
220
What property of JavaScript functions can store shared behavior for instances created with new?
The prototype property allows for sharing of data and methods between instances of the same object.
221
What does the instanceof operator do?
The instanceof operator checks to see if any given object is an instance of a prototype.
222
What is a "callback" function?
It is a function that is called as an argument to another function
223
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?
You could put the function that you wish to perform in the global method setTimeout() with the function and the millisecond delay you wish.
224
How can you set up a function to be called repeatedly without using a loop?
You could use the setInterval method, passing in the function and the time between each function call.
225
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
It automatically sets to 0 if no delay is given.
226
What do setTimeout() and setInterval() return?
They return an IntervalID which identifies the interval. This allows for the user to stop the interval using the clearInterval method.
227
What is a client?
A piece of hardware or software that accesses services provided by a server.
(Requests resources from servers)
228
What is a server?
A piece of hardware or software that provides functionality to requesting clients
229
Which HTTP method does a browser issue to a web server when you visit a URL?
GET method
230
What three things are on the start-line of an HTTP request message?
1) An http method (GET, PUT, POST, etc)
2) The request target (usually a URL)
3) The HTTP version
231
What three things are on the start-line of an HTTP response message?
1) The protocol version (usually HTTP 1.1)
2) A status code, indicating failure or success
3) A status text to allow the user to understand the HTTP message.
232
What are HTTP headers?
They allow for the client and the server to pass along additional information with an HTTP request or response.
233
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
234
Is a body required for a valid HTTP request or response message?
Not always. HTTP methods like GET, HEAD, DELETE, or OPTIONS dont need one.
235
What is AJAX?
A programming practice of building dynamic webpages using XMLHttpRequest.
The act of grabbing data, adding data, all asynchronously.
236
What does the AJAX acronym stand for?
Asynchronous Javascript And XML
237
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
238
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
The load event
239
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They share the same prototype (EventTarget)
240
What is a code block? What are some examples of a code block?
A code block is a grouping of code grouped together by curly braces. An example of a code block would be in a function definition.
function () {
*codeblock*
}
241
What does block scope mean?
Block scope means that variables only exist within that code block
242
What is the scope of a variable declared with const or let?
Const and Let variables are block scoped
243
What is the difference between let and const?
Unlike let variables, const variables cannot be reassigned once they are declared
244
Why is it possible to .push() a new value into a const variable that points to an Array?
Const cannot be changed through reassignment or redeclaration. .push() only adds onto the already existing array.
245
How should you decide on which type of declaration to use?
It all depends on what you are going to do with the variable. If you don't need to reassign it you should use const, but if you need to reassign the variable you should use let.
246
What is the syntax for writing a template literal?
backticks would bookend the string, if youd like to add variables you would add ${}
I.e.
`My name is Markus` or `My name is ${firstName}`
247
What is "string interpolation"?
The process in which an expression is inserted or placed into a string.
248
What is destructuring, conceptually?
It is the act of unpacking or breaking down data structures to retrieve their individual values and the assigning those values to variables
249
What is the syntax for Object destructuring?
const {property1, property2, property3} = obj ,
const {property1: prop1, property2:prop2} = obj
250
What is the syntax for Array destructuring?
const [ element1, element2, element3 ] = newArr
251
How can you tell the difference between destructuring and creating Object/Array literals?
The big difference is what is on either side of the assignment operator (=). If the object/array literal looks to be on the left with the variable name on the right it is being destructured, if it is swapped, then its being created.
252
What is the syntax for defining an arrow function?
let newFunction = (arg1, arg2, ... argN) => {statement/s}
one arg:
const newFunc = arg1 => {statement/s}
no arg:
const newFunc = () => {statement/s}
253
When an arrow function's body is left without curly braces, what changes in its functionality?
The function now has an implicit return. It will return the expression even without the use of the return keyword
254
How is the value of this determined within an arrow function?
It looks at the scope surrounding it. (Lexical Scope)
The value of this is determined WHERE it is defined.
255
What is a CLI?
Command-Line Interface, text-based way to talk to a program
256
What is a GUI?
Graphical User Interface
257
Give a use case for 'man'
When youd want to look into more information about a CLI command
258
Give a use case for 'cat'
When you want to print out the contents of a text file.
259
Give a use case for 'ls'
When you want to list the contents of a directory
260
Give a use case for 'pwd'
When you want to print the current directory that you are in
261
Give a use case for 'echo'
When youd like to display a line of text in the Command Terminal
262
Give a use case for 'touch'
Technically you would use it when you want to modify a timestamp, but many use it to create new files.
263
Give a use case for 'mkdir'
When you'd want to make a new directory
264
Give a use case for 'mv'
For when youd like to rename (effectively, move) a file.
265
Give a use case for 'rm'
When youd like to remove a file or a directory
266
Give a use case for 'cp'
Whenever you would want to copy a file or directory
267
Give a use case for 'history'
When you want to see or save your command line history
268
What are the three virtues of a great programmer?
Laziness, Impatience, and Hubris
269
What is node.js?
You can run javascript outside of the browser
270
What can Node JS be used for
Backends for web apps, cmd line programs, automation
271
What is a REPL?
Read-Eval-Print-Loop
Reads the javascript, evaluates it, prints it out. Used in programming languages.
272
When was Node.js created?
2009
273
What back end languages have you heard of?
Java, Ruby, Rust, Python, SQL, C#, Golang, JavaScript, C++, C
274
What is the process object in a Node.js program?
The process object is a global variable that provides information and control on the current Node.js process. Process = instance of a running program
275
How do you access the process object in a Node.js program?
The process object can be accessed directly because it is a global variable. You can also access it with the syntax:
const process = require('process')
276
What is the data type of process.argv in Node.js?
It is an array of strings
277
What is a JavaScript module?
A file containing a function or a group of similar functions. They often contain code that can execute specific tasks when called into a larger application.
278
What values are passed into a Node.js module's local scope?
exports, require, module, __dirname, __filename
279
Give two examples of truly global variables in a Node.js program.
global and console
280
What is the purpose of module.exports in a Node.js module?
It allows for us to achieve modular programming because it allows for us to split functionality to different files. Sends whatever variables/functions we want to share.
281
How do you import functionality into a Node.js module from another Node.js module?
You would have to make sure that the functionality that you want has been assigned to module.exports. You would then create a variable which would be assigned required('./otherFile')
282
What is the JavaScript Event Loop?
The Javascript event loop is used when the stack is clear but there are items inside of the task queue. The event loop will grab the first item out of the task queue and put it onto the stack to be executed.
283
What is different between "blocking" and "non-blocking" with respect to how code is executed?
Blocking is when the code is being run synchronously on the call stack. Non-blocking is when the code is run asynchronously off of the call stack so multiple things can occur simultaneously
284
What is a directory?
A directory is a file that holds other files
285
What is a relative file path?
A relative path is one that refers to a locations in relation to the current working directory. Generally used with ./ or ../
286
What is an absolute file path?
The specific location of a file starting with the root directory
287
What module does Node.js include for manipulating the file system?
They incorporate the file system module or fs
288
What method is available in the Node.js fs module for writing data to a file?
.writeFile()
289
Are file operations using the fs module synchronous or asynchronous?
It would depend on what method you would use from the fs module. .readFile and .writeFile are both asynchronous
290
What is a client?
A client is something that requests content or services from a server.
291
What is a server?
Provider of a resource or service
292
Which HTTP method does a browser issue to a web server when you visit a URL?
It sends the GET method
293
What is on the first line of an HTTP request message?
A http method(GET, PUT, POST, etc, and then the URL of the website you wish to request from (request target)
294
What is on the first line of an HTTP response message?
The status line. Contains the protocol verson, a status code indicating success or failure, and then status text which tells the user what the status code means
295
What are HTTP headers?
The header for both request and responses both contain metadata and context about the request/response
296
Is a body required for a valid HTTP message?
No. Depending on what you wish to do with your request there often is no body. Methods like GET requests dont need bodies.
297
What is NPM?
NPM is a package manager that is effectively a software registry that houses thousands of packages or modules for use.
Website
Registry
CLI
298
What is a package?
A package is something that contains a file with everything that youd need for a module. (Directory with 1 or more file + package.json)
299
How can you create a package.json with npm?
you would use the command line
npm init --yes
300
What is a dependency and how to you add one to a package?
A dependency is a code from a third party that a package needs to work. To add one you would use the command line npm install 'dependency'
301
What happens when you add a dependency to a package with npm?
The dependency appears on your package.json file. Also, a node-modules file appears in your local directory
302
How do you add express to your package dependencies?
you would use on the command line ' npm install express'
303
What Express application method starts the server and binds it to a network PORT?
The listen() method
304
How do you mount a middleware with an Express application?
You would use .use()
305
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
The res and req objects
306
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json;
307
What is the significance of an HTTP request's method?
The HTTP request method indicates intent from the client and also a label for what the method actually does
308
What does the express.json() middleware do and when would you need it?
express.json() takes in incoming request in JSON and parses it. You would need it if someone was trying to post some JSON data.
309
What does the express.json() middleware do and when would you need it?
express.json() takes in incoming request in JSON and parses it. You would need it if someone was trying to post some JSON data.
310
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is an open source relational database. Relational databases stores data and sorts them by predefined relationships. Some other relational databases would be Microsoft SQL server, Firebird, and Helix
311
What are some advantages of learning a relational database?
Many domains can be modeled well with relational databases. Relational databases also support good data integrity. Learning relational databases are transferable skills
312
What is one way to see if PostgreSQL is running?
You can use the command: sudo service postgresql status
313
What is a database schema?
A schema is a definition to how data in a relational database should be organized and stored
314
What is a table?
A table is data being stored in a relation. The table has rows and columns. Each individual row is an entry into the table. Each column is an attribute that each entry can have
315
What is a row?
A row is a record in the spreadsheet. Each row is made up of columns that represent attributes for each row.
316
What is SQL and how is it different from languages like JavaScript?
SQL is a language used primarily to communicate with databases. It differs from languages like JavaScript because it is a declarative language which means we tell SQL what we want vs an imperative language where we have to tell it exactly how to do what we want.
317
How do you retrieve specific columns from a database table?
You would use the select key word with the name of the columns youd like to see in double quotes.
EX.
select "firstName"
318
How do you filter rows based on some specific criteria?
You would use the where keyword along with whatever condition youd like
EX.
select *
from "server"
where "firstName" = 'Don'
319
What are the benefits of formatting your SQL?
It helps to make the query more readable. It effectively 'beautifies" our query
320
What are four comparison operators that can be used in a where clause?
= , < , > , !=
321
How do you limit the number of rows returned in a result set?
You would use the keyword limit and then the amount of entries youd like.
EX:
limit 5;
322
How do you retrieve all columns from a database table?
You would use the asterisk character
EX:
select *
from "server";
323
How do you control the sort order of a result set?
You can use the order by keywords. By default order by is in ascending order. To get it to show in descending order you would use the desc keyword.
EX:
select *
from "server"
order by "price" desc
324
How do you add a row to a SQL table?
You would use the insert into clause.
EX:
insert into "server" ("value1", "value2")
values ('data1', 'data2')
returning *
325
What is a tuple?
In SQL, a tuple is a list of values.
326
How do you add multiple rows to a SQL table at once?
You would just need multiple tuples defined.
EX:
insert into "server" ("firstName", "lastName")
values ('Markus', 'Doan-Le'),
('Andrew', 'Kao')
returning *
327
How do you get back the row being inserted into a table without a separate select statement?
You would need to use the returning clause along with the * or the column you want back
EX:
returning *
328
How do you update rows in a database table?
You would use the update clause in the following context:
EX:
update "nameOfTable"
set "firstName" = 'first',
"lastName" = 'last
where "firstName" = 'spanky'
returning *;
329
Why is it important to include a where clause in your update statements?
If you dont, you will change every single row in the table
EX:
update "nameOfTable"
set "firstName" = 'first'
returning *;
This will change every firstName attribute for each row to 'first'
330
How do you delete rows from a database table?
You would use the delete clause
EX:
delete from "tableName"
where "firstName" = 'Leticia'
331
How do you accidentally delete all rows from a table?
By not including the where clause.
EX;
delete from "tableName";
OOPS, the rows inside of tableName are gone
332
What is a foreign key?
The shared data value between the two tables. That is used to link them.
333
How do you join two SQL tables?
You would find a column that they have in common and the would use the join/using clause with the shared column name.
EX:
select "firstName"
from "students"
join "course" using ("studentId")
334
How do you temporarily rename columns or tables in a SQL statement?
You would use the as clause to create aliases
EX:
select "students"."name" as "studentName"
from "students"
335
What are some examples of aggregate functions?
sum( ) , count( ), avg( ), max( ), min( ), every( ), json_agg( )
336
What is the purpose of a group by clause?
Separate rows into groups and then perform aggregate functions on those groups.
337
What are the three states a Promise can be in?
Pending: In its initial state, it is neither fulfilled or rejected.
Fulfilled: The operation was completed successfully
Rejected: The operation failed
338
How do you handle the fulfillment of a Promise?
You would use the Promises.prototype.then() method
339
How do you handle the rejection of a Promise?
You would use the Promises.prototype.catch() method
340
What is Array.prototype.filter useful for?
Its useful for when you want to create an array that has data that fits a certain parameter
341
What is Array.prototype.map useful for?
When you need an array that has all of its elements affected by function
342
What is Array.prototype.reduce useful for?
For when you want to combine all elements into a single value
343
What is Webpack?
Webpack is a javascript module bundler. It even supports images, stylesheets, and fonts. It takes multiple modules and puts out fewer files (possibly even one)
344
How do you add a devDependency to a package?
You would use npm install *packagename* --save-dev
345
What is an NPM script?
A command line command with a nickname. It helps to automate multiple actions into a single command line command
346
How do you execute Webpack with npm run?
You would npm run build on the command line.
347
What is "syntactic sugar"?
Syntax within a programming language that makes things easier to read or express
348
What is the typeof an ES6 class?
It is a function
349
Describe ES6 class syntax.
Key word class, name of class, curly braces, constructor, methods
EX.
class Pizza {
constructor(isAPizza) {
this.isAPizza = isAPizza
}
topping() {
}
}
350
What is "refactoring"?
Restructuring code without changing functionality
351
How are ES Modules different from CommonJS modules?
CommonJS modules are synchronous which means they may cause blocking. ES modules are asynchronous. ES modules are official. CommonJS modules are a community effort
352
What kind of modules can Webpack support?
ECMAScript modules, CommonJS Modules, and AMD modules (asynchronous module definition)
353
What is React?
A JavaScript library used to create interfaces
354
What is a React element?
Objects that you want to see on the screen. Not real DOM elements.
355
How do you mount a React element to the DOM?
You would use the ReactDOM.render() method, passing in what youd want to mount to the DOM
1. Query for actual dom element
2. CreateRoot using .createRoot
3. call .render method on root passing in what you want to mount.
356
What is Babel?
A JavaScript compiler that turns ES6 backwards compatible in older or newer browsers.
357
What is a Plug-in?
Software that adds new features or extends functionality
358
What is a Webpack loader?
A transformation that is applied to the source code of the module
359
How can you make Babel and Webpack work together?
You install babel-loader into your dev dependencies using NPM. This allows webpack to bundle up jsx files and gives it to babel to transform it and then return it to webpack.
360
What is JSX?
A javascript syntax extension that allows for us to embed javascript into html elements. It is not HTML!
361
Why must the React object be imported when authoring JSX in a module?
It is because JSX is effectively creating a React component using the JSX transformer
362
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
You would use the babel-loader with the plugin for translating jsx into react
363
What is a React component?
Conceptually, React components are like JavaScript functions. They accept props and they return React elements that mimic HTML elements. They are reusable.
364
How do you define a function component in React?
It would be defined similarly to a JavaScript function:
function TestComponent (props) {
return *React ELEMENT*
} *name must be capitalized*
365
How do you mount a component to the DOM?
You would use the ReactDOM.render() method, passing in what youd want to mount to the DOM
1. Query for actual dom element
2. CreateRoot using .createRoot
3. call .render method on root passing in what you want to mount.
4. Generally we will be passing in a react component
366
What are props in React?
A JavaScript object that stores the value of attributes of a React element. Short for 'properties'
367
How do you pass props to a component?
prop name, equal sign, then prop value. If the value is not a string it needs to be in a set of curly braces
368
How do you write JavaScript expressions in JSX?
To write JavaScript expressions inside of JSX we need to bookend our desired javascript expressions with curly braces
EX.
{props.text}
369
How do you create "class" component in React?
You would use this syntax:
class CustomElement extends React.Component {
render() {
return *React element*
}
}
370
How do you access props in a class component?
Inside of the class component, when you are defining the render method you would use the *this* object in order to access props
371
What is the purpose of state in React?
Data model of values that change over time. "What changed in the state of the world?"
372
How to you pass an event handler to a React element?
You would pass it in as a prop and set the value to the method and bind it
EX. onClick = { this.handleClick}
373
What are controlled components?
When a form's data is handled by the component's state
374
What two props must you pass to an input for it to be "controlled"?
the value and onChange props
375
What Array method is commonly used to create a list of React elements?
The .map array method
376
What is the best value to use as a "key" prop when rendering lists?
A string that uniquely identifies the item, like an id
377
What does express.static() return?
It returns a function
378
What is the local __dirname variable in a Node.js module?
It is the absolute path of the directory that contains the currently executing file.
379
What does the join() method of Node's path module do?
It joins the specified path segments into a single file path.
380
What does fetch() return?
It returns a Promise that resolves into a response object.
381
What is the default request method used by fetch()?
GET
382
How do you specify the request method (GET, POST, etc.) when calling fetch?
You would pass in an object that would have the desired method on it.
EX:
fetch("API URL", {method: "POST"})
383
When does React call a component's componentDidMount method?
Immediately after a component is mounted (first render) (inserted on DOM tree)
384
Name three React.Component lifecycle methods.
constructor, componentDidMount, render
385
How do you pass data to a child component?
passing a prop
386
What does the acronym LIFO mean?
"Last in, First Out"
387
What methods are available on a Stack data structure?
.peek(convenience), .pop, .push, .print(for debugging)
388
What must you do to access the value at an arbitrary point in a stack (not just the "top")?
You would have to pop off the top until you are at the point in the stack you wish to be at.
389
What does the acronym FIFO mean?
"First In, First out"
390
What methods are available on a Queue data structure?
.enqueue, .dequeue
391
What must you do to access the value at an arbitrary point in a queue (not just the "front")?
You'd have to dequeue until you get to the value that you wish to access
392
How are linked lists different from an array?
Linked lists cannot be accessed randomly by an index. It is in sequential order.
393
How would you access an arbitrary node in a linked list (not just the "head")?
You would have to use the .next method in order to access the arbitrary node.
394
What must the return value of myFunction be if the following expression is possible?
myFunction()();
The return value is the return of the inner function
395
What must the return value of myFunction be if the following expression is possible?
myFunction()();
The return value is the return of the inner function
396
What does this code do?
const wrap = value => () => value;
When wrap is called, it will return the function inside that returns the value
397
In JavaScript, when is a function's scope determined; when it is called or when it is defined?
When it is defined
398
What allows JavaScript functions to "remember" values from their surroundings?
Closures
