Web Development Flashcards
(421 cards)
1
Q
What three HTML elements do you use to build a description list?
A
description list
description term
description definition
2
Q
How do you indicate the parent folder in a path?
A
Use ../ to indicate the folder above the current one, then the file name
Example: ../index.html
3
Q
How do you indicate the child folder in a path?
A
Use the name of child folder, then the file name
Example: music/listings.html
4
Q
How do you indicate the grand parent folder in a path?
A
Repeat the ../ to go up two folders, then follow with the file name.
Example: ../../index.html
5
Q
How do you indicate the current folder in a path?
A
Use the file name
Example: index.html
6
Q
What purpose do the thead and tbody elements serve?
A
thead: separate chunks in your table
tbody: the body (information) of table
7
Q
Give two examples of data that would lend itself well to being displayed in a table.
A
Numbers, finances, anything you can put in an excel sheet
8
Q
What is an absolute URL?
What is a relative URL?
A
Absolute URL: When you link to a different website, the value of the href attribute will be the full web address for the site
Relative URL: When you are linking to other pages within the same site, you do not need to specificy the domain name in the URL (example: <a>Home</a>)
9
Q
What attribute do you have to match between a label and an input?
A
for and id
10
Q
What attribute do you have to match between a label and an input?
A
for and id
Example:
Name:
11
Q
What type of input allows you to select multiple items in a dropdown?
A
select
select needs to work with the element
12
Q
What is the action of a form?
A
uses the action attribute to indicate the page that the data is being sent to
13
Q
Give five examples of form control elements.
A
input option text area select button
14
Q
Give three examples of type attributes for HTML input elements.
A
password email radio checkbox text calendar phone number button color date time file
15
Q
Why would we choose specific element types when we have elements such as div and span which can be used for anything?
A
Provide elements that provide content
SEO (search englines)
Accessibility
16
Q
What factors contribute to a well-designed HTML document?
A
Proper formatting (indenting)
Using the correct functions
17
Q
What are the names of the individual pieces of a CSS rule?
A
property, value, selector, declaration
18
Q
How are key/value pairs related to CSS?
A
properties and values
name that correlates to a value
19
Q
Name three different types of values you can use to specify colors in CSS.
A
RBG Values
HEX
Color Names
20
Q
Why must you have backup fonts assigned when selecting custom fonts?
A
In case the user does not have that font installed
If the fall back doesn’t work, it will default to New Times Roman
21
Q
What CSS properties make up the box model?
A
padding, border, margin
content is not a CSS property
22
Q
Which CSS property pushes boxes away from each other?
A
margin
23
Q
Which CSS property pushes box content away from its border?
A
padding
24
Q
What are three important considerations for choosing fonts?
A
Readability, cross browsers reading, theme, target market
25
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
Mobile responsiveness
26
What is source order?
order that CSS rule is written
| Styling provided for an element LAST in stylesheet
27
What is inheritance?
If the child element does not have a value, it would look to the parent element for a value
28
Why might CSS include the inheritance feature?
To set font related properties instead of setting it individually
29
Is inheritance a good tool to use for styling? If so, on what occasions?
Yes, because you can simplify setting properties
| although its on the weaker side - any direct styling will override it
30
When is ! important a good tool to use?
NEVER. It's used to override a template that you have no control over or for people writing libraries for CSS
31
What is specificity?
A browser decide which CSS property values are the most relevant to an element.. then apply it
The more unique, the stronger it'll be
32
How is specificity calculated?
determined by the number of each selector type in the matching selector
33
Why might CSS include this feature?
To make things more precise to an element and not worrying about it getting overwritten
34
What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?
id
class
element
universal selector
35
What is the CSS Cascade?
All the factors to determine what style is applied
36
What are CSS pseudo-classes useful for?
adds a specific selector to an element
37
What does the transform property do?
allows you to visually manipulate an element by skewing, rotating, translating, or scaling:
(adjust how the element represents itself visually on the page)
38
What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
39
What are 3 examples of what can be done with CSS transitions?
scale(grow or shrink), rotate, transition delay
40
Are all properties able to be transitioned?
no
List of properties that are transition-able: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
41
Why is CSS transition a useful tool?
create elements to be more visually pleasing
another way to make website more comfortable for users
42
How do block-level elements affect the document flow?
start on a new line in the browser window
examples: h1, p, ul, li
43
How do inline elements affect the document flow?
some elements will continue on the same line as neighboring elements
examples: a, b, em, img
44
What are the default width and height of a block-level element?
100% (takes up any space available)
height: auto (same as content)
width: 100%
45
What are the default width and height of an inline element?
takes up space to accommodate its contents
height: auto (same as content)
width: auto (same as content)
46
What accessibility considerations must be considered when choosing HTML elements?
when you want emphasize through a spoken word (such as strong, em, del)
47
What is the difference between display: none and visibility: hidden?
display: none = hides an element on a page.. element will not be on the page at all (no spaces, no gaps)
visbility: hidden = hides an element.. all the other elements moves over it (shows a space for the hidden element)
48
What is the difference between the block, inline block, and inline display properties?
block: takes up full width
inline: takes up minimum space
inline block: takes up minimum space but with a set height and width
49
What is the initial display property of div s?
block
50
What is the difference between the block, inline block, and inline display properties?
block: takes up full width
inline: takes up minimum space
inline block: takes up minimum space but with a set height and width (you can resize height and width)
51
Why are CSS resets helpful for cross browser compatibility?
its good to be consistent across multiple browsers
52
Why is it important to be mindful of what you reset with your CSS resets?
you don't want to reset everything as it'll give us a starting point. you just want to get rid of things that will cause problems between different browsers
53
What is an argument against using CSS resets?
a lot of the styles are eventually overridden by our main stylesheet, which means that the reset styles unnecessarily add to page load time
54
What is an argument against using CSS resets?
a lot of the styles are eventually overridden by our main stylesheet, which means that the reset styles unnecessarily add to page load time (more work for browser)
55
What is the default value for the position property of HTML elements?
static
56
How does setting position relative on an element affect document flow and where the element appears on the page?
moves an element in relation to where it would have been in a normal flow
shift where it would normally be
57
How does setting position absolute on an element affect document flow and where the element appears on the page?
removed from document flow entirely and looks for the first non-static parent it can find to position itself against
58
What are the box offset properties?
top, bottom, left, and right
59
What were floats originally designed for?
to allow developers to float text around image elements similar to the way newspapers and magazines would display text. For example:
60
What are clears for with floats?
allows you to say that no element should touch the left or right hand sides of a box
can see floated elements
61
What are some of the downsides for using floats in layout design?
element is removed from the document flow
You need to make sure that every element is aware of the float (there is a lot of overhead to check in CSS)
62
What are the three core parts of a grid system?
container, row, column
63
Why should flexbox not be used for building complete web page layouts?
Flexbox is best for arranging elements in either a single row, or a single column.
64
Why is it important to use a grid system for CSS layouts?
Easier to edit in teams
individual: you can use the same tools that you've been using
65
Why is it a good idea to use percentages for grid column widths?
responsiveness (if you're viewing it on different screen sizes, you do not have to write more codes to adjust to different screen sizes)
66
How do you think building this layout would be different without a grid system?
IT WOULD NOT BE FUN
It would be very tough...
67
What advantages do you see with using a grid system?
organized (easier to work with),
user friendly (easier for them to use and read)
68
Why are media queries crucial to responsive grid designs?
automatically adjust the set width of the container class depending on the size of the current browser window
without it, building responsive designs is almost impossible (it is important for the content of the website to adapt to the screen it is displayed on)
69
What is a variable?
to temporarily store the bits of information it needs to do its job
container that we can store data in and reference by data to be used later on
70
Why are variables useful?
ability to have something you can reference and use later
71
What two special characters can a variable begin with?
$ or underscore (_)
72
How do you declare a variable?
using the VAR keyword
ex. var quantity
73
Which words cannot be used as variable names?
JavaScript keywords
| if, while, var, const
74
What is a string?
data type that consists of letters and other characters in a pair of quotes
75
What is the string concatenation operator?
joining two or more strings to create a single value using the string operator (+)
76
What is the difference when it comes to using single quotes or double quotes ( ' ' or " " )?
nothing
77
How do you escape quotation characters?
backwards slash before any type of quotation mark
example: a href=\"sale.html\"
78
What is type coercion?
one data type has been converted from one data type to another
```
ex. concatenation
var phrase = 'I am'
var age = 29
var phrase2 = ' years old'
phrase + age + phrase2
```
79
What is a number in JavaScript?
data type that contains a number
80
What is an arithmetic operator?
mathematical operator
81
Name four of the arithmetic operators?
multiplication, division, addition, subtraction
82
What is the order of execution?
PEMDAS
83
What is a boolean?
data type with the values of true or false
84
What is a comparison operator?
used to compare values to test for true or false comparisons
85
What is the difference between undefined and null?
null: empty or non-existent, must be assigned (ex. vacant lot in a city - i want to put something here but not right now)
undefined: value is not assigned; not on purpose (ex. a vacant lot in a city - could be empty for a variety of reasons)
86
What is the difference between undefined and null?
null: empty or non-existent, a value that has been set by someone (ex. vacant lot in a city - i want to put something here but not right now)
undefined: value is not assigned; not on purpose (ex. a vacant lot in a city - could be empty for a variety of reasons)
87
What is the difference between a parameter and an argument?
parameters: variables
arguments: values
88
What is a function?
performs a specific task
89
Define a function named addTwoNumbers with two parameters
function addTwoNumbers(a, b) { }
90
How do you call a function?
using the statements in between the parenthesis
91
What are the parts of a function definition?
```
functionKeyword functionName() {
return statement
}
```
name function
parameter list
return code block
92
CODE READING: var firstName = “Michael”;
The string, Michael, is being assigned as the value for the variable first name
93
CODE READING: var address = number + street
the value of the variable number is being concatenation (+) with the variable of the value street. The result of this expression is the variable address
94
CODE READING: var area = height * width
the variable stored for height is multiplied by the variable stored for width. The result of this expression is the variable address
95
CODE READING: var inStock = true
the Boolean true is being assigned to the variable inStock
96
CODE READING: var nullVariable = null
the value null is being assigned to the variable nullVariable
97
CODE READING:
```
function multiplyTwoNumbers(a,b) {
return a*b
}
```
Function definition named multiplyTwoNumbers with the parameters a and b with an opening curly brace for the code block. The value for variable a is being multiplied with the value for the variable b and the result of the expression is being returned to the function. there is a closing curly bracket for the code block.
98
Why are functions useful?
writing little code as possible with a pattern of work that needs to be accomplished
99
Why is it important to understand truthy and falsy values?
important for doing comparisons and conditionals
do not want to convert things to a boolean to determine if its truthy or falsy, we want to check the values.
100
Why is the typeof null object?
it's a bug
101
Why do you always use === for comparisons?
to execute a true equality test
102
Why do you always use === for comparisons?
to execute a true equality test
convert values to similar data type to check for comparison
103
Do all if statements require an else statement?
no
104
Do all if statements require an else statement?
no
if there is an "else", that means something has to happen
105
What is the proper syntax for using the or operator?
dual pipes/double pipes
x == 5 || y == 5 is false
106
CODE READING: if (value1 < value2) {
if statement with a condition checking if the value of the variable value1 is less than the value of the variable 2 with an opening curly brace for a code block.
107
What is the primary use case for switches?
used to perform different actions based on different conditions.
108
What is the primary use case for switches?
knowing what the user is looking for and goes directly to it without checking a list
109
Does the default case have to be at the bottom of the switch statement?
no (but for good practice, it is on the bottom)
110
What happens if there is no break statement between cases?
the next case will be executed even if the evaluation does not match the case
it will start doing the work of the next case (fall through)
--ex: case using *, x, X for multiplication
111
CODE READING: switch (operator)
Switch statement checking the EXPRESSION of operator
112
Difference between if and switch statement
ex. friend ask for a banana
```
if statements (checks one at a time)
- you take one fruit out at a time until you get to the banana
```
```
switch statements (sees the full landscape and goes directly to the value you're looking for)
- you have the banana on a stand
```
113
What is an object in JavaScript?
collection of related/reference data (contains memory type)
primitive data(contains actual value)
114
How do you create an object literal?
var object = { };
```
var object2 = new Object( )
^ shorten syntax for creating a new object (not mainly used)
```
115
What is a property in relation to JavaScript objects?
a place where we can store data inside of an object
116
What is an array in JavaScript?
list (or set of values)
117
How do you create an array literal?
square brackets
118
Arrays have a property named length. Because arrays have a properties, what other data structure are they similar to?
(length is usually tied to an array = array.length)
119
CODE READING: colors[1]
value at the one index in the color array
| DO NOT SAY FIRST...
120
What are the keys for the values inside an array?
numbers counting up from zero
121
Arrays have a property named length. Because arrays have a properties, what other data structure are they similar to?
(length is usually tied to an array = array.length)
objects
122
What are some good use cases for using objects inside arrays?
student data (name, age, grade)
insurance policy (name, plan, cost)
user info (email, password, full name)
123
CODE READING: var library = [ ]
there is an empty array literal being assigned as the variable for library
124
CODE READING: library[0].title
the value of the title property of the object at the zero index of the library array
125
CODE READING: console.log(library[1].author)
the log method is being called to an argument to the value o the author property of the object at the one index of the library array
126
What is the primary advantage to storing your selected elements in a variable?
we can reuse it later
127
Why might you need JavaScript to modify the DOM after the page loads?
gives interactivity (gives update for interaction quickly)
128
How can you better prepare when writing HTML for DOM manipulation in your JavaScript code?
put more information in elements (like setting attributes)
129
CODE READING: box1.classList.remove(“blue”)
the remove method of the object within the class list property of the box1 object is being called with the string argument blue
130
CODE READING: box2.style.height = “150px”
the string 150 px is being assigned as the value for the height property which is the property of the style object on the box1 object
131
What are the differences between innertext and textContent?
textContent:
- gets all elements (including script) render text of the page
- returns every element in a node
innerText: (you don't normally use innerText)
- gets all "human-readable" elements
- aware of styling and won't return hidden elements
- has to interpret the text/DOM
- takes a longer time to read
132
What datatype are the values you remove from a text input?
string
133
Why is it so important to be able to dynamically update text?
interaction for the user (like updating text box, etc.)
134
What are some of the drawbacks of HTML Event Handler Attributes?
better to separate the JS from HTML
135
Why is the Window.event property to be avoided in new code?
This property is not universally supported and even when supported introduces potential fragility to your code
136
Why is the Window.event property to be avoided in new code?
This property is not universally supported and even when supported introduces potential fragility to your code
changes with every single event and can easily go to a different event than you're trying to work with
--ex. document.addEventListener("mouseover", console.log)
137
What is the difference between the getElementById() method and the querySelector() method?
The querySelector() method returns the first element that matches the specified css selectors. For example: document.querySelector("div.target > span");
The getElementById() method returns the first element that matches the given id in the DOM. For example: document.getElementById(“idOfSpan”);
138
Who passes in the event object into the handleClick callback function?
JavaScript language with automatically do it
139
Does a callback function require a name?
no (but you should name your functions)
this would be called an anonymous function
140
CODE READING: alert("it works")
alert function with the argument string it works
141
console log the event object which is passed in by the event handler when it calls the handleClick function
```
function handleClick(event) {
console.log(event);
```
142
What is the purpose of a loop?
to repeat the same, or similar, code a number of times
143
currentTarget
targets the element that the event is dealing with
144
CODE READING: current++
there is the variable current followed by the ++ operator
DO YOUR INCREMENTATION AFTER YOUR WORK IS DONE
145
Why might there be different kinds of loops?
different situations
146
What is the purpose of a conditional expression as it relates to loops?
when you can stop
147
Could a loop potentially go on forever?
yes
148
Could a loop never start?
yes
149
How does a for loop differ from a while loop?
while: don't know how many times you need to do something but do know where you'll stop (Ex. walking to leasing office.. don't know how many steps but i do know where to stop)
- -need a stopping place
for: know the number of items (aka arrays) we're dealing with (ex. checking off boxes on a stack of cards -- set number in a deck of cards)
- -need an initialization, condition, and final expression
150
What potential use cases are there for for loops?
arrays (example: search engine)
151
Which pieces of information provided in the parentheses for a for loop are mandatory?
none are mandatory
example: for(;;) --> but you could use while loop instead
152
What is a for in loop?
using a loop when you don't know how many things there are in an object
153
How do you target the value of a property in an object.
put the variable of the property in a bracket notation
154
When should you use a for in loop?
loop over an object
155
When should you use a for in loop?
loop over an object [and do the same action for each property]
156
When should you use a for in loop?
loop over an object [and do the same action for each property]
least use type of loop
157
What is node
a piece in your document
158
What is the difference between the parentNode and parentElement properties?
parentNode: document of the parent element
parentElement: parent element of the current node (always an element)
159
Why is it important to be able to traverse the DOM?
whitespace nodes and allows us to find information on elements around us
160
What kind of information is useful to store in custom attributes?
use data attributes to store information
| example USING DATA SET
161
What are two ways to target elements on the DOM?
querySelector (selects first element it finds) or getElementbyID or
querySelectorAll (looks for every single element that may have that class or attribute - but will always return a node list)
162
What is another way to add a text node to an element other than using textContent.
inner text (use when you want to avoid whitespace node)
document.createTextNode
163
How do you create a HTML element using vanilla Javascript?
create element method of the doc element object
164
Why is using loops and arrays for creating multiple dom elements preferable to creating them one at a time?
DRY (do not repeat yourself)
saves you time!!
165
Why are arrays preferred over objects for the functionality referenced in question 1?
(Q1: Why is using loops and arrays for creating multiple dom elements preferable to creating them one at a time?)
arrays have order and have index
objects do not have order
166
How would you alter the game to make the choice from 1 - 500?
var randomNumber = Math.floor(Math.random() * 500) + 1
math. random() = function that gives you a decimal between 0 and 1 but not actually 1... gives opportunity for random percentage.
math. floor() method chops off the decimal point; it'll round it off to an integer.
+1 = if i get 99.999 repeating, after math.floor it'll be 99 instead of 100. Which is why you add 1.
example: range between 25 - 50
math.floor(math.random() * (50 - 25 + 1)) + 25
[THAT SHOWS MAXIMUM MINUS MINIMUM AND ADDING 1 TO INCLUDE 25]
167
What are the disadvantages of inline styling via JavaScript?
you do not want to mix up languages
major problems with inline styling
if you have to do it, it would be where you need to make a math calculation
168
What things do you have to consider when building a reset game function?
generating a new number to guess if replaying
setting everything back to its initial value
169
CODE READING: header.appendChild(headingH1)
appendchild method of the header object is being called with the argument headingH1
170
CODE READING: var navbar = document.createElement('ul')
createelement method of the document object with the argument ul is being returned to the variable navbar
171
CODE READING: todoSubmitButton.setAttribute("id", "todoSubmit")
the setattribute method is being called on the todoInput object with an argument of string id and todoSubmit
172
Why is it important to be able to retrieve and use data from inputs?
get information from the user and choose what to do with that data
communicating with the user
173
Why is it dangerous to assume you have the correct data when creating elements?
you should never assume the user is using the correct information
174
What is jQuery?
jquery is a library added to javascript to perform css
purpose is to make it easier to interact with html and css with javascript
introduce ability to chain (Setting multiple things on one line)
lets you find elements using CSS-style selectors and then do something with the elements using jquery methods
175
What is the jQuery selector function?
$()
176
What does the jQuery selector function return?
return the list of elements that was asked
177
Why would someone use jQuery over vanilla Javascript?
easier to select elements, chain actions, trim syntax (shorter codes), works across all browsers
178
What are some downsides from using jQuery over vanilla Javascript?
hides the complexity, develop a skill set that's not permanent
you have to pull in a code from a network
179
Why do we use the tag at the bottom of the body, instead of putting it inside the tag?
want the page to load first before we add/remove/etc the classes and elements
javascript runs after all the elements exist
180
How do you get the text out of an HTML element?
| using jQuery
using .text()
everything is a method
181
How do you get the value out of an HTML input field?
| using jQuery
.val()
.value
182
What's the difference between .text() and .html()?
| using jQuery
.text() = (similar to .textContent)
.html() = give full DOM tree
183
What does .on() do?
| using jQuery
handles all events
184
What is event bubbling?
starts at the most specific node and flows outwards to the least specific one (Default type of event flow)
185
CODE READING: function handleContainerClick (event) { }
there is a function definition with handleContainerClick calling on a parameter (event)
186
What is the first argument the function setTimeout takes?
function definition
function callback (can be invoked later)
187
If the second argument is not passed into the setTimeout function, what is the default value?
zero (executed immediately)
188
What are some scenarios where setTimeout can be useful?
interacting with the user (seeing if the user is still there)
chat box on website
189
Difference between setInterval and setTimeout
setInterval (function that gets called everytime you set)
setTimeout (function gets executed once)
190
What does the setInterval function return?
returns an interval ID which uniquely identifies the interval
ID for that interval (their interval starts at 1)
191
What argument does the clearInterval function take?
identifier of repeated action that you want to cancel NOT THE FUNCTION
192
What are some scenarios where setInterval can be useful?
stop watch, keeping track of time, banner moving
193
What is the event loop?
which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks
194
What does the term blocking mean?
waiting for something to continue running
nothing else can happen until a code is done running
195
What is the call stack?
list of actions running in your javascript
data structure with a lifo (last in first out)
196
asynchronous
when you order a pizza, it takes 20 minutes, would you stand by the phone and wait? no you move on until the pizza came
(not happening in that moment)
197
CODE READING: startButton.addEventListener('click', function (event) { })
the addeventlistener method of the startbutton object is being called with 2 arguments, string click and function event
198
Which element in a website are used to create dynamically?
instagram search, shopping carts
199
Why should you not create all elements dynamically?
make it in an HTML document
its made dynamically because it responds to user input
200
What is a modal?
a mode that disables the main window but keeps it visible, with a modal window as a child window in front of it (users MUST interact with modal window before running to parent application)
a modal box is a scripted effect that allows you to overlay a small element over a website (they avoid the need to use window pop-ups or page reloads)
swiftly show information to users on the same page they'er working on
201
What are some use cases for modals?
discounts, subscription, login or signup forms, contact/comment forms
- Error: to alert users of an error
- Warning: to warn users of potentially harmful situations
- Data: to collect data from users
- Confirm or Prompt: to remind users to do something before moving on
- Helper: to inform users of important information
202
Why does a modal usually need to occupy the entire height and width of the viewport?
To force user interaction so that they're not clicking on the parent window
203
Modeless Design Elements
(non-modal) will permit users to access the parent window, even after they are invoked
examples: toolbars, accordian menus, social media docks, advance search menus
204
Give two examples of media features that you can query in an @media rule.
height, pointer
205
Which HTML meta tag is used in mobile-responsive web pages?
meta name="viewport" content="width=device-width, initial-scale=1.0"
206
Why do we need a single source of truth?
everything else is easily manipulated (DOM, other pieces of data, etc.) keep data model up to date without checking it in 4 different places
anytime the DOM needs to be updated, you update data model then the DOM
207
what is scope
execution contents
where is the code being executed
208
What is a method?
function attached to an object
209
What does a method do?
takes what you ask and gives a response
210
multiply: function (num1, num2)
there is an anonymous function definition with two parameters (num 1 and num2) being assigned to the property of multiply
211
return num1 * num2
the variable num1 is being multiplied by variable num2 and the result of that expression is being returned to the function
212
var sum = this.add(num1, num2)
the add method of this object is being called with 2 arguments variable num1 and variable num2 and the return of that call is being assigned to the variable sum
213
What is 'this' keyword?
refers to one object (usually the object in which the function operates)
214
What does bind do?
creates a new function that has 'this' keyword set to a provided value
215
What is the difference between a function and an object literal?
object literal: contains properties with values
functions: performs a task
216
ada.describe()
the describe method of the ada object is being called
217
describe()
function describe is being called
218
What is Prototypal Inheritance?
objects inherit properties from another object
219
What is the Prototypal Chain?
object.create()
it will create a new
220
In the custom objects we created, I noticed that our prototype object has another __proto__ property, where did that come from?
when we created carInfoPrototype type using curly braces, it will inherit the __proto__ property
221
Why does JavaScript have Prototypal Inheritance?
to save memory
222
What does the new keyword do?
creates a new object
new is adding things onto an object for you
new keyword does this:
- makes an empty object
- sets the constructor of the object to another object
- passed the newly created object as the this keyword context
- returns this keyword if the function doesn't return an object
223
I could've added a method to the constructor function by assigning a method to a property on the this object. Why do we have to add it to the prototype property?
instead of car.prototype.overview(), i could've used car.overview()... why use prototype?
inheritance! using memory efficiency.
224
car.prototype.overview = function() {
there is an anonymous function definition being assigned for the value of the overview property of the object within the prototype object of the car object
225
```
var fiat = new Car(
'fiat',
'500',
'500kg',
200,
'white',
4
)
```
the car function is being called using the new keyword and the return of that function call is being returned to the variable fiat
226
What is the first thing that happens in a class when it is instantiated with the new keyword?
calls the constructor function
227
Since classes are technically functions as well. Can you name a difference between classes and functions?
classes do not hoist (they have to be declared first)
functions can hoist
228
What is the basic idea of OOP?
we use objects to model real world things that we want to represent inside our programs, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of
229
class parent { }
class definition name parent
230
What is the benefit of instantiating Classes within other classes?
making a class inside another class, you save the class on the parent class
231
Why are parent - child relationships important in OOP?
avoid spaghetti code (keep everything in it's own space)
easier to build on
232
askForFood() { }
askForFood method being defined with no parameters
233
Why did you have to bind this for the feedChild method in the Parent class?
you would not be able to get the data from the other source
if you do not bind this, then there is no tie to the child class
234
Why is it important to assign callback methods to properties in the constructor?
functions are destroyed after constructor is done; save it as a property so that we can reference it in the future
235
Why did the Maker class require all of the Parent class info?
if the maker is responsible for creating the parent class, the data has to be there so that the maker can pass it onto the next source
236
Why did you have to bind this for the replenishFood method.
it would work when we pass it to the parent class, if we didn't bind it, the replenishFood would run only as it exists in that class... therefore, you would get an error
(bind it so that it gets used as if it's within that space)
237
What decides the order in which JS files must be loaded?
if you want to use a tool, it needs to exist already before calling the document that uses that tool
238
What is JSON?
JavaScript Object Notation: data format that looks like a JS object but it gets stored as a string so that the data is serialize
text-based data format following JavaScript object syntax
239
What are serialization and deserialization and why are they useful?
DESERIALIZATION:
- Converting a string to a native object
- turning a stream of bytes into an object in memory
SERIALIZATION:
- Converting a native object to a string so it can be transmitted across the network
- turning an object into memory
Useful for when you're transmitting data and trying to receive it
240
How do you serialize data into a JSON string using JavaScript?
JSON.stringify()
storing value
241
How do you deserialize a JSON string using JavaScript?
JSON.parse()
creates value
242
What is a client?
a machine that can send a request to a server
(example: a browser - html index file, a terminal, phones, video games with multiplayer, netflix on apple tv, command line client -- HTTPie)
243
What is a server?
computer or machine that provides the resource (data) or response
sending responses to request
EVERY server was created by a human being! O.o
244
Which HTTP method does a browser issue to a web server when you visit a URL?
get
245
What are the formats of HTTP requests and responses?
request and responses have the same format
- both are at the start-line
- -(request: destination and protocall.. next line is the request .. next is an empty line.. next is a body)
246
status code
look @ http.cat for visual of codes :D
100+: informational
200+: it's accepted/success
300+: the thing you need is somewhere else/redirect
400+: client error (like a browser)/client did something wrong
--400: you're not asking correctly, bad request
--401: not signed in
--402: need payment
--429: a thousand request in a for loop
500+: something is wrong on the server end (accidently)
--500: internal server error, back-end crash
--504: sending a request and the server does not respond fast enough (gateway timeout)
247
How does ajax work?
insert content from database or server without refreshing the page
248
Why did we need the jQuery CDN (content directory network)?
file that's hosted by other companies?
jquery has functions loaded into it so we need an external file for the user
249
How do you specify the request method (GET, POST, etc.) when calling ajax?
method property and the argument you pass
250
Variables defined with the var keyword are function scoped. const and let are _____ scoped.
- BLOCK
The variables declared via const and let are called block-scoped because their scopes are always the innermost surrounding blocks.
251
Name some characteristics of a variable declared using const.
- the binding (association between variable name and variable value) is immutable (immutable binding)
- ---the value itself may be mutable
- must always initialize immediately
- variable never changes its value
252
Name some characteristics of a variable declared using let.
- variables declared are mutable
- indicates value of the variable changes
- can change in value
253
What does block scope mean?
the scopes are always the innermost surrounding blocks
- block scope has less room for error
- curly braces indicate block scope
254
In the file we can push a new value to an array defined using the const variable. How does that work?
a fresh binding is created for each iteration (in a for-of loop)
(in for loops, you must use let)
- we are changing the property in the variable (you're expanding what's inside of it)
- constant is what object or array you're dealing with
255
Name some things that var can do that const and let can't.
- globally scoped for function scope while let and const are block scope
- can be updated and re-declared within its scope (let can be updated but not re-declared)
256
If var can be used virtually anywhere, why would we switch?
- older way of declaring
- scope of var is the innermost surrounding function and not the innermost surrounding BLOCK
- know where values need to exist and when to have it stop exisiting
Declaration var x: The scope of a var-declared variable is the innermost surrounding function and not the innermost surrounding block, as for most other declarations. Such a variable is already active at the beginning of its scope and initialized with undefined.
257
What is the syntax in writing a template literal?
- enclosed by the backtick (` `) (grave accent) character instead of double or single quotes.
- inject javascript with $ { }
258
What is string interpolation?
When you dynamically compute a value inside a dollar sign and curly braces ${}, it is converted to a string and inserted into the string returned by the literal
259
let greeting = greetings[randomNumber]
the value at the value of the randomnumber index array on greetings array is being assigned to the let variable greeting
260
const address = `${number} ${street}`
a template literal with javascript expression for the number variable and the street variable being assigned to the const variable address
261
When was destructuring introduced?
ES6 (year 2015)
262
Why could the running commas technique of destructuring an array be a bad idea?
- miscount the placeholders
| - if someone adds something to the front of the array, it'll ruin the code
263
How can you easily tell the difference between destructuring and creating array/object literals.
Destructuring: you have the name of the array/object on the right hand side of the equal sign
Creating: you have the values on the right hand side of the equal sign
264
How does an ES6 arrow function differ from an ES5 function?
Lack of it's own personal scope and lack of it's own personal value
Arrow functions provide a simplified structure, allowing for a more concise way to write function expressions.
265
When an arrow function's code block is left without curly braces, what (if anything) changes in its functionality?
you do not need to add a return as it would return the function for you
-implicit return
266
In what situations would you possibly use an arrow function?
Arrow functions are best for callbacks or methods like map, reduce, or forEach
267
In what situations would you not want to use an arrow function?
- when you're using the this keyword because the arrow function is not bound to it
- constructor functions and no arrow function methods
- arrow functions are simply incapable of binding a value of this different from the value of this in their scope
268
Can you name an arrow function?
No, they are all anonymous
269
What is a CLI?
command-line interfaces (process commands to a computer program)
270
What is a GUI?
graphical user interface (allows users to interact with electronic devices through graphical icons and audio indicator)
271
```
Give at least one use case for each of the commands listed in this exercise.
man
cat
ls
pwd
echo
touch
mkdir
mv
rm
cp
```
- man: manual
- cat: concatenate files (-A --> show all)
- ls: list directory contents (-a --> all)
- pwd: print name of current/working directory (-L --> use PWD from environment, even if it contains symlinks)
- echo: display a line of text (-e --> enable interpretation of backslash escapes)
- touch: change file timestamps (-a --> change only the access time)
- mkdir: make directories (-p --> no error if existing, make parent directories as needed)
- mv: move (rename) files (-f --> force. do not prompt before overwriting)
- rm: remove files or directories (-f --> ignore nonexistent files and arguments)
- cp: copy files and directories (-r --> copy directories recursively)
272
What is Node.js?
program that allows Javascript to be run outside of a web browser
back end program for running JavaScript
273
What can Node.js be used for?
commonly used to build back ends for web applications, command-line programs, or any kind of automation that developers with to perform
make command line programming using node
powered by V8 (same JavaScript engine in the Google Chrome browser)
274
What is a REPL?
read-eval-print-loop (REPL) then wait to read again
interactive computer programming environment
275
When was Node.js created?
2009 by Ryan Dahl
276
What back end languages have you heard of?
PHP, python, ruby, java, rust
277
Why should a full stack Web developer know that computer processes exist?
its based on making multiple processes work together to form one application
extremely important when learning about applications made of multiple components, such as clients, servers, and databases
278
What is a computer process?
an instance of a computer program that is being executed by one or many threads
279
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
100?
280
What is the process object in a Node.js program?
it's like the window object on the console
281
How do you access the process object in a Node.js program?
it's in the global scope
282
What is the data type of process.argv in Node.js?
an array of strings
283
What is modular code?
It is is how you separate your code out
- -define separate classes, functions
- -student grade table: had separate files
Defining classes and separating behavior into multiple functions are forms of modular programming. The whole idea behind modular programming is to decompose a solution to a large problem into many smaller solutions to sub-problems.
284
What is a JavaScript module?
a single JS file
285
What values are passed into a Node.js module's local scope?
exports, require, module, __dirname, __filename
module wrapper: automatically puts your code in a function
286
Give two examples of truly global variables in a Node.js program.
global && process && console.log
setInterval and setTimeout
287
array.filter is useful for...
return true or false.. if it's true, it'll create a new array that has all true returns
288
array.map is useful for...
when you want an object and just have a their properties... values... etc
289
array.find is useful for...
to find a single object in an array
return an item for the first thing that is true
290
array forEach is useful for...
similar to a for loop
items.forEach((item) => {
console.log(item.name)
})
---the above code will log all the names in the item array (loop through each property to find the name)
291
What is the purpose of module.exports in a Node.js module?
where you stick something that you want to make available to other modules so they can require it
292
How do you import functionality into a Node.js module from another Node.js module?
use the require function
require()
293
setTimeout()
calls the function when timer is met
console.log('Hello, just a moment...');
setTimeout(function () {
console.log('Thanks for waiting!');
}, 2000);
294
What is the JavaScript Event Loop?
the process of what's going on behind the scenes in the back-end
the part of the JS runtime that checks for asynchronous callbacks and puts them back on the stack when they are ready
295
What is different between "blocking" and "non-blocking" with respect to how code is executed?
The blocking statements is executed sequentially one after other, while a non blocking executes parallely.
- -blocking - code that is currently executing on the stack
- -non-blocking - code that is not currently executing.. it is waiting to be cleared
296
What is a directory?
folder
a file whose job is to point to other files
297
What is a relative file path?
a location that is relative to the current directory or folder.
For example, the relative path to a file named "document.txt" located in the current directory is simply the filename, or "document.txt".
298
What is an absolute file path?
the full listing of the location of a file or a folder/directory on a computer. It is sometimes known as the “full path.” The absolute path includes the complete location of the file or folder, including which drive it is on.
For example, on a Windows computer, the absolute path for a file might be:
C:\Windows\Users\Billy\docs\blogpost1.txt
299
What module does Node.js include for manipulating the file system?
fs
300
node. js:
| process. exit()
node.js: terminate the process synchronously with an exit status of code
throw err
is similar to
console. error(err)
process. exit(#)
process.exit(1) is default behavior
301
buffer array
only holds raw data/bits/binary data
var text = 'example data'
var buffer = Buffer.from(text)
buffer.length //12
console.log(buffer) //
302
What method is available in the Node.js fs module for writing data to a file?
writeFile()
303
Are file operations using the fs module synchronous or asynchronous?
asynchronous
304
node.js
asynchronous vs synchronous
asynchronous: used for busy processes (app doing multiple things)
synchronous: block each other one until the first to-do is done
305
node.js
\n
note + '\n'
^ this will move the process.argv to a new line instead of next to it
306
What is JSON?
common data interchange format used to send and store information in computer systems (before JSON, XML was an extremely popular data interchange format but JSON has a more simple and readable format)
global data format -- many different applications can read and understand
JavaScript Object Notation: data format that looks like a JS object but it gets stored as a string so that the data is serialize
text-based data format following JavaScript object syntax
307
What are serialization and deserialization?
DESERIALIZATION:
- Converting a string to a native object
- turning a stream of bytes into an object in memory
SERIALIZATION:
- Converting a native object to a string so it can be transmitted across the network
- turning an object into memory
308
Why are serialization and deserialization useful?
Useful for when you're transmitting data and trying to receive it
--to be able to store/save it to a hard drive
309
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
storing value
310
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
creates value
311
What are HTTP messages?
How data is exchanged between a server and a client
2 types of messages:
- -requests: sent by the client to trigger an action on the server
- -responses: the answer from the server
312
HTTP --verbose
By default, HTTPie only outputs the final response and the whole response message is printed
--verbose can often be useful for debugging the request and generating documentation examples
313
What is on the first line of an HTTP request message?
start line (method, request target, protocol)
example:
POST /users HTTP/1.1
314
What is on the first line of an HTTP response message?
start line (protocol, status code, status text)
example:
HTTP/1.1 201 Created
315
What are HTTP headers?
set of key/value pairs
| --accept: client telling server this is what i want included in response (example: application/json, */*
316
What is NPM?
- world's largest software registry used to share and borrow packages, and manage private development
317
What is NPM?
- Node Package Manager:
- -->online platform: everyone can publish and share tools (browser -aka front end, server -aka back end, or command line) written in javascript
- -->command tool: interact with online platform, install and uninstall package
- world's largest software registry used to share and borrow packages, and manage private development
- makes it easier for developers to share code they've created to solve problems and for other developers to use the code
consists of 3 distinct components: website, command line interface (CLI), and the registry
318
What is a package?
a tool someone created and uploaded to the npm online platform (building block for your application)
directory with one or more files
--with a file name package.JSON (With meta data about package)
our solutions repo is a package (aka modules)
319
How can you create a package.json with npm?
npm init
320
What is a dependency and how to you add one to a package?
Dependencies are packages that are needed for another package to work properly
with one npm command, you can install a package along with all of its dependencies
to add one............?
321
What happens when you add a dependency to a package with npm?
npm creates a directory that comes with json, license, readme, etc
322
How do you add express to your package dependencies?
npm install express --save
**npm install will add current version, it will update dependencies in json file and will create a node-modules directory. To check if a folder exists, type ls on the command line to list the directories or refresh vs code. NPM INSTALL will download all the other packages that the package needs (express has a lot of packages in the nodes module folder)
323
What Express application method starts the server and binds it to a network PORT?
app.listen([port,[host[,backlog]]][, callback]) ==== this boots up the server
(bind means occupy)
324
How do you mount a middleware with an Express application?
the use method()
When using the use method, put the path in a string if it's there but it's optional
Middleware is how we teach express to do something (example below)
app.use((req, res) => {
res.send('Hello world')
})
res.send is a method on one of the object
325
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req and res
these 2 parameters control the lifecycle
326
What is network port?
network port is like the windows in a house
port is a specific hole in adapter that programs on the computer can communicate to
different programs cant bind on the same port. only one machine can be running that'll occupy that system
327
What is next()?
lets us tell express that the function is done doing it's job, go to the next one
328
What is the purpose of the Content-Type header in HTTP request and response messages?
a Content-Type header tells the client what the content type (media type) of the returned content (aka the body) actually is
329
What does express.static() return?
a path
330
What is the local __dirname variable in a Node.js module?
absolute path from the root to the current directory
example: index.js --> users/name/lfz/curriculumn/exercises/express-static/index.js
331
What does the join() method of Node's path module do?
it joins path segments to make a full path
platform-specific separator == forward slash (/) is for mac and backward slash is for window (\) ---> example: C:\\Users
332
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json (server telling the client this)
this is important because you want to know what you're getting
333
What does the express.json() middleware do and when would you need it?
It parses incoming requests with JSON payloads
returns middleware that only parses JSON and only looks at requests where the Content-type header matches the type option
parses incoming messages
334
Why should we use json middleware?
by default, the req.body is undefined; therefore, using app.use(jsonMiddleware) would give information to it
335
What is Webpack?
- module bundler to bundlel front end module for the front end project
- webpack did the job to bundle everything for us
- runs on node.js (which is a JS runtime that can be used in computers and servers outside a browser environment) was introduced to allow you to load and use a module in the current file (solved scope issues out of the box by importing each module as needed)
336
How do you add a devDependency to a package?
--save-dev (lets npm know that it should be in the devDependencies instead of dependencies
337
What is an NPM script?
- scripts used to automate repetitive tasks
- bundle common shell commands for your project
- stored in package.json file (means they're shared amongst everyone using the codebase)
```
(Example)
"scripts": {
"build": "webpack",
"sup": "how are you?"
}
```
cmdr --> npm run sup (this will run "how are you?"
338
How do you execute Webpack with npm run?
npm run build
it is whatever you name the npm script
--webpack is in the node_modules/.bin folder
```
(Example)
"scripts": {
"build": "webpack",
"sup": "how are you?"
}
```
cmdr --> npm run sup (this will run "how are you?"
339
How do you execute Webpack with npm run?
npm run build
340
How can we run JavaScript in a browser?
- include script for each functionality (hard to scale because loading too many scripts can cause a network bottleneck)
- use a big .js file containing all your project code (leads to problems in scope, size, readability, and maintainability)
341
What is IIFE?
(immediately invoked function expressions)
- solve scoping issues for large projects (when wrapped by an IIFE, you can safely concatenate or safely combine files without worrying about scope collision)
- The use of IIFEs led to tools like Make, Gulp, Grunt, Broccoli or Brunch. These tools are known as task runners, and they concatenate all your project files together.
342
Dependency vs. devDependencies
- dependency (direct dependency): my code doesn't work if i don't have the packages (you'll know if this is a dependency if you have to IMPORT it in your code)
- devDependency: you need it in order to build your project (but does not end up in final bundle)
343
How are ES Modules different from CommonJS modules?
- using export and import
344
What kind of modules can Webpack support?
typescript, css files, etc.
many different module types
sass/less (css preprocessor)
345
ES6 Modules
modules allow you to import and export different sections of code into other files
-there are classes, functions, variables, and objects (to make this available in another file, we use export and import)
346
What is React?
JavaScript library for building user interfaces
347
What is a React element?
What gets returned from components (object that virtually describes the DOM nodes that a component represents)
- plain object that describes the DOM
- not a DOM element (we do not create DOM elements in react)
react. createelement(type aka tagName, attributes with key value pairs, and children)
348
How do you mount a React element to the DOM?
ReactDOM.render()
349
Framework vs. Library
who is in control?
framework is in control of you
you are in control of library
350
What is Babel?
JavaScript compiler (used to convert ECMAScript 2015+ into a backwards compatible version of JS in current and older browsers or environments)
- transform syntax
- polufill features that are missing in your target environment
- source code transformations
351
What is a Plug-in?
software component that adds a specific feature to an existing computer program (when a program supports plug-ins, it enables customization)
352
What is a Webpack loader?
preprocess data that's not JS (intercept the data)
producing the final JS
loading module contents to be put into main.js
--loader is a specific type of plug in
353
How can you make Babel and Webpack work together?
By using the babel loader (they are 2 separate programs that do 2 separate things)
--babel loader is the bridge between the two things
354
webpack.config.js
when it sees a module, here's a list of rules to apply (if this file ends in .js, use the babel loader)
module.exports = {
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
plugins: [
'@babel/plugin-transform-react-jsx'
]
}
}
}
]
}
};
355
What is JSX?
syntax extension to JS
| --its JS plus other stuff
356
Why must the React object be imported when authoring JSX in a module?
JSX provides the syntax React.createElement(component, props, ...children) function
357
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
you need to incorporate the plugin-transform-react-jsx
358
What is a React component?
like functions that return HTML elements
like JS functions, they accept arbitrary inputs (called "props")
359
How do you define a function component in React?
like a normal JS function
| --needs to be capitalize (i.e. CustomButton) if you leave a lowercase letter, the JSX will think it's an HTML element
360
How do you mount a component to the DOM?
ReactDOM.render()
- to pass it correctly, you need to have the ankle brackets to create the element
i. e.
361
What are props in React?
act like parameters in a function in JS
362
How do you pass props to a component?
by surrounding it with { }
363
What are props in React?
act like parameters in a function in JS
datatype is an object
i.e.
{ props.text }
364
How do you pass props to a component?
specify the key name equal sign and the value you want to pass (aka key value pairs)
i.e.
text = "I"
by surrounding it with { /component definition/ }
^ --- this is how to pass a prop --- ^
365
How do you write JavaScript expressions in JSX?
ankle brackets === JSX
you would write the expressions in curly braces
366
Key in React
a string attribute that identifies items in lists of elements
help react identify which items have changed, added or removed
367
What is a callback?
callback is a function that is invoked or called after something else happens (the function running depends on something happening not when the program is running) this is achieved by passing a function into another function
--possible with higher-order function
368
What are closures?
combination of a function and the environment within which the function was declared. the environment consists of any local variables that were in scope at the time the closure was created
in JS, all functions form closure.
*** they're a mechanism in JS for handling variable scope.
when a function is defined inside of another function, that inner function has access to the variables and scope of the outer function even if the other function finishes executing and those variables are no longer accessible outside that function
examples: eventlisteners
369
What Array method is commonly used to create a list of React elements?
map method
370
What does { } mean when writing JSX?
{ } == writing plain JS and not JSX
371
What does { } mean when writing JSX?
{ } == writing plain JS and not JSX
IT MEANS JAVASCRIPT EXPRESSION
372
CODE READING
key = { pokemon.number }
prop key set to a JS expression that is the number property of the pokemon object
373
What is the best value to use as a "key" prop when rendering lists?
a value that's unique to the object
(telling react how to tell them apart)
-- needs to be a primitive data type, not an object
374
In React, is render ( ) a method or a function?
render( ) --- this is a class method
```
class Custombutton extends React.component {
render ( ) {
}
```
----- example
```
class Person {
sayHi( ) {
console.log('hi')
}
somebody.sayHi( )
```
375
CODE READING IN REACT
/div>
closing div tag for the react element
376
ReactDOM.render(
element,
someFunction()
return value of someFunction()
377
How do you create "class" component in React?
we extend the component property of the react object
378
How do you access props in a class component?
using the this keyword
379
In React, what is the difference between render( ) and ReactDOM.render( )
render () //returns React element(s)
--never call this
ReactDOM.render() //mounts a React element to the DOM
-- you call this
380
What is the purpose of state in React?
store property values that belongs to the component, when the state object changes, the component re-renders
one place where the component keep track of data that changes
event changes the state, always assign value of the state as an object
setState = render gets called again (THIS IS DEFINED IN COMPONENT)
381
How to you pass an event handler to a React element?
pass it as a prop
example onClick={this.handleClick}
382
What is super?
super is a JS
constructor method of what you're inheriting from (the parent class)
383
BIND METHOD
```
function example() {
console.log(this)
}
```
^^^ this is a definition, not a call. we do not know what THIS is
NOW...
```
var person = { name: 'luigi' }
example( )
```
384
What are controlled components?
Having JS use a function to handle the how information is processed and access the data
385
What two props must you pass to an input for it to be "controlled"?
value and onChange (takes callback function to keep looking for changes on input box)
386
What are some advantages of learning a relational database?
- use organized data by table
| - join table by data type
387
What is one way to see if PostgreSQL is running?
using the top command in your terminal
388
What is a database schema?
a collection of tables is called a schema (defines how the data in a relational database should be organized)
389
What is a table?
- a **table** is a list of rows each having the same set of attributes (ie. all students in "students" table could have "firstName", "lastName", and "dateOfBirth" attributes — these attributes are referred to as **columns**)
390
What is a row?
set of attributes
391
What is pgweb?
this is not postgresql!
pgweb is a custom web app that has a server, front end, etc.
app that lets you look inside a database BUT NOT THE actual database
392
What is SQL and how is it different from languages like JavaScript?
Structured Query Language (SQL): primary way of getting, creating, and changing data in a relational database (you describe the results you want)
different from JavaScript because you do not need to tell SQL how to do something
393
How do you retrieve specific columns from a database table?
using the select keyword
394
How do you filter rows based on some specific criteria?
using the where keyword and a comparison operator
395
What are the benefits of formatting your SQL?
for consistent style which gives you readability
396
What are four comparison operators that can be used in a where clause?
equal sign (=)
greater than
less than
!= (not equal)
397
How do you limit the number of rows returned in a result set?
using the limit keyword
398
How do you retrieve all columns from a database table?
using asterisk (*) NOT in quotes
399
How do you control the sort order of a result set?
order by
| default sort order of the results is ascending order
400
How do you add a row to a SQL table?
1. begin with the insert into keyword
2. the table it's being inserted into with double quotes
3. list of columns being inserted wrapped in parenthesis ()
4. using the values keyword, insert the values in the same order as the columns they belong to, wrapped in parenthesis
401
What is a tuple?
collection of objects and sequences that is immutable
an insert into has a tuple ("", "", "", "")
402
How do you add multiple rows to a SQL table at once?
separate the rows in its own parenthesis ()
403
How do you update rows in a database table?
1. begin with the update clause
2. the table it's being updated with double quotes
3. use the set clause to give the name of the category (in double quotes), the equal operator, and what you want the value to change to
4. use the where clause to select a specific column with the value that needs to be changed
404
Why is it important to include a where clause in your update statements?
if the where clause is not being used, it will set everything equal to the value you specified
405
How do you delete rows from a database table?
1. delete keyword with the table in double quotes
| 2. specify using the where clause, the column and value of where the row is located
406
How do you get back the row being inserted into a table without a separate select statement?
use returning *
407
PostgreSQL
keyword vs. statement vs. clause
keyword: word that means something special (not a value) it's a signal to the environment that you're doing something
statement: what you end with a semi-colon (a whole command)
clause: sub-section/piece of a statement
- -returning
- -from
- -set
408
What is a foreign key?
column(s) in a relational database that provides a link between data in two tables (acts as a cross-reference between tables)
409
What is a foreign key?
column(s) in a relational database that provides a link between data in two tables (acts as a cross-reference between tables)
value in a column that you can use to join another column in a table
410
How do you join two SQL tables?
1. use the select statement
2. from clause
3. join clause with the name wrapped in double quotes, the using clause, and the column wrapped in double quotes and parenthesis
411
How do you temporarily rename columns or tables in a SQL statement?
using the as keyword
412
What are some examples of aggregate functions?
sum, count, every, max, min
413
What are the three states a Promise can be in?
- pending: initial state, neither fulfilled nor rejected.
- fulfilled: meaning that the operation was completed successfully.
- rejected: meaning that the operation failed.
414
How do you handle the fulfillment of a Promise?
then method
415
How do you handle the rejection of a Promise?
catch method
416
What does fetch() return?
returns a promise which is fulfilled once the response is available
417
What is the default request method used by fetch()?
GET
418
How do you specify the request method (GET, POST, etc.) when calling fetch?
using a method property in the fetch() method
419
When does React call a component's componentDidMount method?
This method is called after the component gets mounted on the DOM
420
Name three React.Component lifecycle methods.
- mounting: constructor(), static getDerivedStateFromProps(), render(), componentDidMount()
- updating: static getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate()
- unmounting: componentWillUnmount()
421
How do you pass data to a child component?
When you need to pass data from a parent to child class component, you do this by using props.
the parent component passes props to the child component and the child can then access the data from the parent via this.props.
