Study Cards Flashcards

1
Q

Where do you put non-visible content about the HTML document?

A

In the head element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Where do you put visible content about the HTML document?

A

In the body element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Where do the head and body tags go in a valid HTML document?

A

In the html element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the purpose of a !DOCTYPE declaration?

A

To instruct the web browser what document type to expect.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is the purpose of HTML attributes?

A

To provide additional information about the contents of an element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

How do block-level elements affect the document flow?

A

Always appear on a new line, and take up the entire horizontal space of their parent element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How do inline elements affect the document flow?

A

Continue on the same line as neighboring elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are the default width and height of a block-level element?

A

Width: Entire horizontal space of its parent element.
Height: Height of its contents.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are the default width and height of an inline element?

A

The width and height of its contents.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the difference between an ordered list and an unordered list in HTML?

A

Ordered list items are numbered, unordered list items are not.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Is an HTML list a block element or an inline element?

A

Block.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What HTML tag is used to link to another website?

A

a tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is an absolute URL?

A

The full web address.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is a relative URL?

A

A shorthand link address for a page within the same site.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How do you indicate the relative link to a parent directory?

A

../

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How do you indicate the relative link to a child directory?

A

The name of the directory.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

How do you indicate the relative link to a grand parent directory?

A

../../

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How do you indicate the link to the same directory?

A

Simply use the name of the target file.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the purpose of an HTML form element?

A

To allow users to submit data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Give five examples of form control elements.

A

buttons, checkboxes, radio buttons, text input, select lists

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Give three examples of type attributes for HTML < input > elements.

A

text, email, password, radio, checkbox, submit

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Is an HTML < input > element a block or inline element?

A

inline

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What are the six primary HTML elements for creating tables?

A

< table >, < thead >, < tbody >, < tr >, < th >, < td >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What purpose do the thead and tbody elements serve?

A

Differentiate between the headers and the general table data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Give two examples of data that would lend itself well to being displayed in a table.

A

Stocks, sports statistics, etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What are the names of the individual pieces of a CSS rule?

A

Selector, curly braces which define the declaration block, and property/value pairs.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

In CSS, how do you select elements by their class attribute?

A

With a .classname

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

In CSS, how do you select elements by their type?

A

The name of the element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

In CSS, how do you select an element by its id attribute?

A

With a #idname

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Name three different types of values you can use to specify colors in CSS.

A

Color names, RGB values, HEX codes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

What CSS properties make up the box model?

A

Content, padding, border, and margin.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Which CSS property pushes boxes away from each other?

A

Margin

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

Which CSS property adds space between a box’s content and its border?

A

Padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

What is a pseudo-class?

A

A keyword added to a selector that specifies a special state of the selected element(s), like :hover or :visited

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

What are pseudo-classes useful for?

A

Allow you to apply style not just to the content, but in relation to the status of content items, like :hover, :visited, :checked etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

What CSS property controls the font used for the text inside an element?

A

font-family

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

What is the default flex-direction of a flex container?

A

row

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

What is the default flex-wrap of a flex container?

A

no-wrap

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

Why do two div elements “vertically stack” on one another by default?

A

They are block level elements by default

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

What is the default flex-direction of an element with display: flex?

A

row

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

What is the default value for the position property of HTML elements?

A

static

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

How does setting position: relative on an element affect document flow?

A

It doesn’t

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

How does setting position: relative on an element affect where it appears on the page?

A

It doesn’t

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

How does setting position: absolute on an element affect document flow?

A

It removes the element from the document flow.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

How does setting position: absolute on an element affect where it appears on the page?

A

The element will be positioned relative to its first non-static parent element (usually with a position: relative)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

What is the main purpose of using position: absolute?

A

Layering elements on top of other elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

How do you constrain an absolutely positioned element to a containing block?

A

Give a parent element a position: relative

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

What are the four box offset properties?

A

top, bottom, left, right

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

What is the purpose of variables?

A

To store data for later use.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

How do you declare a variable?

A

const or let variableName = value;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

How do you initialize (assign a value to) a variable?

A

with const or let keyword variableName = value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

What characters are allowed in variable names?

A

Letter, number, underscore. The first character CANNOT be a number.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

What does it mean to say that variable names are “case sensitive”?

A

References to a variable must be made using the identical case/capitalization as the variable declaration.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

What is the purpose of a string?

A

To hold data that can be represented in text form.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

What is the purpose of a number?

A

To save a number to be used in mathematical calculation.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

What is the purpose of a boolean?

A

Useful when the data can only have two possible values, true or false.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q

What does the = operator mean in JavaScript?

A

assignment

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
58
Q

How do you update the value of a variable?

A

variableName = newValue; (var keyword only to be used during initial variable creation)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
59
Q

What is the difference between null and undefined?

A

null is an empty value, undefined means no value has been assigned

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

Why is it a good habit to include “labels” when you log values to the browser console?

A

Clarifies what data is being logged to the console.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
61
Q

Give five examples of JavaScript primitives

A

string, number, boolean, null, undefined

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
62
Q

What data type is returned by an arithmetic operation?

A

number

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
63
Q

What is string concatenation?

A

appending one string to the end of another string

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
64
Q

What purpose(s) does the + plus operator serve in JavaScript?

A

addition operator and concatenation operator

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
65
Q

What data type is returned by comparing two values (greater than/less than operator, ===, etc)?

A

Boolean

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
66
Q

What does the += “plus-equals” operator do?

A

Adds the provided value to a variable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
67
Q

What are objects used for?

A

Holding data in the form of multiple properties split into key-value pairs.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
68
Q

What are object properties?

A

Data held within objects in the form of key-value pairs

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
69
Q

Describe object literal notation.

A

A set of curly braces with key-value pairs contained within

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
70
Q

How do you remove a property from an object?

A

with the delete operator (delete objectName.propertyName)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
71
Q

What are two ways to get or update the value of a property?

A

Dot notation (objectName.propertyName) (preferred) and bracket notation (objectName[“propertyName”])

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
72
Q

What are arrays used for?

A

Holding lists of related data in an ordered format.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
73
Q

Describe array literal notation.

A

A set of brackets with values separated by commas.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
74
Q

How are arrays different from “plain” objects?

A

They are ordered, and contain values at numbered indexes rather than key-value pairs

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
75
Q

What number represents the first index of an array?

A

0

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
76
Q

What is the length property of an array?

A

Determines the number of values contained in the array

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
77
Q

How do you calculate the last index of an array?

A

array.length - 1

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
78
Q

What is a function in JavaScript?

A

A set of “instructions”, whose code can be saved and called for later use

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
79
Q

Describe the parts of a function definition.

A

The function keyword, the function name (optional), parameters in parentheses (optional), and the code block contained by curly braces. Often a return statement is included in the code block.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
80
Q

Describe the parts of a function call.

A

The name of the function and parentheses, as well as any arguments in the parentheses if necessary

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
81
Q

When comparing them side-by-side, what are the differences between a function call and a function definition?

A

Function definition includes function keyword and code block, which are not used in function call

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
82
Q

What is the difference between a parameter and an argument?

A

Parameter is a placeholder used in a function definition, argument is the actual data passed to the function in a function call.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
83
Q

Why are function parameters useful?

A

Allows us to pass different data to functions, to use the same function to perform different tasks.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
84
Q

What two effects does a return statement have on the behavior of the function?

A

The function will produce a value, and prevents any more code in the function’s code block from being run.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
85
Q

Why do we log things to the console?

A

To check our work during the development phase

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
86
Q

What is a method?

A

A function which is a property of an object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
87
Q

How is a method different from any other function?

A

A method is a function which is a property of an object, rather than just a free-floating function

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
88
Q

How do you remove the last element from an array?

A

the .pop() method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
89
Q

How do you round a number down to the nearest integer?

A

the Math.floor() method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
90
Q

How do you generate a random number?

A

the Math.random() method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
91
Q

How do you delete an element from an array?

A

.unshift() will remove an element from the beginning of an array;
.pop() will remove an element from the end of an array;
.splice() can remove an element from a specified index of an array

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
92
Q

How do you append an element to an array?

A

.shift() will add an element to the beginning of an array;
.push() will add an element to the end of an array;
.splice() can add an element to a specified index of an array

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
93
Q

How do you break a string up into an array?

A

the .split() method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
94
Q

Is the return value of a function or method useful in every situation?

A

No, sometimes the return value is not needed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
95
Q

What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?

A

MDN

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
96
Q

Give 6 examples of comparison operators?

A

Equal, strictly equal, not equal, strictly not equal, less than, greater than, less than or equal to, greater than or equal to

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
97
Q

What data type do comparison expressions evaluate to?

A

Boolean

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
98
Q

What is the purpose of an if statement?

A

To determine whether or not to run code based on a condition

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
99
Q

Is else required in order to use an if statement?

A

No

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
100
Q

Describe the syntax of an if statement

A

if (condition) {

}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
101
Q

What are three logical operators?

A

and (&&), or (||), and not (!)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
102
Q

What is the purpose of a loop?

A

To require code to be repeated

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
103
Q

What is the purpose of a condition expression in a loop?

A

Determine whether or not the code should be run again

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
104
Q

What does “iteration” mean in the context of loops?

A

Each time the loop is run, ie every time the condition is tested, the code is run, and the final expression is executed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
105
Q

When does the condition expression of a while loop get evaluated?

A

Every iteration before the code block is run

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
106
Q

When does the initialization expression for a for loop get evaluated?

A

At the beginning of the for loop, the first time the loop is run

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
107
Q

When does the condition expression for a for loop get evaluated?

A

After the initialization, and on every iteration before the code block is run

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
108
Q

When does the final expression of a for loop get evaluated?

A

Every iteration after the code block is run, and before the condition is evaluated

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
109
Q

Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?

A

break

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
110
Q

What does the ++ increment operator do?

A

Increases the value of the variable by 1

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
111
Q

How do you iterate through the keys of an object?

A

for…in loop

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
112
Q

What are the 4 components of the CSS cascade?

A

source order, inheritance, specificity, and !important

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
113
Q

What does the term “source order” mean with respect to CSS?

A

The styling provided for an element LAST in the stylesheet is the styling that will be applied

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
114
Q

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

A

Inheritance

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
115
Q

List the three selector types in order of increasing specificity

A

element, class, id

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
116
Q

Why is using !important considered bad practice?

A

It overrides other declarations and breaks the natural cascading of stylesheets

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
117
Q

Why do we log things to the console?

A

To show data of what our code is doing for use in the development phase.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
118
Q

Which “document” is being referred to in the phrase Document Object Model?

A

The actual html page that is being modeled in JavaScript

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
119
Q

What is the word “object” referring to in the phrase Document Object Model?

A

A JavaScript object, which is being used to model the html document

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
120
Q

What is a DOM Tree?

A

The model of the web page with parent/child relationships, created by the DOM.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
121
Q

Give two examples of document methods that retrieve a SINGLE element from the DOM

A

.querySelector(), .getElementById()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
122
Q

Give one example of a document method that retrieves multiple elements from the DOM at once

A

.querySelectorAll()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
123
Q

Why might you want to assign the return value of a DOM query to a variable?

A

Makes it easier to access that DOM query later.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
124
Q

What console method allows you to inspect the properties of a DOM element object?

A

console.dir()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
125
Q

Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?

A

So the code before it will run, which will allow us to make changes to that code in the .js file referenced by our script tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
126
Q

What does document.querySelector() take as its argument and what does it return?

A

It takes a CSS selector as its argument, and returns the FIRST element that matches that description

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
127
Q

What does document.querySelectorAll() take as its argument and what does it return?

A

It takes a CSS selector as its argument, and returns ALL elements that match that description

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
128
Q

What is the purpose of events and event handling?

A

To allow JavaScript to make changes when a user interacts with the page

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
129
Q

What do [ ] square brackets mean in function and method syntax documentation?

A

Optional

130
Q

What method of element objects lets you set up a function to be called when a specific type of event occurs?

A

.addEventListener()

131
Q

What is a callback function?

A

A previously defined function that is used later in the code

132
Q

What object is passed into an event listener callback when the event fires?

A

The event

133
Q

What is the event.target?

A

The object on which the event is occuring

134
Q

What is the className property of element objects?

A

allows us to access or change the class of an element

135
Q

How do you update the CSS class attribute of an element using JavaScript?

A

.className property

136
Q

What is the textContent property of element objects?

A

allows us to access or change the text content of an element

137
Q

How do you update the text within an element using JavaScript?

A

.textContent property

138
Q

Is the event parameter of an event listener callback always useful?

A

No, sometimes it is not needed in the callback function

139
Q

What does the CSS transform property do?

A

Changes how an element is displayed visually (including translate(), scale(), rotate(), skew(), and matrix() )

140
Q

The transition property is shorthand for which four CSS properties?

A

transition-property, transition-duration, transition-timing-function, and transition-delay

141
Q

What event is fired when a user places their cursor in a form control?

A

focus

142
Q

What event is fired when a user’s cursor leaves a form control?

A

blur

143
Q

What is fired as a user changes the value of a form control?

A

input

144
Q

What event is fired when a user clicks the “submit” button within a form?

A

submit

145
Q

What does the event.preventDefault() method do?

A

Prevents the browser from refreshing

146
Q

What property of a form element object contains all of the form’s controls?

A

elements

147
Q

What property of a form control object gets and sets its value?

A

value

148
Q

What is one risk of writing a lot of code without checking to see if it works so far?

A

The more code you write without checking, the more code you will have to check through to see where the error is coming from.

149
Q

What is an advantage of having your console open when writing a JavaScript program?

A

You can check your code as you go

150
Q

Does the document.createElement() method insert a new element into the page?

A

No, it only creates the element in JavaScript, it needs to be inserted into the page with a method such as appendChild()

151
Q

How do you add an element as a child to another element?

A

appendChild() method

152
Q

What do you pass as the arguments to the element.setAttribute() method?

A

(‘attributename’, ‘value’)

153
Q

What steps do you need to take in order to insert a new element into the page?

A

Create the element with something like createElement(), insert with something like appendChild()

154
Q

What is the textContent property of an element object for?

A

getting and setting the text content of an element

155
Q

Name two way to set the class attribute of a DOM element

A

setAttribute() method and className property

156
Q

What are the advantages of defining a function to create something (like the work of creating a DOM tree)?

A

It is reusable and makes grouping/structure more clean and logical

157
Q

Give two examples of media features that you can query in a @media rule

A

width, height, resolution, orientation, aspect-ratio, many more…

158
Q

Which HTML meta tag is used in mobile-responsive web pages?

A
159
Q

Why is it possible to listen for events on one element that actually happen on its descendent elements?

A

Bubbling. By default events “bubble”, or propagate through the chain of their ancestor elements

160
Q

What DOM element property tells you what type of element it is?

A

event.target.tagName

161
Q

What does the element.closest() method take as its argument and what does it return?

A

It takes a selector as its argument and returns the closest ancestor element matching that criteria

162
Q

How can you remove an element from the DOM?

A

remove()

163
Q

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?

A

Target a parent containing element and utilize DOM event delegation

164
Q

What is the effect of setting an element to display: none?

A

It is completely removed from the page and document flow, as if it did not exist

165
Q

What does the element.matches() method take as an argument and what does it return?

A

It takes a selector as its argument and returns a boolean indicating whether or not it is a match

166
Q

How can you retrieve the value of an element’s attribute?

A

getAttribute()

167
Q

What is a breakpoint in responsive Web design?

A

The size at which a website’s style properties will change to adapt to the screen size

168
Q

What is the advantage of using a percentage width instead of a fixed width for a “column” class in a responsive layout?

A

The percentage is relative and will resize based on the size of the browser window

169
Q

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?

A

Because of the Source-Order of CSS

170
Q

What is JSON?

A

a text-based data format following JavaScript object syntax

171
Q

What are serialization and deserialization?

A

Converting data (objects, etc) into bytes (a string in the case of JSON) to be transmitted

172
Q

How do you serialize a data structure into a JSON string using JavaScript?

A

.stringify() method

173
Q

How do you deserialize a JSON string into a data structure using JavaScript?

A

.parse() method

174
Q

What method do you use to store data in localStorage?

A

.setItem()

175
Q

What method do you use to retrieve data in localStorage?

A

.getItem()

176
Q

What data type can localStorage save in the browser?

A

string

177
Q

When does the ‘beforeunload’ event fire on the window object?

A

When the page is refreshed, closed, or unloaded in some way

178
Q

What is a method?

A

A function that is a property of an object

179
Q

How can you tell the difference between a method definition and a method call?

A

A method call will include .methodname()

180
Q

What is the defining characteristic of Object-Oriented Programming (OOP)?

A

objects can contain both data (as properties) and behavior (as methods)

181
Q

What is abstraction?

A

being able to work with (possibly) complex things in simple ways

182
Q

What does API stand for?

A

application programming interface

183
Q

What is the purpose of an API?

A

defines interactions between multiple software intermediaries. A set of rules that allow programs to talk to each other

184
Q

What is ‘this’ in JavaScript?

A

An implicit parameter of an object

185
Q

What does it mean to say that this is an “implicit parameter”?

A

it is available in a function’s code block even though it was never included in the function’s parameter list or declared

186
Q

When is the value of this determined in a function; call time or definition time?

A

call time

187
Q

How can you tell what the value of this is for a particular function or method call?

A

The object to the left of the dot

188
Q

What kind of inheritance does the JavaScript programming language use?

A

Prototype-based inheritance

189
Q

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?

A

With prototypes

190
Q

If an object does not have it’s own property or method by a given key, where does JavaScript look for it?

A

In the prototype object

191
Q

What does the new operator do?

A

Create a new instance of the object type specified by the constructor function

192
Q

What property of JavaScript functions can store shared behavior for instances created with new?

A

prototype

193
Q

What does the instanceof operator do?

A

Determines whether the specified object is an instance of the specified constructor. Returns a boolean value.

194
Q

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?

A

setTimeout()

195
Q

How can you set up a function to be called repeatedly without using a loop?

A

setInterval()

196
Q

What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?

A

0 (execute immediately)

197
Q

What do setTimeout() and setInterval() return?

A

The timer ID (a positive integer). Can be passed to clearTimeout() to cancel the timer

198
Q

What is a code block? What are some examples?

A

The code contained within a set of curly braces in a function, if statement, loop

199
Q

What does block scope mean?

A

A block scope variable can only be accessed in the code block where it is declared

200
Q

What is the scope of a variable declared with const or let?

A

Block scope

201
Q

What is the difference between let and const?

A

let can be reassigned, const cannot

202
Q

Why is it possible to .push() a new value into a const variable that points to an array?

A

Because in a const variable, the value cannot be reassigned but if the value is an object or an array, it can be mutated

203
Q

How should you decide which type of variable declaration to use?

A

const unless a variable will need to be reassigned, then use let

204
Q

What is destructuring, conceptually?

A

Makes it possible to unpack values from arrays, or properties from objects, into distinct variables

205
Q

What is the syntax for object destructuring?

A

const { property1, property2 } = objectName

206
Q

What is the syntax for array destructuring?

A

const [ element1, element2 ] = arrayName

207
Q

How can you tell the difference between destructuring and creating object/array literals?

A

By identifying which side of the assignment operator the braces/brackets are on

208
Q

What is the syntax for writing a template literal?

A

Surround in backticks (``), javascript expressions contained in ${}

209
Q

What is string interpolation?

A

Replacing placeholders with values in a string literal

210
Q

What is the syntax for defining an arrow function?

A

(parameter1, parameter2) => { code block }

211
Q

When an arrow function’s body is left without curly braces, what changes in its functionality?

A

The function will automatically return the result of the expression to the right of the arrow

212
Q

How is the value of ‘this’ determined within an arrow function?

A

It derives the value of ‘this’ from the scope where it was created

213
Q

What is Node.js?

A

An asynchronous event-driven JS runtime, which allows JS to be run outside of a web browser

214
Q

What can Node.js be used for?

A

To build back ends for web apps, command-line programs, or develop other automation

215
Q

What is a REPL?

A

Read-eval-print loop

216
Q

What is a CLI?

A

Command line interface

217
Q

What is a GUI?

A

Graphical user interface

218
Q

What is a computer process?

A

An instance of a computer program that is being executed

219
Q

What is the process object in a Node.js program?

A

A global object the provides info and control over the current Node.js process

220
Q

How do you access the process object in a Node.js program?

A

It is a global object, so using “process”

221
Q

What is the data type of process.argv in Node.js

A

Array

222
Q

What is a JavaScript module?

A

A single JavaScript file

223
Q

What values are passed into a Node.js module’s global scope?

A

exports, module, require(), __dirname, __filename

224
Q

What is the purpose of module.exports in a Node.js module?

A

To access a module’s code from a different module

225
Q

How do you import functionality into a Node.js module from another Node.js module?

A

require()

226
Q

What is the javascript event loop?

A

Monitors the Call Stack and Callback Queue. When the Stack is empty, it will take the first event from the Queue and push it to the Stack

227
Q

What is different between blocking and non-blocking with respect to how code is executed?

A

Blocking is when the execution of additional code must wait until the operation completes

228
Q

What module does Node.js include for manipulating the file system?

A

fs

229
Q

What method is available in the Node.js fs module for writing data to a file?

A

writeFile()

230
Q

Are file operations using the fs module synchronous or asynchronous?

A

There are asynchronous and synchronous operations

231
Q

Which HTTP method does a browser issue to a web server when you visit a URL?

A

GET

232
Q

What is on the first line of an HTTP request message?

A

The request method (get, post, etc), target, and HTTP standard (HTTP/1.1)

233
Q

What is on the first line of an HTTP response message?

A

The HTTP standard (HTTP/1.1), status code, and status message

234
Q

What are HTTP headers?

A

Additional information passed with an HTTP request or response

235
Q

Is a body required for a valid HTTP message?

A

No

236
Q

What is npm?

A

A service comprised of a website, command line interface, and registry of code packages that can be utilized

237
Q

What is a package?

A

A directory containing code files, as well as a package.json file.

238
Q

How can you create a package.json with npm?

A

npm init –yes

239
Q

What is a dependency and how do you add one to a package?

A

A dependency is a package that is required to use another package. You can add one with npm install packagename

240
Q

What happens when you add a dependency to a package with npm?

A

The package and all the package’s dependencies are added to the node-modules directory, and the dependency is added to the dependencies object in package.json

241
Q

How do you add express to your package dependencies?

A

npm install express

242
Q

What Express application method starts the server and binds it to a network PORT?

A

.listen()

243
Q

How do you mount a middleware with an Express application?

A

.use()

244
Q

Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?

A

request and response objects

245
Q

What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?

A

application/json

246
Q

What is the significance of an HTTP request’s method?

A

It is purely semantic, all requests have the same functionality

247
Q

What does the express.json() middleware do?

A

Automatically parses incoming requests with JSON

248
Q

What is PostgreSQL and what are some alternatives?

A

A relational database. Other relational databases: MySQL, Oracle, Microsoft SQL Server…

249
Q

What are some advantages of learning a relational database?

A

Ideal for storing related data. Make data corruption as unlikely as possible.

250
Q

What is one way to see if PostgreSQL is running?

A

sudo service postgresql status

251
Q

What is a database schema?

A

A collection of tables. Defines how the data in a relational database should be organized

252
Q

What is a table in a relational database?

A

A list of rows, each having the same set of attributes

253
Q

What is a row in a relational database?

A

An instance of a record

254
Q

What is SQL and how is it different from languages like JavaScript?

A

Structured Query Language. Used for managing data in relational databases. Operates through simple, declarative statements.

255
Q

How do you retrieve specific columns from a database table?

A

select keyword with columns in double quotes

256
Q

How do you filter rows based on some specific criteria?

A

where keyword with comparison operators

257
Q

What are the benefits of formatting your SQL?

A

Consistency and readability

258
Q

What are four SQL comparison operators that can be used in a where clause?

A

=, , >+, <=, <> (not equal)

259
Q

How do you limit the number of rows returned in a database result set?

A

Limit keyword with number

260
Q

How do you retrieve all columns from a database table?

A

*

261
Q

How do you control the sort order of a result set?

A

order by “”

262
Q

How do you add a row to a SQL table?

A

insert into “tablename” (“columns” separated by commas)

values (‘correspondingvalues’ separated by commas)

263
Q

What is a tuple?

A

A list of values in SQL

264
Q

How do you add multiple rows to a SQL table at once?

A

Specify more than one tuple of values, separated by commas

265
Q

How do you get back the row being inserted into a table without a separate select statement?

A

returning *

266
Q

How do you update rows in a database table?

A

update “tablename”

set “columnname” = ‘value’

267
Q

Why is it important to include a where clause in your update statements?

A

So you don’t update EVERY row in the table

268
Q

How do you delete rows from a database table?

A

delete from “tablename”

where “columnname” = ‘value’

269
Q

How do you accidentally delete all rows from a table?

A

delete from “tablename”

without specifying a where statement

270
Q

What is a foreign key?

A

A table column that refers to values in another table

271
Q

How do you join two SQL tables?

A

After from statement, use:

join “tablename” using (“connectioncolumnname”)

272
Q

How do you temporarily rename columns or tables in a SQL statement?

A

select “columnname” as “aliasname”

273
Q

What are some examples of aggregate functions in SQL?

A

sum(), count(), avg(), max(), min(), every()

274
Q

What is the purpose of a group by clause in SQL?

A

Allows you to separate rows into groups and performs aggregate functions on these groups

275
Q

What are the three states a Promise can be in?

A

pending, fulfilled, rejected

276
Q

How do you handle the fulfillment of a Promise?

A

.then() method, with fulfillment handler function passed in

277
Q

How do you handle the rejection of a Promise?

A

.catch() method, with rejection handler function passed in

278
Q

What is Array.prototype.filter useful for?

A

Creating a new array with all elements that pass the test in the provided function

279
Q

What is Array.prototype.map useful for?

A

Creating a new array with the results of calling a provided function on every element in an array

280
Q

What is Array.prototype.reduce useful for?

A

Executes a function on each element of an array, returning a single output value

281
Q

What is “syntactic sugar”?

A

Functions the same, but looks better/cleaner

282
Q

What is the typeof an ES6 class?

A

Function

283
Q

Describe ES6 class syntax

A

class functionName {}

284
Q

What is “refactoring”?

A

Restructuring existing code without changing its external behavior, with the intention of improving it

285
Q

What is Webpack?

A

A tool to bundle JavaScript applications/modules

286
Q

How do you add a devDependency to a package?

A

npm install packagename –save-dev

287
Q

What is an npm script?

A

npm scripts can automate repetitive tasks. Located in package.json

288
Q

How do you execute Webpack with npm run?

A

Add “build”: “webpack” script in package.json, and use command npm run build

289
Q

What is React?

A

A component-based JavaScript library for building interactive user interfaces

290
Q

What is a React element?

A

An object created with React.createElement that describes what you will see on the screen.

291
Q

How do you mount a React element to the DOM?

A

ReactDOM.render(element, container[, callback])

292
Q

What is Babel?

A

A JavaScript compiler used to covert ES6 code into a backwards compatible version of JavaScript

293
Q

What is a Plug-in?

A

A software component that adds an additional feature to an existing program

294
Q

What is a webpack loader?

A

Transforms source code of a module before they are loaded

295
Q

How can you make babel and webpack work together?

A

With babel-loader

296
Q

What is JSX?

A

A syntax extension to JavaScript, used with React

297
Q

Why must the React object be imported when authoring JSX in a module?

A

When we are using JSX, it is implicitly using React methods.

298
Q

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

A

Use the babel loader and @babel/plugin-transform-react-jsx to convert the JSX to JavaScript when the files are combined into main.js by webpack

299
Q

What is a React component?

A

They are reusable bits of code that work in isolation and return HTML via a render function. Either a function or a class

300
Q

How do you define a function component in React?

A
function Name(props) {
  return 
}
301
Q

How do you mount a React component to the DOM?

A

With ReactDOM.render() method

302
Q

What are props in React?

A

Properties used for passing data to components

303
Q

How do you pass props to a component?

A

By passing the prop as a key value pair when creating a react element

304
Q

How do you write JavaScript expressions in JSX?

A

Inside curly braces

305
Q

How do you create class components in React?

A

class Name extends React.component {}

306
Q

How do you access props in a React class component?

A

this.props

307
Q

What is the purpose of state in React?

A

Is is data managed WITHIN a component, can be changed over time and used to make changes within the component

308
Q

How to you pass an event handler to a React element?

A

As a prop, prop name is the name of the event in camelCase

309
Q

What are controlled components in React?

A

A form element whose value is controlled by React

310
Q

What two props must you pass to an input for it to be “controlled”?

A

A value prop with corresponding state property as its value, and an onChange event with corresponding handler function as its value

311
Q

What Array method is commonly used to create a list of React elements?

A

map()

312
Q

What is the best value to use as a “key” prop when rendering lists?

A

An ID, or a string that uniquely identifies a list item among its siblings

313
Q

What does express.static() return?

A

A middleware function

314
Q

What is the local __dirname variable in a Node.js module?

A

The directory name of the current module, as a string

315
Q

What does the join() method of Node’s path module do?

A

Joins all given path segments together and normalizes the resulting path

316
Q

What does fetch() return?

A

A promise that resolves to a response object

317
Q

What is the default request method used by fetch()?

A

GET

318
Q

How do you specify the request method (GET, POST, etc.) when calling fetch?

A

Include an optional init object as the second argument, and specify the property method: ‘POST’

319
Q

When does React call a component’s componentDidMount method?

A

Immediately after a component is initially mounted

320
Q

Name three React.Component lifecycle methods.

A

componentDidMount, componentDidUpdate, componentWillUnmount

321
Q

How do you pass data to a child component in React?

A

As props