Module 1 Flashcards
1
Q
Give five examples of HTML element tags.
A
<p>, <img></img>, </p>
,<span> ,</span>, h1, h2
2
Q
What is the purpose of HTML attributes?
A
allow you to add functionality to an HTML element
3
Q
Give an example of an HTML entity (escape character).
A
Copyright symbol (©)
4
Q
Where do you put visible content about the HTML document?
A
inside of the body element
5
Q
Where do the body and head tags go in a valid HTML document?
A
inside of the main html element
6
Q
Where do you put non-visible content about the HTML document?
A
head element
7
Q
What is the purpose of the DOCTYPE element
A
to declare the version of HTML that the webpage uses
8
Q
How do block-level elements affect the document flow?
A
they are shown on a new line; can add individual CSS styling using CLASS or ID attributes
9
Q
How do inline elements affect the document flow?
A
are shown on the same line as elements before or after; can add CSS styling
10
Q
What are the default width and height of a block-level element?
A
width: 100% of the parent element
height: height of content
11
Q
What are the default width and height of an inline element?
A
only take as much space as needed (even if you set height and width attributes)
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
ordered lists = numbered
unordered = bullet points
13
Q
Is an HTML list a block element or an inline element?
A
block
14
Q
What HTML tag is used to link to another website?
A
anchor (a) tag (usually w/ href attribute)
15
Q
What is an absolute URL?
A
URL that referneces a different website
16
Q
What is a relative URL?
A
URL of another page of same website
17
Q
How do you indicate the relative link to a parent directory?
A
two dots and a forward-slash (../)
18
Q
How do you indicate the relative link to a child directory?
A
a forward-slash and the name of the directory (/__CHILD NAME__)
19
Q
How do you indicate the relative link to a grand parent directory?
A
two dots, back-slash, two dots, forward-slash (../../_file name__)
20
Q
How do you indicate the relative link to the same directory?
A
just the file name or a dot and forward-slash (./)
21
Q
What is the purpose of an HTML form element?
A
to allow the user to enter data and the webpage to collect that data
22
Q
Give five examples of form control elements.
A
text, textarea, radio buttons, checkbox, select (dropdown list), submit button, file upload
23
Q
Give three examples of “type” attributes for HTML input elements
A
“radio” (radio buttons), “text” (simple text), “submit” (submit button), “checkbox” (check box), “file” (upload a file), “hidden” (adds functionality to other element w/out alerting user), “password”, “email”
24
Q
Is an HTML input element a block element or an inline element?
A
inline
25
What are the six primary HTML elements for creating tables?
```
"table"
"tr"
"td"
"th"
"tbody"
"thead"
```
26
What purpose do the "thead" and "tbody" elements serve?
they distinguish the content of the table from one another for screen reading and styling; divide table and give some info about what is in the divisions
27
Give two examples of data that would lend itself well to being displayed in a table.
financial report, sports statistics
28
What are the names of the individual pieces of a CSS rule?
selector and declaration block
29
In CSS, how do you select elements by their class attribute?
CSS: . __classname__{ }
HTML: include "class = ___" attribute in the opening tag of the element
30
In CSS, how do you select elements by their type?
list the element type as the selector
31
In CSS, how do you select an element by its id attribute?
CSS: # __idname__ { }
HTML: include "id = ___" attribute in the opening tag of the element
32
Name three different types of values you can use to specify colors in CSS.
RGB, hexcode and color name
33
What CSS properties make up the box model?
Margin, border, padding, content
34
Which CSS property pushes boxes away from each other?
margin
35
Which CSS property pushes box content away from its border?
padding
36
What is a pseudo-class?
keyword added to a selector that specifies a special state of the selected element(s); use ' : ' to specify pseudo-class
37
What are CSS pseudo-classes useful for?
making pages more interactive
38
What CSS properties make up the box model?
margin, border, padding
39
Which CSS property pushes boxes away from each other?
margin
40
Which CSS property add space between a box's content and its border?
padding
41
Name at least two units of type size in CSS.
pixel, percentage, em
42
What CSS property controls the font used for the text inside an element?
"font-family"
43
What is the default flex direction of a flex container
row
44
What is the default flex wrap of a flex container
no wrap
45
Why do two div elements "vertically stack" on one another by default?
they are block level elements (block level elements take up 100% of the width of the parent element)
46
What is the default flex-direction of an element with display : flex?
row (L to R)
47
What is the default value for the position property of HTML elements?
static
48
How does setting position: relative on an element affect document flow?
it doesn't; the element stays in the doc flow
49
How does setting position:relative on an element affect where it appears on the page?
it doesnt; but you can move the element in relation to where it would be in it's fixed position using the 4 box offset properties
50
How does setting position:absolute on an element affect document flow?
it takes the element out of the normal doc flow; other elements will respond to the space the element takes up
51
How does setting position:absolute on an element affect where it appears on the page?
it appears above the parent element
52
How do you constrain an absolutely positioned element to a containing block?
put absolutely positioned element inside a div element w/ position set to
53
What are the four box offset properties?
top, bottom, left, right
54
What is the purpose of variables?
to hold data for future use
55
How do you declare a variable?
using var __var name__ = __value__; using the var keyword
56
How do you initialize (assign a value to) a variable?
using = (assignment operator)
57
What characters are allowed in variable names?
LETTERS, $, _; cant begin w/ a number
58
What does it mean to say that variable names are "case sensitive"?
there is a difference between a capital and lowercase letter in the variable names
59
What is the purpose of a string?
to hold text content
60
What is the purpose of a number?
to hold numerical characters; allow for mathematical calcs
61
What is the purpose of a boolean?
to hold logical values (true and false)
62
What does the = operator mean in JavaScript?
assignment operator; assigns a value to something
63
How do you update the value of a variable?
__name of var__ = __new value__
64
What is the difference between null and undefined?
null is an intentionally invalid/nonexistent value; undefined is a value that does not exist
null = empty parking lot (created to be empty); undefined = open field (empty by its nature)
65
Why is it a good habit to include "labels" when you log values to the browser console?
for readability, clarity, and debugging
66
Give five examples of JavaScript primitives.
numbers, strings, boolean, null and undefined
67
What data type is returned by an arithmetic operation?
numeric
68
What is string concatenation?
the combining of >=two strings to make one string
69
What purpose(s) does the + plus operator serve in JavaScript?
addition, concatenation
70
What data type is returned by comparing two values (, ===, etc)?
Boolean
71
What does the += "plus-equals" operator do?
it increments/concatenates and reassigns the new value to the original variable
72
What are objects used for?
to store information in key:value pairs; used to model real world data
73
What are object properties?
they are the keys of the key:value pairs inside an object
74
Describe object literal notation.
declaring the object name using the 'var' keyword and { }
75
How do you remove a property from an object?
the 'delete' keyword
76
What are the two ways to get or update the value of a property?
dot notation: __obj name__ . __key name__ = __value___
bracket notation: __obj name__ [ __key name__] = __value___
77
What are arrays used for?
storing a list of related values
78
Describe array literal notation.
declare a variable --> assign variable a set of values contained in [ ] and separated by commas
79
How are arrays different from "plain" objects?
they are indexed, they do not have key:value pairs
80
What number represents the first index of an array?
0
81
What is the length property of an array?
a tool to get the number of items in an array
82
How do you calculate the last index of an array?
__array name__ . length - 1
83
What is a function in JavaScript?
a way to store and reuse code that produces an output
84
Describe the parts of a function definition.
```
function __functName__(parameter1, ... ) {
__code__
return __output__
}
```
85
Describe the parts of a function call.
__functionName__ (argument1,...)
86
When comparing them side-by-side, what are the differences between a function call and a function definition?
the code, curly braces, and return are in the definition
| arguments are in function call
87
What is the difference between a parameter and an argument?
parameter is a local variable used to create the function; an argument is a data input that helps create the output
88
Why are function parameters useful?
because they enable the user to input data to the function
89
What two effects does a return statement have on the behavior of a function?
it ends the function and outputs a result
90
Why do we log things to the console?
for debugging purposes
91
What is a method?
a method is a function that belongs to an object
92
How is a method different from any other function?
it is inside of an object
93
How do you remove the last element from an array?
.pop( ) method
94
How do you round a number down to the nearest integer?
.shift( ) method
95
How do you generate a random number?
math.random( ) method of the math object
96
How do you delete an element from an array?
.splice(_index_, __# of things to delete from the index__)
97
How do you append an element to an array?
.push( ) ; also returns length of new array
98
How do you break a string up into an array?
.split( __what you want to split at__ ) ; breaks string into an array of sub-strings split at what's in the ( )
99
Do string methods change the original string? How would you check if you weren't sure?
no, they return a new string ; log it to the console
100
Roughly how many string methods are there according to the MDN Web docs?
~30
101
Is the return value of a function or method useful in every situation?
no
102
Roughly how many array methods are there according to the MDN Web docs?
many
103
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
104
Give 6 examples of comparison operators.
=== , == , != , > , >= , < , <=
105
What data type do comparison expressions evaluate to?
boolean
106
What is the purpose of an if statement?
to evaluate a condition and make a decision
107
Is else required in order to use an if statement?
no
108
Describe the syntax (structure) of an if statement.
if (__condition__) {
----code------
}
109
What are the three logical operators?
&&& , || , !
110
How do you compare two different expressions in the same condition?
using logical operators (&& , ||, !)
111
What are the four components of "the Cascade".
source order, inheritance, specificity and "!important"
112
What does the term "source order" mean with respect to CSS?
where the css rule set is in the stylesheet (towards the top or bottom); towards the bottom = more powerful
113
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
114
List the three selector types in order of increasing specificity.
type selectors, class selector, ID selector
115
Why is using !important considered bad practice?
it makes debugging more difficult by breaking the natural order of the css cascade
116
What is the purpose of a loop?
to repeat a block of code
117
What is the purpose of a condition expression in a loop?
to decide if it's appropriate to run another iteration of the code
118
What does "iteration" mean in the context of loops?
the number of times a loop is repeated
119
When does the condition expression of a while loop get evaluated?
before every iteration of the loop runs
120
When does the initialization expression of a for loop get evaluated?
at the beginning of the 1st iteration
121
When does the condition expression of a for loop get evaluated?
before every iteration
122
When does the final expression of a for loop get evaluated?
after every iteration
123
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
124
What does the ++ increment operator do?
increases var/number/etc by 1
125
How do you iterate through the keys of an object?
use a for (___ in __obj_)
126
Why do we log things to the console?
debugging and they show the data
127
What is a "model"?
how something is represented
128
Which "document" is being referred to in the phrase Document Object Model?
the document node
129
What is the word "object" referring to in the phrase Document Object Model?
different nodes
130
What is a DOM Tree?
the heirarchy of the nodes
131
Give two examples of document methods that retrieve a single element from the DOM.
getElementById(), querySelector()
132
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll()
133
Why might you want to assign the return value of a DOM query to a variable?
to use it more than once and save time
134
What console method allows you to inspect the properties of a DOM element object?
console.dir
135
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
if the script tag is at the bottom, you cannot query the dom bc they 'do not exist' ; need html to be run before
136
What does document.querySelector() take as its argument and what does it return?
input: css selector in quotes
return: first html element that has that css selector
137
What does document.querySelectorAll() take as its argument and what does it return?
input: any css selector in quotes
return a NodeList
138
Why do we log things to the console?
debugging or code checking
139
What is the purpose of events and event handling?
to make more interactive and dynamic websites
140
What do [ ] square brackets mean in function and method syntax documentation?
__
141
What method of element objects lets you set up a function to be called when a specific type of event occurs?
.addEventListener
142
What is a callback function?
a function that is a parameter of another function
143
What object is passed into an event listener callback when the event fires?
__
144
What is the "event.target"? If you weren't sure, how would you check? Where could you get more information about it?
the element that the event listener acts on
log the event.target to the console
145
What is the difference between these two snippets of code?:
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
the 2nd fires when the page loads; the 1st operates on the click
146
What is the className property of element objects?
the css class that is applied to the html element
147
How do you update the CSS class attribute of an element using JavaScript?
access className of element and assign it to a variable--> update variable --> reaccess node/element.className = new value
148
What is the textContent property of element objects?
the text content of the node and its child nodes
149
How do you update the text within an element using JavaScript?
access text content --> use . replace() or reassign --> access node.textContent = newtext
150
Is the event parameter of an event listener callback always useful?
no
151
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
harder
152
Why is storing information about a program in variables better than only storing it in the DOM?
__
153
What does the transform property do?
rotates, skews, scale, or translate an element
154
Give four examples of CSS transform functions.
```
rotate
translate
matrix
skew
scale
```
155
The transition property is shorthand for which four CSS properties?
transition property, trans. duration, easing, delay
156
What event is fired when a user places their cursor in a form control?
focus
157
What event is fired when a user's cursor leaves a form control?
blur
158
What event is fired as a user changes the value of a form control?
input
159
What event is fired when a user clicks the submit button within a form?
submit
160
What does the event.preventDefault() method do?
stops the default action of an event from happening
161
What does submitting a form without event.preventDefault() do?
updates the url of the page as the user enters info; causes page to reload
162
What property of a form element object contains all of the form's controls.
the elements object (document.forms. ___ . elements)
163
What property of a form control object gets and sets its value?
doc... forms...___..ele___.value
164
What is one risk of writing a lot of code without checking to see if it works so far?
having to backtrack thru multiple loops to debug
165
What is an advantage of having your console open when writing a JavaScript program?
you can see the JS console logs while you are working with before/after you work with them; you can see errors as you go
166
Does the document.createElement() method insert a new element into the page?
no
167
How do you add an element as a child to another element?
__parent node__.appendChild(__newNode__)
168
What do you pass as the arguments to the element.setAttribute() method?
the name of the attribute in "" and the value of the attribute in ""
169
What steps do you need to take in order to insert a new element into the page?
1) create element using: .createElement() or. createTextNode()
2) query DOM for parent node
3) use __parent__.appendChild(__neeElm__)
170
What is the textContent property of an element object for?
to view/set the text content
171
Name two ways to set the class attribute of a DOM element.
setAttribute(__att__, __value__); __elm__.className =
172
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
more dynamic
| can reuse the code
173
Give two examples of media features that you can query in an @media rule.
width and height
174
Which HTML meta tag is used in mobile-responsive web pages?
meta name= "viewport"
175
What is the event.target?
the target of the event listener
176
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
177
What DOM element property tells you what type of element it is?
event.type
178
What does the element.closest() method take as its argument and what does it return?
argument = css selector
return = the nearest ancestor element
179
How can you remove an element from the DOM?
__elm__.remove()
180
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?
add it to the parent elm (event bubbling will activate)
181
What is the event.target?
the element that an event occurred on
182
What is the affect of setting an element to display: none?
it is hidden and does not take up space (visabilty: none element still takes up space on page)
183
What does the element.matches() method take as an argument and what does it return?
it takes a 'test' and returns a boolean
184
How can you retrieve the value of an element's attribute?
the .getAttribute() method
185
At what steps of the solution would it be helpful to log things to the console?
the output of a loop, after a query
186
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?
create eventListeners for each individual tab
187
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?
use a large if/else if statement
188
What is a breakpoint in responsive Web design?
breakpoint is a width/height at which a media query is used to resize elements on a page
189
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?
so that it responds better on different screen sizes
190
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?
__
191
What is JSON?
JSON is a way to represent JS data as strings to send over networks
192
What are serialization and deserialization?
```
serialization = JS --> bytes to send/save
deserialization = opposite
```
193
Why are serialization and deserialization useful?
it allows us to send JS data remotely and save JS data
194
How do you serialize a data structure into a JSON string using JavaScript?
use JSON.stringify()
195
How do you deserialize a JSON string into a data structure using JavaScript?
use JSON.parse()
196
How to you store data in localStorage?
localStorage.setItem("__key__","__val__")
197
How to you retrieve data from localStorage?
localStorage.getItem("__key__")
198
What data type can localStorage save in the browser?
JSON strings
199
When does the 'beforeunload' event fire on the window object?
before the window is unloaded (closed)
200
What is a code block? What are some examples of a code block?
a code block is code that is between curly braces (ex: JS object, Css rule set)
201
What does block scope mean?
only applies to one block of code, if it is referenced outside of the block, it will be a different value/not recognized
202
What is the scope of a variable declared with const or let?
block-scoped
203
What is the difference between let and const?
const = immutable; let = mutable
204
Why is it possible to .push() a new value into a const variable that points to an Array?
you are not reassigning the 'pointer'/address, you are modifying the object; the array is mutable, but the variable name is not
205
How should you decide on which type of declaration to use?
if you need to change the variable or not (use const for array and objs; use let for ); USE CONST FOR EVERYTHING....UNTILL YOU CANT
206
What is destructuring, conceptually?
storing values from object properties (w/o accessing the object
207
What is the syntax for Object destructuring?
let {
__property name__,
__propertyname2__,....
} = __obj name__
208
What is the syntax for Array destructuring?
let [__variable1__ , __variable2__, ....] = __array name__
209
How can you tell the difference between destructuring and creating Object/Array literals?
where the obj/array name is before/after the code block
210
What is the syntax for writing a template literal?
__
211
What is "string interpolation"?
__
