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

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, debug

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

content width?

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)

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

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

194
Q

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

A

when the page is about to close

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