HTML Flashcards

1
Q

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

A

inside 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

inside 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 tags go in a valid HTML document?

A

inside 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 let the browser know what html version the page is using

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

p, div, head, title, h1

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

to give more information about an 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

& amp for ampersand

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 always show up 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

inline elements do not take up a new line and start next to previous content

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

default width is all the width of the container and default height is however much height it needs

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

default width and height are both however much space the element needs, however cannot be modified through CSS

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

Unordered lists begin with bullet points, ordered lists are numbered

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

Lists are block level elements

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

Absolute paths are the full paths to a specific resource

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

What is a relative URL?

A

Relative paths are paths that are relative to your current path

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

childDirectory/

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

./

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 a user

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

radio button, checkboxes, drop-down boxes, submit button, text input

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, checkbox, submit

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, td, th

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

thead is used as the heading for the table

tbody is used for the body content 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

weather forecast, report card

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 and declaration

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

.className

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

their tag

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

idvalue

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

hex value, name, rgb values, 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

border, margin, padding

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

specifies a special state of an 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

let’s you dynamically change the style of an element based on a user’s interaction with it or other external factors

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

pixels, percentages, ems

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

What are the four components of “the Cascade”.

A

source order, inheritance, specificity, !important

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

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

A

the order that css rulesets are written out in the css file determines what styling is applied. The LAST rule is what gets used.

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

some properties are inherited properties and will take the parent properties’ value

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

List the three selector types in order of increasing specificity.

A

tag, class, id

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

Why is using !important considered bad practice?

A

disrupts the cascading nature of css which can make it difficult for debugging

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

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

A

div is block level element so the second div goes under the first div due to divs taking up all the width of a page

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

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

A

moves an element in relation to where it would have been in normal flow.

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

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

A

by default won’t move the element but can set offset with the 4 offset properties

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

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

A

it removes itself from the flow of the document

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

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

A

its offset is based off of its constraining element

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

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

A

set the containing block’s position property to relative

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

What is the purpose of variables?

A

to store a value for later usage

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

How do you declare a variable?

A

var, let, const

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

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

A

varName = value

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

What characters are allowed in variable names?

A

letters, digits, underscores, and dollar signs.

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

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

A

different casing means different variables

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

What is the purpose of a string?

A

to describe text values

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

What is the purpose of a number?

A

to describe numeric values

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

What is the purpose of a boolean?

A

to describe true and false values

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

What does the = operator mean in JavaScript?

A

assignment operator

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

How do you update the value of a variable?

A

varName = value

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

What is the difference between null and undefined?

A

null is intentionally defined while undefined means a variable contains no value

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

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

A

it is easy to lose track of which logs belongs to which variables

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

Give five examples of JavaScript primitives.

A

number, boolean, string, null, undefined

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

What is string concatenation?

A

when two or more strings are added together

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

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

A

adds numbers together or concatenates strings together

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

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

A

adds variable’s value to operand and reassings the value to itself

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

What are objects used for?

A

group a set of variables and functions to model after real world objects

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

What are object properties?

A

variables in an object

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

Describe object literal notation.

A

{
property: value,
property: value
}

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

How do you remove a property from an object?

A

delete keyword in front of the dot notation of the property of the object you want to delete

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

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

A

dot notation or square brackets

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

What are arrays used for?

A

store a list of values

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

Describe array literal notation.

A

[val1,val2,val3]

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

How are arrays different from “plain” objects?

A

used to store data that are related, array also preserves order, numeric indexing

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

What is the length property of an array?

A

contains the number of elements in an array

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

What is a function in JavaScript?

A

reusable code that can be repeatedly called for different situations

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

Describe the parts of a function definition.

A

function keyword, function name, parameters, code block

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

Describe the parts of a function call.

A

function name, arguments

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

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

A

function definition defines the code block and parameters of the function while function call runs the code block with the given arguments

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

What is the difference between a parameter and an argument?

A

parameters are what arguments will be assigned to when passed into the function call

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

Why are function parameters useful?

A

allows a code block to be more dynamic depending on the input arguments

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

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

A

produces a value from function code block and stops running any additional code from the function code block

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

Why do we log things to the console?

A

to check if our code is running with intended behavior

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

What is a method?

A

a function property of an object

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

How is a method different from any other function?

A

methods are called with its containing object or object constructor

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

How do you remove the last element from an array?

A

array.pop()

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

How do you delete an element from an array?

A

array.splice()

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

How do you append an element to an array?

A

array.push()

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

How do you break a string up into an array?

A

string.split()

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

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

A

no, strings are immutable in JS, can console log the string

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

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

A

36

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

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

A

no sometimes you only need the functionality of the function/method

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

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

A

38

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

What is the purpose of a loop?

A

to run a code block multiple times until a condition is met

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

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

A

it lets the for loop know when to stop running

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

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

A

each full run through of the for loop code block

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

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

A

when first entering the while loop and in the beginning of every iteration

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

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

A

before the first iteration of the for loop

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

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

A

before each iteration of the for loop

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

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

A

at the end of each iteration of the for loop

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

What does the ++ increment operator do?

A

increments the value of its operand by 1

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

How do you iterate through the keys of an object?

A

for(let keys in object)

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

Give 6 examples of comparison operators.

A

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

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

What is the purpose of an if statement?

A

to check a condition to determine if a specific code block should run

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

Describe the syntax (structure) of an if statement.

A

if(condition){
code
}

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

What are the three logical operators?

A

&&. || , !

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

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

A

have each expression in paraenthesis

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

Why do we log things to the console?

A

to check if our code is running with the intended logic or values

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

What is a “model”?

A

a representation of an object or idea

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 within the DOM tree or each element of the page

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

What is a DOM Tree?

A

the document object representation of the entire 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

document.querySelector(‘h1’), document.querySelector(‘body’)

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

document.querySelectorAll(‘p’)

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

so you can alter its properties

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

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

A

so you can alter its properties, the bigger document gets, the longer it’ll take for the query selectors to look thru to find the elements so saving elements that you will access more than once is efficient

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

it ensures all of the DOM is loaded properly before being accessed within the script

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

a css selector and returns the first element matches

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

a css selector and returns all matching elements

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

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

A

a css selector and returns all matching elements as a NodeList

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

NodeList vs Arrays

A

NodeLists are array-like but are not arrays, happens to contain some similar methods/properties

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

Why do we log things to the console?

A

to check if our code is running with the intended logic or values

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

What is the purpose of events and event handling?

A

to programtically respond to changes or actions on the webpage

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

Are all possible parameters required to use a JavaScript method or function?

A

no

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

What is a callback function?

A

a function that is passed into another function as an argument that can be invoked later

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

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

A

an event object

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

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

A

reference to the object that the event was dispatched on. Use MDN to check info on it

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

What is the difference between these two snippets of code?

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

A

one passes in the callback function handleClick as an argument, one passes in the return value of the function handleClick as an argument

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

What is the className property of element objects?

A

gives the value of the class attribute of the element

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

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

A

element.className = newName

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

What is the textContent property of element objects?

A

contains only the text content of an element

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

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

A

element.textContent = new text

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

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

A

no sometimes you just want the callback to run specific code regardless of the event’s data

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

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

A

harder

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

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

A

the larger the DOM gets the longer it’ll take to find elements with query selectors so storing them in variables improves efficiency

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

What does the transform property do?

A

rotate, scale, skew, or translate

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

Give four examples of CSS transform functions.

A

translate(), rotate(),scale(), skew()

153
Q

The transition property is shorthand for which four CSS properties?

A

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

154
Q

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

A

focus

155
Q

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

A

blur

156
Q

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

A

input

157
Q

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

A

submit

158
Q

What does the event.preventDefault() method do?

A

prevents an event from being handled using its default behavior

159
Q

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

A

reloads the page with the form’s values

160
Q

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

A

elements

161
Q

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

A

value

162
Q

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

A

allows you to debug at each step of your code

163
Q

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

A

no

164
Q

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

A

appendChild()

165
Q

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

A

the attribute you want to set and the value to set it to

166
Q

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

A

create the element, set its attributes/set its textContent depending on if they need them, append the element to an element on the page

167
Q

What is the textContent property of an element object for?

A

the text inside an element

168
Q

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

A

setAttribute(), or className property

169
Q

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

A

reusability, allows for dynamic usage by passing in arguments

170
Q

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

A

any-hover, any-pointer

171
Q

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

A

viewport

172
Q

What is the event.target?

A

the target of the event

173
Q

What is the event.target?

A

the target of the event

174
Q

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

A

tagName

175
Q

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

A

takes a selector

176
Q

How can you remove an element from the DOM?

A

element.remove()

177
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

add it to the parent element

178
Q

What is the event.target?

A

the target of the event

179
Q

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

A

hides the element

180
Q

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

A

a string selector, returns a boolean

181
Q

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

A

getAttribute()

182
Q

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

A

every

183
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

need to add event listeners to every single view and tab

184
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

an if statement for every view/tab

185
Q

What is a breakpoint in responsive Web design?

A

The points at which a media query is introduced

186
Q

hat 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

it makes it so the width can scale based on device’s width rather than flat size

187
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

188
Q

What is JSON?

A

JavaScript Object Notation

189
Q

What are serialization and deserialization?

A

translating object in memory into stream of bytes and vice versa

190
Q

Why are serialization and deserialization useful?

A

store data on disk or send across network

191
Q

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

A

JSON.stringify(string)

192
Q

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

A

JSON.parse(string)

193
Q

How to you store data in localStorage?

A

setItem(key,value)

194
Q

How to you retrieve data from localStorage?

A

getItem(key)

195
Q

What data type can localStorage save in the browser?

A

DOMString

196
Q

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

A

when the window, document, and its resources are about to be unloaded

197
Q

What is a method?

A

function of an object

198
Q

Describe method definition syntax (structure).

A
functionName: function() {
    function code block;
  }
199
Q

Describe method call syntax (structure).

A

object.method(arguments);

200
Q

How is a method different from any other function?

A

methods can only be called with the object it is associated with

201
Q

What is the defining characteristic of Object-Oriented Programming?

A

objects can contain both data and behavior as properties and methods respectively

202
Q

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

A

abstraction, encapsulation, inheritance, polymorphism

203
Q

What is “abstraction”?

A

being able to work with complex things in a simple ways

204
Q

What does API stand for?

A

application programming interface

205
Q

What is the purpose of an API?

A

gives programmers a way to interact with a system in a simple way

206
Q

What is this in JavaScript?

A

implicit parameter of all functions in javascript

207
Q

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

A

a parameter that isn’t explicity passed in as an argument

208
Q

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

A

call time

209
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

character

210
Q

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

A

It’s-a-me, Mario!

because this in this case is character so character.firstName is ‘Mario’

211
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!

the implicit parameter in this case is window and window does not have a property firstName

212
Q

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

A

this refers to the object it is defined in

213
Q

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

A

the object that calls the method during runtime

214
Q

What kind of inheritance does the JavaScript programming language use?

A

prototypal

215
Q

What is a prototype in JavaScript?

A

a JavaScript object used to let other JavaScript objects inherit its properties/methods

216
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

they are borrowed from the prototype object

217
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 its prototype

218
Q

What does the new operator do?

A

creates a new instance of an object using its constructor function

  1. creates blank JS object,
  2. connects it to prototype chain by adding __proto__
  3. binds newly created object instance as the this context
  4. returns newly created object
219
Q

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

A

prototype

220
Q

What does the instanceof operator do?

A

checks if an object contains the constructor of the specified prototype and returns a boolean

221
Q

What is a “callback” function?

A

a function thats passed in to another function as an argument to be called later

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

223
Q

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

A

setInterval()

224
Q

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

A

0

225
Q

What do setTimeout() and setInterval() return?

A

an ID

226
Q

What is a client?

A

service requester

227
Q

What is a server?

A

provider of a resource or service

228
Q

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

A

GET

229
Q

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

A

HTTP method, request target, HTTP version

230
Q

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

A

protocol version, status code, status text

231
Q

What are HTTP headers?

A

describes the request or body included in the message

232
Q

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

A

MDN

233
Q

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

A

no

234
Q

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

A

Code block is code written between curly braces.

Examples: if, else, for, while

235
Q

What does block scope mean?

A

block scope describes variables that exist within a specific code block

236
Q

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

A

block /local

237
Q

What is the difference between let and const?

A

const prevents reassignment to the variable

238
Q

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

A

you can modify the values within the variable but not what the variable refers to

239
Q

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

A

use let if you plan on modifying the data, use const if you don’t

240
Q

What is the syntax for writing a template literal?

A

string ${varname}

241
Q

What is “string interpolation”?

A

substituting parts of a string with values from variables or expressions

242
Q

What is destructuring, conceptually?

A

Object destructuring assigns the properties of an object to variables with the same names by default.

243
Q

What is the syntax for Object destructuring?

A

let {property1, property2…} = object

244
Q

What is the syntax for Array destructuring?

A

let [x, y, z] = array

245
Q

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

A

destructuring syntax happens on the left side of the assignment operator

246
Q

What is the syntax for defining an arrow function?

A

(parameters) => {}

247
Q

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

A

the value of the expression is returned

248
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

249
Q

What is Node.js?

A

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

250
Q

What can Node.js be used for?

A

backend javascript

251
Q

What is a REPL?

A

What does REPL mean?

read-eval-print loop

252
Q

When was Node.js created?

A

May 27, 2009

253
Q

What back end languages have you heard of?

A

Python, Ruby, PHP

254
Q

What is a computer process?

A

computer program running on one or multiple threads that contain the programs code

255
Q

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

A

150

256
Q

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

A

helpful for when debugging backend servers

257
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

258
Q

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

A

process

259
Q

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

A

array

260
Q

What is a JavaScript module?

A

a js file

261
Q

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

A
\_\_dirname
\_\_filename
exports
module
require()

these are scope isolated, unique to each module

262
Q

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

A

process, console

263
Q

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

A

to bring variables and data from js file to another

264
Q

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

A

require()

265
Q

What is the JavaScript Event Loop?

A

event loop is responsible for pushing anything in the task queue on to the call stack when call stack is empty

266
Q

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

A

blocking is code that runs synchronously from call stack, non-blocking are code that get pushed onto the task queue and pushed on to call stack when call stack is empty

267
Q

What is a directory?

A

folder

268
Q

What is a relative file path?

A

path relative to your current directory

269
Q

What is an absolute file path?

A

the full path to a file or directory

270
Q

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

A

fs

271
Q

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

A

fs.writeFile()

272
Q

Are file operations using the fs module synchronous or asynchronous?

A

async

273
Q

What is a client?

A

service requester

274
Q

What is a server?

A

service provider

275
Q

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

A

GET

276
Q

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

A

http method, request target, http version

277
Q

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

A

protocol version, status code, status text

278
Q

What are HTTP headers?

A

describes the request or body included in the message

279
Q

Is a body required for a valid HTTP message?

A

no

280
Q

What is NPM?

A

Node Package Manager

281
Q

What is a package?

A

a directory with one or more files in it that also includes package.json

282
Q

How can you create a package.json with npm?

A

npm init

283
Q

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

A

packages your package needs to run.

npm i package

284
Q

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

A

it installs it to the local node_module folder

285
Q

How do you add express to your package dependencies?

A

npm install express

286
Q

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

A

listen

287
Q

How do you mount a middleware with an Express application?

A

use method

288
Q

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

A

request, response, next

289
Q

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

A

application/json

290
Q

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

A

indicates the intended behavior of the api request

291
Q

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

A

express.json() returns a json parsing middleware that only parses JSON

292
Q

What is PostgreSQL and what are some alternative relational databases?

A

an Relational database management system

MySQL, Oracle

293
Q

What are some advantages of learning a relational database?

A

most relational databases use sql so it is a portable skill, help prevent data corruption through rigid table structure

294
Q

What is one way to see if PostgreSQL is running?

A

top

295
Q

What is a database schema?

A

a collection of tables. How the tables are set up

296
Q

What is a table?

A

a list of rows

297
Q

What is a row?

A

sets of attributes

298
Q

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

A

SQL is an declarative language used for interacting with relational databases

299
Q

How do you retrieve specific columns from a database table?

A

select “nameOfColumn”

300
Q

How do you filter rows based on some specific criteria?

A

where

301
Q

What are the benefits of formatting your SQL?

A

legibility

302
Q

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

A

= < > !=

303
Q

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

A

limit number

304
Q

How do you retrieve all columns from a database table?

A

select *

305
Q

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

A

order by colName asc/desc

306
Q

How do you add a row to a SQL table?

A

insert into “tablename” (“colName”)

values (‘whateverValue’)

307
Q

What is a tuple?

A

group of data

308
Q

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

A

add commas between each tuple

309
Q

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

A

returning *

310
Q

How do you delete rows from a database table?

A

delete from “tableName”

where condition;

311
Q

How do you accidentally delete all rows from a table?

A

delete from “tableName”;

312
Q

What is a foreign key?

A

refers to another key in a different table

313
Q

How do you join two SQL tables?

A

join “tableName” using (“colName”)

314
Q

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

A

“colName” as “alias”

315
Q

What are some examples of aggregate functions?

A

max(), min(), sum(), every()

316
Q

What is the purpose of a group by clause?

A

used to group values into a single row such as results from aggregate functions

317
Q

What are the three states a Promise can be in?

A

pending, fulfilled, rejected

318
Q

How do you handle the fulfillment of a Promise?

A

.then

319
Q

How do you handle the rejection of a Promise?

A

.catch

320
Q

What is Array.prototype.filter useful for?

A

removing unwanted elements from an array

321
Q

What is Array.prototype.map useful for?

A

returning a new array with every element being the result of the callback function

322
Q

What is Array.prototype.reduce useful for?

A

consolidate all values of an array into a single value

323
Q

What is “syntactic sugar”?

A

sytntax that makes the language easier to read or use

324
Q

What is the typeof an ES6 class?

A

function

325
Q

Describe ES6 class syntax.

A
class ClassName{
    constructor() { 
    }
}
326
Q

What is Webpack?

A

js bundler

327
Q

What is Webpack?

A

bundles multiple modules into a single JavaScript file.

328
Q

What is an NPM script?

A

bundle common shell commands

329
Q

How do you execute Webpack with npm run?

A

inside scripts add webpack as a value of build

330
Q

How are ES Modules different from CommonJS modules?

A

import vs require

export default vs module.exports

331
Q

What kind of modules can Webpack support?

A

CommonJS and ES Modules

332
Q

What is React?

A

a JavaScript library for creating user interfaces.

333
Q

What is a React element?

A

DOM object created by React

334
Q

How do you mount a React element to the DOM?

A

ReactDOM.render(element, container)

335
Q

What is Babel?

A

JavaScript compiler that makes ECMAScript 2015+ backwards compatible

336
Q

What is a Plug-in?

A

a software component that adds a specific feature to an existing program

337
Q

What is a Webpack loader?

A

allows for pre-processing of the files as you import or “load” them

338
Q

How can you make Babel and Webpack work together?

A

babel-loader

339
Q

What is JSX?

A

JavaScript extension that produces React Elements

340
Q

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

A

JSX uses React.createElement()

341
Q

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

A

babel compiles JSX down to React.createElement() calls

342
Q

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

A

plugin-transform-react-jsx plugin for babel-loader

343
Q

What is a React component?

A

classes or functions that accepts props and returns React elements

344
Q

How do you define a function component in React?

A
function ComponentName (props){
//code block;
}
345
Q

How do you mount a component to the DOM?

A

ReactDOM.render(component, container)

346
Q

What are props in React?

A

arguments passed into React components

347
Q

How do you pass props to a component?

A

as an argument to the component

348
Q

How do you write JavaScript expressions in JSX?

A

{ some expression}

349
Q

How do you create “class” component in React?

A
class ComponentName extends React.Component{
 render(){

}
}

350
Q

How do you access props in a class component?

A

this.props

351
Q

What is the purpose of state in React?

A

State is similar to props, but it is private and fully controlled by the component.

352
Q

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

A

{this.handleName}

353
Q

Is setState sync or async

A

async, do not call console log after setState

354
Q

What are controlled components?

A

components that update own states based on user inputs and also use React’s state as single point of truth

355
Q

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

A

onChange

value

356
Q

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

A

map

357
Q

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

A

an id

358
Q

accordian vs carousel

A

both be dynamic
accordion should work with any title and detail
coursel should work with any images

359
Q

What does express.static() return?

A

a function

360
Q

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

A

dynamically generated absolute file path of current file

361
Q

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

A

joins two path names together into one path

362
Q

What does fetch() return?

A

a promise that resolves into a response object

363
Q

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

A

get

364
Q

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

A

pass a config object as the second argument with method property specified

365
Q

When does React call a component’s componentDidMount method?

A

immediately after a component is inserted into the DOM tree

366
Q

Name three React.Component lifecycle methods.

A

componentDidMount, componentDidUpdate, componentDidWillUnmount

367
Q

How do you pass data to a child component?

A

props

368
Q

What does the acronym LIFO mean?

A

last in first out

369
Q

What methods are available on a Stack data structure?

A

push pop

370
Q

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

A

pop

371
Q

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

A

a function

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

wrap is assigned the function () => value

373
Q

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

A

when it is called

374
Q

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

A

closures

375
Q

What does the acronym FIFO mean?

A

first in first out

376
Q

What methods are available on a Queue data structure?

A

enqueue, dequeue, peek

377
Q

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

A

dequeue

378
Q

How are linked lists different from an array?

A

it’s not indexed

379
Q

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

A

next