HTML Flashcards
1
Q
Where do you put non-visible content about the HTML document?
A
In the head element
2
Q
Where do you put visible content about the HTML document?
A
In the body element
3
Q
Where do the and tags go in a valid HTML document?
A
Inside the HTML element
4
Q
What is the purpose of a declaration?
A
To indicate the type of html for the browser
5
Q
Give five examples of HTML element tags.
A
Body, head, img, h1, span
6
Q
What is the purpose of HTML attributes?
A
Provide additional information about the contents of the element
7
Q
Give an example of an HTML entity (escape character).
A
© (copyright symbol)
8
Q
How do block-level elements affect the document flow?
A
Start on a new line
9
Q
How do inline elements affect the document flow?
A
Continues on the same line as the previous element
10
Q
What are the default width and height of a block-level element?
A
width: full line, hieght: whatever amount of space it needs
11
Q
What is the difference between an ordered list and an unordered list in HTML?
A
ordered lists - list the bullet points in numerical order.
unordered lists - just bullets points
12
Q
Is an HTML list a block element or an inline element?
A
block elements
13
Q
What HTML tag is used to link to another website?
A
anchor tag
14
Q
What is an absolute URL?
A
full url, takes you to a different domain
15
Q
What is a relative URL?
A
related to realtive pathing, stays internal to your HTML, does not change domains
16
Q
How do you indicate the relative link to a parent directory?
A
../
17
Q
How do you indicate the relative link to a child directory?
A
/
18
Q
How do you indicate the relative link to a grand parent directory?
A
../../
19
Q
How do you indicate the relative link to the same directory?
A
just indicate the file name
20
Q
What is the purpose of an HTML form element?
A
collect data from users
21
Q
Give five examples of form control elements.
A
text input, password input, checkboxes, dropdown boxes, submit buttons
22
Q
Give three examples of type attributes for HTML < input > elements.
A
submit, checkbox, radio
23
Q
Is an HTML < input > element a block element or an inline element?
A
inline
24
Q
What are the six primary HTML elements for creating tables?
A
table, th, tr, td, thead, tbody
25
What purpose do the thead and tbody elements serve?
thead lables the tables and tbody is where the data resides
26
Give two examples of data that would lend itself well to being displayed in a table.
student grade table, customer data
27
What are the names of the individual pieces of a CSS rule?
selector, property, value
28
In CSS, how do you select elements by their class attribute?
."class"
29
In CSS, how do you select elements by their type?
just type element name
30
In CSS, how do you select an element by its id attribute?
#"id"
31
Name three different types of values you can use to specify colors in CSS.
rgb, hex, color name, hsl
32
What CSS properties make up the box model?
content, border, margin
33
Which CSS property pushes boxes away from each other?
margin
34
Which CSS property add space between a box's content and its border?
padding
35
What is a pseudo-class?
a keyword that specifies a special state for the element
36
What are CSS pseudo-classes useful for?
useful for special cases in targeting specific elements
37
Name at least two units of type size in CSS.
px, rem
38
What CSS property controls the font used for the text inside an element?
font-family
39
What is the default flex-direction of a flex container?
row
40
What is the default flex-wrap of a flex container?
nowrap
41
Why do two div elements "vertically stack" on one another by default?
they are block elements
42
What is the default value for the position property of HTML elements?
static
43
How does setting position: relative on an element affect document flow?
does not affect flow, but allows it to move freely from it's original position
44
How does setting position: relative on an element affect where it appears on the page?
positioned element has taken its place in the normal layout flow, you can then modify its final position
45
How does setting position: absolute on an element affect document flow?
takes the element out of the normal flow of the document
46
How does setting position: absolute on an element affect where it appears on the page?
places the element above the static layer. if there is a non-static positioning set on an element, the absolute positioned element was position itself around the non-static positioned.
47
How do you constrain an absolutely positioned element to a containing block?
set the containing block to position relative (or other non-static position) to set it's boundaries
48
What is the purpose of variables?
stores values that can be referenced in the code
49
How do you declare a variable?
var, const, let
50
How do you initialize (assign a value to) a variable?
= sign
51
What characters are allowed in variable names?
_, $, letters (should not use capital letters) but not numbers at the start, no special characters
52
What does it mean to say that variable names are "case sensitive"?
ex: f and F are not the same, they are different
53
What is the purpose of a string?
store characters (often in succession) for javascript to allow transmission of data
54
What is the purpose of a number?
often used for counting or mathematical operations
55
What is the purpose of a boolean?
represent true or false
56
What does the = operator mean in JavaScript?
assigning a value to a variable
57
How do you update the value of a variable?
= operator with the new value to the variables
58
What is the difference between null and undefined?
null: represents a reference that points, generally intentionally, to a nonexistent or invalid object or address.
undefined: s a primitive value automatically assigned to variables that have just been declared, or to formal arguments for which there are no actual arguments
59
Why is it a good habit to include "labels" when you log values to the browser console?
to help with debugging with more clairty when you are reading or someone else is reading.
60
Give five examples of JavaScript primitives.
undefined, strings, number, boolean, null
61
What data type is returned by an arithmetic operation?
numbers
62
What is string concatenation?
combining two strings together
63
What purpose(s) does the + plus operator serve in JavaScript?
adds one value to another
64
What data type is returned by comparing two values (, ===, etc)?
boolean
65
What does the += "plus-equals" operator do?
variable = variable + new variable -> variable += new variable
66
What are objects used for?
Objects group together a set of variables and functions to create a model of a something you would recognize from the real world
67
What are object properties?
when a variable is apart of the object
68
Describe object literal notation.
easiet and most popular way to create objects - curly braces and their contents
69
How do you remove a property from an object?
"delete"
70
What are the two ways to get or update the value of a property in an object?
bracket and dot notation
71
What are arrays used for?
storing information, often data that are related to each other
72
Describe array literal notation.
"[ ]"
73
How are arrays different from "plain" objects?
actual order to the list via indexes
74
What number represents the first index of an array?
0
75
What is the length property of an array?
used to determine have many indexes are in the array
76
How do you calculate the last index of an array?
array.length-1
77
What is a function in JavaScript?
-packing up code for reuse throughout a program
giving a name to a handful of code statements to
-make it code easier to read
-making code "dynamic", meaning that it can be written once to handle many (or even infinite!) situations
78
Describe the parts of a function definition.
The function keyword to begin the creation of a new function.
An optional name. (Our function's name is sayHello.)
A comma-separated list of zero or more parameters, surrounded by () parentheses. (Our sayHello function doesn't have any parameters.)
The start of the function's code block, as indicated by an { opening curly brace.
An optional return statement. (Our sayHello function doesn't have a return statement.)
The end of the function's code block, as indicated by a } closing curly brace.
79
Describe the parts of a function call.
- The function's name.
| - A comma-separated list of zero or more arguments surrounded by () parentheses.
80
When comparing them side-by-side, what are the differences between a function call and a function definition?
the definition defines how the funciton should operate, function call is getting the function to actual perform the designed function
81
What is the difference between a parameter and an argument?
parameter is the input in the definintion, argument is during the function call
82
Why are function parameters useful?
You can think of a parameter as a placeholder. It is basically a variable whose value is not known until we call the function and pass an argument. When the function's code block is run, the parameter is will be holding the value of the argument
83
What two effects does a return statement have on the behavior of a function?
- Causes the function to produce a value we can use in our program.
- Prevents any more code in the function's code block from being run.
84
Why do we log things to the console?
to debug
85
What is a method?
function that is a property of an object
86
How is a method different from any other function?
it is a property of an object - syntax will differ
87
How do you remove the last element from an array?
pop method
88
How do you round a number down to the nearest integer?
floor method of the Math object
89
How do you generate a random number?
Math.random()
90
How do you delete an element from an array?
pop, shift, splice
91
How do you append an element to an array?
push, unshift, splice
92
How do you break a string up into an array?
split method
93
Do string methods change the original string? How would you check if you weren't sure?
no, to check you can console log or check MDN
94
Roughly how many string methods are there according to the MDN Web docs?
36
95
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
96
Roughly how many array methods are there according to the MDN Web docs?
33
97
Give 6 examples of comparison operators.
===, <=, >=, ==, >,
98
What data type do comparison expressions evaluate to?
boolean
99
What is the purpose of an if statement?
lets you get different results for different data
100
Is else required in order to use an if statement?
no
101
Describe the syntax (structure) of an if statement.
if (condition) {code block}
102
What are the three logical operators?
&&, ||, !
103
How do you compare two different expressions in the same condition?
using logical operators && ||
104
What is the purpose of a loop?
checks a condition in a repeatable fashion
105
What is the purpose of a condition expression in a loop?
based on the outcome of the condition (either true or false) it will determine which action will be taken or to be repeated
106
What does "iteration" mean in the context of loops?
a series of repeatable steps->the beginning of when the condition is being evaluated is the iteration
107
When does the condition expression of a while loop get evaluated?
as long as the condition evaluates to true - gets evaluated at beginning
108
When does the initialization expression of a for loop get evaluated?
An expression (including assignment expressions) or variable declaration evaluated once before the loop begins
109
When does the condition expression of a for loop get evaluated?
An expression to be evaluated before each loop iteration
110
When does the final expression of a for loop get evaluated?
An expression to be evaluated at the end of each loop iteration
111
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
112
What does the ++ increment operator do?
adds 1 to a number
113
How do you iterate through the keys of an object?
for in loops
114
What are the four components of "the Cascade".
source order, inheritance, specificity, !important
115
What does the term "source order" mean with respect to CSS?
Source order is, simply put, the order that your CSS rules are written in your stylesheet` - lower in stylesheet will have priority
116
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
117
List the three selector types in order of increasing specificity.
type selector, class selector, id selector
118
Why is using !important considered bad practice?
because it makes debugging more difficult by breaking the natural cascading in your stylesheets
119
Why do we log things to the console?
debugging and learning purposes
120
What is a "model"?
a repeatable template
121
Which "document" is being referred to in the phrase Document Object Model?
the HTML page
122
What is the word "object" referring to in the phrase Document Object Model?
represents a different part of the page that is loaded in the browser window
123
What is a DOM Tree?
DOM specifies the way in which the
browser should structure this model using
a DOM tree
124
Give two examples of document methods that retrieve a single element from the DOM.
document.getElementById(), document.querySelector()
125
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll()
126
Why might you want to assign the return value of a DOM query to a variable?
if you need to work with the element multiple times in the code
127
What console method allows you to inspect the properties of a DOM element object?
console.dir()
| dir = directory
128
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
html needs to load before javascript can work with DOM
129
What does document.querySelector() take as its argument and what does it return?
Uses a CSS selector, and returns
| the first matching element.
130
What does document.querySelectorAll() take as its argument and what does it return?
Uses a CSS selector to select all
| matching elements as a node list (basically an array for HTML elements)
131
What is the purpose of events and event handling?
allows for scripts to be run to allow the page to be more interactive
132
What do [] square brackets mean in function and method syntax documentation?
optional
133
What method of element objects lets you set up a function to be called when a specific type of event occurs?
.addEventListener
134
What is a callback function?
a function that is called within another function
135
What object is passed into an event listener callback when the event fires?
the event object
136
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
The target property of the Event interface is a reference to the object onto which the event was dispatched. - can check mdn or console log
137
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
adding () will cause the function to run right away. but for events you want to wait until after it is triggered
138
What is the className property of element objects?
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
139
How do you update the CSS class attribute of an element using JavaScript?
elementNodeReference.className = cName;
140
What is the textContent property of element objects?
The textContent property of the Node interface represents the text content of the node and its descendants.
141
How do you update the text within an element using JavaScript?
node.textContent = string
142
Is the event parameter of an event listener callback always useful?
not always because not all functions will use the event and just use variables.
143
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
more complicated
144
Why is storing information about a program in variables better than only storing it in the DOM?
easier to access the variables becuase for DOM you should have to query it
145
What does the transform property do?
lets you rotate, scale, skew or translate an element
146
Give four examples of CSS transform functions.
rotate, scale, skew, translate
147
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, transition-delay
148
Does the document.createElement() method insert a new element into the page?
no it does not, you need to use appendChild to insert
149
How do you add an element as a child to another element?
appendChild()
150
What do you pass as the arguments to the element.setAttribute() method?
setAttribute('attribute type', 'value')
151
What steps do you need to take in order to insert a new element into the page?
createElement() then appendChild()
152
What is the textContent property of an element object for?
gives the element object value
153
Name two ways to set the class attribute of a DOM element.
setAttribute(), .className
154
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
can create more than 1 DOM tree, very easy to test since there is a return value
155
Give two examples of media features that you can query in an @media rule.
min-width, max width; color, display mode, etc
156
Which HTML meta tag is used in mobile-responsive web pages?
viewport
| https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
157
What is the event.target?
The target property of the Event interface is a reference to the object onto which the event was dispatched
158
Why is it possible to listen for events on one element that actually happen its descendent elements?
due to event bubbling
159
What DOM element property tells you what type of element it is?
event.target.tagName
160
What does the element.closest() method take as its argument and what does it return?
takes a css selector and finds the closest element with the css selector value - returns closest ancestor
161
How can you remove an element from the DOM?
remove method
162
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 event listener to parent - event delegation
163
What is the affect of setting an element to display: none?
does not render anything within that element at all
164
What does the element.matches() method take as an argument and what does it return?
takes a selector and returns a boolean
165
How can you retrieve the value of an element's attribute?
getAttribute
166
At what steps of the solution would it be helpful to log things to the console?
for testing
167
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 assign those tab and views separately
168
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?
have to write each check individually
169
What is a breakpoint in responsive Web design?
The points at which a media query is introduced are known as breakpoints.
170
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?
so the page will dynamically fit with percentages
171
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?
for css, the rules at the bottom take priority -> source order
172
What is JSON?
JavaScript Object Notation: a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications
173
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.
deserialization - is the reverse process: turning a stream of bytes into an object in memory.
174
Why are serialization and deserialization useful?
allows you to send data across the network
175
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
176
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
177
How to you store data in localStorage?
localStorage.setItem()
The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key's value if it already exists.
178
How to you retrieve data from localStorage?
localStorage.getItem()
The getItem() method of the Storage interface, when passed a key name, will return that key's value, or null if the key does not exist, in the given Storage object.
179
What data type can localStorage save in the browser?
string
180
When does the 'beforeunload' event fire on the window object?
The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.
181
What is a method?
a function defined within an object to a property
182
How can you tell the difference between a method definition and a method call?
definition has keyword function and call has property name and arguments
183
Describe method call syntax (structure).
object.methodName(argument)
184
How is a method different from any other function?
specifically only used within objects. need to access the object before you can access the method
185
What is the defining characteristic of Object-Oriented Programming?
object can contain both data and behavior of code
186
What is the defining characteristic of Object-Oriented Programming?
object can contain both data and behavior of code
187
What are the four "principles" of Object-Oriented Programming?
abstraction, encapsulation, inheritance, polymorphism
188
What is "abstraction"?
the process of removing temporal details to focus on core details
189
What does API stand for?
application programming interface
190
What is the purpose of an API?
let's two different applications talk to each other
191
What is this in JavaScript?
this is an implicit parameter of all JavaScript functions.
192
What does it mean to say that this is an "implicit parameter"?
it is available in a function's code block even though it was never included in the function's parameter list or declared with var
193
When is the value of this determined in a function; call time or definition time?
call time
194
```
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);
}
};
```
character object
195
```
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();
It's a me, Mario!
| the this is referring to the character object which is accessing the firstName property of the character object.
196
```
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?
var hello = character.greet;
hello();
```
since there is not defied object, the global object will be window. but since window does not have a firstName property, it will be undefined.
197
How can you tell what the value of this will be for a particular function or method definition?
we don't know
198
How can you tell what the value of this is for a particular function or method call?
the value of this can be recognized as "the object to the left of the dot" when the function is called (as a method).
199
What kind of inheritance does the JavaScript programming language use?
prototype based inheritance
200
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?
they all have inherited prototypes that allow them to call those methods
201
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
under __proto__
202
What does the new operator do?
creates an instance of an object, sets the prototypes and link it to 'this' and returns 'this'
203
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
204
What does the instanceof operator do?
checks the argument on the left and if it is the same as the argument on the right, returns a boolean value
205
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.
206
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?
use the setTimeout method and specify a delay time
207
How can you set up a function to be called repeatedly without using a loop?
use the setInterval method
208
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
209
What do setTimeout() and setInterval() return?
it will return positive integers that represent the interval ID
210
what is a client?
system or application that requests for data
211
what is a server?
system or application that gives data
212
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
213
What three things are on the start-line of an HTTP request message?
http method, request target, http version
214
What three things are on the start-line of an HTTP response message?
http method, request target, http version
215
What are HTTP headers?
properties that specifies request or response
216
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
217
Is a body required for a valid HTTP request or response message?
no they are not always required
218
What is AJAX?
Ajax allows you to request data from a server and load it without having to refresh the entire page
219
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
220
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
221
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
222
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
the prototypes for XMLHttpRequest objects are inherited from EventTarget prototype
223
What is a code block? What are some examples of a code block?
a section of code
224
What does block scope mean?
an area in which a variable can be referenced and can only be referenced in that scope
225
What is the scope of a variable declared with const or let?
const or let are set in the code block they are declared in
226
What is the difference between let and const?
let: block-scoped variables that are mutable
const: block-scoped variables that are immutable
227
Why is it possible to .push() a new value into a const variable that points to an Array?
value of the const is mutable
228
How should you decide on which type of declaration to use?
const - when you plan on not changing or reassign the variable
let- when you plan on changing it
*always plan on using const first and then use let if you can't at that point
229
What is destructuring, conceptually?
make it possible to unpack variables
230
What is the syntax for Object destructuring?
let or const { property keys} = object
231
What is the syntax for Array destructuring?
let or const [ property keys ] = array
232
How can you tell the difference between destructuring and creating Object/Array literals?
look at where the variable name is on the equal sign. if on the right it is a destructing. if on the left it is a literal
233
What is the syntax for writing a template literal?
`${string}`
234
What is "string interpolation"?
the ability to substitute part of the string for the values of variables or expressions.
235
What is the syntax for defining an arrow function?
(p1, p2, ..., pn) => expression;
236
When an arrow function's body is left without curly braces, what changes in its functionality?
without curly braces means it's for expression but if you need to use a statement then you need to use a curly brace and it is going to return a value when using curly brace.
237
How is the value of this determined within an arrow function?
in the arrow function, the this, arguments, super, new.target are lexical. It means that the arrow function uses these variables (or constructs) from the enclosing lexical scope. -> value of 'this' is defined in the definition. in a normal function , 'this' is defined at call time, typically use arrow function as callback functions
238
What is Node.js?
Node.js is a program that allows JavaScript to be run outside of a web browser. It also allows non-block coding which allows multiple actions to be done simultaneously
239
What can Node.js be used for?
back end development, command line programs or automation
240
What is a REPL?
stands for read-eval-print loop: a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user; a program written in a REPL environment is executed piecewise
241
When was Node.js created?
2009 by ryan dahl
242
What is a computer process?
process is the instance of a computer program that is being executed by one or many threads
243
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
around 100
244
Why should a full stack Web developer know that computer processes exist?
full stack is based on making multiple processes work together - front end, back end and database and it will require to know how computer processes exist
245
What is the process object in a Node.js program?
The process object is a global that provides information about, and control over, the current Node.js process. As a global, it is always available to Node.js applications without using require().
246
How do you access the process object in a Node.js program?
since it's global we just reference it
247
What is the data type of process.argv in Node.js?
an array
248
What is a JavaScript module?
a single javascript file
249
What values are passed into a Node.js module's local scope?
export, require, module, __filename, __dirname
250
Give two examples of truly global variables in a Node.js program.
clearImmediateFunction,
| setTimeout, URL, process, global
251
What is the JavaScript Event Loop?
takes callbacks from callback queue and puts them on stack
| https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
252
What is different between "blocking" and "non-blocking" with respect to how code is executed?
blocking: when it is in the stack for a long time
non-blocking: when it is completed in the stack quickly
basically the difference is depending how long it sits on the stack
253
What is a directory?
a folder
254
What is a relative file path?
path to file based off current location (anything that doesn't start with a '/')
255
What is an absolute file path?
the whole file path starting from the root ('/')
256
What module does Node.js include for manipulating the file system?
'fs' module
257
What is NPM?
node package manager - it is a website, CLI and registry.
npm is the world's largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.
258
What is a package?
A package is a file in a directory that is described by a package.json file. A package must contain a package.json file in order to be published to the npm registry
259
How can you create a package.json with npm?
npm init --yes
260
What is a dependency and how do you add one to a package?
Having dependencies in your project's package.json allows the project to install the versions of the modules it depends on
261
What happens when you add a dependency to a package with npm?
Having dependencies in your project's package.json allows the project to install the versions of the modules it depends on
262
How do you add express to your package dependencies?
npm install express - the package.json gets updated and node_modules get updated.
263
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req (request), res(response), next
264
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req (request), res(response), next
265
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
Content-Type: application/json; charset=utf-8
266
What is the significance of an HTTP request's method?
HTTP request method is arbitrary, we mean it to do something but we can have it do anything. HTTP method is to express intent
267
What does the express.json() middleware do and when would you need it?
This is a built-in middleware function in Express. It parses incoming requests with JSON payloads and is based on body-parser.
Returns middleware that only parses JSON and only looks at requests where the Content-Type header matches the type option. This parser accepts any Unicode encoding of the body and supports automatic inflation of gzip and deflate encodings.
A new body object containing the parsed data is populated on the request object after the middleware (i.e. req.body), or an empty object ({}) if there was no body to parse, the Content-Type was not matched, or an error occurred.
ex: app.use(express.json())
268
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a powerful, free, open source Relational Database Management System (RDBMS).
alternative relational databases: Other popular relational databases include MySQL (also free), SQL Server by Microsoft, and Oracle by Oracle Corporation
269
What are some advantages of learning a relational database?
Many problem domains can be modeled well using a relational database. If you are storing related data, then a relational database is probably a good first choice
A quality of many relational databases is that they support good guarantees about data integrity. They can store and modify data in a way that makes data corruption as unlikely as possible
270
What is one way to see if PostgreSQL is running?
sudo service postgresql status
271
What is a database schema?
A collection of tables is called a schema. A schema defines how the data in a relational database should be organized.
272
What is a table?
Relational databases store data in relations, commonly referred to as tables
273
What is a row?
A table is a list of rows each having the same set of attributes. For example, all students in a "students" table could have "firstName", "lastName", and "dateOfBirth" attributes. Attributes are commonly referred to as columns.
274
What is SQL and how is it different from languages like JavaScript?
SQL is a declarative programming language. In declarative languages, programmers describe the results they want and the programming environment comes up with its own plan for getting those results.
275
How do you retrieve specific columns from a database table?
SELECT "name of column"
276
How do you filter rows based on some specific criteria?
use WHERE
277
What are the benefits of formatting your SQL?
SQL does not have to be indented, but you should do it anyway for consistent style and therefore readability.
278
What are four comparison operators that can be used in a where clause?
=, !=,
279
How do you limit the number of rows returned in a result set?
Limit (number)
280
How do you retrieve all columns from a database table?
Select *
281
How do you control the sort order of a result set?
Order by "name of column"
282
How do you update rows in a database table?
using UPDATE and SET "keywords"
283
Why is it important to include a where clause in your update statements?
not using WHERE will mean that you updating all the rows that contains the column in the table. where helps you specifcy
284
How do you add a row to a SQL table?
INSERT INTO "keywords"
285
What is a tuple?
list of values
286
How do you add multiple rows to a SQL table at once?
in VALUES, you specificy more than one input using ,
287
How to you get back the row being inserted into a table without a separate select statement?
use RETURNING "keywords"
288
How do you delete rows from a database table?
DELETE FROM "keywords"
289
How do you accidentally delete all rows from a table?
using DELETE FROM without using WHERE to specify what you want to delete
290
How do you join two SQL tables?
JOIN "keyword" USING ("another keyword")
291
How do you temporarily rename columns or tables in a SQL statement?
"newname".column as "keyword replaced by newname"
292
What is a foreign key?
Notice how each row in the "products" table has a "supplierId" column. That column specifically refers to values in the "supplierId" column of the "suppliers" table. This is known as a foreign key. Instead of putting all of the supplier information for a product into the product row itself, there is instead just one column that links the "products" table to the "suppliers" table.
293
What are the three states a Promise can be in?
A Promise is in one of these states:
pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.
294
How do you handle the fulfillment of a Promise?
```
const promise1 = new Promise((resolve, reject) => {
resolve('Success!');
});
```
promise1.then((value) => {
console.log(value);
// expected output: "Success!"
});
295
How do you handle the rejection of a Promise?
```
const promise1 = new Promise((resolve, reject) => {
throw 'Uh-oh!';
});
```
promise1.catch((error) => {
console.error(error);
});
// expected output: Uh-oh!
296
What is Array.prototype.filter useful for?
when you want to exclude certain elements from an array
297
What is Array.prototype.map useful for?
when you need to manipulate all elements of an array
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
298
What is Array.prototype.reduce useful for?
when you want to output a single value from an array
299
What is "syntactic sugar"?
syntax that is easier to read but does not change the behavior of the code
300
Describe ES6 class syntax.
class "name" {
contructor() {
}
prototypes()
}
301
What is "refactoring"?
changing the code in a way that doesn't change the external behavior of the code. refactoring can be used to make code less complex, shorter, more efficient, extc
302
What is the typeof an ES6 class?
function
303
What is Webpack?
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
304
How do you add a devDependency to a package?
to add devDependency you can use --save-dev
305
What is an NPM script?
The "scripts" property of of your package.json file supports a number of built-in scripts and their preset life cycle events as well as arbitrary scripts. These all can be executed by running npm run-script or npm run for short
An npm script is a convenient way to bundle common shell commands for your project.
306
How do you execute Webpack with npm run?
npm run 'script alias'
307
How are ES Modules different from CommonJS modules?
The goal for ECMAScript 6 modules was to create a format that both users of CommonJS and of AMD are happy with:
- Similar to CommonJS, they have a compact syntax, a preference for single exports and support for cyclic dependencies.
- Similar to AMD, they have direct support for asynchronous loading and configurable module loading.
Being built into the language allows ES6 modules to go beyond CommonJS and AMD (details are explained later):
- Their syntax is even more compact than CommonJS’s.
- Their structure can be statically analyzed (for static checking, optimization, etc.).
- Their support for cyclic dependencies is better than CommonJS’s.
The ES6 module standard has two parts:
- Declarative syntax (for importing and exporting)
- Programmatic loader API: to configure how modules are loaded and to conditionally load modules
https://2ality.com/2014/09/es6-modules-final.html#module-systems-for-current-javascript
308
What kind of modules can Webpack support?
ecmaScript, CommonJS, AMD, Asssets, WebAssembly
309
What is React?
a javascript library for building user interfaces
310
What is a React element?
an object
| react elements are not dom elements
311
How do you mount a React element to the DOM?
ReactDOM.render(element, container[, callback])
*If the React element was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.
312
What is Babel?
Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
- Transform syntax
- Polyfill features that are missing in your target environment (through @babel/polyfill)
- Source code transformations (codemods)`
313
What is a Plug-in?
In computing, a plug-in (or plugin, add-in, addin, add-on, or addon) is a software component that adds a specific feature to an existing computer program.
314
What is a Webpack loader?
Loaders are transformations that are applied to the source code of a module.
They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!
315
How can you make Babel and Webpack work together?
installing Babel Loader
316
What is JSX?
It is called JSX, and it is a syntax extension to JavaScript. JSX produces React “elements”. XML and HTML like syntax extension. Javascript + some extra stuff
317
Why must the React object be imported when authoring JSX in a module?
JSX requires the methods in React
318
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Babel loader and the webpack.config.js file
319
What is a React component?
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Conceptually, components are like JavaScript functions or classes. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
320
How do you define a function component in React?
```
function 'functionName' (props) {
return value;
}
```
321
How do you mount a component to the DOM?
ReactDOM.render(element, container)
322
What are props in React?
“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. ( one way from parent to child)
props is an object
323
How do you pass props to a component?
{props}
324
How do you write JavaScript expressions in JSX?
wrapping it in curly braces
```
ex:
const name = 'Josh Perez';
const element =
Hello, {name}
; ``` ReactDOM.render( element, document.getElementById('root') );
325
How do you create "class" component in React?
```
class 'className' extends React.Component {
render() {
return react element
}
}
```
326
How do you access props in a class component?
'this' keyword
ex
{this.props.text}
327
What is the purpose of state in React?
for any variables or properties that you want to manipulate or change throughout the code
328
How to you pass an event handler to a React element?
using "on" + "name of event handler you want" as a prop
329
What are controlled components?
An input form element whose value is controlled by React
330
What two props must you pass to an input for it to be "controlled"?
value and onChange props
331
What Array method is commonly used to create a list of React elements?
map
332
What is the best value to use as a "key" prop when rendering lists?
strings
| The best way to pick a key is to use a string that uniquely identifies a list item among its siblings
333
What does express.static() return?
Create a new middleware function to serve files from within a given root director. returns a middleware function
334
What is the local __dirname variable in a Node.js module?
The directory name of the current module.
335
What does the join() method of Node's path module do?
The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.
336
What does fetch() return?
A Promise that resolves to a Response object.
337
What is the default request method used by fetch()?
GET
338
How do you specify the request method (GET, POST, etc.) when calling fetch?
after specfying the resource in the arugment, there is an optional space to specify the request method
339
When does React call a component's componentDidMount method?
after it renders the first time
340
Name three React.Component lifecycle methods.
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
constructor->render->componentDidMount
341
How do you pass data to a child component?
props
342
What must the return value of myFunction be if the following expression is possible?
myFunction()();
returns a function
```
function foo() {
return foo
}
```
foo returns foo
343
```
What does this code do?
const wrap = value => () => value;
```
wrap will give you back to the value
| closures allow you to access data within a function
344
In JavaScript, when is a function's scope determined; when it is called or when it is defined?
when it's defined
