HTML Flashcards

1
Q

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

A

In the head element

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

Where do you put visible content about the HTML document?

A

In the body element

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

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

A

Inside the HTML element

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

What is the purpose of a declaration?

A

To indicate the type of html for the browser

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

Body, head, img, h1, span

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

Provide additional information about the contents of the element

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

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

A

© (copyright symbol)

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

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

Continues on the same line as the previous element

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

width: full line, hieght: whatever amount of space it needs

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

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

A

ordered lists - list the bullet points in numerical order.

unordered lists - just bullets points

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

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

A

block elements

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

What HTML tag is used to link to another website?

A

anchor tag

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

What is an absolute URL?

A

full url, takes you to a different domain

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

What is a relative URL?

A

related to realtive pathing, stays internal to your HTML, does not change domains

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

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

A

../

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

A

/

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

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

A

../../

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 the same directory?

A

just indicate the file name

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

What is the purpose of an HTML form element?

A

collect data from users

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

Give five examples of form control elements.

A

text input, password input, checkboxes, dropdown boxes, submit buttons

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

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

A

submit, checkbox, radio

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

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

A

inline

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

What are the six primary HTML elements for creating tables?

A

table, th, tr, td, thead, tbody

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

What purpose do the thead and tbody elements serve?

A

thead lables the tables and tbody is where the data resides

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

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

A

student grade table, customer data

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

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

A

selector, property, value

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

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

A

.”class”

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

A

just type element name

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

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

A

rgb, hex, color name, hsl

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

What CSS properties make up the box model?

A

content, border, margin

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

What is a pseudo-class?

A

a keyword that specifies a special state for the element

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

What are CSS pseudo-classes useful for?

A

useful for special cases in targeting specific elements

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

Name at least two units of type size in CSS.

A

px, rem

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

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

A

nowrap

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

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

A

they are block elements

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

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

A

does not affect flow, but allows it to move freely from it’s original position

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

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

A

positioned element has taken its place in the normal layout flow, you can then modify its final position

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

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

A

takes the element out of the normal flow of the document

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

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

A

places the element above the static layer. if there is a non-static positioning set on an element, the absolute positioned element was position itself around the non-static positioned.

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

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

A

set the containing block to position relative (or other non-static position) to set it’s boundaries

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

What is the purpose of variables?

A

stores values that can be referenced in the code

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

How do you declare a variable?

A

var, const, let

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

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

A

= sign

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

What characters are allowed in variable names?

A

_, $, letters (should not use capital letters) but not numbers at the start, no special characters

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

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

A

ex: f and F are not the same, they are different

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

What is the purpose of a string?

A

store characters (often in succession) for javascript to allow transmission of data

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

What is the purpose of a number?

A

often used for counting or mathematical operations

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

What is the purpose of a boolean?

A

represent true or false

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

What does the = operator mean in JavaScript?

A

assigning a value to a variable

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

How do you update the value of a variable?

A

= operator with the new value to the variables

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

What is the difference between null and undefined?

A

null: represents a reference that points, generally intentionally, to a nonexistent or invalid object or address.
undefined: s a primitive value automatically assigned to variables that have just been declared, or to formal arguments for which there are no actual arguments

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

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

A

to help with debugging with more clairty when you are reading or someone else is reading.

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

Give five examples of JavaScript primitives.

A

undefined, strings, number, boolean, null

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

What data type is returned by an arithmetic operation?

A

numbers

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

What is string concatenation?

A

combining two strings together

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

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

A

adds one value to another

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

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

A

variable = variable + new variable -> variable += new variable

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

What are objects used for?

A

Objects group together a set of variables and functions to create a model of a something you would recognize from the real world

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

What are object properties?

A

when a variable is apart of the object

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

Describe object literal notation.

A

easiet and most popular way to create objects - curly braces and their contents

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

How do you remove a property from an object?

A

“delete”

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

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

A

bracket and dot notation

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

What are arrays used for?

A

storing information, often data that are related to each other

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

Describe array literal notation.

A

”[ ]”

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

How are arrays different from “plain” objects?

A

actual order to the list via indexes

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

What is the length property of an array?

A

used to determine have many indexes are in the array

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

How do you calculate the last index of an array?

A

array.length-1

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

What is a function in JavaScript?

A

-packing up code for reuse throughout a program
giving a name to a handful of code statements to
-make it code easier to read
-making code “dynamic”, meaning that it can be written once to handle many (or even infinite!) situations

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

Describe the parts of a function definition.

A

The function keyword to begin the creation of a new function.
An optional name. (Our function’s name is sayHello.)
A comma-separated list of zero or more parameters, surrounded by () parentheses. (Our sayHello function doesn’t have any parameters.)
The start of the function’s code block, as indicated by an { opening curly brace.
An optional return statement. (Our sayHello function doesn’t have a return statement.)
The end of the function’s code block, as indicated by a } closing curly brace.

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

Describe the parts of a function call.

A
  • The function’s name.

- A comma-separated list of zero or more arguments surrounded by () parentheses.

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

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

A

the definition defines how the funciton should operate, function call is getting the function to actual perform the designed function

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

What is the difference between a parameter and an argument?

A

parameter is the input in the definintion, argument is during the function call

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

Why are function parameters useful?

A

You can think of a parameter as a placeholder. It is basically a variable whose value is not known until we call the function and pass an argument. When the function’s code block is run, the parameter is will be holding the value of the argument

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

What is a method?

A

function that is a property of an object

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

How is a method different from any other function?

A

it is a property of an object - syntax will differ

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

How do you remove the last element from an array?

A

pop method

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

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

A

floor method of the Math object

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

How do you generate a random number?

A

Math.random()

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

How do you delete an element from an array?

A

pop, shift, splice

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

How do you append an element to an array?

A

push, unshift, splice

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

How do you break a string up into an array?

A

split method

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

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

A

no, to check you can console log or check MDN

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

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

A

36

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

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

A

MDN

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

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

A

33

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

Give 6 examples of comparison operators.

A

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

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

What is the purpose of an if statement?

A

lets you get different results for different data

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

Describe the syntax (structure) of an if statement.

A

if (condition) {code block}

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

What are the three logical operators?

A

&&, ||, !

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

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

A

using logical operators && ||

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

What is the purpose of a loop?

A

checks a condition in a repeatable fashion

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

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

A

based on the outcome of the condition (either true or false) it will determine which action will be taken or to be repeated

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

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

A

a series of repeatable steps->the beginning of when the condition is being evaluated is the iteration

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

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

A

as long as the condition evaluates to true - gets evaluated at beginning

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

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

A

An expression (including assignment expressions) or variable declaration evaluated once before the loop begins

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

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

A

An expression to be evaluated before each loop iteration

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

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

A

An expression to be evaluated at the end of each loop iteration

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

What does the ++ increment operator do?

A

adds 1 to a number

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

How do you iterate through the keys of an object?

A

for in loops

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

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

A

Source order is, simply put, the order that your CSS rules are written in your stylesheet` - lower in stylesheet will have priority

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

List the three selector types in order of increasing specificity.

A

type selector, class selector, id selector

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

Why is using !important considered bad practice?

A

because it makes debugging more difficult by breaking the natural cascading in your stylesheets

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

Why do we log things to the console?

A

debugging and learning purposes

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

What is a “model”?

A

a repeatable template

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

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

A

the HTML page

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

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

A

represents a different part of the page that is loaded in the browser window

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

What is a DOM Tree?

A

DOM specifies the way in which the
browser should structure this model using
a DOM tree

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

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

A

document.getElementById(), document.querySelector()

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

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

A

querySelectorAll()

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

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

A

if you need to work with the element multiple times in the code

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

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

A

console.dir()

dir = directory

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

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

A

html needs to load before javascript can work with DOM

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

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

A

Uses a CSS selector, and returns

the first matching element.

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

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

A

Uses a CSS selector to select all

matching elements as a node list (basically an array for HTML elements)

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

What is the purpose of events and event handling?

A

allows for scripts to be run to allow the page to be more interactive

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

What is a callback function?

A

a function that is called within another function

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

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

A

the event object

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

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

A

The target property of the Event interface is a reference to the object onto which the event was dispatched. - can check mdn or console log

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

What is the difference between these two snippets of code?

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

A

adding () will cause the function to run right away. but for events you want to wait until after it is triggered

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

What is the className property of element objects?

A

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

139
Q

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

A

elementNodeReference.className = cName;

140
Q

What is the textContent property of element objects?

A

The textContent property of the Node interface represents the text content of the node and its descendants.

141
Q

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

A

node.textContent = string

142
Q

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

A

not always because not all functions will use the event and just use variables.

143
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

more complicated

144
Q

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

A

easier to access the variables becuase for DOM you should have to query it

145
Q

What does the transform property do?

A

lets you rotate, scale, skew or translate an element

146
Q

Give four examples of CSS transform functions.

A

rotate, scale, skew, translate

147
Q

The transition property is shorthand for which four CSS properties?

A

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

148
Q

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

A

no it does not, you need to use appendChild to insert

149
Q

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

A

appendChild()

150
Q

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

A

setAttribute(‘attribute type’, ‘value’)

151
Q

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

A

createElement() then appendChild()

152
Q

What is the textContent property of an element object for?

A

gives the element object value

153
Q

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

A

setAttribute(), .className

154
Q

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

A

can create more than 1 DOM tree, very easy to test since there is a return value

155
Q

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

A

min-width, max width; color, display mode, etc

156
Q

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

A

viewport

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

157
Q

What is the event.target?

A

The target property of the Event interface is a reference to the object onto which the event was dispatched

158
Q

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

A

due to event bubbling

159
Q

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

A

event.target.tagName

160
Q

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

A

takes a css selector and finds the closest element with the css selector value - returns closest ancestor

161
Q

How can you remove an element from the DOM?

A

remove method

162
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 event listener to parent - event delegation

163
Q

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

A

does not render anything within that element at all

164
Q

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

A

takes a selector and returns a boolean

165
Q

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

A

getAttribute

166
Q

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

A

for testing

167
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

you would have to assign those tab and views separately

168
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

have to write each check individually

169
Q

What is a breakpoint in responsive Web design?

A

The points at which a media query is introduced are known as breakpoints.

170
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

so the page will dynamically fit with percentages

171
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

for css, the rules at the bottom take priority -> source order

172
Q

What is JSON?

A

JavaScript Object Notation: a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications

173
Q

What are serialization and deserialization?

A

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

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

174
Q

Why are serialization and deserialization useful?

A

allows you to send data across the network

175
Q

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

A

JSON.stringify()

176
Q

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

A

JSON.parse()

177
Q

How to you store data in localStorage?

A

localStorage.setItem()

The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key’s value if it already exists.

178
Q

How to you retrieve data from localStorage?

A

localStorage.getItem()

The getItem() method of the Storage interface, when passed a key name, will return that key’s value, or null if the key does not exist, in the given Storage object.

179
Q

What data type can localStorage save in the browser?

A

string

180
Q

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

A

The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.

181
Q

What is a method?

A

a function defined within an object to a property

182
Q

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

A

definition has keyword function and call has property name and arguments

183
Q

Describe method call syntax (structure).

A

object.methodName(argument)

184
Q

How is a method different from any other function?

A

specifically only used within objects. need to access the object before you can access the method

185
Q

What is the defining characteristic of Object-Oriented Programming?

A

object can contain both data and behavior of code

186
Q

What is the defining characteristic of Object-Oriented Programming?

A

object can contain both data and behavior of code

187
Q

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

A

abstraction, encapsulation, inheritance, polymorphism

188
Q

What is “abstraction”?

A

the process of removing temporal details to focus on core details

189
Q

What does API stand for?

A

application programming interface

190
Q

What is the purpose of an API?

A

let’s two different applications talk to each other

191
Q

What is this in JavaScript?

A

this is an implicit parameter of all JavaScript functions.

192
Q

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

A

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

193
Q

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

A

call time

194
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

195
Q
var character = {
  firstName: 'Mario',
  greet: function () {
    var message = 'It\'s-a-me, ' + this.firstName + '!';
    console.log(message);
  }
};

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

A

It’s a me, Mario!

the this is referring to the character object which is accessing the firstName property of the character object.

196
Q
var character = {
  firstName: 'Mario',
  greet: function () {
    var message = 'It\'s-a-me, ' + this.firstName + '!';
    console.log(message);
  }
};
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
A

since there is not defied object, the global object will be window. but since window does not have a firstName property, it will be undefined.

197
Q

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

A

we don’t know

198
Q

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

A

the value of this can be recognized as “the object to the left of the dot” when the function is called (as a method).

199
Q

What kind of inheritance does the JavaScript programming language use?

A

prototype based inheritance

200
Q

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

A

they all have inherited prototypes that allow them to call those methods

201
Q

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

A

under __proto__

202
Q

What does the new operator do?

A

creates an instance of an object, sets the prototypes and link it to ‘this’ and returns ‘this’

203
Q

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

A

prototype property

204
Q

What does the instanceof operator do?

A

checks the argument on the left and if it is the same as the argument on the right, returns a boolean value

205
Q

What is a “callback” function?

A

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

206
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

use the setTimeout method and specify a delay time

207
Q

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

A

use the setInterval method

208
Q

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

A

0

209
Q

What do setTimeout() and setInterval() return?

A

it will return positive integers that represent the interval ID

210
Q

what is a client?

A

system or application that requests for data

211
Q

what is a server?

A

system or application that gives data

212
Q

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

A

GET

213
Q

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

A

http method, request target, http version

214
Q

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

A

http method, request target, http version

215
Q

What are HTTP headers?

A

properties that specifies request or response

216
Q

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

A

MDN

217
Q

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

A

no they are not always required

218
Q

What is AJAX?

A

Ajax allows you to request data from a server and load it without having to refresh the entire page

219
Q

What does the AJAX acronym stand for?

A

Asynchronous JavaScript And XML

220
Q

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

A

XMLHttpRequest

221
Q

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

A

load

222
Q

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

A

the prototypes for XMLHttpRequest objects are inherited from EventTarget prototype

223
Q

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

A

a section of code

224
Q

What does block scope mean?

A

an area in which a variable can be referenced and can only be referenced in that scope

225
Q

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

A

const or let are set in the code block they are declared in

226
Q

What is the difference between let and const?

A

let: block-scoped variables that are mutable
const: block-scoped variables that are immutable

227
Q

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

A

value of the const is mutable

228
Q

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

A

const - when you plan on not changing or reassign the variable
let- when you plan on changing it
*always plan on using const first and then use let if you can’t at that point

229
Q

What is destructuring, conceptually?

A

make it possible to unpack variables

230
Q

What is the syntax for Object destructuring?

A

let or const { property keys} = object

231
Q

What is the syntax for Array destructuring?

A

let or const [ property keys ] = array

232
Q

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

A

look at where the variable name is on the equal sign. if on the right it is a destructing. if on the left it is a literal

233
Q

What is the syntax for writing a template literal?

A

${string}

234
Q

What is “string interpolation”?

A

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

235
Q

What is the syntax for defining an arrow function?

A

(p1, p2, …, pn) => expression;

236
Q

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

A

without curly braces means it’s for expression but if you need to use a statement then you need to use a curly brace and it is going to return a value when using curly brace.

237
Q

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

A

in the arrow function, the this, arguments, super, new.target are lexical. It means that the arrow function uses these variables (or constructs) from the enclosing lexical scope. -> value of ‘this’ is defined in the definition. in a normal function , ‘this’ is defined at call time, typically use arrow function as callback functions

238
Q

What is Node.js?

A

Node.js is a program that allows JavaScript to be run outside of a web browser. It also allows non-block coding which allows multiple actions to be done simultaneously

239
Q

What can Node.js be used for?

A

back end development, command line programs or automation

240
Q

What is a REPL?

A

stands for read-eval-print loop: a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user; a program written in a REPL environment is executed piecewise

241
Q

When was Node.js created?

A

2009 by ryan dahl

242
Q

What is a computer process?

A

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

243
Q

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

A

around 100

244
Q

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

A

full stack is based on making multiple processes work together - front end, back end and database and it will require to know how computer processes exist

245
Q

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

A

The process object is a global that provides information about, and control over, the current Node.js process. As a global, it is always available to Node.js applications without using require().

246
Q

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

A

since it’s global we just reference it

247
Q

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

A

an array

248
Q

What is a JavaScript module?

A

a single javascript file

249
Q

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

A

export, require, module, __filename, __dirname

250
Q

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

A

clearImmediateFunction,

setTimeout, URL, process, global

251
Q

What is the JavaScript Event Loop?

A

takes callbacks from callback queue and puts them on stack

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

252
Q

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

A

blocking: when it is in the stack for a long time
non-blocking: when it is completed in the stack quickly
basically the difference is depending how long it sits on the stack

253
Q

What is a directory?

A

a folder

254
Q

What is a relative file path?

A

path to file based off current location (anything that doesn’t start with a ‘/’)

255
Q

What is an absolute file path?

A

the whole file path starting from the root (‘/’)

256
Q

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

A

‘fs’ module

257
Q

What is NPM?

A

node package manager - it is a website, CLI and registry.

npm is the world’s largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.

258
Q

What is a package?

A

A package is a file in a directory that is described by a package.json file. A package must contain a package.json file in order to be published to the npm registry

259
Q

How can you create a package.json with npm?

A

npm init –yes

260
Q

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

A

Having dependencies in your project’s package.json allows the project to install the versions of the modules it depends on

261
Q

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

A

Having dependencies in your project’s package.json allows the project to install the versions of the modules it depends on

262
Q

How do you add express to your package dependencies?

A

npm install express - the package.json gets updated and node_modules get updated.

263
Q

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

A

req (request), res(response), next

264
Q

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

A

req (request), res(response), next

265
Q

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

A

Content-Type: application/json; charset=utf-8

266
Q

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

A

HTTP request method is arbitrary, we mean it to do something but we can have it do anything. HTTP method is to express intent

267
Q

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

A

This is a built-in middleware function in Express. It parses incoming requests with JSON payloads and is based on body-parser.

Returns middleware that only parses JSON and only looks at requests where the Content-Type header matches the type option. This parser accepts any Unicode encoding of the body and supports automatic inflation of gzip and deflate encodings.

A new body object containing the parsed data is populated on the request object after the middleware (i.e. req.body), or an empty object ({}) if there was no body to parse, the Content-Type was not matched, or an error occurred.

ex: app.use(express.json())

268
Q

What is PostgreSQL and what are some alternative relational databases?

A

PostgreSQL is a powerful, free, open source Relational Database Management System (RDBMS).

alternative relational databases: Other popular relational databases include MySQL (also free), SQL Server by Microsoft, and Oracle by Oracle Corporation

269
Q

What are some advantages of learning a relational database?

A

Many problem domains can be modeled well using a relational database. If you are storing related data, then a relational database is probably a good first choice

A quality of many relational databases is that they support good guarantees about data integrity. They can store and modify data in a way that makes data corruption as unlikely as possible

270
Q

What is one way to see if PostgreSQL is running?

A

sudo service postgresql status

271
Q

What is a database schema?

A

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

272
Q

What is a table?

A

Relational databases store data in relations, commonly referred to as tables

273
Q

What is a row?

A

A table is a list of rows each having the same set of attributes. For example, all students in a “students” table could have “firstName”, “lastName”, and “dateOfBirth” attributes. Attributes are commonly referred to as columns.

274
Q

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

A

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

275
Q

How do you retrieve specific columns from a database table?

A

SELECT “name of column”

276
Q

How do you filter rows based on some specific criteria?

A

use WHERE

277
Q

What are the benefits of formatting your SQL?

A

SQL does not have to be indented, but you should do it anyway for consistent style and therefore readability.

278
Q

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

A

=, !=,

279
Q

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

A

Limit (number)

280
Q

How do you retrieve all columns from a database table?

A

Select *

281
Q

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

A

Order by “name of column”

282
Q

How do you update rows in a database table?

A

using UPDATE and SET “keywords”

283
Q

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

A

not using WHERE will mean that you updating all the rows that contains the column in the table. where helps you specifcy

284
Q

How do you add a row to a SQL table?

A

INSERT INTO “keywords”

285
Q

What is a tuple?

A

list of values

286
Q

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

A

in VALUES, you specificy more than one input using ,

287
Q

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

A

use RETURNING “keywords”

288
Q

How do you delete rows from a database table?

A

DELETE FROM “keywords”

289
Q

How do you accidentally delete all rows from a table?

A

using DELETE FROM without using WHERE to specify what you want to delete

290
Q

How do you join two SQL tables?

A

JOIN “keyword” USING (“another keyword”)

291
Q

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

A

“newname”.column as “keyword replaced by newname”

292
Q

What is a foreign key?

A

Notice how each row in the “products” table has a “supplierId” column. That column specifically refers to values in the “supplierId” column of the “suppliers” table. This is known as a foreign key. Instead of putting all of the supplier information for a product into the product row itself, there is instead just one column that links the “products” table to the “suppliers” table.

293
Q

What are the three states a Promise can be in?

A

A Promise is in one of these states:

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

294
Q

How do you handle the fulfillment of a Promise?

A
const promise1 = new Promise((resolve, reject) => {
  resolve('Success!');
});

promise1.then((value) => {
console.log(value);
// expected output: “Success!”
});

295
Q

How do you handle the rejection of a Promise?

A
const promise1 = new Promise((resolve, reject) => {
  throw 'Uh-oh!';
});

promise1.catch((error) => {
console.error(error);
});
// expected output: Uh-oh!

296
Q

What is Array.prototype.filter useful for?

A

when you want to exclude certain elements from an array

297
Q

What is Array.prototype.map useful for?

A

when you need to manipulate all elements of an array

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

298
Q

What is Array.prototype.reduce useful for?

A

when you want to output a single value from an array

299
Q

What is “syntactic sugar”?

A

syntax that is easier to read but does not change the behavior of the code

300
Q

Describe ES6 class syntax.

A

class “name” {
contructor() {
}

prototypes()
}

301
Q

What is “refactoring”?

A

changing the code in a way that doesn’t change the external behavior of the code. refactoring can be used to make code less complex, shorter, more efficient, extc

302
Q

What is the typeof an ES6 class?

A

function

303
Q

What is Webpack?

A

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

304
Q

How do you add a devDependency to a package?

A

to add devDependency you can use –save-dev

305
Q

What is an NPM script?

A

The “scripts” property of of your package.json file supports a number of built-in scripts and their preset life cycle events as well as arbitrary scripts. These all can be executed by running npm run-script or npm run for short

An npm script is a convenient way to bundle common shell commands for your project.

306
Q

How do you execute Webpack with npm run?

A

npm run ‘script alias’

307
Q

How are ES Modules different from CommonJS modules?

A

The goal for ECMAScript 6 modules was to create a format that both users of CommonJS and of AMD are happy with:

  • Similar to CommonJS, they have a compact syntax, a preference for single exports and support for cyclic dependencies.
  • Similar to AMD, they have direct support for asynchronous loading and configurable module loading.

Being built into the language allows ES6 modules to go beyond CommonJS and AMD (details are explained later):

  • Their syntax is even more compact than CommonJS’s.
  • Their structure can be statically analyzed (for static checking, optimization, etc.).
  • Their support for cyclic dependencies is better than CommonJS’s.

The ES6 module standard has two parts:

  • Declarative syntax (for importing and exporting)
  • Programmatic loader API: to configure how modules are loaded and to conditionally load modules

https://2ality.com/2014/09/es6-modules-final.html#module-systems-for-current-javascript

308
Q

What kind of modules can Webpack support?

A

ecmaScript, CommonJS, AMD, Asssets, WebAssembly

309
Q

What is React?

A

a javascript library for building user interfaces

310
Q

What is a React element?

A

an object

react elements are not dom elements

311
Q

How do you mount a React element to the DOM?

A

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

*If the React element was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.

312
Q

What is Babel?

A

Babel is a JavaScript compiler

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

  • Transform syntax
  • Polyfill features that are missing in your target environment (through @babel/polyfill)
  • Source code transformations (codemods)`
313
Q

What is a Plug-in?

A

In computing, a plug-in (or plugin, add-in, addin, add-on, or addon) is a software component that adds a specific feature to an existing computer program.

314
Q

What is a Webpack loader?

A

Loaders are transformations that are applied to the source code of a module.

They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

315
Q

How can you make Babel and Webpack work together?

A

installing Babel Loader

316
Q

What is JSX?

A

It is called JSX, and it is a syntax extension to JavaScript. JSX produces React “elements”. XML and HTML like syntax extension. Javascript + some extra stuff

317
Q

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

A

JSX requires the methods in React

318
Q

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

A

Babel loader and the webpack.config.js file

319
Q

What is a React component?

A

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

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

320
Q

How do you define a function component in React?

A
function 'functionName' (props) {
  return value;
}
321
Q

How do you mount a component to the DOM?

A

ReactDOM.render(element, container)

322
Q

What are props in React?

A

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. ( one way from parent to child)

props is an object

323
Q

How do you pass props to a component?

A

{props}

324
Q

How do you write JavaScript expressions in JSX?

A

wrapping it in curly braces

ex:
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
element,
document.getElementById(‘root’)
);

325
Q

How do you create “class” component in React?

A
class 'className' extends React.Component {
 render() {
   return react element
  }
}
326
Q

How do you access props in a class component?

A

‘this’ keyword
ex
{this.props.text}

327
Q

What is the purpose of state in React?

A

for any variables or properties that you want to manipulate or change throughout the code

328
Q

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

A

using “on” + “name of event handler you want” as a prop

329
Q

What are controlled components?

A

An input form element whose value is controlled by React

330
Q

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

A

value and onChange props

331
Q

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

A

map

332
Q

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

A

strings

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

333
Q

What does express.static() return?

A

Create a new middleware function to serve files from within a given root director. returns a middleware function

334
Q

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

A

The directory name of the current module.

335
Q

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

A

The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.

336
Q

What does fetch() return?

A

A Promise that resolves to a Response object.

337
Q

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

A

GET

338
Q

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

A

after specfying the resource in the arugment, there is an optional space to specify the request method

339
Q

When does React call a component’s componentDidMount method?

A

after it renders the first time

340
Q

Name three React.Component lifecycle methods.

A

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
constructor->render->componentDidMount

341
Q

How do you pass data to a child component?

A

props

342
Q

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

A

returns a function

function foo() {
 return foo
}

foo returns foo

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

wrap will give you back to the value

closures allow you to access data within a function

344
Q

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

A

when it’s defined