HTML Flashcards
(344 cards)
1
Q
Where do you put non-visible content about the HTML document?
A
Within the head element
2
Q
Where do you put visible content about the HTML document?
A
Within the body element
3
Q
Where do the head and body tags go in a valid HTML document?
A
Within the html element
4
Q
What is the purpose of a ! DOCTYPE declaration?
A
To inform the web browser about what version of html the page is written in
5
Q
Give five examples of HTML element tags.
A
div h1 p img article
6
Q
What is the purpose of HTML attributes?
A
To add details/extra info to elements
7
Q
Give an example of an HTML entity (Escape character)
A
& = & a m p ; < = & l t ; > = & g t ;
8
Q
How do block-level elements affect the document flow?
A
It creates a line break.
9
Q
How do inline elements affect the document flow?
A
It stays within the same line if possible and only takes as much space as needed.
10
Q
What are the default width and height of a block-level element?
A
width: 100%
height: auto
11
Q
What are the default width and height of an inline element?
A
width: auto
height: auto
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
An ordered list is numbered.
An un ordered list has bullet points.
13
Q
Is an HTML list a block element or an inline element?
A
Block element
14
Q
What HTML tag is used to link to another website?
A
Anchor tag (tag for anchor element) <a href=""></a>
15
Q
What is an absolute URL?
A
Complete web address starting with domain name (must include https://)
16
Q
What is a relative URL?
A
Shorthand address linking parts/pages within the same website (omits domain name)
17
Q
How do you indicate the relative link to a parent directory?
A
../filename
18
Q
How do you indicate the relative links to a child directory?
A
directory/filename
19
Q
How do you indicate the relative link to a grand parent directory?
A
../../filename
20
Q
How do you indicate the relative link to the same directory?
A
its own filename
or
#id within same page
21
Q
What is the purpose of an HTML form element?
A
Form element sets boundary /enclosure for form control elements
22
Q
Give five examples of form control elements.
A
input select option textarea button
23
Q
Give three examples of type attributes for HTML elements.
A
text
password
radio
checkbox
24
Q
Is an HTML element a block element or an inline element?
A
Inline element
25
In CSS, how do you select elements by their class attribute?
.class {
| }
26
In CSS, how do you select elements by their type?
element {
| }
27
In CSS, how do you select an element by its id attribute?
```
#id {
}
```
28
Name three different types of values you can use to specify colors in CSS.
hex code
rgb/rgba
color name
hsl/hsla
29
What CSS properties make up the box model?
Border
Margin
Padding
30
Which CSS property pushes boxes away from each other?
Margin
31
Which CSS property add space between a box's content and its border?
Padding
32
What is a pseudo-class?
A keyword/class added to a selector after : to specify a special state of the selected element to which the rule set will be applied.
33
What are CSS pseudo-classes useful for?
Creating an interactive website
34
Name at least two units of type size in CSS.
px
em
rem
35
What CSS property controls the font used for the text inside an element?
Font-family
36
What is the default flex-direction of a flex container?
Row (from left to right)
37
What is the default flex-wrap of a flex container?
Nowrap (same line)
38
Why do two div elements "vertically stack" on one another by default?
Because they are block elements.
39
What is the default flex-direction of an element with display: flex?
Row
40
What is the default value for the position property of HTML elements?
position: static;
41
How does setting position: relative; on an element affect document flow?
No change
42
How does setting position: relative; on an element affect where it appears on the page?
It changes location in relation to normal location of static position.
43
How does setting position: absolute; on an element affect document flow?
The element is removed from the document flow entirely.
44
How does setting position: absolute; on an element affect where it appears on the page?
It changes location in relation to its containing element with disregard to other sibling elements.
45
How do you constrain an absolutely positioned element to a containing block?
Set the containing block to
| position: relative; or absolute; (non-static)
46
What are the four box offset properties?
top
bottom
left
right
47
What is the purpose of variables?
To store data, which can be accessed later and inserted in functions .
48
How do you declare a variable?
Use 'var', 'let', or 'const' + variable name
| Different scoping
49
How do you initialize (assign a value to) a variable?
= value
50
What characters are allowed in variable names?
Dollar sign, underscore, numbers, and letters. (Cannot start with a number.)
51
What does it mean to say that variable names are "case sensitive"?
Names in different cases are considered as different variables.
52
What is the purpose of a string?
To assign text-content data / series of characters; naming and assigning significance
53
What is the purpose of a number?
To assign a number-type value; calculations
54
What is the purpose of a boolean?
To assign a value of true/false. Its purpose is to make a decision.
55
What does the = operator mean in JavaScript?
Value is assigned to
56
How do you update the value of a variable?
Reassign the variable / update the value of the variable by using an equal sign without declaration keywords such as 'var'
57
What is the difference between null and undefined?
Null is an object type data. (Must be assigned. Intentional.)
Undefined is an undefined type data. (When a variable is declared but no value is assigned. Usually by mistake.)
58
Why is it a good habit to include "labels" when you log values to the browser console?
To clarify what the values are for, since console.log only shows values unless labeled.
59
Give five examples of JavaScript primitives.
```
String
Number
Boolean
Undefined
Null
```
60
What data type is returned by an arithmetic operation?
Number which is the result of a calculation
61
What is string concatenation?
To combine multiple strings.
62
What purpose(s) does the + plus operator serve in JavaScript?
It combines strings.
| It also adds numbers.
63
What data type is returned by comparing two values (, ===, etc)?
Boolean
64
What does the += "plus-equals" operator do?
x += y returns x = x + y
65
What are objects used for?
To create a collection of things
66
What are object properties?
Individual pieces of data stored within an object
67
Describe object literal notation.
Variable key = {
property: value;
}
68
How do you remove a property from an object?
Use the operator delete followed by a dot notation
69
What are the two ways to get or update the value of a property?
dot notation
or
bracket notation
70
What are arrays used for?
To list out multiple values, usually similar data
71
Describe array literal notation.
Square brackets:
| variable = [ ] ;
72
How are arrays different from "plain" objects?
Numbered index
To add a value to an array:
arrayName.push(objectName)
73
What number represents the first index of an array?
0
74
What is the length property of an array?
arrayName.length
75
How do you calculate the last index of an array?
arrayName.length - 1
76
What is a function in JavaScript?
A special type of object that can be called. Its function is to re-use the codes.
77
Describe the parts of a function definition.
```
Function keyword,
Function name (optional),
Parameter (can be empty),
Code block,
Return statement (optional).
```
78
Describe the parts of a function call.
Function name,
| Parenthesis containing optional arguments.
79
When comparing them side-by-side, what are the differences between a function call and a function definition?
Call runs the code, using actual values.
| Definition defines the code, using a code block.
80
What is the difference between a parameter and an argument?
Function parameters are the names listed in the function's definition. Function arguments are the real values passed to the function.
81
Why are function parameters useful?
To push additional data into the same function
82
What two effects does a return statement have on the behavior of a function?
(1) Produces a value where the function is called.
| (2) Stops and exits the function.
83
Why do we log things to the console?
To inspect codes / For debugging purposes.
| It is a method for developers to write code to inconspicuously inform the developers what the code is doing.
84
What is a method?
Function stored within a property of an object
85
How is a method different from any other function?
It requires an object
86
How do you remove the last element from an array?
object.pop()
87
How do you round a number down to the nearest integer?
Math.floor()
88
How do you generate a random number?
Math.floor(Math.random() * range)
```
Ex:
function getRandomNumberInRange(start, end) {
var randomNum = Math.floor(Math.random() * (end-start) + 1 ) + start;
return randomNum;
}
```
89
How do you delete an element from an array?
array.splice(index)
90
How do you append an element to an array?
To add to end of array:
array.push()
To add to start of array:
array.unshift()
91
How do you break a string up into an array?
array.split('breakpoint')
92
Do string methods change the original string? How would you check if you weren't sure?
No, strings are immutable.
| You can check by console.log().
93
Roughly how many string methods are there according to the MDN Web docs?
100
94
Is the return value of a function or method useful in every situation?
Not all the time.
95
Roughly how many array methods are there according to the MDN Web docs?
100
96
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
97
Give 6 examples of comparison operators.
```
===
>
<
>=
<=
!===
```
98
What data type do comparison expressions evaluate to?
Boolean
99
What is the purpose of an if statement?
To execute a function depending on a condition
100
Is else required in order to use an if statement?
No, it's optional
101
Describe the syntax (structure) of an if statement.
```
if (condition) {
function
};
```
102
What are the three logical operators?
|| (OR), && (AND), ! (NOT).
103
How do you compare two different expressions in the same condition?
Use a logical operator and put parenthesis around each condition.
104
What is the purpose of a condition expression in a loop?
To see if the code is permitted to run.
105
What does "iteration" mean in the context of loops?
Single time that code block within declaration runs.
106
When does the condition expression of a while loop get evaluated?
Before each iteration
107
When does the initialization expression of a for loop get evaluated?
Before anything
108
When does the final expression of a for loop get evaluated?
Right after every time code is run.
109
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break
110
What does the ++ increment operator do?
Add 1
111
How do you iterate through the keys of an object?
For...In Loop
112
What are the four components of "the Cascade".
Source Order
Inheritance
Specificity
!Important Rule
113
What does the term "source order" mean with respect to CSS?
The order CSS rules are written in a stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.
114
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance
115
List the three selector types in order of increasing specificity.
Type Selector
Class Selector
ID Selector
116
Why is using !important considered bad practice?
It hinders debugging by breaking the natural cascading in CSS stylesheet.
117
Why do we log things to the console?
To check the values of variables.
118
What is a "model"?
Representation or Re-creation of an actual thing.
119
Which "document" is being referred to in the phrase Document Object Model?
html document
120
What is the word "object" referring to in the phrase Document Object Model?
JavaScript object
121
What is a DOM Tree?
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.
122
Give two examples of document methods that retrieve a single element from the DOM.
document. getElementByID();
| document. querySelector();
123
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll();
124
Why might you want to assign the return value of a DOM query to a variable?
So that we can re-use the variable to locate the desired object.
125
What console method allows you to inspect the properties of a DOM element object?
console.dir();
126
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
When you place your JavaScript at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.
127
What does document.querySelector() take as its argument and what does it return?
```
CSS selector(s).
It returns the first element with matching selector(s).
```
128
What does document.querySelectorAll() take as its argument and what does it return?
```
CSS selector(s).
It returns all elements with matching selector(s).
```
129
Why do we log things to the console?
To check functions are running without errors. To check values.
130
What is the purpose of events and event handling?
To respond to certain events, for organic interactions and dynamic features.
131
Are all possible parameters required to use a JavaScript method or function?
No.
132
What is a callback function?
Function getting passed around as a value to other places.
133
What object is passed into an event listener callback when the event fires?
Event object
134
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
console.dir(event.target);
135
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
event.target is the element where the event occurs.
console.log & console.dir(event.target);
MDN;
136
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
If there is a parenthesis, function is being called when page loads, instead of when the event happens.
137
What is the className property of element objects?
Used either to retrieve current value of, or assign a new value (update) of, the class name of an element.
138
How do you update the CSS class attribute of an element using JavaScript?
element.querySelector( css selector).className = 'newName'
139
What is the textContent property of element objects?
Grabs just the text of an element, without grabbing styling details.
140
How do you update the text within an element using JavaScript?
element.querySelector( css selector).textContent = 'newText'
141
Is the event parameter of an event listener callback always useful?
No, not always necessary.
142
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
More complicated.
143
Why is storing information about a program in variables better than only storing it in the DOM?
It saves so much time and energy of both the user and the computer.
144
What does the transform property do?
To alter an object spatially.
| To modify the coordinate space of the CSS.
145
Give four examples of CSS transform functions.
Rotate
Scale
Skew
Translate
146
The transition property is shorthand for which four CSS properties?
transition-property
transition-duration
transition-timing-function
transition-delay
147
What event is fired when a user places their cursor in a form control?
Focus
148
What event is fired when a user's cursor leaves a form control?
Blur
149
What event is fired as a user changes the value of a form control?
Input
150
What event is fired when a user clicks the "submit" button within a ?
Submit
151
What does the event.preventDefault() method do?
Tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.
152
What does submitting a form without event.preventDefault() do?
Page reloads.
153
What property of a form element object contains all of the form's controls.
.elements
154
What property of form a control object gets and sets its value?
.value
155
What is one risk of writing a lot of code without checking to see if it works so far?
It's more difficult to troubleshoot and takes more time.
156
What is an advantage of having your console open when writing a JavaScript program?
You can constantly check your codes as writing them.
157
Does the document.createElement() method insert a new element into the page?
parent.appendChild(child)
158
What do you pass as the arguments to the element.setAttribute() method?
'Name', value
| of attribute
159
What steps do you need to take in order to insert a new element into the page?
variable = document.createElement
query parent element
parent.appendChild(child)
160
What is the textContent property of an element object for?
To grab textContent so that you can update it.
161
Name two ways to set the class attribute of a DOM element.
.setAttribute
| .className
162
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
You can use the same set of data repeatedly to create different projects.
163
Give two examples of media features that you can query in an @media rule.
min-width
| max-width
164
Which HTML meta tag is used in mobile-responsive web pages?
Viewport meta tag
165
What is the event.target?
Element receiving the event
166
Why is it possible to listen for events on one element that actually happen its descendent elements?
Due to bubbling event flow
167
What DOM element property tells you what type of element it is?
element.tagName
168
What does the element.closest() method take as its argument and what does it return?
Argument: CSS selector
Return: element that is the closest ancestor with matching selector
169
How can you remove an element from the DOM?
element.remove()
170
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
Add event listener to the closest parent containing those DOM elements.
171
What is the affect of setting an element to display: none?
It completely hides the element.
172
What does the element.matches() method take as an argument and what does it return?
Argument: string of selector
Return: boolean value
173
How can you retrieve the value of an element's attribute?
element.getAttribute('attributename')
174
At what steps of the solution would it be helpful to log things to the console?
After declaring a new variable,
After looping,
After updating a value, etc.
175
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?
Since $tabList is a node list, you would have to do 'addEventListener' to each of the individual nodes inside node list.
176
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 have to write codes for every possible situation. (for each index)
177
What is a breakpoint in responsive Web design?
What is a breakpoint in responsive design? In responsive design, a breakpoint is the “point” at which a website's content and design will adapt in a certain way in order to provide the best possible user experience.
178
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?
Width of an element can be automatically calculated instead of being fixed at a certain value. This maintains proportions and thus makes the layout more responsive and aesthetic.
179
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?
It's just following cascading rules.
(Same specificity, different source order).
180
What is JSON?
JSON is a format that encodes objects in a string.
| It is commonly used for transmitting data in web applications.
181
What are serialization and deserialization?
Simply speaking Serialization is a process of converting an Object into stream of bytes so that it can be transferred over a network or stored in a persistent storage.
Deserialization is the exact opposite - Fetch a stream of bytes from network or persistence storage and convert it back to the Object with the same state.
The thing to understand is how those stream of bytes are interpreted or manipulated so that we get the exact same Object/ same state. There are various ways to achieve that. Some of them are -
XML: Convert Object to XML, transfer it over a network or store it in a file/db. Retrieve it and convert it back to the object with same state. In Java we use JAXB(Java architecture for XML binding) library.(From java 6 it comes bundled with JDK).
JSON: Same can be done by converting the Object to JSON (JavaScript Object notation). Again there is GSON library that can be used for this.
Or we can use the Serialization that is provided by the OOP language itself. For example, in Java you can serialize an Object my making it implement Serializable interface and writing to Object Stream.
182
Why are serialization and deserialization useful?
Transfer of data over a network
183
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringfy()
184
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
185
How to you store data in localStorage?
localStorage.setIte('keyName', 'keyValue');
186
How to you retrieve data from localStorage?
localStorage.getItem('keyName');
187
What data type can localStorage save in the browser?
String. The keys and the values stored with localStorage are always in the UTF-16 DOMString format.
188
When does the 'beforeunload' event fire on the window object?
When the window is about to be unloaded.
189
What is a method?
A method is a function which is a property of an object.
190
How can you tell the difference between a method definition and a method call?
Using var, const, let
191
Describe method definition syntax (structure).
```
var objectName = {
methodName: function(parameter) {
function block
}
};
```
192
Describe method call syntax (structure).
objectName.methodName(argument);
193
How is a method different from any other function?
It only works on specific object(s).
194
What is the defining characteristic of Object-Oriented Programming?
Objects can contain both data (as properties) and behavior (as methods).
195
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
196
What is "abstraction"?
Reducing a complex idea/function to a simplified interaction mechanism.
197
What does API stand for?
Application Programming Interface. It is a type of software interface, offering a service to other pieces of software.
198
What is the purpose of an API?
The purpose of every software API is to give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction.
199
What is this in JavaScript?
this is an implicit parameter of all JavaScript functions.
200
What does it mean to say that this is an "implicit parameter"?
Parameters are not explicitly spelled out in a function definition's parameter list.
201
When is the value of this determined in a function; call time or definition time?
The value of this is determined at the call time of the function.
202
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);
}
};
```
Nothing.
It doesn't have a value yet, because the greet method's function () has not been called.
When it is called, this will refer to the the object character.
203
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
The result will be a console log of the message of the concatenated string 'It's-a-me, Mario!'
Reason: It is calling a function.
204
```
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
```
Undefined.
Reason: When greet method's function is not called, here this refers to the window when the function hello is called. Window does not have firstName property.
205
How can you tell what the value of this will be for a particular function or method definition?
By looking at what kind of object comes before it within the definition code block.
This is only a value when a function is being invoked. When a function is being invoked, this refers to the object to the left of the dot.
206
How can you tell what the value of this is for a particular function or method call?
By looking at what kind of object comes before it within the definition code block.
This is only a value when a function is being invoked. When a function is being invoked, this refers to the object to the left of the dot.
207
What kind of inheritance does the JavaScript programming language use?
Prototype-based (or Prototypal) Inheritance, which means that JavaScript objects give certain behaviors (methods) or data (properties) to other objects.
208
What is a prototype in JavaScript?
An object that contains properties and (predominantly) methods that can be used by other objects.
209
How is it possible to call methods on strings, arrays, and numbers even though those methods don't actually exist on objects, arrays, and numbers?
By defining a prototype, then:
Object.setPrototypeOf(object, prototypeObject);
210
If an object does not have its own property or method by a given key, where does JavaScript look for it?
Its prototype object.
211
What does the new operator do?
It creates an instance of a constructor.
Steps:
1. Creates an empty object
2. Adds a property to the new object (__proto__) that links to the constructor function's prototype object
3. Binds the newly created object instance as the this context
4. Function runs, then Returns this if the function doesn't return an object.
212
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
213
What does the instance of operator do?
Returns a boolean value of whether the variable represents an instance of the constructor
214
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.
215
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?
setTimeout();
216
How can you set up a function to be called repeatedly without using a loop?
setInterval();
217
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
Zero.
218
What do setTimeout() and setInterval() return?
Return of setTimeout():
The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval() to cancel the interval.
Return of setInterval():
undefined;
219
What is a client?
Service requesters
220
What is a server?
Service providers (always listening)
221
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
222
What three things are on the start-line of an HTTP request message?
Method
Target
HTTP Version
223
What three things are on the start-line of an HTTP response message?
Protocal Version
Status Code
Status Text
224
What are HTTP headers?
Additional meta data;
| Easily accessible for user
225
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
226
Is a body required for a valid HTTP request or response message?
No
227
What is AJAX?
a programming practice of building complex, dynamic webpages using a technology known as XMLHttpRequest.
228
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML,
229
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest() object;
230
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
231
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
232
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They share the same prototype: eventTarget();
233
What is a code block? What are some examples of a code block?
Whatever sits inside a curly brace pair {}
function body,
loop code blocks,
conditional code blocks
234
What does block scope mean?
Existing only within the code block in between curly braces.
235
What is the scope of a variable declared with const or let?
block scope
236
What is the difference between let and const?
let: variable's value can be re-assigned.
const: variable's value cannot be re-assigned.
237
Why is it possible to .push() a new value into a const variable that points to an Array?
Because .push() changes the array, but it doesn't re-assign name-binding. We're not assigning a new value to the variable.
238
How should you decide on which type of declaration to use?
Stick with const until you can't.
239
What is the syntax for writing a template literal?
backticks ``
| for value of variables: ${}
240
What is "string interpolation"?
The substitutions allow you to embed variables and expressions in a string. The JavaScript engine will automatically replace these variables and expressions with their values. This feature is known as string interpolation.
241
What is destructuring, conceptually?
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
242
What is the syntax for Object destructuring?
const {property: variable, ... } = object
243
What is the syntax for Array destructuring?
const [array[0]: variable, ... ] = array
244
How can you tell the difference between destructuring and creating Object/Array literals?
{} or []
245
When an arrow function's body is left without curly braces, what changes in its functionality?
Must be an expression.
| It returns the expression.
246
How is the value of this determined within an arrow function?
Inherits this value from its parent (closest ancestor) code block.
247
Use for command: cat
```
ls
pwd
echo
touch
mkdir
mv
rm
cp
```
print or combine contents of a file
248
Use for command: ls
list
249
Use for command: man
show manual
250
Use for command: pwd
print working directory
251
Use for command: echo
Similar to console.log
252
Use for command: touch
Create a file / Time stamper?
253
Use for command: mkdir
Make directory
254
Use for command: mv
Rename a directory
| When you're moving something, you're also renaming it
255
Use for command: rm
Remove a file/directory
256
Use for command: cp
Copy a file/directory
257
What are the three virtues of a great programmer?
laziness,
impatience,
hubris
258
What is Node.js?
As an asynchronous event-driven JavaScript runtime
259
What can Node.js be used for?
build scalable network applications.
260
What is a REPL?
A read–eval–print loop (REPL), also termed an interactive toplevel or language shell, is a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user; a program written in a REPL environment is executed piecewise.
261
When was Node.js created?
May 27, 2009
262
What back end languages have you heard of?
```
PHP,
Ruby,
Python,
JavaScript,
Perl,
TypeScript,
Elixir,
Lisp,
Clojure,
SQL,
Java,
Kotlin,
Scala,
Haskell,
Go,
C,
C++,
VBA,
C#,
F#,
Fortran,
Pascal,
Julia,
Rust,
Objective-C,
Swift
```
263
What is a computer process?
In computing, a process is the instance of a computer program that is being executed by one or many threads. It contains the program code and its activity.
264
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
Hundreds
265
Why should a full stack Web developer know that computer processes exist?
Because full stack web development involves multiples processes
266
What is the process object in a Node.js program?
The process object is a global that provides information about, and control over, the current Node.js process.
267
How do you access the process object in a Node.js program?
by using the argument process.
268
What is the data type of process.argv in Node.js?
Array of strings
269
What is a JavaScript module?
Modules are small units of independent, reusable code that is desired to be used as the building blocks in creating a non-trivial Javascript application. Modules let the developer define private and public members separately, making it one of the more desired design patterns in JavaScript paradigm.
--
In JavaScript, modules are files.
270
What values are passed into a Node.js module's local scope?
filename, dirname, module, export, require
271
Give two examples of truly global variables in a Node.js program.
process
272
What is the purpose of module.exports in a Node.js module?
To export functionality of a Node.js module into another Node.js module.
273
How do you import functionality into a Node.js module from another Node.js module?
```
In new module do: const add = require('./add') (relative file path)
after doing: module.property = function. in original module.
```
274
What is the JavaScript Event Loop?
The call stack is a LIFO queue (Last In, First Out). The event loop continuously checks the call stack to see if there's any function that needs to run.
275
What is different between "blocking" and "non-blocking" with respect to how code is executed?
A blocking assignment takes affect immediately it is processed. A nonblocking assignment takes place at the end of processing the current "time delta".
Blocking is in call stack.
276
What is a directory?
A reference to the location of files or other directories
277
What is a relative file path?
A relative path refers to a location that is relative to a current directory.
278
What is an absolute file path?
An absolute path always contains the root element and the complete directory list required to locate the file.
279
What module does Node.js include for manipulating the file system?
fs module
280
What method is available in the Node.js fs module for writing data to a file?
fs.writeFile
281
Are file operations using the fs module synchronous or asynchronous?
both synchronous and asynchronous
Sync = blocking
Asynchronous is almost always better
282
What is a package?
a directory with one or more files in it that also has a file called package.json with some metadata about this package
283
How do you add express to your package dependencies?
npm install
284
What Express application method starts the server and binds it to a network PORT?
app.listen()
285
Difference between internet vs. web?
```
Internet = Global network of computers
Web = messaging format called HTTP
```
286
How do you mount a middleware with an Express application?
app.use() method
287
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req, res objects
288
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json
289
What does the express.json() middleware do and when would you need it?
It parses incoming requests with JSON payloads/data.
290
What is the significance of an HTTP request's method?
To get a desired action from a request
291
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a powerful, free, open source Relational Database Management System (RDBMS). It is often cited as the most advanced open source database of its kind and is well-liked by the developer community for its robust feature set, standards compliance, and reliability.
Other relational databases include MySQL (also free), SQL Server by Microsoft, and Oracle by Oracle Corporation.
292
What are some advantages of learning a relational database?
A quality of many relational databases is that they support good guarantees about data integrity. They can store and modify data in a way that makes data corruption as unlikely as possible. This means that developers can set up their database to reject "bad" data and not worry about data being "half written". For more information, read about ACID.
293
What is one way to see if PostgreSQL is running?
top
294
What is a database schema?
A collection of tables is called a schema. A schema defines how the data in a relational database should be organized.
295
What is a table?
A table is a list of rows, showing relations of data
296
What is a row?
Each row has the same set of attributes.
297
What is SQL and how is it different from languages like JavaScript?
Language that allows for interacting with relational databases. A way of retrieving, creating, and manipulating data in relational databases.
It is declarative instead of imperative, meaning it comes up with a way to process requested function.
298
How do you retrieve specific columns from a database table?
select "columnName"
299
How do you filter rows based on some specific criteria?
where "columnName" = condition true/false
300
What are the benefits of formatting your SQL?
Readability
301
What are four comparison operators that can be used in a where clause?
=, !=, >, =, <=,
| anything true or false
302
How do you limit the number of rows returned in a result set?
limit #
303
How do you retrieve all columns from a database table?
select *
304
How do you control the sort order of a result set?
order by "columnName"
305
How do you add a row to a SQL table?
insert into "tableName" ("columnName")
| values ("columnValue");
306
What is a tuple?
a list of values inside parenthesis
307
How do you add multiple rows to a SQL table at once?
multiple tupules, comma separated.
308
How do you get back the row being inserted into a table without a separate select statement?
returning *;
or
returning "columnName"
309
How do you update rows in a database table?
update "tableName"
set "columnName" = 'columnValue'
where "columnName" = 'columnValue';
310
Why is it important to include a where clause in your update statements?
Otherwise, you are updating all rows.
311
How do you delete rows from a database table?
delete from "tableName"
| where "columnName" = 'columnValue';
312
How do you accidentally delete all rows from a table?
By omitting where clause
313
What is a foreign key?
a shared key value that links different tables together
314
How do you join two SQL tables?
join "tableName" using ("columnName")
315
How do you temporarily rename columns or tables in a SQL statement?
as "pseudonym"
316
What are some examples of aggregate functions?
```
count()
sum()
min()
max()
avg()
every()
```
317
What is the purpose of a group by clause?
Combining data by groups/categories and perform aggregate function across the groups instead of generating just one result and combining all data
318
What are the three states a Promise can be in?
pending, fulfilled, rejected
319
How do you handle the fulfillment of a Promise?
then method
320
How do you handle the rejection of a Promise?
catch method
321
What is "syntactic sugar"?
Syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express.
322
What is the typeof an ES6 class?
function
323
Describe ES6 class syntax.
```
class Person {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
```
let john = new Person("John Doe");
324
What is "refactoring"?
Restructuring codes without changing functionality
325
tick(), getTime(), reset() -> Are they commands or queries?
tick() is a command, and getTime() is a query.
A command changes values while a query doesn't.
When coding, trying to use queries when possible. Use commands only when necessary and separate them from queries.
326
How are ES Modules different from CommonJS modules?
```
CommonJS require() and module.exports statements, whereas
ES6 modules use import and export default statements.
```
CommonJS module is executed at require command.
ES6 modules is not executed at import command but generates a reference to the loaded module.
ES6 is official.
--------
1. CommonJs exports a copy of variables, and ES6 Module exports the binding of variables.
2. CommonJs exports a single value export, and ES6 Module can export multiple values.
3. CommonJs is a dynamic syntax (runtime) that can be written in judgment, while ES6 Module static syntax (compile time) can only be written in the top level
327
What kind of modules can Webpack support?
ECMAScript modules. CommonJS modules. AMD modules.
328
What is React?
React is a JavaScript library for creating user interfaces.
The react package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.
329
What is a React element?
object
330
How do you mount a React element to the DOM?
ReactDOM.render( )
331
What is JSX?
syntax extension
332
Why must the React object be imported when authoring JSX in a module?
So that the compiled elements can call its React.crateElemenet method
333
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
install webpack and babel as devDependencies and do npm run build for webpack
334
How do you define a function component in React?
```
function functionName {
return (
reactElement
)
}
```
Function component MUST BE capitalized.
335
How do you mount a component to the DOM?
ReactDOM.render(
,
div
);
336
What are props in React?
attributes to React elements
337
How do you pass props to a component?
338
How do you write JavaScript expressions in JSX?
curly braces {}
339
How do you create "class" component in React?
```
class Welcome extends React.Component {
render() {
return
Hello, {this.props.name}
; } } ```
340
How do you access props in a class component?
this.props.text
| Must use this
341
What is the purpose of state in React?
State is a plain JavaScript object used by React to represent an information about the component's current situation.
Just like data model.
342
How to you pass an event handler to a React element?
As a prop to a React element
343
What are controlled components?
A controlled component is a component that renders form elements and controls them by keeping the form data in the component's state. In a controlled component, the form element's data is handled by the React component (not DOM) and kept in the component's state.
344
What two props must you pass to an input for it to be "controlled"?
value
| onChange
