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

A

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

html, body, head, h1, p, a, span, ul, ol, li…

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 provide additional information about the contents of 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

A

< < > > & & © ®

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

always appear to 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

appear to continue on the same line as their neighboring elements

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

full width available of its parent element (container), and height of content length

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

width and height of parent element, non-adjustable

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

ol is numbered, while ul is 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 element

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

a element (anchor)

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

What is an absolute URL?

A

domain name followed by the path to a specific page

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

What is a relative URL?

A

when linking to other pages within the same site

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

by using ../ to go up one folder, then followed by a file name (or could be a folder name)

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

by using the name of the child folder, followed by a forward slash, then the file name
childfolder/file.name

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

by using ../../ to go up two folders, then followed by a file name (or could be a folder name)

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

by using the file name (or ./)

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

houses form controls/ group inputs together to capture submitted information

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

??

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 elements.

A

“text” “password” “email” “radio” “checkbox” “file” “submit” “image”

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

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

A

inline element

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

html, head, body, doctype, title, meta

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

accessibility, semantically divide elements, styling purposes

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

schedule, tabular data - statistics, database

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

.class

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

tag 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

id

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

Which CSS property pushes boxes away from each other?

A

margin

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

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

What CSS properties make up the box model?

A

margin, border, padding

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

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

A

color name, hex, rgb, rgba

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

What is a pseudo-class?

A

allows to change the appearance of elements when a user is interacting with them :hover :active :focus

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

engaging

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 em rem % pt

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

block elements take up 100% width by default

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

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

A

asdf

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

same as static, 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

moves the 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
47
Q

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

A

taken out of normal flow, no longer affects the position of other elements

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

relative to non-static position parent////

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 the parent container as non-static

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 bottom left right

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

What is the purpose of variables?

A

to store values

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 a variable?

A

= on declared variable

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, _, $

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

apple and Apple are different

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

texts

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

numbers

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 show true and false

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

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 new value

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 is assigned to show empty value, undefined is to show no value has been assigned, (null is an object, which is a mistake)

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 show what values are being logged

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

Give five examples of JavaScript primitives.

A

number, string, boolean, undefined, bigint, symbol

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

connecting strings together

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

adding numbers, 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

add a value to a variable, and assign that value to the variable

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

What are objects used for?

A

to create model of something

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

What are object properties?

A

variables as opposed to functions

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

Describe object literal notation?

A

{ }

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

delete keyword

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

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

A

. (member operator) and constructor [ ]

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

What are arrays used for?

A

storing lists of data, anything that needs numerically indexed

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

Describe array literal notation.

A

[ ]

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

How are arrays different from “plain” objects?

A

indexed, objects are non-iterable

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

What is the length property of an array?

A

array.length;

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

How do you calculate the last index of an array?

A

array[array.length - 1]

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

What is a function in JavaScript?

A

performs a set of tasks, reapeat

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

Describe the parts of a function definition.

A

function name(parameter) {return}

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

Describe the parts of a function call.

A

function() or function(para)

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

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

A

name of function and argument, while definition has the.. definition

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

What is the difference between a parameter and an arguement?

A

parameter represents data that function will be called with, argument represents the actual data that’s been passed on to the function

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

Why are function parameters useful?

A

pass info to function that function needs

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

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

A

causes the function to produce a value we can use, prevents any more code in the function’s code block from being run

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

Why do we log things to the console?

A

to debug

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

What is a method?

A

a function that is a property 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

.pop()

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

round

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

.random() * range of the number

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

splice(position, how many to delete, inserting item)

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

How do you break a string up into an array?

A

split(string)

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

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

A

console.log()

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

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

A

40s

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

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

A

no

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

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

A

a lot, 40s?

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

Give 6 examples of comparison operators.

A

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

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

What is the purpose of an if statement?

A

decision making

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

Describe the syntax (structure) of an if statement?

A

if (condition) { statement }

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

What are the three logical operators?

A

! && ||

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

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

A

( ) comparison ( )

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 iterate through a process multiple times

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

loops start and stop

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

repeat

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

before statement

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

once before loop begins

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 evaluation

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 loop iteration

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

increment 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 var in object

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

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

A

specificity

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

List the three selector types in order of increasing specificity .

A

element class id

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

Why is using !important considered bad practice?

A

harder to debug

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

Why do we log things to the console?

A

to see what’s there

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

What is a “model”?

A

DOM Tree

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

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

A

html document

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

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

A

different part of the page loaded in the browser window

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

What is a DOM Tree?

A

connected nodes that represent the model

consists of 4 main types of nodes

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

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

A

getElementsByClassName(), getElementsByTagName(), querySelectorAll()

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

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

A

when working with an element more than once

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

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

A

the browser needs to parse all of the elements in the HTML page before the JavaScript code can access them

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

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

A

takes CSS selector, returns the first matching element

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

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

A

takes CSS selector, returns a NodeList of all matching elements

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

Why do we log things to the console?

A

to test and debug

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

user interaction

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

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

A

optional

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

What is a callback function?

A

a function passed into another function as an argument, which is then invoked inside the outer function

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

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

A

event object

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

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

A

where interaction occurred, MDN, debugger

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

What is the difference between these two snippets of code?

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

A

the latter won’t wait for the event

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

What is the className property of element objects?

A

gets and sets the value of the class attribute

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

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

A

elementNodeReference.className = ‘new-class’

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

What is the textContent property of element objects?

A

represents the text content of the node and its descendants

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

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

A

elementNodeReference.textContent = ‘new string’

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

It would’ve been more complicated to keep track

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

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

A

much easier to manipulate more than once, don’t depend on DOM

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

What does the transform property do?

A

manipulate images

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
149
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
150
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
151
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
152
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
153
Q

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

A

‘submit’

154
Q

What does the event.preventDefault() method do?

A

prevents default action

155
Q

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

A

reloads the page, send the info

156
Q

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

A

elements

157
Q

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

A

value

158
Q

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

A

once finished, you don’t know what’s broken

159
Q

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

A

easier to follow and debug early, access tools

160
Q

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

A

no, only creates a new element

161
Q

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

A

parentNode.appendChild(‘childNode’)

162
Q

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

A

(‘attribute’, ‘value’)

163
Q

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

A

create an element, add any class/value to it, add any text content to it, then appendChild to the corresponding parent element, set correct attribute for CSS rules

164
Q

What is the textContent property of an element object for?

A

setting the text content of the element

165
Q

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

A

setAttribute(), className, classList

166
Q

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

A

re using, modifying, and debugging each function will only effect its own little section without it harming other sections.

functions in general will be able to be called again later without having to rewrite the whole thing at another time.

167
Q

The transition property is shorthand for which four CSS properties?

A

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

168
Q

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

A

width, height

169
Q

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

A

meta viewport tag

170
Q

what is the event.target?

A

target of the event (most specific element interacted with)

171
Q

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

A

event delegation analyzes bubbled events to find a match on child elements

172
Q

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

A

event.target.tagName

173
Q

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

A

string of element name, returns itself or matching ancestor, or null

174
Q

How can you remove an element from the DOM?

A

ChildNode.remove()

175
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 the event listener to the parent element

176
Q

What is the event.target?

A

target of the event (most specific element interacted with) element which dispatches the element.

177
Q

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

A

hides the element

178
Q

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

A

string representing the selector to test

179
Q

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

A

getAttribute()

180
Q

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

A

every few steps

181
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

add event listeners to each tab

182
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 code block that checks the tab’s attribute as many as the tabs

183
Q

What is a breakpoint in responsive Web design?

A

at which point the media query applies

184
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

allows to react to the container size

185
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

cascading, happens afterwards, it overwrites / for mobile first design - media queries want to build CSS with smaller size to larger size.

186
Q

What is JSON?

A

a text-based data format following JavaScript object syntax

187
Q

What are serialization and deserialization?

A

Converting a string to a native object is called deserialization, while converting a native object to a string so it can be transmitted across the network is called serialization.

188
Q

Why are serialization and deserialization useful?

A

provides a well accepted standard for transferring data

189
Q

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

A

JSON.stringify()

190
Q

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

A

JSON.parse()

191
Q

How do you store data in localStorage?

A

localStorage.setItem(‘key’, ‘value’)

192
Q

How do you retrieve data from localStorage?

A

localStorage.getItem(‘key’)

193
Q

What data type can localStorage save in the browser?

A

string (specifically JSON strings)

194
Q

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

A

when the page is about to close (unload)

195
Q

What is method

A

function that is part of an object

196
Q

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

A

definition: writing the code, call: call the function to use

197
Q

Describe method definition syntax (structure).

A

var obj = {key: function (param) {code}};

198
Q

Describe method call syntax (structure).

A

obj.key();

199
Q

How is a method different from any other function?

A

property of an object

200
Q

What is the defining characteristic of Object-Oriented Programming?

A

objects can contain data and method

201
Q

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

A

abstraction, encapsulation, inheritance, polymorphism

202
Q

What is “abstraction”?

A

working with complex things in simple ways

203
Q

What does API stand for?

A

application programming interface

204
Q

What is the purpose of an API?

A

simplifies programming by abstracting the underlying implementation and only exposing objects or actions the developer needs.

205
Q

What is ‘this’ in Javascript?

A

an implicit parameter of all JS functions, keyword

206
Q

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

A

not explicitly written in function definition, but accesible by the function

207
Q

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

A

determined at call time

208
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 object

209
Q

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

A

It’s-a-me, Mario!

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

211
Q

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

A

object that contains ‘this’

212
Q

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

A

left of . of the method call

213
Q

What kind of inheritance does the JavaScript programming language use?

A

prototypical

214
Q

What is a prototype in JavaScript?

A

object with functionality that other object can delegate their work to

215
Q

How it is possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?

A

attach prototypes to object and call any

216
Q

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

A

prototype chain ex) array -> Array -> Object

217
Q

What does the ‘new’ operator do?

A
  1. Creates a blank, plain JavaScript object;
  2. Links (sets the constructor of) the newly created object to another object by setting the other object as its parent prototype;
  3. Passes the newly created object from Step 1 as the ‘this’ context;
  4. Returns ‘this’ if the function doesn’t return an object
218
Q

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

A

prototype

219
Q

What does the ‘instanceOf’ operator do?

A

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

220
Q

What is a “callback” function?

A

a function passed into another function as an argument

221
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(); - using once

222
Q

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

A

setInterval()

223
Q

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

A

0

224
Q

What do ‘setTimeout()’ and ‘setInterval()’ return?

A
  1. a positive integer value which identifies the timer created by the call to setTimeout()
  2. an interval ID which uniquely identifies the interval
225
Q

What is a client?

A

request services

226
Q

What is a server?

A

answer request from client, provides service

227
Q

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

A

GET

228
Q

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

A
  1. HTTP method - describes the action
  2. request target - usually a URL, path
  3. HTTP version - defines the structure
229
Q

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

A
  1. protocol version
  2. status code
  3. status text
230
Q

What are HTTP headers?

A

specifies the request, or describe the body

info related to request

231
Q

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

A

MDN

232
Q

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

A

optional

233
Q

What is AJAX?

A

a programming practice of building complex, dynamic webpages using a technology known as XMLHttpRequest /
a technique for loading data into part of a page without having to refresh the entire page

234
Q

What does the AJAX acronym stand for?

A

Asynchronous JavaScript And XML

235
Q

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

A

XMLHttpRequest

236
Q

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

A

‘load’

237
Q

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

A

addEventListener is part of EventTarget

both are descendent of EventTarget

238
Q

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

A

{}, if, else, for, do while, while, try catch

239
Q

What does block scope mean?

A

within curly braces

240
Q

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

A

block-scoped

241
Q

What is the difference between let and const?

A

let: block-scope, cannot redeclare, does not initialize after hoisting, must use let for callback function in a for loop, not part of global object as a property, declare let early or TDZ with reference error
const: read-only, block-scope, immediately initialize, TDZ, Object.freeze(), can be used in for…of

242
Q

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

A

read-only doesn’t mean that the actual value to which the const variable reference is immutable

243
Q

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

A

use const unless let is needed

244
Q

What is destructuring, conceptually?

A

assigns properties of an object or values of an array to individual variables

245
Q

What is the syntax for Object destructuring?

A

let { property: variable } = object;

246
Q

What is the syntax for Array destructuring?

A

let [x, y, z] = array;

247
Q

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

A

{ } = vs = { }

248
Q

What is the syntax for writing a template literal?

A

let variable = string ${variablename};

249
Q

What is “string interpolation”?

A

substitute part of the string for the values of variables or expressions

250
Q

What is the syntax for defining an arrow function?

A

(param1, param2) => expression;

251
Q

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

A

curly brace is not needed, unless a statement is used - return

252
Q

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

A

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

253
Q

What is a CLI?

A

command-line interface

254
Q

What is a GUI?

A

graphical user interface

255
Q

Give at least one use case for each of the commands listed in this exercise.

A

man: reference manual
cat: view file contents and concatenating them/ create file with content
ls: list current directory
pwd: print current working directory
echo: display line of text
touch: change file timestamps/ create file with no content
mkdir: make directories/ folders
mv: move/rename files
rm: remove files or directories
cp: copy files and directories

256
Q

What are the three virtues of a great programmer?

A

laziness, impatience, hubris

257
Q

What is Node.js?

A

an asynchronous event-driven JavaScript runtime,

allows javascript to be run outside of a web browser

258
Q

What can Node.js be used for?

A

, to build backends for web applications, command-line programs, or any kind of automation

259
Q

What is a REPL?

A

read-eval-print

260
Q

When was Node.js created?

A

2009

261
Q

What back end languages have you heard of?

A

php, python

262
Q

My questions reading about Node.js

A

event-driven, concurrent connections, OS threads are employed? -> thread-based networking?, not dead-locking because no locks, no direct I/O so no blocking, event loop as a runtime construct, child_process.fork(), cluster module for load balancing

263
Q

What is a computer process?

A

the instance of a computer program that is being executed by one or many threads, containing the program code and its activity

264
Q

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

A

500

265
Q

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

A

Full stack Web development is based on making multiple processes work together to form one application, so having at least a cursory awareness of computer processes is necessary.

266
Q

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

A

a ‘global’ that provides information about, and control over, the current Node.js process

267
Q

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

A

process, because it’s global variable (otherwise need ‘require’)

268
Q

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

A

object

269
Q

What is a JavaScript module?

A

individual js file, performs a small task

270
Q

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

A

exports, require, module, __filename, __dirname

271
Q

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

A

global, process, console

272
Q

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

A

to make the module readable by another file, for ease of transmit info

273
Q

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

A

const variable = require(./path);

274
Q

What is the JavaScript Event Loop?

A

look at the stack, if call stack is empty, move task queue to call stack

275
Q

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

A

blocking - synchronous, prevents other codes to run

non-blocking - asychronous

276
Q

What is a directory?

A

location

277
Q

What is a relative file path?

A

path from the current location

278
Q

What is an absolute file path?

A

path from the root location

279
Q

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

A

fs

280
Q

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

A

fs.writeFile()

281
Q

Are file operations using the ‘fs’ module synchronous or asynchronous?

A

asynchronous

282
Q

What is a client?

A

sends request

283
Q

What is a server?

A

fullfill or does not fullfil response, provides service

284
Q

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

A

GET

285
Q

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

A

http version

286
Q

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

A

http version,

287
Q

What are HTTP headers?

A

s

288
Q

Is a body required for a valid HTTP message?

A

no

289
Q

What is NPM?

A

software registry to share and borrow packages, to manage private development

290
Q

What is a package?

A

directory with files containing reusable code

291
Q

How can you create a ‘package.json’ with ‘npm’

A

npm init (–yes) for default

292
Q

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

A

object that maps a package name to a version range,

npm install -P by default

293
Q

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

A

download the module, add to package.json

294
Q

How do you add ‘express’ to your package dependencies?

A

npm install express –save (save not required anymore)

npm init

295
Q

What Express application method starts the server and binds it to a network ‘port’?

A

listen()

296
Q

How do you mount a middleware with an Express application?

A

app.use(‘mount path’, function….

297
Q

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

A

res.send or req.send

298
Q

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

A

application/json !!!!!!!!!

299
Q

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

A

passes desired outcome

300
Q

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

A

returns middleware that only parses JSON and only looks at requests where the Content-Type header matches the type option.

301
Q

What is PostgreSQL and what are some alternative relational databases?

A

relational database, MySQL, SQL Server by Microsoft, Oracle by Oracle Corporation

302
Q

What are some advantages of learning a relational database?

A

many problem domains can be modeled well, support good guarantees about data integrity, very flexible structure

303
Q

What is one way to see if PostgreSQL is running

A

sudo service postgresql status or top

304
Q

What is a database schema?

A

collection of tables

305
Q

What is a table?

A

list of rows

306
Q

What is a row?

A

entry with the same set of attributes

307
Q

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

A

declarative language, others are imparative

308
Q

How do you retrieve specific columns from a database table?

A

select

309
Q

How do you filter rows based on some specific criteria?

A

where

310
Q

What are the benefits of formatting your SQL?

A

readability

311
Q

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

A

> > = <= < =

312
Q

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

A

limit

313
Q

How do you retrieve all columns from a database table?

A

*

314
Q

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

A

order of , desc

315
Q

How do you add a row to a SQL table?

A

insert into “table”

316
Q

What is a tuple?

A

list of values

317
Q

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

A

separate tuple by comma (‘ ‘), (‘ ‘)

318
Q

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

A

returning * or “column”

319
Q

How do you update rows in a database table?

A

update “table”
set “value” = ‘ ‘
where “column” = ‘ ‘

320
Q

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

A

otherwise updates everything

321
Q

How do you delete rows from a database table?

A

delete from “table”

where “column” = ‘ ‘

322
Q

How do you accidentally delete all rows from a table?

A

not including where clause

323
Q

What is a foreign key?

A

key that connects to another table

324
Q

How do you join two SQL tables?

A

select “ “
from “table1”
join “table2” using (“id”)

325
Q

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

A

select “column”.”colName” as “newName”

326
Q

What are some examples of aggregate functions?

A

count, sum, max, min, avg

327
Q

What is the purpose of a ‘group by’ clause?

A

to remove duplicates, to collapse/group based on specific columns

328
Q

What are the three states a Promise can be in?

A

pending, fulfilled, rejected

329
Q

How do you handle the fulfillment of a Promise?

A

.then

330
Q

How do you handle the rejection of a Promise?

A

.then(.., onRejection) .catch(onRejection)

331
Q

What is ‘Array.prototype.filter’ useful for?

A

creating a new array that meets a certain condition

332
Q

What is ‘Array.prototype.map’ useful for?

A

creating a new array that has all indexes of an array manipulated

333
Q

What is ‘Array.prototype.reduce’ useful for?

A

creating a new array that performs more complex callback function

334
Q

What is “syntactic sugar”?

A

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

335
Q

What is the typeof an ES6 class?

A

function

336
Q

Describe ES6 class syntax.

A
class Name {
constructor(var) {
}
funcName() {
}
static funcName2() {
}
}
337
Q

What is “refactoring”?

A

process of restructuring existing computer code without changing its external behavior

338
Q

What is Webpack?

A

static module bundler for modern JS application into a JS file, builds dependency graphs

339
Q

How do you add a ‘devDependency’ to a package?

A

npm install –save-dev package-name

340
Q

What is an NPM script?

A

script for cli command to automate tasks

341
Q

How do you execute Webpack with ‘npm run’?

A

npm run name-of-script-under-scripts-in-package.json

342
Q

How are ES Modules different from CommonJS modules?

A

more compact syntax, structure can be statically analyzed (for static checking, optimization), support for cyclic dependencies is better, async loading

343
Q

What kind of modules can Webpack support?

A

ecma 2015, amd, commonJS, assets, webassembly modules

344
Q

What is React?

A

a JS library for building user interfaces

345
Q

What is a React element?

A

object ,, DOM,,,,,

346
Q

How do you mount a React element to the DOM?

A

import ReactDOM, use render method

347
Q

What is Babel?

A

a JS compiler, toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JS in current and older browsers or environments/ and JSX

348
Q

What is a Plug-in?

A

software component that adds a specific feature to an existing computer program, enabling customization

349
Q

What is a Webpack loader?

A

transformations that are applied to the source code of a module

350
Q

How can you make Babel and Webpack work together?

A

install babel-loader, use webpack.config.js

351
Q

What is JSX?

A

a syntax extension to JS, using HTML syntax with JS

352
Q

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

A

uses React method i.e. createElement

353
Q

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

A

@babel/plugin-transform-react-jsx

354
Q

What is a React component?

A

reusable part of UI, accept inputs and return React elements describing what should appear on the screen

355
Q

How do you define a function component in React?

A

like a normal function, first letter should be capitalized

356
Q

How do you mount a component to the DOM?

A

ReactDOM.render(element, parent)

357
Q

What are props in React?

A

object that’s passed as an argument

358
Q

How do you pass props to a component?

A

prop => <>{prop.text}<>

359
Q

How do you write JS expressions in JSX?

A

regular JS expressions wrapped in { }

360
Q

How do you create “class” component in React?

A

class ‘name’ extends React.Component

361
Q

How do you access props in a class component?

A

this.props

362
Q

What is the purpose of state in React?

A

to determine what to display

363
Q

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

A

pass ‘onClick’ attribute, define function that handles the event

364
Q

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

A

Array.map()

365
Q

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

A

unique id

366
Q

What are controlled components?

A

An input form element whose value is controlled by React, the React component that renders a form also controls what happens in that form on subsequent user input

367
Q

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

A

value, onChange

368
Q

What does ‘express.static()’ return?

A

returns middleware

369
Q

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

A

returns string absolute path to parent directory

370
Q

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

A

join and return path of parameters

371
Q

What does ‘fetch()’ return?

A

promise object

372
Q

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

A

get

373
Q

How do you specify the request method (‘get’,’post’,etc) when calling ‘fetch’?

A

second argument

374
Q

When does React call a component’s ‘componentDidMount’ method?

A

after constructor() -> static getDerivedStateFromProps() -> render() -> componentDidMount()

375
Q

Name three React.Component lifecylce methods.

A

componentDidMount, componentDidUpdate, componentWillUnmount

376
Q

How do you pass data to a child component?

A

props

377
Q

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

A

return function

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

function that returns function ultimately returns original function???

379
Q

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

A

when it’s defined

380
Q

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

A

closure??