All Cards Flashcards
1
Q
Where do you put non-visible content about the HTML document?
A
In the head element
(Meta data e.g. Title are in the head element)
2
Q
Where do you put visible content about the HTML document?
A
In the body element
E.g. h1-h6, p, ul, ol, li elements
3
Q
Where do the head and body tags go in a valid HTML document?
A
In the html element (head element is above the body element)
4
Q
What is the purpose of a DOCTYPE declaration?
A
To tell the browser what type of document is being used
(specifically with HTML it was used for which version of HTML was being used)
5
Q
Give five examples of HTML element types.
A
head
body
h1 - h6
p
ul
ol
li
div
6
Q
What is the purpose of HTML attributes?
A
To provide additional information on the content of an element
E.g. Class, ID, src…
7
Q
Give an example of an HTML entity (escape character).
A
Less Than <
Greater Than >
Ampersand &
Cent ¢
Pound £
Yen ¥
Euro €
Copyright ©
Registered trademark ®
Trademark ™
Multiplication ×
Division ÷
8
Q
How do block-level elements affect the document flow?
A
Block level elements always start on a new line. They do not allow any other elements on the same line as them.
Example Block Elements:
ul
ol
li
h1-h6
p
div
9
Q
How do inline elements affect the document flow?
A
Inline elements will continue on the same line. They allow other elements to be on the same horizontal line.
Example Inline Elements:
button
span
strong
em
10
Q
What are the default width and height of a block-level element?
A
Width: width of its containing block
Height: height of content
11
Q
What are the default width and height of an inline element?
A
Width: width of content
Height: height of content
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
An ordered list numbers each line in ascending order and an unordered list shows each item next to a bullet point.
OL:
1.
2.
3.
-
-
13
Q
Is an HTML list a block element or an inline element?
A
Block element because it lists each item on its own line.
14
Q
What HTML tag is used to link to another website?
A
Anchor Tag (the a element)
a href=”link”
15
Q
What is an absolute URL?
A
An absolute URL is a link to a specific URL on the web (can be a completed different website [href is the full web address] )
E.g.
a href=”https://www.google.com”
16
Q
What is a relative URL?
A
A relative URL is a link to other pages within the same site (href does not need the domain name)
E.g.
a href=”index.html”
17
Q
“What is the internet?”
A
The internet is a global network of computers that are connected to each other. Every computer on the public Internet has an IP address
18
Q
“How does the web work?”
A
- Your browser needs to know what a domain name means. A DNS (domain name system) lookup is performed to translate the domain name into an IP address.
- The browser then opens a TCP connection to the computer at the IP address.
- The browser then sends an HTTP request to the computer at the IP address.
- The browser receives a response from the computer at that IP address (originally this was an HTML document).
19
Q
How do you indicate the relative link to a parent directory?
A
WIth ../
Example:
href=”../filename”
20
Q
How do you indicate the relative link to a child directory?
A
With the folder name / file name
Example:
href=”foldername/filename”
21
Q
How do you indicate the relative link to a grand parent directory?
A
You use a ,,/ for each directory you want to move up (grandparent is 2 directories above so 2 ../)
Example:
href=”../../filename”
22
Q
How do you indicate the relative link to the same directory?
A
You can just link the file name.
Example:
href=”filename”
23
Q
What is the purpose of an HTML form element?
A
The HTML form element houses the section of the HTML document that contains interactive controls for submitting information
24
Q
Give five examples of form control elements.
A
Button
Input - the input type is noted in the type attribute
Select - used to create a dropdown selection element
option - used to provide options for the dropdown selection element
textarea - used to provide a block to input larger amounts of text in
25
Give three examples of type attribute values for HTML input elements.
Radio - circular select button
Checkbox
text
password - text input that hides the text
submit
file
image
26
Is an HTML input element a block element or an inline element?
It is an inline block element. Even though it puts information on the same line, because the height and width can be adjusted it gives it properties of a block element.
27
What are the six primary HTML elements for creating tables?
Table
thead
tr
th
tbody
td
28
What purpose do the thead and tbody elements serve?
The thead element is used to define the row of elements at the top of the table (essentially column names) whereas the tbody element is used to define the content of the table.
29
Give two examples of data that would lend itself well to being displayed in a table.
Students & Grades, Items & Pricing, Schedules, Information checkboxes
30
What are the names of the individual pieces of a CSS rule?
Start of a new CSS rule set:
[selector] { start of declaration block
property : value ;
} end of declaration block
31
In CSS, how do you select elements by their class attribute?
To select an element by their class attribute you preface the class name with a .
32
In CSS, how do you select elements by their tag name?
To select an element by its tag name you just use the tag name as the selector
33
In CSS, how do you select an element by its id attribute?
To select an element by their id attribute you preface the id name with a #
34
Name three different types of values you can use to specify colors in CSS.
Color Name - e.g. White, Black, Blue
Hex Code - e.g. #ffffff
RGB Value - e.g. rgb(255 255 255);
35
What CSS properties make up the box model?
The content (length and width)
Padding (space between content and border)
Border
Margin (space between border and other boxes)
36
Which CSS property pushes boxes away from each other?
The margin property
37
Which CSS property add space between a box's content and its border?
The padding property
38
What is a pseudo-class?
A pseudo class is a keyword added to selector that specifies a special state of the selected element. Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors e.g. :hover (when element is hovered) :active (when the element is in use such as a click)
39
What are CSS pseudo-classes useful for?
CSS pseudo-classes are useful for providing feedback to the user (e.g. form elements [buttons active/inactive states] or hyperlinks [visited or not])
40
Name two types of units that can be used to adjust font-size in CSS.
Pixels (px), Ems (em), and percentages (%)
41
What CSS property controls the font used for the text inside an element?
Font-family property
42
What is the default flex-direction of a flex container?
The default flex-direction of a flex container is row
43
What is the default flex-wrap of a flex container?
The default flex-wrap of a flex container is no-wrap
44
Why do two div elements "vertically stack" on one another by default?
Divs are block elements which do not allow any other elements to be on the same line as them.
45
What is the default flex-direction of an element with display: flex?
The default flex-direction is row.
46
What is the default value for the position property of HTML elements?
The default value for position is static.
47
How does setting position: relative on an element affect document flow?
The document flow stays the same as the element still takes up the space it would normally occupy.
48
How does setting position: relative on an element affect where it appears on the page?
The element moves based on where it was supposed to be.
49
How does setting position: absolute on an element affect document flow?
Position absolute removes an element from normal document flow.
50
How does setting position: absolute on an element affect where it appears on the page?
The element will appear where it would normally but it may overlap or be overlapped by any elements that will go to occupy its space when it was removed from document flow.
51
How do you constrain an absolutely positioned element to a containing block?
You set the containing block to position relative.
52
What are the four box offset properties
Top, right, bottom, left
53
What is the purpose of variables?
Variables are used to store information for the computer to be able to reference back to. It brings permanence to data.
54
How do you declare a variable?
You declare a variable with the var keyword followed by the variable name. A variable can start with a letter, $, or _
var fullName
55
How do you initialize (assign a value to) a variable?
If a variable has not been declared yet, you use the variable keyword, the variable name, and then initialize the variable with the assignment operator =
var fullName = 'Brandon Moy';
56
What characters are allowed in variable names?
Lowercase letters, uppercase letters (camel case), numbers, $, and _
Variables cannot start with numbers
57
What does it mean to say that variable names are "case sensitive"?
It means that the capitalization must be consistent across the entire variable
var Score is different from var score
58
What is the purpose of a string?
A string it used to record a data type that lets us store any types of characters
e.g. ‘Hello World!’
59
What is the purpose of a number?
A data type number is recorded to recall a number value (can be used for calculations or incrementation)
var width = 10;
var height = 10;
60
What is the purpose of a boolean?
A boolean is used to define a value as true or false. It is used for decision making.
61
What does the = operator mean in JavaScript?
The = operator assigns the value on the right side to the variable on the left side
62
How do you update the value of a variable?
You can update a value of a variable by assigning it a new value further down the script
early: var fullName = 'Brandon';
later: fullName = 'Brandon Moy';
63
What is the difference between null and undefined?
Both are empty values but for different purposes. Null is a nonexistent or invalid object (cannot be used by JavaScript [can be used as a placeholder as null can ONLY be assigned]) whereas undefined is returned by JavaScript when there is no value assigned
Null - used by programmers to show empty
Undefined - JavaScript's way to show empty
64
Why is it a good habit to include "labels" when you log values to the browser console?
Labels print information on the values being logged to the console for more ease of readability
65
Give five examples of JavaScript primitives.
String, Numbers, Boolean, Null, Undefined
66
What data type is returned by an arithmetic operation?
A number data type is returned by an arithmetic operation. If a string is put through an arithmetic operation JavaScript will print back NaN (not a number)
67
What is string concatenation?
String concatenation is when two or more strings are combined together to create a new string.
‘Hello’ + ‘ ‘ + ‘World!’ will return as ‘Hello World!’
68
What purpose(s) does the + plus operator serve in JavaScript?
The + operator can be used as arithmetic operator or string concatenator
69
What data type is returned by comparing two values (<, >, ===, etc)?
When comparing two values a boolean is returned for the value of the comparison
70
What does the += "plus-equals" operator do?
The += operator adds the new value to the starting variable and then assigns this new combined value back to the variable.
71
What are objects used for?
Objects are used to store multiple pieces of information into location without affecting other data and multiple pieces of information into one location to call back to.
72
What are object properties?
Object properties are just variables assigned to one object
var objectName = {
property: propertyValue
};
73
Describe object literal notation.
You use the variable keyword, the variable name, and you assign a grouping of properties to it inside of { }. Each property is notated property: value and a comma is used to separate the properties.
var objectName = {
property: value,
property2: value
};
74
How do you remove a property from an object?
delete operator is used to remove a property
delete object.property;
75
What are the two ways to get or update the value of a property?
Dot notation - object.property = newValue;
Square bracket - object[‘property’] = newValue;
76
What are arrays used for?
Arrays are used for storing a list of data. e.g. List of students, colors, hotels, cars
77
Describe array literal notation.
Square bracket with value separated by a comma
78
How are arrays different from "plain" objects?
Objects will assign a value to a property for the key value pair while an array assigns the value to an index number for the key value pair. Arrays have set orders and length properties.
79
What number represents the first index of an array?
The number for the first index of an array is 0 since computers start counting from 0
80
What is the length property of an array?
The length property of an array is a count of how many values are stored in the array.
81
How do you calculate the last index of an array?
You can subtract 1 from the length of the array.
82
What is a function in JavaScript?
A list of steps that can be reused multiple times in the code.
83
Describe the parts of a function definition.
The function keyword, the (optional) name of the function, the parameter list separated by commas and surrounded by parenthesis, the open curly brace for the function block, code within the code block, probably a return
84
Describe the parts of a function call.
The function name, 0 or more arguments surrounded by parenthesis
85
When comparing them side-by-side, what are the differences between a function call and a function definition?
The definition has { } for code block, function keyword
86
What is the difference between a parameter and an argument?
Parameter - used in definition, placeholder for a future value
Argument - used in function call, actually value provided
87
Why are function parameters useful?
Parameters allow us to create variance. They allow us to create ONE function for MULTIPLE uses
88
What two effects does a return statement have on the behavior of a function?
1) It allows the results to be used outside of the function
2) It stops the function
89
Why do we log things to the console?
We log things to the console so that developers can check and see the output and the state of variables and functions. The console is the developers way of communicating with JavaScript
90
What is a method?
A method is a reference to a function that is used as a property of an object. E.g. Math.max() is the max method OF the math object
91
How is a method different from any other function?
A method is called as a property of the object it is pulling the information off of.
92
How do you remove the last element from an array?
You use the .pop() method of the array object to remove the last element
93
How do you round a number down to the nearest integer?
You can use the .floor() method of the array object to round down to the nearest integer
94
How do you generate a random number?
The .random() method of the max object will generate a random number between 0 and 1 which can then be multiplied by the length of the array you want to generate randomly from
95
How do you delete an element from an array?
The .splice(start, quantity) can delete elements from an array
96
How do you append an element to an array?
You use the .push() method to append an element to an array
97
How do you break a string up into an array?
Use the .split() method with the argument string value ‘ ‘ to separate the string at the argument locations
98
Do string methods change the original string? How would you check if you weren't sure
They do not change the original string. We can console.log() the original variable housing the string we change. Instead of changing the original string, string methods create a new string.
99
Roughly how many string methods are there according to the MDN Web docs?
50
100
Is the return value of a function or method useful in every situation?
It might not be useful in every situation so we as developers need to create situations where the functions or methods we create/use are useful
101
Roughly how many array methods are there according to the MDN Web docs?
A lot. . .
102
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
103
Give 6 examples of comparison operators.
>, <, >=, <=, ==, ===, !=. !==.
104
What data type do comparison expressions evaluate to?
Booleans
105
What is the purpose of an if statement?
If statements are used to create branching actions or decision making
106
Is else required in order to use an if statement?
Else is not required to use an if statement, but if the statement is false then the if statement will return undefined
107
Describe the syntax (structure) of an if statement.
If keyword, condition to check surrounded by parenthesis, curly brace to start code block for what to run if parameter is true, what to run if the parameter is true in the code block, closing curly brace
if (condition) {
statement
}
108
What are the three logical operators?
&& (and)
|| (or)
!(not)
109
How do you compare two different expressions in the same condition?
You can use || for or, or && for and between the two expressions but keep both of them within the same ( ) parameter
110
What is the purpose of a loop?
The purpose of a loop is to repeat an action
111
What is the purpose of a condition expression in a loop?
The condition expression in a loop allows JavaScript to know when the loop should be stopped
112
What does "iteration" mean in the context of loops?
An iteration is each time a loop is run. The first iteration would be the first time the loop is run and the last iteration is the final time a loop is run.
113
When does the condition expression of a while loop get evaluated?
The condition expression is evaluated before executing the statement in each iteration
114
When does the initialization expression of a for loop get evaluated?
The initialization expression of a for loop is evaluated once before the loop is begun
115
When does the condition expression of a for loop get evaluated?
The condition expression of a for loop gets evaluated before every iteration
116
When does the final expression of a for loop get evaluated?
The final expression of a for loops gets evaluated at the end of each iteration
117
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
The break keyword can exit a loop before the condition expression evaluates to false
118
What does the ++ increment operator do?
The ++ increment operator increases the value of the variable by 1
119
How do you iterate through the keys of an object?
You use a for … in loop and set a variable for the keys
120
What are the four components of "the Cascade".
Source Order, Specificity, Inheritance, !Importance
121
What does the term "source order" mean with respect to CSS?
Source Order is the order the code is listed in the css file. The most recently added code is what is applied (the code lower on the css file)
122
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance will apply a style of an element to its children if there is no additional CSS rule for the same style added to the child
123
List the three selector types in order of increasing specificity.
Type - Class - ID
124
Why is using !important considered bad practice?
!important reverses the cascade order for style sheets. It forces a styling to an element.
125
What does the transform property do?
It allows you to move elements along the x, y, and z axes. You can rotate, skew, angle… elements
126
Give four examples of CSS transform functions.
rotate - spins an image clockwise (negative value for counter clockwise)
translate - moves an image horizontally and vertically
scale - resizes an image on a 2D plane (can also flatten/stretch images)
skew - resizes/shapes an element on a diagonal plane
matrix -
127
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay
128
Why do we log things to the console?
We log things as a console both to make sure that the main.js file is interacting with the html file and so that we as developers can test and track values (debugging)
129
What is a "model"?
A recreation of something (generally not 1:1 recreation)
130
Which "document" is being referred to in the phrase Document Object Model?
The HTML document
131
What is the word "object" referring to in the phrase Document Object Model?
The JavaScript object data type
132
What is the DOM?
A JavaScript object that is modeling the contents of an HTML document that is loaded into the browser
133
What is a DOM Tree?
The DOM tree is a list of objects/nodes that branch off of the document node. It is made up of the different elements, attributes, and text nodes in an HTML document. It is an element plus all of its content and all of its configurations.
134
Give two examples of document methods that retrieve a single element from the DOM.
document.getElementbyID(‘id’);
document.querySelector(‘css selector’);
135
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll(‘css selector’);
document.getElementsByClassName(‘class’);
document.getElementsByTagName(‘tag name’);
136
Why might you want to assign the return value of a DOM query to a variable?
In case you need to re-use that value of a DOM query multiple times
137
What console method allows you to inspect the properties of a DOM element object?
console.dir( ); [ dir is short for directory]
138
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
Because we want to load the content of the HTML document first?
139
What does document.querySelector() take as its argument and what does it return?
document.querySelector( ); takes a css selector as it’s argument (in a string) and returns the first element that matches the selector
140
What does document.querySelectorAll() take as its argument and what does it return?
document.querySelectorAll( ); takes a css selector as it’s argument (in a string) and returns all elements with that css selector (Node List)
141
Why do we log things to the console?
We log things as a console both to make sure that the main.js file is interacting with the html file and so that we as developers can test and track values (debugging)
142
What is the purpose of events and event handling?
Events are a way to let us know when an event occurs (usually when a user interacts with the page) and event handling is our way of preparing a response when the event occurs
143
Are all possible parameters required to use a JavaScript method or function?
No, there are some parameters that are optional
144
What method of element objects lets you set up a function to be called when a specific type of event occurs?
Use addEventListener to the object you want to call the event on
145
What is a callback function?
A callback function is a function benign passed into another function as an argument
146
What object is passed into an event listener callback when the event fires?
The event object is passed and the data is all the information of when the event was invoked
147
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
The value of the element where the event occurred it is not the element that the event listener is applied on
We can check by console logging the target property of the event object
We can either check the code or MDN for more information
148
What is the difference between these two snippets of code?
element.addEventListener('click', handleClick)
element.addEventListener('click', handleClick())
The first one is a callback function and the second is a function call with no argument. Because of this it runs the function with nothing but the first one will run with the event as it’s argument
149
What is the className property of element objects?
A string of the class attribute of an element
It can get or set the className attribute on an HTML document
150
How do you update the CSS class attribute of an element using JavaScript?
You use the .className on the variable storing the DOM information and assign it a string value of the new class name
151
What is the textContent property of element objects?
The textContent property is the text content of a node on the DOM
Property that stores any text content that is present in the node
152
How do you update the text within an element using JavaScript?
Use the .textContent on the variable storing the DOM information and assign it the new text you want it to have
153
Is the event parameter of an event listener callback always useful?
No, in functions where you don’t want things to vary you do not need the event parameter
But in general we will want to use the event parameter in most cases
154
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
Harder because instead of referencing a variable with the number of clicks in it, we would have to calculate the number of clicks for each spot we want to check the value of the clicks
155
Why is storing information about a program in variables better than only storing it in the DOM?
If we store the information in a variable then the computer does not have to process getting the value multiple times and makes the work more efficient for the computer. For developers it also makes it easier to read by knowing that we are referencing back to an already stored value.
156
What event is fired when a user places their cursor in a form control?
The focus event
157
What event is fired when a user's cursor leaves a form control?
The blur event
158
What event is fired as a user changes the value of a form control?
The input event
159
What event is fired when a user clicks the "submit" button within a ?
The submit event
160
What does the event.preventDefault() method do?
It stops the form elements from returning to their default setting (either blank or placeholders)
161
What does submitting a form without event.preventDefault() do?
It refreshes the page
162
What property of a form element object contains all of the form's controls.
The elements property
163
What property of a form control object gets and sets its value?
The value property
164
What is one risk of writing a lot of code without checking to see if it works so far?
You run the risk of running into a bug and not knowing where in the code it happened
165
What is an advantage of having your console open when writing a JavaScript program?
You can check your progress and make sure everything is working the way you want it to
166
Does the document.createElement() method insert a new element into the page?
No it does not, it just creates the element. You need to appendChild to insert the element made into the document
167
How do you add an element as a child to another element?
With the appendChild method
168
What do you pass as the arguments to the element.setAttribute() method?
The attribute you want to set and the value you want to assign
169
What steps do you need to take in order to insert a new element into the page?
Create the element, append the element as the child of another element
170
What is the textContent property of an element object for?
It is used to receive or modify the text content of an element
171
Name two ways to set the class attribute of a DOM element.
element.className('new class name');
element.setAttribute('class', 'new class name');
172
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
The return of the reusable function can be used in other places (different contexts)
173
Give two examples of media features that you can query in an @media rule.
Width, min-width, height, orientation
174
Which HTML meta tag is used in mobile-responsive web pages?
The viewport meta tag
175
What is the event.target?
The event.target is the target element that the event happens on
176
Why is it possible to listen for events on one element that actually happen its descendent elements?
Because of event bubbling
177
What DOM element property tells you what type of element it is?
event.target.tagName
178
What does the element.closest() method take as its argument and what does it return?
It takes a css selector and returns the closest ancestor element (or itself) that matches the argument
179
How can you remove an element from the DOM?
‘Item you want to remove in a DOM variable’ . remove();
180
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?
Create a click on all the elements and set a conditional that if the tagName is === to the element you want to affect, then make the changes, otherwise do nothing
181
What is the event.target?
The event.target is the property of the event object that holds the location of where the event occurred
182
What is the affect of setting an element to display: none?
Display: none will hide all content inside of the element. The element is present but not showing any of its content
183
What does the element.matches() method take as an argument and what does it return?
Element.matches () takes a css selector in a string as its argument and returns a boolean
184
How can you retrieve the value of an element's attribute?
You can use the element.getAttribute(‘attribute’)
185
At what steps of the solution would it be helpful to log things to the console?
At every step ☺
186
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?
We would need to put an event listener on each tab instead of on the container with the tabs inside of it
187
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?
It would be written with a conditional for each tab we would need to check
188
What is a breakpoint in responsive Web design?
A breakpoint is a spot where the web page should change its styling. Often this is used for styling for different sized screens (mobile, tablet, or desktop)
189
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?
Using a % allows the content to scale with the size of the page
190
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?
Because of CSS cascade (source order) the “newest” ruleset (closest to the bottom) will be applied over previous rules
191
What is JSON?
JSON (JavaScript Object Notation) is a way to store the contents of an object in a string most commonly used to transmit data to a web page
192
What are serialization and deserialization?
Serialization is turning an object into date (stream of bytes)
Deserialization is turning that data (stream of bytes) back into the object
193
Why are serialization and deserialization useful?
It turns complex data into data that is understood everywhere
194
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify(‘object’)
195
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse(‘JSON string’);
196
How do you store data in localStorage?
Use the setItem method on the localStorage object
localStorage.setItem(‘key’, ‘key value’)
197
How do you retrieve data from localStorage?
Use the getItem method on the localStorage object
localStorage.getItem(‘key’)
198
What data type can localStorage save in the browser?
Strings
199
When does the 'beforeunload' event fire on the window object?
Right before the tab is about to unload (closing tab, closing window, refreshing tab. . . )
200
What is a method?
A method is a function that is a property of an object
201
How can you tell the difference between a method definition and a method call?
A method definition will have the function keyword and variable(s) for the parameter(s) whereas a method call will be called on an object with a . between the object and method and would have a variable for the argument (if an argument is needed)
Definition: methodName: function (parameter) {
}
Call: object.method(argument)
202
Describe method definition syntax (structure).
Method definition will have the property the method is stored in (method name), colon, function keyword, parameter(s) in parenthesis, open curly brace for the function code block, code for the function to run, closing curly brace for the function code block
property: function (parameter) {
}
203
Describe method call syntax (structure).
You use the object you want to call the method on, then a . followed by the method name and then the argument in parenthesis
object.method(argument)
204
How is a method different from any other function?
Methods are functions that are properties of an object whereas functions can also exist outside of an object. These functions are called differently than methods
Method call - object.methodName(argument)
Function call - functionName(argument)
205
What is the defining characteristic of Object-Oriented Programming?
Pairing data with behavior
206
What are the four "principles" of Object-Oriented Programming?
Abstraction
Encapsulation
Inheritance
Polymorphism
207
What is "abstraction"?
Abstraction is the idea of using something complex but being thought of in a simple way
E.g. Turning on the light - to us is flipping a switch, to electricity it is opening a circuit connected to a break to move electricity to the lightbulb
208
What does API stand for?
Application Programming Interface
209
What is the purpose of an API?
Its purpose is to give programmers a way to interact with a system in a simplified, consistent fashion (using abstraction)
210
What is this in JavaScript?
this is an implicit parameter that is checked/available at the time of a function call. It is used in methods when there is information in the same object that this wants to reference
211
What does it mean to say that this is an "implicit parameter"?
It means that this is available in a function even thought it was not declared or set as its own variable
212
When is the value of this determined in a function; call time or definition time?
The value of this is determined when a function is called
213
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);
}
};
this refers to nothing because nothing is being called and the value is determined at call time
214
var character = {
firstName: 'Mario',
greet: function () {
var message = 'It\'s-a-me, ' + this.firstName + '!';
console.log(message);
}
};
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
The result of character.greet(); should be ‘It’s-a-me, Mario!
It pulls the value of this (which is the character object) at the firstName property which is Mario
215
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
this would be undefined because this would be called on the window object which does not have a firstName property
216
How can you tell what the value of this will be for a particular function or method definition?
You cannot tell the value before it is called
217
How can you tell what the value of this is for a particular function or method call?
Look for the object named to the left of the method call and look inside of the object, otherwise it is the window
218
What kind of inheritance does the JavaScript programming language use?
Prototype-based inheritance (prototypal inheritance)
219
What is a prototype in JavaScript?
A JavaScript prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects.
220
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?
You can set an object as a prototype of another object allowing you to call the methods on those objects without them existing inside of the objects
There also prototypes already set on the objects (strings, arrays, and numbers)
Object.setPrototypeOf(object, prototype object);
221
If an object does not have its own property or method by a given key, where does JavaScript look for it?
Inside of its prototypes
222
What does the new operator do?
The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
Creates a blank object
Points the newInstance’s prototype ot the constructor function’s prototype property
Executes constructor function with given arguments and stores as this
95%+ constructor function will not have a return statement which means that the newInstance gets returned instead
223
What property of JavaScript functions can store shared behavior for instances created with new?
The [[Prototype]] property
224
What does the instanceof operator do?
The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.
The return is a boolean value
225
What is a "callback" function?
A callback function is a function that is passed as an argument to another function
226
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?
You can use the setTimeout() window method
227
How can you set up a function to be called repeatedly without using a loop?
By using the setInterval() window method
228
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
This causes JavaScript to run the function as quickly as it can
229
What do setTimeout() and setInterval() return?
They return a unique interval ID number that is needed to clear the recurring function
230
What is a client?
Service REQUESTERS are clients (users?) - something that is CONSUMING resources
231
What is a server?
Service PROVIDERS are servers
232
Which HTTP method does a browser issue to a web server when you visit a URL?
The GET method
233
What three things are on the start-line of an HTTP request message?
HTTP method (verb like GET, PUT, POST. . . or noun like HEAD or OPTION)
-How is the request being made?
Request Target - usually a URL or absolute path
-Where is the request going?
The HTTP version (defines structure of remaining message)
234
What three things are on the start-line of an HTTP response message?
The protocol version (usually HTTP/1.1)
The status code - indicates success or failure of request
The status text - brief, informational, textual description of the status code
235
What are HTTP headers?
Headers are where the client and server can pass additional information with an HTTP request or response.
-General Headers - apply to the message as a whole
-Request Headers - modify the request by specifying it further, giving context, or restricting it
-Representation Headers - describe the original format of the message data
236
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
237
Is a body required for a valid HTTP request or response message?
A body is not required
238
What is AJAX?
Asynchronous JavaScript and XML is a way for users to send and update responses without having to update the page. The user can continue to do other things in the browser while waiting for the data to load.
239
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
240
Which object is built into the browser for making HTTP requests in JavaScript?
The new XMLHttpRequest(); object
241
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
The load event
242
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They share a the same prototype
243
What is a code block? What are some examples of a code block?
- A code block is the code within curly brackets { } that should run
- Function code block, loop code block, condition code block
244
What does block scope mean?
- A variable when declared inside the if or switch conditions or inside for or while loops, are accessible within that particular condition or loop.
- Tl;dr - variables declared inside of code blocks are only accessible inside those code blocks
245
What is the scope of a variable declared with const or let?
Blocked-scope
246
What is the difference between let and const?
- let is a block scope variable that can be updated but the updated value is only accessible inside of code block
- const is a block scope constant variable and it’s value cannot be reassigned
247
Why is it possible to .push() a new value into a const variable that points to an Array?
For the same reason we can update object property values, we can update the object’s property values but we cannot update the entire object (in this case, array)
248
How should you decide on which type of declaration to use?
Can the value be updated and reused? - let
Should the value be constant? - const
249
What is the syntax for writing a template literal?
You would surround the template literal with backticks `
250
What is "string interpolation"?
String interpolation is the ability to substitute part of the string for the values of variables or expressions.
251
What is destructuring, conceptually?
Object destructing is taking an object, and then turning that object’s properties into variables
252
What is the syntax for Object destructuring?
const { object properties separated by a comma(use : and an alias to rename variables different from property name} = objectName
253
What is the syntax for Array destructuring?
const [array indices separated by a comma] = arrayName
254
How can you tell the difference between destructuring and creating Object/Array literals?
The location of the assignment operator
- An object destructured object will be the variable keyword, the object literal or properties being turned into variables, the assignment operator then the objects name
- A normal object would be the variable keyword, object name, assignment operator, then the object literal
255
What is the syntax for defining an arrow function?
Parameter (in parenthesis if more than one parameter or less than one parameter) => code to run
- If it is one expression you do not need a code block or a return statement
- But if a code block is used then a return statement is necessary
256
When an arrow function's body is left without curly braces, what changes in its functionality?
It automatically returns the result of the expression
257
How is the value of this determined within an arrow function?
It takes the value of the enclosing context to be the value of this
258
What is a CLI?
Command Line Interface
- An interface that receives commands from the user via text
259
What is a GUI?
Graphical User Interface
- An interface that receives commands from users via graphical icons and audio indicators
260
Give a use case for the following command:
man
Manual lists information on a command
261
Give a use case for the following command:
cat
Concatenates files
262
Give a use case for the following command:
ls
Lists directory contents
263
Give a use case for the following command:
pwd
Prints the name of the current/working directory
264
Give a use case for the following command:
echo
Displays a line of text . . . "echoes" the text input
265
Give a use case for the following command:
touch
Change files timestamps
266
Give a use case for the following command:
mkdir
Makes directories
267
Give a use case for the following command:
mv
Moves or renames files
268
Give a use case for the following command:
rm
Removes files
269
Give a use case for the following command:
cp
Copies files and/or directories
270
What are the three virtues of a great programmer?
1) Laziness:
The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful and document what you wrote so you don't have to answer so many questions about it.
2) Impatience:
The anger you feel when the computer is being lazy. This makes you write programs that don't just react to your needs, but actually anticipate them. Or at least pretend to.
3) Hubris:
The quality that makes you write (and maintain) programs that other people won't want to say bad things about.
271
What is Node.js?
Node.js is a program that allows JavaScript to be run outside of a browser
272
What can Node.js be used for?
It can be used to build backend Web applications, command-line programs, and automation
273
What is a REPL?
Read-eval-print loop
- a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the use
274
When was Node.js created?
2009
275
What is the process object in a Node.js program?
It is a global object that provides information about, and control over, the current process
276
How do you access the process object in a Node.js program?
- You can access it using the require(‘process’); function and assigning it to a variable or logging it to the console
- Because it is global you can just access it with the process name
277
What is the data type of process.argv in Node.js?
An array of strings
278
What is a JavaScript module?
A JavaScript module is a section of a program, a small section of a larger database. It is a JavaScript file in this context.
279
What values are passed into a Node.js module's local scope?
exports, require, module, __filename, __dirname
280
Give two examples of truly global variables in a Node.js program.
Console and process
281
What is the purpose of module.exports in a Node.js module?
To be able to use data in one module in another module
282
How do you import functionality into a Node.js module from another Node.js module?
You use require to import the functionality
283
What is the JavaScript Event Loop?
It is responsible for taking callbacks from the past view and then pushing them to the stack when the stack is clear
284
What is different between "blocking" and "non-blocking" with respect to how code is executed?
- Blocking code is currently running on the call stack
- Non-blocking code is an operation that is off of the call stack
285
What is a directory?
A special kind of file that lists other files
286
What is a relative file path?
The path to go from one directory to another file
287
What is an absolute file path?
The path to a file form the root directory
288
What module does Node.js include for manipulating the file system?
fs module
289
What method is available in the Node.js fs module for writing data to a file?
The writeFile method
290
Are file operations using the fs module synchronous or asynchronous?
Yes
- Base versions are asynchronous but Sync versions are synchronous
291
What is NPM?
NPM is a software registry where open source developers can borrow and share packages of code. There are three primary components:
- The Website
- The Registry
- The CLI
292
What is a package?
A package is a directory with at least one file and a package.json file
293
How can you create a package.json with npm?
With the npm init command
294
What is a dependency and how do you add one to a package?
- A dependency is third-party code that is required at runtime (generally a package)
- You can add a dependency with the npm install command
295
What happens when you add a dependency to a package with npm?
- It creates a module folder with the required package
- It updates the package.json file to require the dependencies
296
How do you add express to your package dependencies?
npm install express or just npm i express
297
What Express application method starts the server and binds it to a network PORT?
The listen() method
298
How do you mount a middleware to an Express application?
By using the use method or the HTTP request method as a method of the app object
299
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
Request object and response object
300
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json; charset=utf-8
301
What is the significance of an HTTP request's method?
- It tells the server what type of request a client is making
- It allows us as the programmer to determine what response to send the client
302
What does the express.json() middleware do and when would you need it?
- It parses the json body of incoming requests
- We would need to mount it to our server if we are expecting clients to send json to the server
303
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a relational database. It is cited as the most advanced open-source and free relational database available. MySQL, SQL Server by Microsoft, and Oracle are some alternative relational databases.
304
What are some advantages of learning a relational database?
Most developers work with relational databases a little bit and many other relational databases work off the same SQL language.
305
What is one way to see if PostgreSQL is running?
sudo service postgresql status
306
What is a database schema?
A collection of tables. It defines how the data in a relational database should be organized.
307
What is a table?
Data stored in ‘relations’
308
What is a row?
A row is collection of attributes or a single record in a table
309
What is SQL and how is it different from languages like JavaScript?
SQL is a declarative language like HTML and CSS whereas JavaScript is an imperative language. With SQL, we describe the results we want and the environment figures out how to provide us with the result
310
How do you retrieve specific columns from a database table?
You use select followed by the column names in double quotes (separated by a comma if multiple)
311
How do you filter rows based on some specific criteria?
You can use where “row” and an assignment operator like =, <, >, or != and the value. If the value is a string use single quotes
312
What are the benefits of formatting your SQL?
It is more consistent and easier to read/understand
313
What are four comparison operators that can be used in a where clause?
=, <, >. !=
314
How do you limit the number of rows returned in a result set?
Use the limit keyword and the maximum number of rows you want returned
315
How do you retrieve all columns from a database table?
You can use the universal selector (*) after the select keyword
e.g. select *
316
How do you control the sort order of a result set?
A result set returns in ascending order by default. If you want it to be returned in descending order you would use the order by keywords, the column name in double quotes, followed by the desc keyword
e.g. order by “price” desc
317
How do you add a row to a SQL table?
insert into
318
What is a tuple?
A list of values being added to a SQL table
319
How do you add multiple rows to a SQL table at once?
You separate each set of values with a ,
- Recommended to put on new lines for clarity
320
How do you get back the row being inserted into a table without a separate select statement?
Use a returning statement
321
How do you update rows in a database table?
With the update from keywords
322
Why is it important to include a where clause in your update statements?
If you do not then it will update all of the items in a table
323
How do you delete rows from a database table?
With the delete from keywords
324
How do you accidentally delete all rows from a table?
Similar to update from, if you do not specify where then you can run into the issue of deleting everything
325
What is a foreign key?
The shared data value between tables
326
How do you join two SQL tables?
You first select the items you want to use from each table
Select which table you want as the base with from
Then using the join keyword and using keyword followed by the foreign key in parenthesis (can also have more items separated by a comma))
327
How do you temporarily rename columns or tables in a SQL statement?
You can alias them using the as keyword
328
What are some examples of aggregate functions?
Max, min, sum, count
329
What is the purpose of a group by clause?
To separate groups by rows so that we can perform aggregate functions on them
330
What are the three states a Promise can be in?
Pending - initial state - neither fulfilled or rejected
Fulfilled - operation was completed successfully
Rejected - operation has failed
331
How do you handle the fulfillment of a Promise?
You can use the .then method on a promise to handle the fulfillment
332
How do you handle the rejection of a Promise?
You can use the .catch method on a promise to handle the rejection
333
What is Array.prototype.filter useful for?
It is useful for getting specific data out of arrays that you would want to use elsewhere
334
What is Array.prototype.map useful for?
Map is useful for apply changes to all items in an array
