C0521 Flashcards

1
Q

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

A

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

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

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 tell the browser which version of HTML

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

Give five examples of HTML element tags.

A

html, head, body, h1, p

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

What is the purpose of HTML attributes?

A

Attributes provide additional information about the Element

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

Give an example of an HTML entity (escape character).

A

© copyright

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

How do block-level elements affect the document flow?

A

Block-level elements start on a new line

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

How do inline elements affect the document flow?

A

They don’t interrupt the flow

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

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

A

100% Width, Auto Height

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

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

A

Auto Width, Auto Height

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

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

A

Ordered implies that that the content goes in an order. ie. 1, 2, 3, etc.
Unordered does not have a specific order and by default has bullet points.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
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
14
Q

What HTML tag is used to link to another website?

A

The anchor tag

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

What is an absolute URL?

A

Link to a specific page on the web (external source)

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

What is a relative URL?

A

Link to other pages on the same site (local files)

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 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 relative link to a child directory?

A

Name of the directory

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
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
20
Q

How do you indicate the relative link to the same directory?

A

Name of the file

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

What is the purpose of an HTML form element?

A

To collect information from visitors

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

Give five examples of form control elements.

A

input, textarea, select, label, button

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

Give three examples of type attributes for HTML input elements.

A

radio, submit, text

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

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

A

Inline

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
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
26
Q

What purpose do the thead and tbody elements serve?

A

To separate the head and the body of the table

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

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

A

Tabular data

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

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

A

Selector, Declaration, Property, and Value

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

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

A

.

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

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

A

Element name

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

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

A

#

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

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

A

Hexcode, RGB, and HSL

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
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
34
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
35
Q

Which CSS property add 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
36
Q

What is a pseudo-class?

A

A class added to a selector that specifies a special state of that element

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

What are CSS pseudo-classes useful for?

A

Adding styling to an element that is in that state

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

Name at least two units of type size in CSS.

A

px and rem

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
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
40
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
41
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
42
Q

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

A

divs are a block element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
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
44
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
45
Q

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

A

Doesn’t affect document flow

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

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

A

Starts at normal flow position

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

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

A

Doesn’t affect flow, gets removed from flow

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

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

A

The element gets positioned to the nearest positioned ancestor that is non-static

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

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

A

Set parent to a position

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

What are the four box offset properties?

A

Top, Right, Bottom, Left

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

What is the purpose of variables?

A

Store information to go back to and use it

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

How do you declare a variable?

A

var

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

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

A

=

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

What characters are allowed in variable names?

A

Letters, Numbers, Dollar Sign, or an Underscore.

Can’t start with a number

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

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

A

If you capitalize a letter in a variable name, it will be a different variable

ie. var score; is different from var Score;

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

What is the purpose of a string?

A

To contain text or any characters

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

What is the purpose of a number?

A

To hold numeric value

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

What is the purpose of a boolean?

A

To provide true or false values

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

What does the = operator mean in JavaScript?

A

Assign a value to a variable

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

How do you update the value of a variable?

A

Assign a value to that variable

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

What is the difference between null and undefined?

A

Null and Undefined are both empty but Null is the developers way of saying empty and Undefined is Javascript’s way of saying empty

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

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

A

To know what you are logging and testing

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

Give five examples of JavaScript primitives.

A

String, Number, Boolean, Undefined, and Null

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
64
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
65
Q

What is string concatenation?

A

Adding strings together to make a new string

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

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

A

To add numerical values or concatenating strings

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

What data type is returned by comparing two values (, ===, etc)?

A

Boolean

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

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

A

Shorthand for x = x + y

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

What are objects used for?

A

To have multiple properties (variables) and methods (functions) under one value

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

What are object properties?

A

Variables that live within an object

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

Describe object literal notation.

A

Create an object and give it a name. Inside the pair of curly braces are name-value pairs that are separated by a comma. Those values can be properties (variables) and methods (functions).

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

How do you remove a property from an object?

A

Use the delete operator and then dot notation for the property in the object

ie. delete object.property

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

What are arrays used for?

A

To store a list of values that are related to each other

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

Describe array literal notation.

A

Create an array and give it a name. Inside the pair of square brackets are values that are separated by a comma.

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

How are arrays different from “plain” objects?

A

Arrays have an index

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
76
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
77
Q

What is the length property of an array?

A

Returns the number of values in the array

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

How do you calculate the last index of an array?

A

Subtract 1 from the length

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

What is a function in JavaScript?

A

A block of code that can be named and used an infinite amount of times

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

Describe the parts of a function definition.

A

Function Keyword, Function Name, Parameter, Code Block

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

Describe the parts of a function call.

A

Function Name, and Argument(s)

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

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

A

Function keyword, and the code block

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

What is the difference between a parameter and an argument?

A

Parameters are used when you define a function and arguments are used when you call a function

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

Why are function parameters useful?

A

Parameters let us run the function with different values instead of having a fixed result.

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

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

A

Stops the function and takes the result out of the function

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

Why do we log things to the console?

A

To test our code and see what the value of something is at a certain point

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

What is a method?

A

A method is a function which is a property of an object

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

How is a method different from any other function?

A

Methods are properties of an object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
89
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
90
Q

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

A

Math.floor()

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

How do you generate a random number?

A

Math.random()

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

How do you delete an element from an array?

A

The .splice method

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

How do you append an element to an array?

A

The .push method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
94
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
95
Q

Do string methods change the original string? How would you check if you weren’t sure?

A

No, you can check by logging the console of the original string and checking the return value of the documentation

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

Roughly how many string methods are there according to the MDN Web docs?

A

Over 30

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

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

A

Sometimes the return value will be useful but not always

ie. splice method return value is the removed value

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

Roughly how many array methods are there according to the MDN Web docs?

A

Over 30

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
99
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
100
Q

Give 6 examples of comparison operators.

A

> , =, <=, ===, !==

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

What data type do comparison expressions evaluate to?

A

boolean values

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

What is the purpose of an if statement?

A

the if statement checks if the condition is met to run the code in the block

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
103
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
104
Q

Describe the syntax (structure) of an if statement.

A

if keyword follow by a condition in between parentheses which is followed by a code block that will run if the condition is met

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

What are the three logical operators?

A

&&, ||, !

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

How do you compare two different expressions in the same condition?

A

logical operator

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

What is the purpose of a loop?

A

To repeat code

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

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

A

Permission to run code and also to stop running code

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

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

A

Each the code block is executed

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

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

A

Beginning of each iteration

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

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

A

Beginning of everything else and it only happens once

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

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

A

Before each iteration

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

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

A

After each iteration

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
114
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
115
Q

What does the ++ increment operator do?

A

Adds 1 to the value of a variable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
116
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
117
Q

What are the four components of “the Cascade”.

A

Source Order, Inheritance, Specificity, and !important

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

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

A

The last rule that was applied to the same element is stronger than the ones created before it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
119
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
120
Q

List the three selector types in order of increasing specificity.

A

Type, Class, ID

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

Why is using !important considered bad practice?

A

It rules out any other styling and will be harder to debug because it destroys the natural cascade

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

Why do we log things to the console?

A

To see if the code is working

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

What is a “model”?

A

A model is a representation of something

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

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

A

The HTML document

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

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

A

The objects in the HTML document

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

What is a DOM Tree?

A

A DOM tree is a model of a web page

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

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

A

getElementById()

querySelector()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
128
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
129
Q

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

A

To quickly access the values of that DOM method so that the code doesn’t have to run every time

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
130
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
131
Q

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

A

To create a model after the whole page has loaded

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

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

A

It takes a selector as an argument and returns a JavaScript object or null if nothing is found

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

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

A

It takes a selector as an argument and returns a NodeList

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

What is the purpose of events and event handling?

A

To run code if something occurs

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

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

A

.addEventListener

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

What is a callback function?

A

A callback function is a function passed into another function as an argument

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

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

A

The event object

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

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

A

The target property of the Event object holds the element that the event was triggered on

MDN

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

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

A

The first one has a function that will wait til the event happens

The second one runs immediately and returns undefined

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

What is the className property of element objects?

A

The className property is the class name of the element

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

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

A

Assign the new class name to the className property of the object

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

What is the textContent property of element objects?

A

The textContent is the text content of the element

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

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

A

Assign the new text content to the textContent property of the object

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

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

A

No

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

Why is storing information about a program in variables better than only storing it in the DOM?

A

You can reuse the information stored in variables rather than calling the DOM every time

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

What does the transform property do?

A

The transform CSS property lets you rotate, scale, skew, or translate an element

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

Give four examples of CSS transform functions.

A

rotate, scale, skew, translate

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

The transition property is shorthand for which four CSS properties?

A

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

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

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

A

‘focus’

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

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

A

‘blur’

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

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

A

‘input’

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

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

A

‘submit’

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

What does the event.preventDefault() method do?

A

prevents the default behavior of the event

i.e. preventing the data to be in the url

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

What does submitting a form without event.preventDefault() do?

A

the values in the form will be in the url when the page refreshes

155
Q

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

A

.elements

156
Q

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

A

.value

157
Q

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

A

Code could be broken

158
Q

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

A

Checking for errors

159
Q

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

A

No

160
Q

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

A

.appendChild()

161
Q

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

A

the attribute name and the name of the attribute

162
Q

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

A

create the new element, query the parent element from the document, append child to the parent element

163
Q

What is the textContent property of an element object for?

A

get the text content of an element or replace the value

164
Q

Name two ways to set the class attribute of a DOM element.

A

.setAttribute()

.className

165
Q

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

A

the function can be reused and will be easier to read code

166
Q

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

A

min-width and max-width

167
Q

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

A

viewport meta tag

168
Q

What is the event.target?

A

The DOM element object which the event was called on

169
Q

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

A

Bubbling

170
Q

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

A

.tagName

171
Q

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

A

its takes a css selector and returns the closest ancestor

172
Q

How can you remove an element from the DOM?

A

.remove()

173
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

assign the event listener to the ancestor

174
Q

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

A

The element doesn’t show on the page

175
Q

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

A

takes a css selector and returns a boolean value

176
Q

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

A

.getAttribute()

177
Q

At what steps of the solution would it be helpful to log things to the console?

A

Every step

178
Q

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?

A

assign an event listener to each tab

179
Q

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?

A

write a condition for each view

180
Q

What is a breakpoint in responsive Web design?

A

The points where the media queries are introduced

181
Q

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?

A

Percentages scale to the display where as pixels are different percentages on different displays

182
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

source order

183
Q

What is JSON?

A

JSON is a data interchange format used to send and store information in computer systems

184
Q

What are serialization and deserialization?

A

Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.

Deserialization is the reverse process: turning a stream of bytes into an object in memory.

185
Q

Why are serialization and deserialization useful?

A

Serialization and deserialization allows the computer to save the state of an object and recreate it when needed

186
Q

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

A

.stringify()

187
Q

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

A

.parse()

188
Q

How to you store data in localStorage?

A

.setItem()

189
Q

How to you retrieve data from localStorage?

A

.getItem()

190
Q

What data type can localStorage save in the browser?

A

string (most common is a JSON string)

191
Q

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

A

right before the window closes

192
Q

What is a method?

A

A method is a function which is a property of an object

193
Q

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

A

A method definition has code within curly braces with a function keyword and a method call is attached to an object.

194
Q

Describe method definition syntax (structure).

A

An object with a property that has a value of a function

195
Q

Describe method call syntax (structure).

A

The method name as a property of an object

196
Q

How is a method different from any other function?

A

A method is a property of an object.

197
Q

What is the defining characteristic of Object-Oriented Programming?

A

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

198
Q

What are the four “principles” of Object-Oriented Programming?

A

Abstraction, Encapsulation, Inheritance, Polymorphism

199
Q

What is “abstraction”?

A

Abstraction is the process of being able to work with complex things in simple ways

200
Q

What does API stand for?

A

Application Programming Interface

201
Q

What is the purpose of an API?

A

an API delivers a user response to a system and sends the system’s response back to a user.

202
Q

What is this in JavaScript?

A

this is an implicit parameter of all JavaScript functions.

203
Q

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

A

it’s an implicit parameter, meaning that it is available in a function’s code block even though it was never included in the function’s parameter list or declared with var.

204
Q

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

A

call time

205
Q
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);
  }
};
A

“this” is referring to the object character.

206
Q

Given the above character object, what is the result of the following code snippet? Why?
character.greet();

A

It’s-a-me, Mario!

207
Q
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
A

It’s-a-me, undefined!

208
Q

How can you tell what the value of this will be for a particular function or method definition?

A

“this” will be the object that the method is defined in.

209
Q

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

A

“this” will be the object that the method is attached to.

210
Q

What kind of inheritance does the JavaScript programming language use?

A

prototype-based inheritance

211
Q

What is a prototype in JavaScript?

A

An object with a set of data that other objects can use.

212
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

The methods are properties of the prototype object of those data types.

213
Q

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

A

The prototype object

214
Q

What does the new operator do?

A

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.

215
Q

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

A

The prototype property

216
Q

What does the instanceof operator do?

A

The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.

217
Q

What is a “callback” function?

A

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

218
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()

219
Q

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

A

setInterval()

220
Q

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

A

0ms which will execute immediately

221
Q

What do setTimeout() and setInterval() return?

A

timeoutID and intervalID which are positive non-zero integers that can be passed through clearTimeout() and clearInterval() to cancel the timeout/interval.

222
Q

What is a client?

A

A client requests content or services from a server

223
Q

What is a server?

A

A server host runs one or more server programs, which share their resources with clients

224
Q

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

A

GET

225
Q

What three things are on the start-line of an HTTP request message?

A

A HTTP method, the request target (usually a URL), the HTTP version

226
Q

What three things are on the start-line of an HTTP response message?

A

The protocol version, status code, status text

227
Q

What are HTTP headers?

A

HTTP headers let the client and the server pass additional information with an HTTP request or response.

228
Q

Where would you go if you wanted to learn more about a specific HTTP Header?

A

MDN

229
Q

Is a body required for a valid HTTP request or response message?

A

Not all

230
Q

What is AJAX?

A

AJAX is a technique for loading data into part of a page without having to refresh the entire page

231
Q

What does the AJAX acronym stand for?

A

AJAX stands for Asynchronous JavaScript and XML

232
Q

Which object is built into the browser for making HTTP requests in JavaScript?

A

XMLHttpRequest

233
Q

What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?

A

load

234
Q

An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?

A

The XMLHttpRequest object shares the same prototype from eventTarget.

235
Q

What is a code block? What are some examples of a code block?

A

A code block is code within curly braces.

For example, code for an if statement and loops.

236
Q

What does block scope mean?

A

Variables defined inside the code block mean they only exist in that code block.

237
Q

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

A

block-scoped

238
Q

What is the difference between let and const?

A

const creates a read only reference to the value

239
Q

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

A

pushing a new value to an array doesn’t change the name of the variable declared by const.

240
Q

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

A

You want to use const always unless you can not.

241
Q

What is the syntax for writing a template literal?

A

`` aka backticks and to include variables and expressions, you would use ${}

242
Q

What is “string interpolation”?

A

the ability to substitute part of the string for the values of variables or expressions.

243
Q

What is destructuring, conceptually?

A

Declaring multiple variables at once from properties of an object or elements of an array.

244
Q

What is the syntax for Object destructuring?

A

const { propertyName: newVariableName } = object; or const { newVariableName } = object; (if the property name is the same)

245
Q

What is the syntax for Array destructuring?

A

const [newVariableName] = array;

246
Q

How can you tell the difference between destructuring and creating Object/Array literals?

A

the {} and [] on the left side of the assignment operator means destructuring and if they are on the right side, and object or array is being created.

247
Q

What is the syntax for defining an arrow function?

A

One parameter. With a simple expression return is not needed:
param => expression

Multiple parameters require parentheses. With simple expression return is not needed:
(param1, paramN) => expression

Multiline statements require body brackets and return: 
param => {
    let a =1;
    return a + param;
}
Multiple parameters require parentheses. Multiline statements require body brackets and return:
(param 1, paramN) => {
    let a = 1; 
    return a + param1 + paramN;
}
248
Q

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

A

The expression is returned.

249
Q

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

A

An arrow function captures the this value of the enclosing context instead of creating its own this context.

250
Q

What is a CLI?

A

Command-line Interface

251
Q

What is a GUI?

A

Graphical User Interface

252
Q
Give at least one use case for each of the commands listed in this exercise.
man
cat
ls
pwd
echo
touch
mkdir
mv
rm
cp
A

man: shows the manual of a specific command
cat: displays the text content of a file into the terminal
ls: shows the contents of the directory you are in
pwd: prints the name of the current/working directory
echo: displays a line of text
touch: create a new file
mkdir: makes directories
mv: renames files
rm: removes files or directories
cp: makes a copy of files and directories

253
Q

What are the three virtues of a great programmer?

A

Laziness, Impatience, Hubris

254
Q

What is Node.js?

A

Node.js is a JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

255
Q

What can Node.js be used for?

A

Node.js is primarily used for non-blocking, event-driven servers, due to its single-threaded nature. It’s used for traditional web sites and back-end API services, but was designed with real-time, push-based architectures in mind.

256
Q

What is a REPL?

A

Read-eval-print loop

257
Q

When was Node.js created?

A

2009

258
Q

What back end languages have you heard of?

A

JavaScript, Python, PHP, Ruby, C++, C#, C, Java, Go (Golang)

259
Q

What is a computer process?

A

A computer process is the instance of a computer program that is being executed by one or many threads.

260
Q

Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?

A

Hundreds

261
Q

Why should a full stack Web developer know that computer processes exist?

A

The code that a web developer writes are computer processes.

262
Q

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

A

The process object is a global that provides information about, and control over, the current Node.js process.

263
Q

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

A

Just like any other object

264
Q

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

A

String

265
Q

What is a JavaScript module?

A

an individual .js file

266
Q

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

A

exports, require, module, __filename, and __dirname

267
Q

Give two examples of truly global variables in a Node.js program.

A

process and global

268
Q

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

A

To export a function and store it in the exports property of the module object so that other modules can import those functions.

269
Q

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

A

Use the require method with the module that you want to import as the argument.

270
Q

What is the JavaScript Event Loop?

A

The process where code is put in a call stack in order to execute code.

271
Q

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

A

Blocking code is code that is occupying the call stack while it is executing and non-blocking code gets removed from the call stack when it is executed.

272
Q

What is a directory?

A

a file that lists other files

273
Q

What is a relative file path?

A

a point to a file in the same directory

274
Q

What is an absolute file path?

A

a point to a file starting from the root of the directory

275
Q

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

A

the fs module

276
Q

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

A

fs.writeFile()

277
Q

Are file operations using the fs module synchronous or asynchronous?

A

both

278
Q

What is a client?

A

Clients request content or services from a server

279
Q

What is a server?

A

Servers respond to clients with the information that they requested if possible

280
Q

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

A

GET

281
Q

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

A

an HTTP method like a verb (GET, PUT, or POST) or a noun like (HEAD or OPTIONS) , the request target (usually a URL), the HTTP version

282
Q

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

A

The protocol version, a status code, and a status text

283
Q

What are HTTP headers?

A

HTTP headers let the client and the server pass additional information with an HTTP request or response.

284
Q

Is a body required for a valid HTTP message?

A

No

285
Q

What is NPM?

A

NPM is the world’s largest software registry that developers use to share and borrow packages. NPM can be the website, the Command Line Interface (CLI), or the registry.

286
Q

What is a package?

A

A package is a directory described by a package.json file

287
Q

How can you create a package.json with npm?

A

npm init –yes

288
Q

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

A

A dependency is a package that lets the dependent package run. You can add one to a package using npm install.

289
Q

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

A

The package gets placed into the dependencies key of the package.

290
Q

How do you add express to your package dependencies?

A

npm install express

291
Q

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

A

the listen method

292
Q

How do you mount a middleware with an Express application?

A

the use method

293
Q

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

A

req for request and res for response

294
Q

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

A

application/json

295
Q

What does the express.json() middleware do and when would you need it?

A

Parses JSON and would use it if you need to parse the request body.

296
Q

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

A

To know what to do with the data given whether it be GET, POST, DELETE, etc.

297
Q

What is PostgreSQL and what are some alternative relational databases?

A

PostgreSQL is a powerful, free, open source Relational Database Management System (RDBMS). Other relational databases are MySQL, SQL Server by Microsoft, and Oracle by Oracle Corporation.

298
Q

What are some advantages of learning a relational database?

A

You use the SQL language and they are the most widely used kind of database

299
Q

What is one way to see if PostgreSQL is running?

A

sudo service postgresql status

300
Q

What is a database schema?

A

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

301
Q

What is a table?

A

A table is a list of rows each having the same set of attributes.

302
Q

What is a row?

A

A row is a data record within a table.

303
Q

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

A

SQL is a declarative programming language. In declarative languages, programmers describe the results they want and the programming environment comes up with its own plan for getting those results.

304
Q

How do you retrieve specific columns from a database table?

A

select

305
Q

How do you filter rows based on some specific criteria?

A

where

306
Q

What are the benefits of formatting your SQL?

A

readability

307
Q

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

A

=
<
>
!=

308
Q

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

A

limit

309
Q

How do you retrieve all columns from a database table?

A

*

310
Q

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

A

order by

311
Q

How do you add a row to a SQL table?

A

insert into

312
Q

What is a tuple?

A

a tuple is a list of values

313
Q

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

A

after each tuple, add a comma and then add another tuple

314
Q

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

A

returning

315
Q

How do you update rows in a database table?

A

update and set

316
Q

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

A

to know which rows to update instead of everything in the table

317
Q

How do you delete rows from a database table?

A

delete from and specifying where

318
Q

How do you accidentally delete all rows from a table?

A

delete from without specifying where

319
Q

What is a foreign key?

A

A value that refers to another column in another table

320
Q

How do you join two SQL tables?

A

join “table name” using (“foreign key”)

321
Q

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

A

as

322
Q

What are some examples of aggregate functions?

A

count(“columnName”) sum(“columnName”)

323
Q

What is the purpose of a group by clause?

A

To separate rows into groups and to perform aggregate functions on those groups

324
Q

What are the three states a Promise can be in?

A

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.

325
Q

How do you handle the fulfillment of a Promise?

A

Use the then method of the returned promise object and pass in the callback function to run if the promise is fulfilled

326
Q

How do you handle the rejection of a Promise?

A

Use the catch method of the return promise object and pass in the callback function to run if the promise is unfulfilled

327
Q

What is Array.prototype.filter useful for?

A

It lets you filter an array with a condition which will check if each index meets the condition. The method will return a new array of values that met the condition.

328
Q

What is Array.prototype.map useful for?

A

It lets you modify the array with an expression which will return a new array with new values at each index

329
Q

What is Array.prototype.reduce useful for?

A

It lets you call a function to every index and returns the accumulation of all the return values of the function

330
Q

What is “syntactic sugar”?

A

syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express.

331
Q

What is the typeof an ES6 class?

A

function

332
Q

Describe ES6 class syntax.

A

class keyword followed by the class name and a pair of curly braces. Within the curly braces, you can assign properties to the class by using the constructor function. Also you can assign methods to the class by defining the function without the function keyword.

333
Q

What is “refactoring”?

A

code refactoring is the process of restructuring existing computer code while maintaining functionality

334
Q

What is Webpack?

A

Webpack is a module that can bundle dependencies together so that the application doesn’t have to run on script tags which will bottleneck the browser and performance

335
Q

How do you add a devDependency to a package?

A

npm install –save-dev

336
Q

What is an NPM script?

A

npm scripts are shortcuts to execute in a cli

337
Q

How do you execute Webpack with npm run?

A

npm run build

338
Q

How are ES Modules different from CommonJS modules?

A

ES modules have more compact syntax compared the CommonJS, the structure can be statically analyzed, and the support for cyclic dependencies are better than CommonJS.

339
Q

What kind of modules can Webpack support?

A

ECMAScript, CommonJS, AMD Modules, Assets, WebAssembly Modules

340
Q

What is React?

A

React is a JavaScript library for building user interfaces

341
Q

What is a React element?

A

Object

342
Q

How do you mount a React element to the DOM?

A

ReactDOM.render(element, container)

343
Q

What is Babel?

A

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

344
Q

What is a Plug-in?

A

a Plug-in is a software component that adds a specific feature to an existing computer program.

345
Q

What is a Webpack loader?

A

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them.

346
Q

How can you make Babel and Webpack work together?

A

install the babel-loader as a devDependency

347
Q

What is JSX?

A

JSX is a syntax extension to JavaScript based in ES6. JSX allows you to write HTML in React by converting HTML into React components

348
Q

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

A

the syntax for JSX gets converted to react which will show react when it converts it

349
Q

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

A

install @babel/plugin-transform-react-jsx and babel-loader as a devDependency

350
Q

What is a React component?

A

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

351
Q

How do you define a function component in React?

A

function FunctionName(props) { return someJSX; }

352
Q

How do you mount a component to the DOM?

A

ReactDOM.render(element, container);

353
Q

What are props in React?

A

Props are properties for react elements.

354
Q

How do you pass props to a component?

A

take the prop as a parameter and then you can access it by the property of the props

355
Q

How do you write JavaScript expressions in JSX?

A

{ JavaScript Expression }

356
Q

How do you create “class” component in React?

A

class nameOfClass extends React.Component. The class must have a render function inside of it.

357
Q

How do you access props in a class component?

A

this.props

358
Q

What is the purpose of state in React?

A

The purpose of a state in React is to know which React element to render based on the state.

359
Q

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

A

you would pass it by setting the onClick prop to the event handler function but you would need to bind that function so that the ‘this’ will be known in the future.

360
Q

What are controlled components?

A

An input form element whose value is controlled by React. When the user’s inputs are set into the form’s state and the React element is rendered based on the value of the state.

361
Q

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

A

value and onChange

362
Q

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

A

the map method

363
Q

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

A

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.

364
Q

What does express.static() return?

A

middleware function

365
Q

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

A

the directory name of the current module

366
Q

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

A

The path.join() method joins all given path segments together

367
Q

What does fetch() return?

A

a promise

368
Q

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

A

GET

369
Q

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

A

The second argument for the fetch function takes in an object. In that object, you can set the value for the ‘method’ property to a different request method.

370
Q

When does React call a component’s componentDidMount method?

A

After a component is mounted

371
Q

Name three React.Component lifecycle methods

A

constructor(), render(), componentDidMount(), componentDidUpdate(), componentWillUnmount()

372
Q

How do you pass data to a child component?

A

store the data as the value of a property in the state property of the component

373
Q

What must the return value of myFunction be if the following expression is possible?
myFunction()();

A

myFunction must return a function

374
Q
What does this code do?
const wrap = value => () => value;
A

returns the second arrow function which takes no parameters and returns the value of the variable value

375
Q

in JavaScript, when is a function’s scope determined; when it is called or when it is defined?

A

defined

376
Q

What allows JavaScript functions to “remember” values from their surroundings?

A

lexical scoping

377
Q

What does the acronym LIFO mean?

A

Last In First Out

378
Q

What methods are available on a Stack data structure?

A

stack. peek()
stack. pop()
stack. print()

379
Q

What must you do to access the value at an arbitrary point in a stack (not just the “top”)?

A

pop all values until you get to the point

380
Q

What does the acronym FIFO mean?

A

First In First Out

381
Q

What methods are available on a Queue data structure?

A

queue. peek()
queue. dequeue()
queue. enqueue()

382
Q

What must you do to access the value at an arbitrary point in a queue (not just the “front”)?

A

dequeue the value and check if that is the value you want. if not, enqueue the value.

383
Q

How are linked lists different from an array?

A

linked lists have a next. arrays have an index.

384
Q

How would you access an arbitrary node in a linked list (not just the “head”)?

A

.next until you get to the point