Web Development Deck Flashcards
1
Q
Where do you put non-visible content about the HTML document?
A
Place the information in the HEAD element of the HTML document. This element can contain things such as TITLE or other metadata that can help your website be identified better by search engines.
2
Q
Where do you put visible content about in the HTML document
A
Place it in the BODY element. This can include all of your written content such as text, images, links, etc. Examples of elements in the BODY include: h1, h2, p, span, div, etc.
3
Q
Where do the HEAD and BODY tag go in a valid HTML document?
A
They go within the HTML element. HEAD will go above the BODY element.
4
Q
What is the purpose of the < !DOCTYPE > declaration?
A
The purpose is to identify which version of HTML the page is using. It also helps a page render correctly. (Especially useful if using the box model)
5
Q
Give five examples of HTML element types.
A
Examples of HTML elements include:
1. h1-h6 for creating headings of your content (h1 is the largest)
2. < p > for creating paragraphs in your webpage
3. < div > for creating divisions or sections
4. < img > for creating images
5. < ol > for creating ordered lists
6
Q
What is the purpose of HTML attributes?
A
Provide extra information about a specific element → examples could be the language of a browser, an ID, or class
7
Q
What is an example of an HTML entity (escape character)?
A
Escape characters are those that are used either to represent characters reserved for HTML (like the <, >, “, &) or for symbols such as copyright and trademark.
Examples:
1. < <
2. > >
3. & &
Need to check browsers to make sure it renders correctly though.
8
Q
How do block-level elements affect the document flow?
A
They create a new line on the browser window that will take up the entire space of their parent element.
Examples will include: < div >, < h1 >, < /h1 >< p >< /p >< /div >
9
Q
How do inline elements affect the document flow?
A
They appear on the same line as their neighboring elements. These can include elements that you want to create a semantic feel to your page.
Examples include: < em >, < strong >, < span >
10
Q
What are the default width and height of a block-level element?
A
Because block elements create a new line on the browser window, they will take up the entire horizontal space of their parent container (the containing block). Their height will only take up what is necessary.
11
Q
What are the default width and height of an inline element?
A
They will only take as much width and height as necessary –> as determined by the size of its content. It is bounded to the same dimensions as the tags they are residing in.
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
Ordered lists <ol>: each item in a list is numbered → could use it for steps of a recipe; legal contract; something that needs to be defined by a number essentially
Unordered list </ol><ul> → begin with a bullet point. Does not indicate an order of anything [ingredient list]</ul>
13
Q
Is an HTML list a block element or an inline element?
A
A list is a block element. It will create a new line for each of its list items & push everything else down the list.
14
Q
What HTML tag is used to link to another website?
A
< a > Tag with the href attribute’s value being the page that you want people to go to when they click on your specific link.
If linking to another website, you would use the absolute URL.
< /a >
15
Q
What is an absolute URL?
A
It is the full web address that you want someone to go to when they click on the link. For example, it starts with the domain name and can be followed to a specific page.
Could take you to a completely different website.
Example: google.com
16
Q
What is a relative URL?
A
Links to pages within the SAME site. It is a shorthand version of a URL because you don’t need the domain name.
Instead, you just need the shorter name of it (most likely it will just be the name of the file instead; if it’s in the same folder). If it’s not in the same folder then it might be a little more complex.
17
Q
How do you indicate the relative link to a parent directory?
A
You use ../ to indicate folder above the current one, then you follow it with the file name.
Example:
../index.html (home)
18
Q
How do you indicate the relative link to a child directory?
A
Use the name of the child folder(directory), then a forward slash, then the file name
Example:
music/listings.html (page)
19
Q
How do you indicate the relative link to a grand parent directory?
A
Repeat the ../ to indicate that you want to go UP two folders (instead of just one), then follow with the file name
Example:
../../index.html (returns user to homepage)
20
Q
How do indicate the relative link to the same directory?
A
Just use the file name. You don’t need to include anything else since it is within the same folder/directory.
Example:
reviews.html
21
Q
What is the purpose of an HTML form element?
A
It is where all of the form controls are located. - It’s where interactive controls for submitting the information is located.
Place to collect information from your user.
22
Q
Give three examples of type attribute values for HTML form elements.
A
type=”text” → this is used for inserting text into a field.
type=”password” → similar to “text” but the characters are blocked out and hidden so someone cannot see it.
type=”radio” → clicking just one option (note → radio buttons cannot be deselected → use checkbox if you want them to deselect something)
type=”file” → upload a file
23
Q
Is an HTML < input > element a block element or an inline element?
A
Input element is an inline-block element. Elements will line up next to each other. But! You can also set the height of the option.
→ So you need to make it a block element or add something like a div element to make it go onto a different line if you’d like for your options to stack
24
Q
Give five examples of form control elements.
A
input: creates different types of form controls such as input: type = ”text”
textarea: creates multi-line elements
select: drop-down list
option: option of a drop-down list
fieldset: group elements together
button: create a button
25
What are the six primary HTML elements for creating tables?
table: Creates the table
tr: Creates the start of each row
td: Creates data elements into the row
th: Creates the heading for either a column or row
thead: Creates the heading of the table (headings should sit inside this element)
tbody: body elements (data contents should reside here)
tfoot: (not common) element for the footer of a table
26
What purpose do the thead and tbody elements serve?
These are semantic elements that make it easier for screen readers & accessibility purposes.
thead is good for placing the headings of your tables
tbody is good for identifying the content of your headings
27
Give two examples of data that would lend itself well to being displayed in a table
A financial result --> needing to identify the amount of money in your account or spending for a specific month
Sport results --> looking at the stats of different teams or players
Schedules
28
What are the names of the individual pieces of a CSS rule?
Selector → which element the rule applies to
Declaration Block: indicates how the element should be styled {⇒ split into two parts
Property → indicate aspects of the element you want to change
Value → indicates the setting you want to use for the property
Ends with the curly brace of the }
29
In CSS, how do you select elements by their class attribute?
Use a period (full stop) symbol followed by the value of the class attribute.
Example:
30
In CSS, how do you select elements by their tag name?
Use just their name of the element: example → p, h1, h2
31
In CSS, how do you select an element by its id attribute?
To match with an ID attribute, you need to use the pound or hash symbol → # & match that with the value of the ID attribute.
Example:
#entry{ }
32
Name three different types of values you can use to specify colors in CSS.
RGB Values: colors in terms of how much red, green, and blue are used to make them
HEX Codes: 6-digit codes that represent the amount of red, green, and blue in a color; preceded by hash #
Color Names: 147 predefined color names recognized by browser.
33
What CSS properties make up the box model?
Content --> What's written inside.
Padding → space between border of a box and any content contained within it. Adding padding can make text more legible
Border → separates the edge of one box from another box
Margin → sits outside the edge of the border → width can create gaps between borders of adjacent boxes
34
Which CSS property pushes boxes away from each other?
Margin → push boxes away from each other. This can create more gaps between different elements/boxes. It would allow your reader to have more whitespace to be easier to read.
It will push boxes away if it is a
35
Which CSS property adds space between a box’s content and its border?
Padding will add the space between a box’s contents & its borders. Adding padding is a great way to make your content more legible.
36
What is a pseudo-class?
A keyword added to a selector to specify a special state of the element that was selected. An example could be: :hover (change a color of something when the cursor hovers over it)
Another example could be: nth-child(#);
37
What are CSS pseudo-classes useful for?
It lets you apply the style to an element in response to external factors, changes in the status of content, or the position of the mouse.
Could be useful for user-feedback --> add active styles | can give visual feedback that something can't be clicked or clicked
38
Name two types of units that can be used to adjust font-size in CSS
Rem → recommended to use at will make things proportional in your texts.
PX → this often the best way to make sure tha tit will appear as the intended size that you want
Percentages → This is the % of the default size of the element (web browser is 16%) | drawback can be if people adjusted the default size of their browser, this will alter size of the text)
Ems → This is used in relation to
39
What CSS property controls the font used for the text inside an element?
font-family
(You will typically want to include several values for font-family → you will want to include several different versions of it (with the generic name at the end in case browser cannot load font)
40
What is the default flex direction of a flex container?
The default direction is row (will appear in a horizontal row automatically)
41
What is the default flex wrap of a flex container?
Default flex-wrap is “no wrap” so, the items will not wrap
42
Why do two div elements “vertically stack” on one another by default?
Because they are block elements by default, so they will take up the entire width of their parent container.
This is why you need to set up flex wrap of the container to wrap so that the elements can wrap around each other.
43
What is the default flex-direction of an element with display: flex?
The default flex-direction is row → you can adjust it with column, row-reverse or column-reverse.
44
What is the default value for the position property of HTML elements?
position: static
45
How does setting position: relative on an element affect document flow?
It does not affect the rest of the document flow. The way elements appear is different though.
It only allows you to use different box-offset properties & manipulate where something appears
46
How does setting position: absolute on an element affect document flow?
It takes that specified element out of the document flow, so the other elements are no longer affected by it on the page.
The other elements pretend it is no longer there and fills the gap that's left behind.
47
How does setting position: absolute on an element affect where it appears on the page?
It takes it out of the page so you can move the element around it may appear to overlap other elements on the page
- It appears relative to its nearest non-static ancestor
Box offset properties can be used to specify where it appears on the screen
48
How do you constrain an absolutely positioned element to a containing block?
You look for the parent container and set that to "position: relative" --> absolutely positioned element will appear relative to non-static ancestor
49
What are the four box offset properties?
Distances from:
- Top
- Left
- Bottom
- Right
50
What is the purpose of variables?
It stores data → allows you to call the data throughout a specific script/program.
So you can manipulate it, bring it back when you need to call it
51
How do you declare a variable?
You need to use a variable keywork like “var, let, const” and then give your variable a name and then you can give it a value if you want
52
How do you initialize (assign a value to) a variable?
To assign a value to a variable yo use the variable name with an assignment operator (=) and the value you want to give it
53
What characters are allowed in variable names?
It must begin with a letter, $, _ → cannot start with a number
It can contain letters, dollarsigns, or underscores
Just can’t use reserved words/letters (like var)
Use camelcase for multiple words
54
What does it mean to say that variable names are “case sensitive”
Means that your variables have to match if you use it throughout your program
So…. “score” and “Score” are different variables
Need to be consistent
55
What is the purpose of a string?
Allows you to have text content or things that need to be stored with letters/characters
56
What is the purpose of a number?
It can be useful for calculations → mathematical operations
57
What is the purpose of a boolean?
Can help determine which part of a script should be run → purpose is for decision making
Allows us to make branches/paths in our code
58
What does the = operator mean in Javascript?
Assignment operator → set of data is assigned to something
59
How do you update the value of a variable?
Use the variable’s name → and give it a new value. Don’t use “var” keyword
60
What is the difference between null and undefined?
Null → intentiionally is a nonexistent or invalid object
→ null is a placeholder (temporary absence of something, don’t know the value of it yet) → has to be assigned to something | when you see null (someone said this is empty on purpose, maybe needs a value later, but now it’s empty)
Undefined → nothing being assigned, no one has even given it a placeholder. Just empty.
61
Why is it a good habit to include “labels” when you log values to the browser console?
Organization purposes → reminders/description of what you’re doing. Without labels it’s difficult to understand what is happening
62
Give five examples of Javascript primitives.
Number
String
Boolean
Null
Undefined
63
What data type is returned by an arithmetic operation?
A number (performs basic math)
64
What is string concatentation?
When you combine different string values using the string and a + sign
65
What purpose(s) does + plus operator service in JavaScript?
It can be used for addition
It can be used to combine & join strings together
66
What data type is returned by comparing two values (<, >, ===, etc.)?
A boolean expression (true, false)
67
What does the += “plus-equals” operator do?
adds the value of the right operand to a variable and assigns the result to the variable
68
What are objects used for?
Useful for storing lots of different variables and details into something.
used to group items together.
69
What are object properties?
They are variables that are part of an object
70
Describe object literal notation.
You include:
Var objectName (whatever you want to name it) {
key: value (this makes up a property),
};
71
How do you remove a property from an object?
Use the delete operator
72
What are the two ways to get or update the value of a property?
You can use dot notation (name of the object . property) or you can use square brackets:
objectName[‘property’] = property value
73
What are arrays used for?
It can store a list of values that you want (esepcially if you don’t know how many items will be in a specific list)
74
Describe array literal notation.
You use the:
Var arrayName = [ value, value, value];
75
How are arrays different from “plain” objects?
The key for reach value of an array is an index number instead of a property name
76
What number represents the first index of an array?
0
77
What is the length property of an array?
It tells you the number of arrays that it holds
78
How do you calculate the last index of an array?
You use the length of the array - 1
79
What is a function in JavaScript?
Functions allow you to package up code for use later in your program.
They can be a list of steps that you can call over and over.
80
Describe the parts of a function definition.
The function keyword to begin the creation of a new function.
An optional name.
A comma-separated list of zero or more parameters, surrounded by () parentheses.
The start of the function's code block, as indicated by an { opening curly brace.
An optional return statement.
The end of the function's code block, as indicated by a } closing curly brace.
81
Describe the parts of a function call
1. The function's name.
2. A comma-separated list of zero or more arguments surrounded by () parentheses.
82
When comparing them side-by-side, what are differences between a function call and a function definition?
When you are calling a function you are using the function name and passing arguments
When you are defining a function you are using the word "function" and declaring parameters as placeholders for values that would be in your function. Would also have a code-block { }
83
What is the difference between a parameter and an argument?
Parameter is a placeholder that you are using when you are defining a function.
An argument is a value that you are passing when you are calling a function. They are the actual values that are provided when you're using them
84
Why are function parameters useful?
They are useful because they act as a placeholder for a value that is unknown until you call the function
Allows us to create variants in our code --> create a single tool that can be used in multiple places
85
What two effects does a return statement have on the behavior of a function?
1 - Causes the function to produce a value we can use in our program. (results can be used outside the function)
2- Prevents any more code in the function's code block from being run. (stops the function)
86
Why do we log things to the console?
Use: console.log in your program to check the outputs of things so that you can see if your code is working the way you want it to
Can be a debugging tool if necessary
Gives you a way to see something in an easily visible space
87
What is a method?
It’s a function that is a property of an object → it is essentially a built-in task that can be performed by an option or a task that is called on an object → function stored into the property of an object
88
How is a method different from any other function?
Have to provide context of what object you are pulling it off of
Stored into an object (HAVE to state the object you are using the method from)
89
How do you remove the last element from an array?
Use the pop() method
90
How do you round a number down to the nearest integer?
Use the “Math.floor()” method of your number or value
ALWAYS rounds down
91
How do you generate a random number?
Use Math.random();
Prints a number between 0 and 1
Represents a percentage
92
How do you delete an element from an array?
Use the splice() method
You can use splice and then state which index you wish to remove and how many elements you want to remove from the starting point
93
How do you append an element to an array?
Append → adds to the end
Use the push ( ) method, which will allow you to add one or more elements to an array
94
How do you break a string up into an array?
Use the split ( ) method of an array
Inside → dictate what you want to split out of the array
95
Do string methods change the original string? How would you check if you weren’t sure?
No, they pass them into a new array that they create
You can check by using a console.log statement and passing the variable with the string to see if it changed
Can also look at documentation
96
Roughly how many string methods are there according to the MDN Web Docs?
Over 50 different string methods?
97
Is the return value of a function or method useful in every situation?
Should always have an application. It’s useful, but it might not always be necessary to include in something
If a function does not have a return value, the console log will say "undefined" after the function is run
98
Roughly how many array methods are there according to the MDN Web docs?
Over 50?
99
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
100
Give 6 examples of comparison operators.
<,
>,
==,
<=,
>=,
=== (strictly equal),
!=,
!== (strictly not equal to)
101
What data type do comparison expressions evaluate to?
Boolean (true or false)
102
What is the purpose of an if statement
Allows you to run a conditional statement so that your program can make decisions based on whether a condition has been met.
Can allow us to do branching actions
103
Is else required in order to use an if statement
No --> You can have an "if" statement on its own, you could just have an "if" and not do anything afterward
104
Describe the syntax (structure) of an if statement.
1. if keyword
2. Need a condition statement in ( )
3. Opening curly brace
4. Code to execute if the value is true
5. Closing curly brace
105
What are the three logical operators?
&& (logical and)
| | (logical or)
! (logical not -- boolean inverse)
106
How do you compare two different expressions in the same condition?
You use logical operators to make the comparisons of the different expressions (logical AND or logical OR)
You also need to use parentheses between each expression
107
What is the purpose of a loop?
Allows you to repeat code as many times as you want.
108
What is the purpose of a condition expression in a loop?
It’s the break to the loop → decides if they loop should stop or keep going
109
What does “iteration” mean in the context of loops?
Each pass / cycle through a loop
110
When does the condition expression of a while loop get evaluated?
Before each pass through a different loop (if the expression is true, the statement in the loop is executed, if it is false, it will not execute the statement in the loop
111
When does the initialization expression of a for loop get evaluated
It gets evaluated once before the loop begins (typically it is a counter variable)
112
When does the condition expression of a for loop get evaluated?
It gets evaluated before each loop iteration (if the loop evaluates to true, the statement is executed, if false, the execution exits the loop & goes to first statement after “for”)
113
When does the final expression of a for loop get evaluated?
End of each loop iteration (before the next evaluation of condition)
114
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
115
What does the ++ increment operator do?
It adds one to the counter (so it increments the loop)
Drives the loop toward termination
Get closer to reaching it as false
Driving the loop TOWARD termination/false
116
How do you iterate through the keys of an object?
You use a “for…in…” loop.
The loop inside the “for..in” loop is iterated through each property once
117
What are the four components of “the Cascade”
Source Order → order that CSS rules are written in your stylesheet/ Last element provided is the ultimate item taken affect
Inheritance → properties on a child HTML element receive a value from a parent element. If no CSS declared on the child
Specificity → decides how a browser decides which CSS property to apply to an element
!Important
118
What does the term “source order” mean with respect to CSS?
The order that CSS rules are written in your stylesheet/ Last element provided is the ultimate item taken affect
119
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance makes it possible
Inherited properties = default set from parent element (children will get this computed value)
Non-inherited properties → properties set at the initial value of the property
120
List the three selector types in order of increasing specificity.
Type - Class - ID
121
Why is using !important considered bad practice?
Because it overrides specificity; Use cascade layers & lower weight specificity throughout CSS so styles can be easily overridden with more specific rules
122
What does the transform property do?
It allows you to rotate, scale, skew, or translate an element across the coordinate planes
123
Give four examples of CSS transform functions.
rotate();
translateY();
scale();
skew();
124
The transition property is shorthand for which four CSS properties?
transition-property,
transition-duration,
transition-timing-function,
and transition-delay.
125
Why do we log things to the console?
Use: console.log in your program to check the outputs of things so that you can see if your code is working the way you want it to
126
What is a “model”?
A diagram that represents something
127
Which “document” is being referred to in the phrase Document Object Model?
It is a copy of the web page you are on (HTML element)
128
What is the word “object” referring to in the phrase Document Object Model?
JavaScript objects → JavaScript object modeling the HTML document.
129
What is a DOM tree?
An element plus ALL of its content and ALL of its configurations
Could be an entire web page or just one element.
130
Give two examples of document methods that retrieve a single element from the DOM.
getElementById( )
querySelector( ) --> querySelector is all you really need to use.
131
Give one example of a document method that retrieves multiple elements from the DOM at once
querrySelectorAll( ) --> only one really needed.
132
Why might you want to assign the return value of a DOM query to a variable?
Because you want to store the location of the element within the DOM tree → if you use it more than once it saves the browser time looking for the element.
133
What console method allows you to inspect the properties of a DOM element object?
Console.dir() → allows you to see the different properties
(short for directory)
134
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
B/c the browser loads the HTML document first.
Gives time for your HTML to load
135
What does document.querySelector() take as its argument and what does it return?
It takes a string that has one or more selectors it needs to match (needs to be a valid CSS string)
Returns FIRST element with the document that matches the specified selector or group of selectors → if no match found then NULL
136
What does document.querySelectorAll() take as its argument and what does it return?
It takes a string that has one or more selectors it needs to match (needs to be a valid CSS string)
Returns a non-live Node list that has one element object for each element that matches the specified selector
137
Why do we log things to the console?
Use: console.log in your program to check the outputs of things so that you can see if your code is working the way you want it to
138
What is the purpose of events and event handling?
Events provide interactivity for your users, they can trigger code that you are going to use, and they can have code that responds to users. Sometimes it can be not user driven (like time or page loading)
Event handling determines how users interact
Event handling includes;
Selecting the node that you want script to respond
Indicating events on nodes that you want to trigger responses
State the code you want run once an event occurs
139
Are all possible parameters required to use a JavaScript method or function?
No --> often there are optional parameters
140
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener(........); Call it on whatever element you want to add it for and listen for a specific event.
141
What is a callback function?
Function that is passed into another function as an argument, which is invoked inside the outer function.
Expected result = expected function being called will be called, too.
142
What object is passed into an event listener callback when the event fires?
The event object & contains all the data about that object when the event occurs -->
143
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The actual element where the event occurred (not the element itself). Where you interacted where the event occurred.
144
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
Without the parenthesis it represents that the function runs when the event fires --> it is a callback function
With the parentheses () it means that the code is run was the page loads --> It is a return value that will be in its place
145
What is the className property of element objects?
It gets and sets the value of the class attribute of the DOM specified element
146
How do you update the CSS class attribute of an element using JavaScript?
You use the element you want to use.
And then use the .className property
and THEN you assign that to a string variable that represents the class you want (or multiple classes with space separators)
147
What is the textContent property of element objects?
It allows you to collect or update text that is in the containing element
148
How do you update the text within an element using JavaScript?
1. Whatever the DOM location query is from ( a variable)
2. .
3. You use the textContent property on the containing element.
4. Whatever string or value you want it to be.
149
Is the event parameter of an event listener callback always useful?
No, it is not necessary [odds of an event listener that only influences one thing is relatively small...in general --> want to be prepared for possibility of adjusting]
150
Would this be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
More complicated because you would have to use the text.content property to update the count for each of the different clicks and assign it to the value.
151
Why is storing information about a program in variables better than only storing it in the DOM?
Because you could access it in different areas besides just in the DOM or tied to a specific element. It is more work to have to convert the data if you don't use variables.
152
What event is fired when a user places their cursor in a form control?
It fires the ‘focus’ event
153
What event is fired when a user's cursor leaves a form control?
It fires the ‘blur’ event
154
What event is fired as a user changes the value of a form control?
The ‘input’ event is fired
155
What event is fired when a user clicks the "submit" button within a < form >?
The ‘submit’ event --> It gets attached to the form element.
156
What does the event.preventDefault() method do?
Blocks the default behavior of the event. Prevents what would typically happen.
Place it at the start of your code when using with submit.
157
What does submitting a form without event.preventDefault() do?
It would automatically reload the page. (This should be prevented if no action attribute is provided -- do NOT want to the page to refresh)
158
What property of a form element object contains all of the form's controls.
The elements collection → holds all the element’s controls
159
What property of a form control object gets and sets its value?
Value Property
160
What is one risk of writing a lot of code without checking to see if it works so far?
You could have code that doesn’t work properly and you’re not sure which stage of your code is the problem if you’re not checking it in stages.
161
What is an advantage of having your console open when writing a JavaScript program?
You can check the progress of your code as you work as you expect it to
162
Does the document.createElement() method insert a new element into the page?
No, it is not part of the DOM tree → it is just a new element node that is created
163
How do you add an element as a child to another element?
You use the appendChild() method
164
What do you pass as the arguments to the element.setAttribute() method?
You pass: the name of the attribute you want and then the value of that name. (It will convert the values into a string)
165
What steps do you need to take in order to insert a new element into the page?
You need to first:
Create the element node that you want to insert into the page
Add text to the node (optional) or configuration
You need to then call “appendChild” method from the query selector of the element you want.
166
What is the textContent property of an element object for?
You can use it to collect the text (retrieve it)
OR
You can assign it to a new value.
167
Name two ways to set the class attribute of a DOM element.
You can use the className method on the DOM object
or you can use the element.setAttribute(‘name,’ ……) on the DOM object
168
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
You can call that function in multiple places if you need to create multiple copies of that tree over and over.
169
Give two examples of media features that you can query in an @media rule
device-width
Hover
Height
pointer
170
Which HTML meta tag is used in mobile responsive web pages?
Viewport meta tag. Could contain something like:
171
What is the event.target?
It is a property of your event object that states what specific element the event interacted with
172
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event Bubbling
173
What DOM element property tells you what type of element it is?
The .tagName property tells you what it is
The actual name will be ALL capital letters
174
What does the element.closest() method take as its argument and what does it return?
It takes a string of valid CSS selectors to match the element and its ancestors against
It returns the closest ancestor Element or itself that matches the selectors
[Closest -- opposite of querySelector
175
How can you remove an element from the DOM?
Use the remove ( ) method on the element you want to remove.
176
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
Use event delegation ---
- You only need to add an event listener to the nearest ancestor (it analyzes the bubbled event to find a match on one of its child elements.
- Use the closest property --> make sure the event handler has a conditional that will address it. Check to make sure it came from the right spot.
- You can then check if the event object’s target property to check what specific node was clicked
177
What is the event.target?
It is a property of your event object that states what specific element the event interacted with
178
What is the affect of setting an element to display: none?
It hides the element from the viewer and removes it from the document flow.
179
What does the element.matches() method take as an argument and what does it return?
It takes a string that contains valid CSS selectors as its argument. Purpose: Used for verification
It returns “true” if the element matches the selector. It returns “false” if it does not.
180
How can you retrieve the value of an element's attribute?
You use the “getAttribute” method
The parameter is the string of the attribute's Name of the value you want
181
At what steps of the solution would it be helpful to log things to the console?
You would want to log things that are every line.
182
If you were to add another tab and view to your HTML, but you didn't use event delegation, how would your JavaScript code be written instead?
You would probably need lots of different event listeners to include & for each tab.
Would need to have a special function for each view.
183
If you didn't use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
You would have many, many different conditional statements that would check for each possible variation of code.
184
What is a breakpoint in responsive Web design?
The point that a media query is designed. Point where you'd have layout changes. (it’s the point where the container starts to break down in some way.
185
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a "column" class in a responsive layout?
Because the width can respond to changing sizes of the parent container → it can be more responsive in its design
186
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will "win". Why is that?
ThesmallerwinsbecauseoftheCSScascadeandsourceorder
187
What is JSON?
JavaScript Object Notation → it is a text-based format for representing data based on JavaScript object syntax
188
What is JSON?
JavaScript Object Notation → it is a text-based format for representing data based on JavaScript object syntax
189
What are serialization and deserialization?
Serialization = turning an object/array into a stream of bytes that you can store & send over the network
Deserialization is the reverse → turning a stream of bytes into an object/array
190
Why are serialization and deserialization useful?
They allow you to transfer & store data across different networks and then convert them into objects. Brings into a format that is easily transferable everywhere
Allows you to save the state of an object
191
How do you serialize a data structure into a JSON string using JavaScript?
Use: JSON.stringify( )
The parameter is the value that you want to convert into a JSON string
Return value: is a string of your data
192
How do you deserialize a JSON string into a data structure using JavaScript?
Use JSON.parse( )
The parameter is the text that you want to parse
The return value = The Object, Array, string, number, boolean, or null value corresponding to the given JSON text.
193
How do you deserialize a JSON string into a data structure using JavaScript?
Use JSON.parse( )
The parameter is the text that you want to parse
The return value = The Object, Array, string, number, boolean, or null value corresponding to the given JSON text.
194
How do you store data in localStorage?
Set item method on the local storage
Arguments → keyname
195
How do you retrieve data from localStorage?
Get Item method on the local sto
Arguments → keyname to retrieve
196
What data type can localStorage save in the browser?
A string
197
When does the 'beforeunload' event fire on the window object?
Before the browser refreshes, close the browser
The only time to use localstorage is WITH a beforeunload event.
198
What is a method?
Is a function that is a property of an object → oftentimes it can be like a built-in task performed by an object “instance” or a task called directly on an object constructor
199
How can you tell the difference between a method definition and a method call?
It has the property name of how you’re going to call it, and then key value:
Need a function keyword, a parameter list and then the opening code block.
A method call is dot notation. So it will include the name of the object.keyname() and then whatever argument is needed inside?
200
Describe method definition syntax (structure).
Var objectName = {
property: function(parameter?) {
}
It includes an anonymous function?
201
Describe method call syntax (structure).
Dot notation:
objectName.MethodName(argument).
202
How is a method different from any other function?
It is different because it is a property of an object. So it is tied to whatever an object is? It needs to be called with its object.
203
What is the defining characteristic of Object-Oriented Programming?
Defining characteristic is that: Objects can contain both data (as properties) and behavior (as methods)
Pairing data with behavior!
204
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
205
What is "abstraction"?
Abstraction is way to take complex action or tool and to give it a simple tool. Provides a simple interface without needing to understand the complexities.
206
What does API stand for?
Application Programming Interface
207
What is the purpose of an API?
Give programmers a way to interact with a system in a simplified, consistent fashion (an abstraction)
Abstractions created that allow you to interact with a complex system. (You want to interface with an application)
208
What is “this” in JavaScript?
It is an implicit parameter of all JavaScript functions meaning its value is determined by when it is called (not when it is defined)
209
What does it mean to say that “this” is an "implicit parameter"?
It is available in a function’s code block even though it was never included in the function’s parameter list or declared with var
210
When is the value of “this” determined in a function; call time or definition time?
It is determined by when it is called.
211
What does this refer to in the following code snippet?
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
It does not refer to anything because it has not been called.
It doesn't exist yet because it is not called.
212
Given the above character object, what is the result of the following code snippet? Why?
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
character.greet();
The result would be: “It’s a me, Mario!”
It is including Mario, because the value of "this" was being determined at call-time. So the value is whatever is to the left of the property.
213
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
var hello = character.greet;
hello();
Given the above character object, what is the result of the following code snippet? Why?
The result of the code is: “It’s a me, undefined”
Because we cannot see the function being called, then you do not know what the value of this will be.
Because: it is being read as "window.firstName" which window does not have a first name.
214
How can you tell what the value of this will be for a particular function or method definition?
if you cannot see the function being called, then you do not know what the value of this will be.
215
How can you tell what the value of this is for a particular function or method call?
the value of this can be recognized as "the object to the LEFT of the dot" when the function is called (as a method).
Look for an object, if there is no "dot" then it is WINDOW.
216
What kind of inheritance does the JavaScript programming language use?
Prototype-based (or prototypal) inheritance
Give certain behaviors (methods) or data (properties) to other objects.
217
What is a prototype in JavaScript?
It is an object that contains properties and predominately methods that can be used by other objects
218
How is it possible to call methods on strings, arrays, and numbers even though those methods don't actually exist on strings, arrays, and numbers?
There is a prototype that each of the strings, array, and numbers have.
They can access it through prototypal inheritance
219
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
It looks for it on a "prototype" object and arrays simply borrow those methods when they're needed.
220
What does the new operator do?
Lets developers create a user-defined object type that has a constructor function
1. Creates a blank plain JavaScript object
2. Assigns new instance [[Prototype]] based on constructor function's prototype
3. Executes the constructor function. The defined object becomes the "this" object
4. (No constructor function will NOT return anything. they LACK return statements). "New instance" will get returned instead.
221
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype property.
222
What does the instanceof operator do?
tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.
Return value is a boolean
223
What is a "callback" function?
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
224
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
Use setTimeout function to delay something ()
Time Events
225
How can you set up a function to be called repeatedly without using a loop?
setInterval function
226
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
227
What do setTimeout() and setInterval() return?
The returned timeoutID is a positive integer value which identifies the timer created by the call
It is a number.
228
What is a client?
The service requesters → a piece of hardware or software that accesses a service made available by a server.
Example: A browser sending a request for a website
229
What is a server?
Providers of a resource or service → computer hardware or software that provides functionality for programs
Examples: web server (serves web pages)
File server (serves computer files)
230
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
Example:
GET https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
231
What three things are on the start-line of an HTTP request message?
1. An HTTP method (a verb like “get” “put” or “post” or a noun like “HEAD” or “OPTIONS) → this describes the action to be performed
2. The request target → usually a URL or absolute path of the protocol, port, and domain (where is the request going?)
3. The HTTP version → defines the structure of the remaining message. Most likely (HTTP/1.1)
232
What three things are on the start-line of an HTTP response message?
1. The protocol version (usually HTTP/1.1
2. The status code → success or failure of request
3. Status text (brief informational description)
Example:
HTTP/1.1 404 Not Found.
233
What are HTTP headers?
They specify the request or describe the body included in the message
let the client and the server pass additional information with an HTTP request or response. (Similar to the meta information in the head element of HTML)
234
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
235
Is a body required for a valid HTTP request or response message?
No, not all requests have one. (Those with GET, HEAD, DELETE, or OPTIONS, won’t have one).
Example of one without a body: 201
Only necessary when you have to send additional information
236
What is AJAX?
A group of technologies that offer asynchronous functionality in the browser
(Allows you to access data and information from a server without having to reload the information).
Sending information, receiving information without needing to refresh the page.
237
What does the AJAX acronym stand for?
Asynchronous Javascript and XML
238
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
239
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
Load event.
240
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
Because they are both JavaScript objects used to interact and update information.
241
What is a code block? What are some examples of a code block?
They are denoted by curly braces { }. They allow you to run a group of statements together.
examples include:
If else, for, do while, while, function, try catch (?)
242
What does block scope mean?
It only exists within a specific code block, the values will not exist the same way outside the code block.
So, it might create a new variable within a code block
243
What is the scope of a variable declared with const or let?
They are block-scoped, they cannot be redeclared
Previously --> They were constrained to function code blocks but not other code blocks (like loops)
Const/Let block-scoped for ALL blocks. Var is only function scoped
244
What is the difference between let and const?
Const creates a read-only reference to a value. It cannot be REASSIGNED but the value can change. Must also provide it with a value (initialize a value)
Let can be mutable and reassigned (change values at anytime)
245
Why is it possible to .push() a new value into a const variable that points to an Array?
Reference data types are mutable, you can change their content/properties. You can't change their name binding or reassigned the variable.
Because, like with objects you can change the values within a const variable, you just cannot assign different values to it. You can update values within that array. You just cann’t assign a new array to it.
246
How should you decide on which type of declaration to use?
You should decide based on whether a variable can be constant or not. If you want to update or change
Reassign/update use: Let
Prefer const --> only use let if you need to.
247
What is the syntax for writing a template literal?
You can wrap your text in backticks (` `)
It does count white space, so if you want new lines, make sure you indent properly.
You can add expressions using variables (string interpolation): ${ variable}
248
What is "string interpolation"?
The ability to substitute part of the string for the values of variables or expressions.
Place variable in a special block: ${variable_name}
249
What is destructuring, conceptually?
Object destructuring assigns the properties of an object to variables with the same names by default.
assigns properties of an object to individual variables.
Getting property values or array elements and assigning them all on one line
250
What is the syntax for Object destructuring?
Let/const { property: variableName,.......} = object
Names of properties you want to pick, want to use a colon if you want to rename and an alias;
let { property1: variable1, property2: variable2 } = object;
251
What is the syntax for Array destructuring?
let/const [x, y, z] = getScores();
Variable (let or const) Then: Square brackets [ ] and the variable names you want to pass = whatever array you are using
If you don’t include ALL indexes, it won’t have them all. Can use “...args” to get all the other values
252
How can you tell the difference between destructuring and creating Object/Array literals?
Destructuring Array literals and object literals will have their braces BEFORE the assignment operator and creating will have them afterward.
253
What is the syntax for defining an arrow function?
(...parameters) => expression; ← Use for defining an arrow function
(...parameters) => { statements } ← Use for defining arrow functions with multiple statements
If multiple statements it needs to include a return statement
(...parameters) => expression;
One parameter => expression;
() => expression;
Can have a normal code block OR return expression
254
When an arrow function's body is left without curly braces, what changes in its functionality?
It cannot have multiple statements or multiple lines and it no longer is required to have a return statement --> Return is implicit, it is implied.
Return expression (MUST be something type in console and can get immediate result)
255
How is the value of this determined within an arrow function?
Value of this determined by its SURROUNDING code block.
Value of 'THIS' determined when arrow functions are DEFINED. Determined at definition time
because arrow functions establish this based on the scope the arrow function is defined within.
256
What is a CLI?
Command Line Interfaces --> Text-based way to talk to a program
257
What is a GUI?
Graphical user interface → things aimed at consumers of technology
Studio visual code is an example of GUI (Ajax / Code journal are examples)
Component of a full-stack project =
258
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 - look up manual or command information
cat - concatenate files and print on standard output
→ Can combine files together & text content
→ Can view content of folders, too
ls - lists directory contents (lists information about files)
pwd - print name of current/working directory (prints full filename of working directory). Tells where are you right now
echo - display a line of text & can write text that you can include in a file - Essentially console.log for the terminal
touch - change file timestamps (update access/modification times of files to current time)
Create files. (Touch often used for creating files)
mkdir - create directories (if they don’t already exist)
Create directors/files and parents/grandchild directories
mv - Move or rename files → rename source or move sources to directory
rm - remove files or directories
Need to remove or delete directories. It's permanent and NO warning --> so be careful
cp - copy files and directories
Need to copy files or directories
259
What are the three virtues of a great programmer?
Laziness – Reduce overall energy expenditure (write labor-saving programs others find useful)
Impatience - Write programs that don’t just react to your needs but anticipates them (or pretends to…)
Hubris - Makes you write/maintain programs others won’t say bad things about
AKA -- work smarter not harder
260
What is Node.js?
Program that allows JavaScript to be run outside of a web browser
261
What can Node.js be used for?
Used for building back ends for web applications, command-line programs, or any kind of automation that developers wish to perform
Prevents code blocking & can allow other code to run in meantime due to callbacks
262
What is a REPL?
Read-eval-print loop
It is a way to take a single user input, execute them and return the result to the user --
Example --> Chrome Dev Tools is an example of a REPL
263
When was Node.js created?
Initially released in 2009
264
What back end languages have you heard of?
Ruby, Python, C++, java, ruby, python, php, c#, elixir, clojure, zig, golang, scala, cyrstal,
265
What is the process object in a Node.js program?
It is a global object that provides information about, and control over, the current Node.js process (it is always available) →
Information about the process (the instance of a currently running program)
Example – when you run an app it starts the process
They are self-aware
266
How do you access the process object in a Node.js program?
It is global, you don't have to declare it or assign it. It just EXISTS. You access it by name or globally
267
What is the data type of process.argv in Node.js?
It is an array of strings (or string arrays)
PROCESS.ARGV returns an array containing the command line arguments passed when the Node.js process was launched.
268
What is a JavaScript module?
It is a single .js file
Node.js supports modules using a system where there are many, many modules that each provide a small chunk of functionality and work together in concert
269
What values are passed into a Node.js module’s local scope?
__dirname: directory name of current module
__filename: the file name of the current module
Exports: how this module can provide functionality/values to others (defines what a module exports)
Module: Reference to current module
require(): Can be how modules can receive information from other modules, JSON, and local files
270
Give two examples of truly global variables in a Node.js program
Console
Process
271
What is the purpose of module.exports in a Node.js module?
Allows you to export a module to be used by other modules
To export multiple things you would assign module.exports to an object that can continue multiple functions
272
How do you import functionality into a Node.js module from another Node.js module?
You use the ‘require’ function with an argument of the relative path from the node.js module that you want to use
272
How do you import functionality into a Node.js module from another Node.js module?
You use the ‘require’ function with an argument of the node.js module that you want to use
273
What is the JavaScript Event Loop?
Event loop looks at the stack and looks at the stack queue and → If stack is empty it takes first thing in task queue and will run and push the callback back into the stack
274
What is the difference between "blocking" and "non-blocking" with respect to how code is executed?
Blocking → essentially need to wait until the code is fully executed before you can proceed to the next block of codes → can’t do anything until its finished
Non-blocking is when you can run things in the event loop and can accept callback functions → can execute methods asynchronously
Any code being executed is ON the call stack.
Blocking code → Is ON the call stack, blocking anything else from being called
Non-blocking → any operation that is not on the call stack
275
What is a directory?
A special file that lists other files
276
What is a relative file path?
How you get from the working directory to another directory
(relative from your current position)
277
What is an absolute file path?
Location of the file starting at the root directory
(From the entrance)
278
What module does Node.js include for manipulating the file system?
fs.module is included
279
What method is available in the Node.js fs module for writing data to a file?
The writeFile method
Arguments: (‘fileName,’ data, options, callback function)
280
What is a client?
Hardware or software that sends the requests to a server
Example: browser sending a request
281
What is a server?
The one that provides a service or function (like a web server, a file server) to a client
Giving information and providing the resources.
responds to a request and completes the service being requested
282
Which HTTP method does a browser issue to a web server when you visit a URL?
GET method
283
What is on the first line of an HTTP request message?
The HTTP method → like “GET”, “PUT”, or “POST”
The request target (usually URL or absolute path)
The HTTP version (defines structure of remaining message)
284
What is on the first line of an HTTP response message?
Protocol version (HTTP/1.1)
Status code → was it successful? Failure? Etc.
Status text - Brief information to describe status code
Example: HTTP/1.1 404 Not Found.
285
What are HTTP headers?
let the client and the server pass additional information with an HTTP request or response.
Metadata about the message exchange. Key value pairs with information
They specify the request or describe the body included in the message
286
Is a body required for a valid HTTP message?
It is optional (it can contain data associated with the request)
No, not all requests have one. (Those with GET, HEAD, DELETE, or OPTIONS, won’t have one).
287
What is NPM?
Makes it easy for developers to share their code & for other developers to use that code & manage different versions of the code
It has three parts:
- The website
- The registry
- Command Line Interface (CLI)
288
What is a package?
Reusable code that developers can create or use
A directory with one or more files (INCLUDING a package.json with some metadata inside)
289
How can you create a package.json with npm?
Use: npm init
npm init --yes / npm init -y (picks defaults of a package.json)
290
What is a dependency and how to you add one to a package?
3rd party code that your code needs to work.
291
What happens when you add a dependency to a package with npm?
They are updated and listed in the package.json 'dependencies' key | Created a node_modules
292
How do you add express to your package dependencies?
Use: npm install express
To use:
Var express = require(‘express’)
Var app = express();
293
What Express application method starts the server and binds it to a network PORT?
The app.listen method
294
How do you mount a middleware with an Express application?
App.use & app.method (METHOD = HTTP method of the request that middleware function handles, like GET, PUT, or POST → lowercase)
295
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req = The request object that represents HTTP requests (properties for request query string, parameters, body)
res = The response object that represents the the HTTP response
296
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
Content-Type: application/json
297
What is the significance of an HTTP request's method?
It’s how the server respods to the client’s requests → so they define the routing of an application’s endpoints
The application will ‘listen’ for requests that match a specified route and method and when it finds a match it will specify the callback
298
What does the express.json() middleware do and when would you need it?
It parses incoming requests with JSON payloads and returns middleware that only parses JSON and looks at the request.
It is needed when you have a request that is a JSON payload
299
What is PostgreSQL and what are some alternative relational databases?
Post Gress Queue El → it is a relational database management system → it can also handle multiple concurrent connections from clients
Alternatives → MySQL, SQL Server (Microsoft), Oracle (Oracle Corporation)
300
What are some advantages of learning a relational database?
Most widely used database → used in lots of devices and applications | lots of databases driven by same language
301
What is one way to see if PostgreSQL is running?
Use sudo service postgresql status → way to see if Postgres is running
302
What is a database schema?
A collection of tables → it defines how the data should be organized & interact with each other
Needs to be defined upfront
The rules for how the data can be stored
Schema-less databases are in noSQL
Tells data upfront what data should look like
303
What is a table?
The relations of a relational database
List of rows where each has attributes
Similar → array of objects where all have same
304
What is a row?
In a table → same set of attributes (columns) of your data
Each row is a record in your database that will have the same set of attributes (columns)
305
What is SQL and how is it different from languages like JavaScript?
Primary way of interacting with relational databases
It is a way to retrieve, create, and manipulate data in relational databases
It’s different from JavaScript (which is imperative, tell it what to do and how) → instead, it is declarative (you describe the results you want → HTML & CSS are declarative)
SQL describes what we want & SQL figures it out
306
How do you retrieve specific columns from a database table?
You use the “select” keyword → followed by a comma-separated list of column names (double quotes). THEN → use the ‘from’ clause to specify which table to retrieve data from
End it in a semicolon
MUST end in a semicolon
307
How do you filter rows based on some specific criteria?
FILTERING – use the “where” clause with a condition
You use the “where” clause after the from clause
It checks for whatever you provided in single quotes → being compared using a comparison operator
308
What are the benefits of formatting your SQL?
consistent style and readability.
309
What are four comparison operators that can be used in a where clause?
< , > , !=, =
310
How do you limit the number of rows returned in a result set?
Use the limit selector → it comes LAST in the sequence; it is a literal integer number to specify # of rows that you return
311
How do you retrieve all columns from a database table?
Use the * asterisk
select *
From “_____”;
312
How do you control the sort order of a result set?
Use the “order by” clause in the select statement to control the order of the result set
313
How do you add a row to a SQl Table?
Use the "insert into" keyword → You first specify which table you are inserting into. Then, list the columns.
** Need to specify the attribute names. Column Names NEED to match the values inserting
Then, you use values ( values). And if you want to return a value state: returning *
314
What is a tuple?
List of values that are being inserted into a row. There is an order that matters ( ...values... )
315
How do you add multiple rows to a SQL table at once?
You just separate a tuple of values with commas
316
How do you get back the row being inserted into a table without a separate select statement?
Use the “returning” clause
If you want all the columns use * | if you want just one column, specify it. Just LIKE select, can specify what you want.
317
How do you update rows in a database table?
Use an update statement to update rows in a database table →
update “table”
set “column” = value
where clause
If you want to update multiple columns, just use a comma-separated list of arguments in the “set” clause
318
Why is it important to include a where clause in your update statements?
Because if you DONT include it, it will update EVERY column that you have <-- If you don't do it, you will crash everything
319
How do you delete rows from a database table?
Use the delete statement
SHOULD include a where clause to specify WHERE to delete it from
320
How do you accidentally delete all rows from a table?
You don’t specify what exactly to delete from a particular table. If you JUST use the table name, you delete everything.
321
What is a foreign key?
*****
SHARED DATA VALUE
*****
322
How do you join two SQL tables?
Use the “join” clause after “from” clause and tell the database sever to link the tables by whatever column they have in common
First → 1. Select what you want to combine:
If multiple things use: “tableName”.”attribute”
Then → Use “from” clause for your first thing
Then → Use “join” ______ using (______)
What follows “using” is the exact location to insert it IN PARENTHESES
Include as many join…using…that you need
Can follow with other things like “where” and “limit” and “order by…”
323
How do you temporarily rename columns or tables in a SQL statement?
You can alias the common names →
Use the “as” keyword
Example: Change “name” of two tables such as:
Select “products”.”name” as “product”,
“Suppliers”.”name” as “supplier”
Can also "alias" tableNames to streamline process of repeating names of tables.
324
What are some examples of aggregate functions?
max() →
Select max (‘price’) as “highestPrice”
From “products”;
avg() →
Select avg(“price”) as “averagePrice”
From “products”;
count() →
Select count(*) as “totalProducts”
From “products”
Good practice to alias your columns
Others: min() | sum () | every ()
325
What is the purpose of a “group by” clause?
Purpose is to separate rows into groups and perform aggregate functions on those groups of rows
326
What are the three states a Promise can be in?
Pending → The initial state (not fulfilled, nor rejected)
Fulfilled → operation was completed successfully
Rejected → operation failed
Once it is fulfilled or rejected there’s no going back
327
How do you handle the fulfillment of a Promise?
Use the promise.then method → It can be fulfilled with a value → it is queued up by a promise’s then method
Promise.then method takes up two arguments (value → value of the promise, or reason if rejected)
Value might have an “onFulfilled” function that is called (could also be an identity function)
Once it is fulfilled, the “onFulfilled” or “onRejected” handler function will be called asynchronously
then(onFulfilled)
then(onFulfilled, onRejected)
then(
(value) => { /* fulfillment handler */ },
(reason) => { /* rejection handler */ },
);
328
How do you handle the rejection of a Promise?
Catch returns a method and deals with rejected cases → behaves similar to calling (then) → you have to provided the “onRejected” function in its argument
p.catch(onRejected)
p.catch(function(reason) {
// rejection
})
329
What is Array.prototype.filter useful for?
Useful for filtering an array down to just specific elements that pass a certain test/criteria that you set and you don’t want to modify the original array
330
What is Array.prototype.map useful for?
Useful for when you want to create a new array that has transformed elements from another array
331
What is Array.prototype.reduce useful for?
Combining elements of an array into a single value
It allows you to do things like sum an array, or multiple all the contents together and just return one thing
Example → Bank account – calculate your total based on all the transactions in an account
Collapse an array of elements into a final value
332
What is Webpack?
It lets you bundle your JavaScript applications (both ESM and CommonJS) intro an output file (dis/main.js)
Start with multiple modules and can end up with fewer files
Create a bundle
It is a module bundler
and extend to support different assets like images, fonts, and stylesheets
333
How do you add a devDependency to a package?
You run the npm install –save-dev and then the devDependencies that you want to use:
Webpack
webpack-cli
Npm install webpack –save-dev
devDependencies are packages that are only needed for local development and testing
334
What is an NPM script?
It’s a way to bundle commands together → they can be a string of compands that allow you to do a specific task → commands you can enter into the terminal
Command line command that is a nickname
335
How do you execute Webpack with npm run?
You do: npm run build to execute a specific script
To execute scripts you would use:
Npm run …. (whatever you named it)
Npm run build
Can add any arbitrary script to the keys
336
What is "syntactic sugar"?
Syntax in programming that is designed to make things easier to read and express → express things more clearly/concisely
Oftentimes it is shorter!
337
What is the typeof an ES6 class?
They are constructor functions
338
Describe ES6 class syntax.
You use class NameOfClass {
constructor Method (parameter) {
this.parameter = parameter;
}
method(parameters) {
return ……
}
}
339
What is "refactoring"?
Process of restructuring existing code (how it factors) without changing its functionality→ improving design, structure or implementation while preserving its functionality
TRULY refactoring = behavior is the SAME
340
How are ES Modules different from CommonJS modules?
ECMAScript Modules are official! CommonJS is not official so you need other things to make CommonJS to support
Two parts: declarative syntax (for importing/exporting)
- module (import/export)
Programmatic loader API – configure how modules are loaded -- Asynchronous loading support
341
What kind of modules can Webpack support?
ECMA and CommonJS will work | npm packages
Supports: ECMA modules | CommonJS module | AMD
342
What is React?
JavaScript library for creating user interfaces → a painless way to create interactive UIs (design simple views for each state in an application)
343
What is a React element?
It describes what you want to see on the screen → they are plain objects (building blocks of react apps)
React.createElement(
type,
[props],
[...children]
)
344
How do you mount a React element to the DOM?
The render method will mount it to the DOM
1. Create the element
2. Query the DOM for where you want the place element
3. Use ReactDOM.createRoot(domElement)
4. Use render(element)
345
What is Babel?
It is a compiler
It is a toolchain that converts ECMAScript 2015+ into a backwards compatible version of JavaScript in current and older browsers or environments
OR for alternative scripts
346
What is a Plug-in?
It is a software component that adds a specific feature to an existing computer program → it enables customization
347
What is a Webpack loader?
They are transformations that are applied to source code of a module → pre-process files as you import or “load” them
Way to handle “front-end build steps → can transform files from a different language to JavaScript
Loaders provide a way to customize the output through their preprocessing functions
A middle connector –
348
How can you make Babel and Webpack work together?
You need to install babel-loader as a devDependency
349
What is JSX?
It is a syntax extension to JavaScript → it’s a way to use with React to describe what the UI should look like (similar to a template language)
JavaScript PLUS some stuff -- JSX extension to JavaScript that you compile TO JavaScript
350
Why must the React object be imported when authoring JSX in a module?
Because JSX compiles calls to React.createElement, so if it’s not there, then it’s not going to work! → Needs to be in scope
351
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
You need to make sure that you have webpack (dev-dependency) & babel-loader installed (dependency) → Then, also make sure you have the babel plug-in:
@babel/plugin-transform-react-jsx
Installed too, so that the babel-loader will use it when the webpack is run
Need to have a webpack.config.js file that will have the Babel plugins loaded
352
What is a React component?
Reusable Function or Class that can let you split UI into independent, reusable pieces and think about each piece in isolation
They accept inputs called “props” and return React elements that describe what should appear on screen
353
How do you define a function component in React?
Similar to a JavaScript function –
function Name (capitalize the name to be in scope, bundlers/compilers won't know unless its capitalized) (props)
Props = properties of argument that you are passing.)
Returns a REACT element
Can also use an ES6 class to define a component
354
How do you mount a component to the DOM?
Similar steps with the way you would mount a JavaScript element to the DOM
BUT, with the element you are defining you would use something like:
const element = < ComponentName name=”value” />
Call the root.render( ) with the react element
It will call the component with whatever props are passed
It will return whatever the function has happen
Then it will update the DOM
355
What are props in React?
They are properties of an element that are an object (they look like HTML attributes)
Basically -- key-value pairs
356
How do you pass props to a component?
When you are rendering a Component, in your argument (or variable you are creating) →
< ComponentName prop1=”value”..... />
Whatever follows the ComponentName will be passed as part of the props component
PropName = Value
- IF want to use template Literals need to pass { }
- If it's a JavaScript expression must be wrapped in { }
357
How do you write JavaScript expressions in JSX?
MUST be in curly braces (way to inform that it's a JavaScript expression.
358
How do you create "class" component in React?
1. Class keyword
2. Name of componeent
3. Extend the react.component
4. NEED a render method (and expects it to return react elements)
You need to extend: React.Component
Only method you MUST define in a react.component sub class is “render()”
All others are optional
359
How do you access props in a class component?
It is a property of "this"
You need to use “this.props.propName” to access whatever prop you want in a class component
360
What is the purpose of state in React?
It initializes the local state of a React object → to contain data or information about the component
it is often assigned in the constructor directly (all other methods use the this.setState( )
A component's state can change over time; whenever it changes, the component re-renders
361
How to you pass an event handler to a React element?
IDEA → When you return the react element. You pass it as a PROP
Example: OnClick…..
(Make sure whatever method associated with OnClick & changing the state --> Needs to be BOUND)
362
What are controlled components?
Controlled components are when an input form element has its value being controlled by React
Input’s value will always be driven by the React state → allows you to pass the value to other UI elements or reset it from other event handlers
Basically → The React state is the “single source of truth”
363
What two props must you pass to an input for it to be "controlled"?
The: this.state.value ← This makes the React state the source of truth for what the form’s value will become
Value
onChange ← Way to handle changes
handleChange → runs every keystroke to update the React state & displayed value will update as the user types
364
What Array method is commonly used to create a list of React elements?
You use the map method
365
What is the best value to use as a "key" prop when rendering lists?
A Key is a special string attribute you need to include when creating lists of elements
They need to be given to elements inside the array to give the elements a stable identity
BEST way → use a string that uniquely identifies a list item among its siblings
YOu would use IDs from your data as keys
Or, you can use the item index as a last resort (NOT recommended though)
366
What does express.static() return?
It returns a FUNCTION →
It returns a middleware function!
App.use NEEDS to use a middleware
367
What is the local __dirname variable in a Node.js module?
It is the directory name of the CURRENT module
Path to the directory that THIS module is in
Need to state a full absolute path
368
What does the join() method of Node's path module do?
Joins all given path segments together using the platform-specific separator as a delimiter then normalizes the resulting path
Makes sure that it creates a path that works
Accounting for all the . .
*Must be a string!*
Way to apply JavaScript, CSS, and HTML TO the browser
369
What does fetch() return?
It returns a promise → it resolves with a response object
370
What is the default request method used by fetch()?
The default method is: GET
371
How do you specify the request method (GET, POST, etc.) when calling fetch?
To specify a request method you need to place it in as an object:
fetch(destination, { method: method }
372
When does React call a component's componentDidMount method?
It is invoked immediately after a component is mounted (inserted into the tree)
373
Name three React.Component lifecycle methods.
componentDidMount( )
render ( )
componentDidUpdate ( )
componentWillUnmount ( )
constructor ( )
374
How do you pass data to a child component?
Pass a function as a prop to the child component
