Web Development Flashcards
What three HTML elements do you use to build a description list?
description list
description term
description definition
How do you indicate the parent folder in a path?
Use ../ to indicate the folder above the current one, then the file name
Example: ../index.html
How do you indicate the child folder in a path?
Use the name of child folder, then the file name
Example: music/listings.html
How do you indicate the grand parent folder in a path?
Repeat the ../ to go up two folders, then follow with the file name.
Example: ../../index.html
How do you indicate the current folder in a path?
Use the file name
Example: index.html
What purpose do the thead and tbody elements serve?
thead: separate chunks in your table
tbody: the body (information) of table
Give two examples of data that would lend itself well to being displayed in a table.
Numbers, finances, anything you can put in an excel sheet
What is an absolute URL?
What is a relative URL?
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>)
What attribute do you have to match between a label and an input?
for and id
What attribute do you have to match between a label and an input?
for and id
Example:
Name:
What type of input allows you to select multiple items in a dropdown?
select
select needs to work with the element
What is the action of a form?
uses the action attribute to indicate the page that the data is being sent to
Give five examples of form control elements.
input option text area select button
Give three examples of type attributes for HTML input elements.
password email radio checkbox text calendar phone number button color date time file
Why would we choose specific element types when we have elements such as div and span which can be used for anything?
Provide elements that provide content
SEO (search englines)
Accessibility
What factors contribute to a well-designed HTML document?
Proper formatting (indenting)
Using the correct functions
What are the names of the individual pieces of a CSS rule?
property, value, selector, declaration
How are key/value pairs related to CSS?
properties and values
name that correlates to a value
Name three different types of values you can use to specify colors in CSS.
RBG Values
HEX
Color Names
Why must you have backup fonts assigned when selecting custom fonts?
In case the user does not have that font installed
If the fall back doesn’t work, it will default to New Times Roman
What CSS properties make up the box model?
padding, border, margin
content is not a CSS property
Which CSS property pushes boxes away from each other?
margin
Which CSS property pushes box content away from its border?
padding
What are three important considerations for choosing fonts?
Readability, cross browsers reading, theme, target market
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
Mobile responsiveness
What is source order?
order that CSS rule is written
Styling provided for an element LAST in stylesheet
What is inheritance?
If the child element does not have a value, it would look to the parent element for a value
Why might CSS include the inheritance feature?
To set font related properties instead of setting it individually
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
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
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
How is specificity calculated?
determined by the number of each selector type in the matching selector
Why might CSS include this feature?
To make things more precise to an element and not worrying about it getting overwritten
What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?
id
class
element
universal selector
What is the CSS Cascade?
All the factors to determine what style is applied
What are CSS pseudo-classes useful for?
adds a specific selector to an element
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)
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.
What are 3 examples of what can be done with CSS transitions?
scale(grow or shrink), rotate, transition delay
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
Why is CSS transition a useful tool?
create elements to be more visually pleasing
another way to make website more comfortable for users
How do block-level elements affect the document flow?
start on a new line in the browser window
examples: h1, p, ul, li
How do inline elements affect the document flow?
some elements will continue on the same line as neighboring elements
examples: a, b, em, img
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%
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)
What accessibility considerations must be considered when choosing HTML elements?
when you want emphasize through a spoken word (such as strong, em, del)
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)
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
What is the initial display property of div s?
block
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)
Why are CSS resets helpful for cross browser compatibility?
its good to be consistent across multiple browsers
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
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
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)
What is the default value for the position property of HTML elements?
static
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
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
What are the box offset properties?
top, bottom, left, and right
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:
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
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)
What are the three core parts of a grid system?
container, row, column
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.
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
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)
How do you think building this layout would be different without a grid system?
IT WOULD NOT BE FUN
It would be very tough…
What advantages do you see with using a grid system?
organized (easier to work with),
user friendly (easier for them to use and read)
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)
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
Why are variables useful?
ability to have something you can reference and use later
What two special characters can a variable begin with?
$ or underscore (_)
How do you declare a variable?
using the VAR keyword
ex. var quantity
Which words cannot be used as variable names?
JavaScript keywords
if, while, var, const
What is a string?
data type that consists of letters and other characters in a pair of quotes
What is the string concatenation operator?
joining two or more strings to create a single value using the string operator (+)
What is the difference when it comes to using single quotes or double quotes ( ‘ ‘ or “ “ )?
nothing
How do you escape quotation characters?
backwards slash before any type of quotation mark
example: a href="sale.html"
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
What is a number in JavaScript?
data type that contains a number
What is an arithmetic operator?
mathematical operator
Name four of the arithmetic operators?
multiplication, division, addition, subtraction
What is the order of execution?
PEMDAS
What is a boolean?
data type with the values of true or false
What is a comparison operator?
used to compare values to test for true or false comparisons
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)
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)
What is the difference between a parameter and an argument?
parameters: variables
arguments: values
What is a function?
performs a specific task
Define a function named addTwoNumbers with two parameters
function addTwoNumbers(a, b) { }
How do you call a function?
using the statements in between the parenthesis
What are the parts of a function definition?
functionKeyword functionName() {
return statement
}
name function
parameter list
return code block
CODE READING: var firstName = “Michael”;
The string, Michael, is being assigned as the value for the variable first name
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
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
CODE READING: var inStock = true
the Boolean true is being assigned to the variable inStock
CODE READING: var nullVariable = null
the value null is being assigned to the variable nullVariable
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.
Why are functions useful?
writing little code as possible with a pattern of work that needs to be accomplished
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.
Why is the typeof null object?
it’s a bug
Why do you always use === for comparisons?
to execute a true equality test
Why do you always use === for comparisons?
to execute a true equality test
convert values to similar data type to check for comparison
Do all if statements require an else statement?
no
Do all if statements require an else statement?
no
if there is an “else”, that means something has to happen
What is the proper syntax for using the or operator?
dual pipes/double pipes
x == 5 || y == 5 is false
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.
What is the primary use case for switches?
used to perform different actions based on different conditions.
What is the primary use case for switches?
knowing what the user is looking for and goes directly to it without checking a list
Does the default case have to be at the bottom of the switch statement?
no (but for good practice, it is on the bottom)
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
CODE READING: switch (operator)
Switch statement checking the EXPRESSION of operator
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
What is an object in JavaScript?
collection of related/reference data (contains memory type)
primitive data(contains actual value)
How do you create an object literal?
var object = { };
var object2 = new Object( ) ^ shorten syntax for creating a new object (not mainly used)
What is a property in relation to JavaScript objects?
a place where we can store data inside of an object
What is an array in JavaScript?
list (or set of values)
How do you create an array literal?
square brackets
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)
CODE READING: colors[1]
value at the one index in the color array
DO NOT SAY FIRST…
What are the keys for the values inside an array?
numbers counting up from zero
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
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)
CODE READING: var library = [ ]
there is an empty array literal being assigned as the variable for library
CODE READING: library[0].title
the value of the title property of the object at the zero index of the library array
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
What is the primary advantage to storing your selected elements in a variable?
we can reuse it later
Why might you need JavaScript to modify the DOM after the page loads?
gives interactivity (gives update for interaction quickly)
How can you better prepare when writing HTML for DOM manipulation in your JavaScript code?
put more information in elements (like setting attributes)
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
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
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
What datatype are the values you remove from a text input?
string
Why is it so important to be able to dynamically update text?
interaction for the user (like updating text box, etc.)
What are some of the drawbacks of HTML Event Handler Attributes?
better to separate the JS from HTML
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
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)
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”);
Who passes in the event object into the handleClick callback function?
JavaScript language with automatically do it
Does a callback function require a name?
no (but you should name your functions)
this would be called an anonymous function
CODE READING: alert(“it works”)
alert function with the argument string it works
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);What is the purpose of a loop?
to repeat the same, or similar, code a number of times
currentTarget
targets the element that the event is dealing with
CODE READING: current++
there is the variable current followed by the ++ operator
DO YOUR INCREMENTATION AFTER YOUR WORK IS DONE
Why might there be different kinds of loops?
different situations
What is the purpose of a conditional expression as it relates to loops?
when you can stop
Could a loop potentially go on forever?
yes
Could a loop never start?
yes
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
What potential use cases are there for for loops?
arrays (example: search engine)
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
What is a for in loop?
using a loop when you don’t know how many things there are in an object
How do you target the value of a property in an object.
put the variable of the property in a bracket notation
When should you use a for in loop?
loop over an object
When should you use a for in loop?
loop over an object [and do the same action for each property]
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
What is node
a piece in your document
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)
Why is it important to be able to traverse the DOM?
whitespace nodes and allows us to find information on elements around us
What kind of information is useful to store in custom attributes?
use data attributes to store information
example USING DATA SET
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)
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
How do you create a HTML element using vanilla Javascript?
create element method of the doc element object
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!!
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
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]
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
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
CODE READING: header.appendChild(headingH1)
appendchild method of the header object is being called with the argument headingH1
CODE READING: var navbar = document.createElement(‘ul’)
createelement method of the document object with the argument ul is being returned to the variable navbar
CODE READING: todoSubmitButton.setAttribute(“id”, “todoSubmit”)
the setattribute method is being called on the todoInput object with an argument of string id and todoSubmit
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
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
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
What is the jQuery selector function?
$()
What does the jQuery selector function return?
return the list of elements that was asked
Why would someone use jQuery over vanilla Javascript?
easier to select elements, chain actions, trim syntax (shorter codes), works across all browsers
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
Why do we use the tag at the bottom of the body, instead of putting it inside the <head> tag?
want the page to load first before we add/remove/etc the classes and elements
javascript runs after all the elements exist
How do you get the text out of an HTML element?
using jQuery
using .text()
everything is a method
How do you get the value out of an HTML input field?
using jQuery
.val()
.value
What’s the difference between .text() and .html()?
using jQuery
.text() = (similar to .textContent)
.html() = give full DOM tree
What does .on() do?
using jQuery
handles all events
What is event bubbling?
starts at the most specific node and flows outwards to the least specific one (Default type of event flow)
CODE READING: function handleContainerClick (event) { }
there is a function definition with handleContainerClick calling on a parameter (event)
What is the first argument the function setTimeout takes?
function definition
function callback (can be invoked later)
If the second argument is not passed into the setTimeout function, what is the default value?
zero (executed immediately)
What are some scenarios where setTimeout can be useful?
interacting with the user (seeing if the user is still there)
chat box on website
Difference between setInterval and setTimeout
setInterval (function that gets called everytime you set)
setTimeout (function gets executed once)
What does the setInterval function return?
returns an interval ID which uniquely identifies the interval
ID for that interval (their interval starts at 1)
What argument does the clearInterval function take?
identifier of repeated action that you want to cancel NOT THE FUNCTION
What are some scenarios where setInterval can be useful?
stop watch, keeping track of time, banner moving
What is the event loop?
which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks
What does the term blocking mean?
waiting for something to continue running
nothing else can happen until a code is done running
What is the call stack?
list of actions running in your javascript
data structure with a lifo (last in first out)
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)
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
Which element in a website are used to create dynamically?
instagram search, shopping carts
Why should you not create all elements dynamically?
make it in an HTML document
its made dynamically because it responds to user input
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
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
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
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
Give two examples of media features that you can query in an @media rule.
height, pointer
Which HTML meta tag is used in mobile-responsive web pages?
meta name=”viewport” content=”width=device-width, initial-scale=1.0”
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
what is scope
execution contents
where is the code being executed
What is a method?
function attached to an object
What does a method do?
takes what you ask and gives a response
multiply: function (num1, num2)
there is an anonymous function definition with two parameters (num 1 and num2) being assigned to the property of multiply
return num1 * num2
the variable num1 is being multiplied by variable num2 and the result of that expression is being returned to the function
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
What is ‘this’ keyword?
refers to one object (usually the object in which the function operates)
What does bind do?
creates a new function that has ‘this’ keyword set to a provided value
What is the difference between a function and an object literal?
object literal: contains properties with values
functions: performs a task
ada.describe()
the describe method of the ada object is being called
describe()
function describe is being called
What is Prototypal Inheritance?
objects inherit properties from another object
What is the Prototypal Chain?
object.create()
it will create a new
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
Why does JavaScript have Prototypal Inheritance?
to save memory
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
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.
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
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
What is the first thing that happens in a class when it is instantiated with the new keyword?
calls the constructor function
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
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
class parent { }
class definition name parent
What is the benefit of instantiating Classes within other classes?
making a class inside another class, you save the class on the parent class
Why are parent - child relationships important in OOP?
avoid spaghetti code (keep everything in it’s own space)
easier to build on
askForFood() { }
askForFood method being defined with no parameters
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
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
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
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)
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
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
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
How do you serialize data into a JSON string using JavaScript?
JSON.stringify()
storing value
How do you deserialize a JSON string using JavaScript?
JSON.parse()
creates value
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)
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
Which HTTP method does a browser issue to a web server when you visit a URL?
get
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)
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)
How does ajax work?
insert content from database or server without refreshing the page
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
How do you specify the request method (GET, POST, etc.) when calling ajax?
method property and the argument you pass
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.
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
Name some characteristics of a variable declared using let.
- variables declared are mutable
- indicates value of the variable changes
- can change in value
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
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
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)
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.
What is the syntax in writing a template literal?
- enclosed by the backtick (
- inject javascript with $ { }
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
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
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
When was destructuring introduced?
ES6 (year 2015)
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
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
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.
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
In what situations would you possibly use an arrow function?
Arrow functions are best for callbacks or methods like map, reduce, or forEach
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
Can you name an arrow function?
No, they are all anonymous
What is a CLI?
command-line interfaces (process commands to a computer program)
What is a GUI?
graphical user interface (allows users to interact with electronic devices through graphical icons and audio indicator)
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)
What is Node.js?
program that allows Javascript to be run outside of a web browser
back end program for running JavaScript
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)
What is a REPL?
read-eval-print-loop (REPL) then wait to read again
interactive computer programming environment
When was Node.js created?
2009 by Ryan Dahl
What back end languages have you heard of?
PHP, python, ruby, java, rust
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
What is a computer process?
an instance of a computer program that is being executed by one or many threads
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
100?
What is the process object in a Node.js program?
it’s like the window object on the console
How do you access the process object in a Node.js program?
it’s in the global scope
What is the data type of process.argv in Node.js?
an array of strings
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.
What is a JavaScript module?
a single JS file
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
Give two examples of truly global variables in a Node.js program.
global && process && console.log
setInterval and setTimeout
array.filter is useful for…
return true or false.. if it’s true, it’ll create a new array that has all true returns
array.map is useful for…
when you want an object and just have a their properties… values… etc
array.find is useful for…
to find a single object in an array
return an item for the first thing that is true
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)
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
How do you import functionality into a Node.js module from another Node.js module?
use the require function
require()
setTimeout()
calls the function when timer is met
console.log(‘Hello, just a moment…’);
setTimeout(function () {
console.log(‘Thanks for waiting!’);
}, 2000);
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
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
What is a directory?
folder
a file whose job is to point to other files
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”.
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
What module does Node.js include for manipulating the file system?
fs
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
buffer array
only holds raw data/bits/binary data
var text = ‘example data’
var buffer = Buffer.from(text)
buffer.length //12
console.log(buffer) //
What method is available in the Node.js fs module for writing data to a file?
writeFile()
Are file operations using the fs module synchronous or asynchronous?
asynchronous
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
node.js
\n
note + ‘\n’
^ this will move the process.argv to a new line instead of next to it
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
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
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
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
storing value
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
creates value
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
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
What is on the first line of an HTTP request message?
start line (method, request target, protocol)
example:
POST /users HTTP/1.1
What is on the first line of an HTTP response message?
start line (protocol, status code, status text)
example:
HTTP/1.1 201 Created
What are HTTP headers?
set of key/value pairs
–accept: client telling server this is what i want included in response (example: application/json, /
What is NPM?
- world’s largest software registry used to share and borrow packages, and manage private development
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
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)
How can you create a package.json with npm?
npm init
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…………?
What happens when you add a dependency to a package with npm?
npm creates a directory that comes with json, license, readme, etc
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)
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)
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
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
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
What is next()?
lets us tell express that the function is done doing it’s job, go to the next one
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
What does express.static() return?
a path
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
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
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
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
Why should we use json middleware?
by default, the req.body is undefined; therefore, using app.use(jsonMiddleware) would give information to it
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)
How do you add a devDependency to a package?
–save-dev (lets npm know that it should be in the devDependencies instead of dependencies
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?”
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?”
How do you execute Webpack with npm run?
npm run build
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)
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.
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)
How are ES Modules different from CommonJS modules?
- using export and import
What kind of modules can Webpack support?
typescript, css files, etc.
many different module types
sass/less (css preprocessor)
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)
What is React?
JavaScript library for building user interfaces
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)
How do you mount a React element to the DOM?
ReactDOM.render()
Framework vs. Library
who is in control?
framework is in control of you
you are in control of library
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
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)
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
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
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’
]
}
}
}
]
}
};
What is JSX?
syntax extension to JS
–its JS plus other stuff
Why must the React object be imported when authoring JSX in a module?
JSX provides the syntax React.createElement(component, props, …children) function
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
you need to incorporate the plugin-transform-react-jsx
What is a React component?
like functions that return HTML elements
like JS functions, they accept arbitrary inputs (called “props”)
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
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.
What are props in React?
act like parameters in a function in JS
How do you pass props to a component?
by surrounding it with { }
What are props in React?
act like parameters in a function in JS
datatype is an object
i.e.
{ props.text }
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 — ^
How do you write JavaScript expressions in JSX?
ankle brackets === JSX
you would write the expressions in curly braces
Key in React
a string attribute that identifies items in lists of elements
help react identify which items have changed, added or removed
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
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
What Array method is commonly used to create a list of React elements?
map method
What does { } mean when writing JSX?
{ } == writing plain JS and not JSX
What does { } mean when writing JSX?
{ } == writing plain JS and not JSX
IT MEANS JAVASCRIPT EXPRESSION
CODE READING
key = { pokemon.number }
prop key set to a JS expression that is the number property of the pokemon object
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
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( )
CODE READING IN REACT
/div>
closing div tag for the react element
ReactDOM.render(
element,
someFunction()
return value of someFunction()
How do you create “class” component in React?
we extend the component property of the react object
How do you access props in a class component?
using the this keyword
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
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)
How to you pass an event handler to a React element?
pass it as a prop
example onClick={this.handleClick}
What is super?
super is a JS
constructor method of what you’re inheriting from (the parent class)
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( )
What are controlled components?
Having JS use a function to handle the how information is processed and access the data
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)
What are some advantages of learning a relational database?
- use organized data by table
- join table by data type
What is one way to see if PostgreSQL is running?
using the top command in your terminal
What is a database schema?
a collection of tables is called a schema (defines how the data in a relational database should be organized)
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)
What is a row?
set of attributes
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
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
How do you retrieve specific columns from a database table?
using the select keyword
How do you filter rows based on some specific criteria?
using the where keyword and a comparison operator
What are the benefits of formatting your SQL?
for consistent style which gives you readability
What are four comparison operators that can be used in a where clause?
equal sign (=)
greater than
less than
!= (not equal)
How do you limit the number of rows returned in a result set?
using the limit keyword
How do you retrieve all columns from a database table?
using asterisk (*) NOT in quotes
How do you control the sort order of a result set?
order by
default sort order of the results is ascending order
How do you add a row to a SQL table?
- begin with the insert into keyword
- the table it’s being inserted into with double quotes
- list of columns being inserted wrapped in parenthesis ()
- using the values keyword, insert the values in the same order as the columns they belong to, wrapped in parenthesis
What is a tuple?
collection of objects and sequences that is immutable
an insert into has a tuple (“”, “”, “”, “”)
How do you add multiple rows to a SQL table at once?
separate the rows in its own parenthesis ()
How do you update rows in a database table?
- begin with the update clause
- the table it’s being updated with double quotes
- 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
- use the where clause to select a specific column with the value that needs to be changed
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
How do you delete rows from a database table?
- delete keyword with the table in double quotes
2. specify using the where clause, the column and value of where the row is located
How do you get back the row being inserted into a table without a separate select statement?
use returning *
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
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)
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
How do you join two SQL tables?
- use the select statement
- from clause
- join clause with the name wrapped in double quotes, the using clause, and the column wrapped in double quotes and parenthesis
How do you temporarily rename columns or tables in a SQL statement?
using the as keyword
What are some examples of aggregate functions?
sum, count, every, max, min
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.
How do you handle the fulfillment of a Promise?
then method
How do you handle the rejection of a Promise?
catch method
What does fetch() return?
returns a promise which is fulfilled once the response is available
What is the default request method used by fetch()?
GET
How do you specify the request method (GET, POST, etc.) when calling fetch?
using a method property in the fetch() method
When does React call a component’s componentDidMount method?
This method is called after the component gets mounted on the DOM
Name three React.Component lifecycle methods.
- mounting: constructor(), static getDerivedStateFromProps(), render(), componentDidMount()
- updating: static getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate()
- unmounting: componentWillUnmount()
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.
