HTML Flashcards
1
Q
Where do you put non-visible content about the HTML document?
A
head
2
Q
Where do you put visible content about the HTML document?
A
body
3
Q
Where do theheadandbodytags go in a valid HTML document?
A
between the html tags
4
Q
What is the purpose of adeclaration?
A
declare to the web browser the type of HTML that’s being used
5
Q
Give five examples of HTML element types.
A
h1, p, img, a, span
6
Q
What is the purpose of HTML attributes?
A
additional values that configure the elements or adjust their behavior
7
Q
Give an example of an HTML entity (escape character).
A
& = ampersand © = copyright symbol ® = registered trademark symbol
8
Q
How do block-level elements affect the document flow?
A
block-level elements always appear on a new line
9
Q
How do inline elements affect the document flow?
A
inline elements continue on the same line as neighboring elements
10
Q
What are the default width and height of a block-level element?
A
width = 100%, height = auto
11
Q
What are the default width and height of an inline element?
A
width = auto, height = auto
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
Ordered lists use numbers, unordered lists use bullets
13
Q
Is an HTML list a block element or an inline element?
A
block element
14
Q
What HTML tag is used to link to another website?
A
anchor tag <a></a>
15
Q
What is an absolute URL?
A
the full web address for the site
16
Q
What is a relative URL?
A
URL that only includes the path
17
Q
How do you indicate the relative link to a parent directory?
A
../filename
18
Q
How do you indicate the relative link to a child directory?
A
child folder/filename
19
Q
How do you indicate the relative link to a grand parent directory?
A
../../filename
20
Q
How do you indicate the relative link to the same directory?
A
filename
21
Q
What is the purpose of an HTMLformelement?
A
group all form control elements, collect user input
22
Q
Give five examples of form control elements.
A
text input, password input, text area, checkbox, radio button
23
Q
Give three examples oftypeattribute values for HTMLinput elements.
A
text, radio, checkbox
24
Q
Is an HTML inputelement a block element or an inline element?
A
inline
25
What are the six primary HTML elements for creating tables?
table, thead, tbody, tr, th, td
26
What purpose do the thead and tbody elements serve?
to specify each part of the table (head, body, footer)
27
Give two examples of data that would lend itself well to being displayed in a table.
listing a person and their age, day of the week and activity
28
What are the names of the individual pieces of a CSS rule?
selector, declaration block, property, value
29
In CSS, how do you select elements by their class attribute?
.
30
In CSS, how do you select elements by their type?
name of element
31
In CSS, how do you select an element by its id attribute?
#
32
Name three different types of values you can use to specify colors in CSS.
name, hexcode, rgb
33
What CSS properties make up the box model?
border, margin, padding
34
Which CSS property pushes boxes away from each other?
margin
35
Which CSS property add space between a box's content and its border?
padding
36
What is a pseudo-class?
a keyword added to a selector that defines a special state of a selected element
37
What are CSS pseudo-classes useful for?
styling elements in relation to external factors, :visited :checked :hover
38
Name three types of units that can be used to adjust font-size in CSS.
px, %, rem
39
What CSS property controls the font used for the text inside an element?
font-family
40
What is the default flex-direction of a flex container?
row
41
What is the default flex-wrap of a flex container?
nowrap (all items will be in one line)
42
How do you center items in a container horizontally and vertically?
justify-content: center horizontally
align-items: center vertically
43
Why do two div elements "vertically stack" on one another by default?
divs are block elements by default
44
What is the default flex-direction of an element with display: flex?
row
45
What is the default value for the position property of HTML elements?
position: static
46
How does setting position: relative on an element affect document flow?
it does not affect the position of surrounding elements
47
How does setting position: relative on an element affect where it appears on the page?
it moves an element in relation to where it would have been in normal flow
48
How does setting position: absolute on an element affect document flow?
it is taken out of document flow and no longer affects the position of other elements
49
How does setting position: absolute on an element affect where it appears on the page?
it moves an element in relation to its container
50
How do you constrain an absolutely positioned element to a containing block?
make that element position: relative
51
What are the four box offset properties?
top, bottom, left, right
52
What is the purpose of variables?
a location to store data for the future
53
How do you declare a variable?
var + name of variable = value;
54
How do you initialize (assign a value to) a variable?
=
55
What characters are allowed in variable names?
letters, numbers, dollar sign, underscore
56
What does it mean to say that variable names are "case sensitive"?
different casing for variables are unique
57
What is the purpose of a string?
to store text
58
What is the purpose of a number?
for representing mathematical values
59
What is the purpose of a boolean?
to represent a choice of yes or no( true or false)
60
What does the = operator mean in JavaScript?
for assigning values
61
How do you update the value of a variable?
assign the variable another value
62
What is the difference between null and undefined?
null is when something is intentionally set to an empty value, undefined is when something has not been assigned a value
63
Why is it a good habit to include "labels" when you log values to the browser console?
easier to identify what the values mean
64
Give five examples of JavaScript primitives.
string number boolean undefined null
65
What data type is returned by an arithmetic operation?
number
66
What is string concatenation?
combine two strings into one string
67
What purpose(s) does the + plus operator serve in JavaScript?
addition of numbers and concatenation of strings
68
What data type is returned by comparing two values (, ===, etc)?
boolean
69
What does the += "plus-equals" operator do?
i += 1 equates to i = i + 1;
70
What are objects used for?
grouping together a set of variables/functions to create a model
71
What are object properties?
a variable that's a part of an object
72
Describe object literal notation.
```
var object = {
property1: value,
property2: value,
property3: value
};
```
73
How do you remove a property from an object?
delete object.property;
74
What are the two ways to get or update the value of a property?
dot notation and bracket notation
75
What are arrays used for?
to store a collection of data in an orderly fashion
76
Describe array literal notation.
var arr = [ ];
77
How are arrays different from "plain" objects?
objects have no order, objects have properties associated with their values
78
What number represents the first index of an array?
0
79
What is the length property of an array?
how many pieces of data are stored in the array
80
How do you calculate the last index of an array?
array.length - 1
81
What is a function in JavaScript?
repeatable named block of code that does a specific job
82
Describe the parts of a function definition.
function keyword, optional function name, set of parenthesis, parameter, curly braces for code block, code block with likely a return statement
83
Describe the parts of a function call.
function name, parenthesis, arguments
84
When comparing them side-by-side, what are the differences between a function call and a function definition?
```
function definition will include a function keyword, code block, parameter
function call will include parenthesis, argument
```
85
What is the difference between a parameter and an argument?
Parameters are properties of a function. Arguments are properties of a specific call to a function
86
Why are function parameters useful?
allows us to pass information or instructions into functions
87
What two effects does a return statement have on the behavior of a function?
return value replaces a function call
| stops the function entirely
88
Why do we log things to the console?
to check values while debugging applications
89
What is a method?
a property of an object that contains a function definition
90
How is a method different from any other function?
a method has to be called on an object
91
How do you remove the last element from an array?
array.pop();
92
How do you round a number down to the nearest integer?
Math.floor();
93
How do you generate a random number?
Math.random();
94
How do you delete an element from an array?
splice removes at certain index
pop removes at end
shift removes at beginning
95
How do you append an element to an array?
push adds to end of array
| unshift adds to beginning of array
96
How do you break a string up into an array?
split();
97
Do string methods change the original string? How would you check if you weren't sure?
No, you can check with console.log before and after the string method
98
Give 6 examples of comparison operators.
==, ===, , >=
99
What data type do comparison expressions evaluate to?
boolean
100
What is the purpose of an if statement?
to run a block of code if a condition is met
101
Is else required in order to use an if statement?
no
102
Describe the syntax (structure) of an if statement.
if (conditional statement) {
return x;
}
103
What are the three logical operators?
|| (OR), && (AND), ! (NOT)
104
How do you compare two different expressions in the same condition?
using || &&
105
What is the purpose of a loop?
allow you to repeat a process over and over
106
What is the purpose of a condition expression in a loop?
the stop point for the loop
107
What does "iteration" mean in the context of loops?
a single run of a loop's code block
108
When does the condition expression of a while loop get evaluated?
before the iteration
109
When does the initialization expression of a for loop get evaluated?
the first action before the loop begins, only once
110
When does the condition expression of a for loop get evaluated?
before each iteration
111
When does the final expression of a for loop get evaluated?
after each iteration
112
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break- just exits a loop
113
How do you iterate through the keys of an object?
for in loop
114
What are the four components of "the Cascade".
source order
specificity
importance
inheritance
115
What does the term "source order" mean with respect to CSS?
the rule that comes last in the css will win
116
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
117
List the three selector types in order of increasing specificity.
elements
class/pseudo-class
id
118
Why is using !important considered bad practice?
it makes debugging more difficult by breaking the natural cascade of stylesheets
119
Why do we log things to the console?
to check the value of something in code
120
What is a "model"?
a representation of something
121
Which "document" is being referred to in the phrase Document Object Model?
the HTML document
122
What is the word "object" referring to in the phrase Document Object Model?
javascript objects that manipulate the output
123
What is a DOM Tree?
a tree with each branch ending in a node, which contains objects
124
Give two examples of document methods that retrieve a single element from the DOM.
querySelector()
| getElementById()
125
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll()
getElementsByClassName()
getElementsByTagName()
126
Why might you want to assign the return value of a DOM query to a variable?
so u can directly access and store the information without using a DOM method every time
127
What console method allows you to inspect the properties of a DOM element object?
console.dir()
128
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
the browser needs to go through all the elements of the page first in order for JavaScript code to be able to access them
129
What does document.querySelector() take as its argument and what does it return?
argument: a selector
return: an element object representing the first element that matches the selector
130
What does document.querySelectorAll() take as its argument and what does it return?
argument: a selector
return: NodeList containing all Element Objects that match the selector
131
What is the purpose of events and event handling?
events are actions that the user does, event handling allows us to respond to user interactions
132
Are all possible parameters required to use a JavaScript method or function?
no
133
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener()
134
What is a callback function?
a function that is being passed as the argument of another function
135
What object is passed into an event listener callback when the event fires?
the event object, with all the data about the event that just occurred
136
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
target property of event object which stores a dom element with the start point of this event
137
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
first snippet calls handleClick function when element is clicked
second snipper calls handleClick function immediately, which returns undefined value as an argument of addEventListener
138
What is the className property of element objects?
gets and sets the value of the class attribute of element objects
139
How do you update the CSS class attribute of an element using JavaScript?
element.className = 'new-class-attribute';
140
What is the textContent property of element objects?
gets and sets the text content of the element object
141
How do you update the text within an element using JavaScript?
element.textContent = 'new text content';
142
Is the event parameter of an event listener callback always useful?
no
143
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
more complicated
144
Why is storing information about a program in variables better than only storing it in the DOM?
so you can access the information directly without calling dom object methods
145
What does the transform property do?
lets you modify the coordinate space of an element
146
Give four examples of CSS transform functions.
rotate, translate, scale, matrix
147
What are the four transition properties?
property duration, timing-function, property
148
What event is fired when a user places their cursor in a form control?
focus
149
What event is fired when a user's cursor leaves a form control?
blur
150
What event is fired as a user changes the value of a form control?
input
151
What event is fired when a user clicks the "submit" button within a form element?
submit
152
What does the event.preventDefault() method do?
prevents default behavior for an event
153
What does submitting a form without event.preventDefault() do?
it will automatically reload the page as the default
154
What property of a form element object contains all of the form's controls.
elements
155
What property of a form control object gets and sets its value?
value
156
Does the document.createElement() method insert a new element into the page?
no, it creates a dom element that is not yet appended to the dom tree
157
How do you add an element as a child to another element?
appendChild(element);
158
What do you pass as the arguments to the element.setAttribute() method?
arguments (name, value)
159
What steps do you need to take in order to insert a new element into the page?
create an element, then give it content, then add it to the dom
createElement(), createTextNode(), appendChild()
160
What is the textContent property of an element object for?
to get and set text content of an element
161
Name two ways to set the class attribute of a DOM element.
className();
| setAttribute();
162
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
automation and debugging
163
Give two examples of media features that you can query in an @media rule.
min-width, max-width
164
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
165
What is the event.target?
html element where the event originated from
166
Why is it possible to listen for events on one element that actually happen its descendent elements?
event flow, specifically event bubbling
167
What DOM element property tells you what type of element it is?
tagName property
168
What does the element.closest() method take as its argument and what does it return?
argument: css selector
return: closest ancestor element
169
How can you remove an element from the DOM?
remove method
170
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 event listener to the parent, then verify tagName is correct
171
What does the element.matches() method take as an argument and what does it return?
argument: css selector
return: true if element matches a selector, or false if not
172
How can you retrieve the value of an element's attribute?
getAttribute method
173
What is a breakpoint in responsive Web design?
the point at which a media query is introduced
174
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?
allows the column to adapt to the viewport size
175
What is JSON?
text-based data format following JavaScript object syntax
176
What are serialization and deserialization?
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.
177
Why are serialization and deserialization useful?
convert objects to strings and strings to objects, to make data easily transmissible
178
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( );
179
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse( JSON string );
180
How do you store data in localStorage?
localStorage.setItem(keyName, keyValue);
181
How do you retrieve data from localStorage?
localStorage.getData(keyName);
182
What data type can localStorage save in the browser?
string data
183
When does the 'beforeunload' event fire on the window object?
when the window is about to be unloaded
184
What is a method?
a function that is a property of an object
185
How can you tell the difference between a method definition and a method call?
method definition has function keyword and function code block, whereas method call only has name of the method with parentheses
186
What are the four "principles" of Object-Oriented Programming?
Abstraction, Encapsulation, Inheritance, Polymorphism
187
What is "abstraction"?
being able to work on complex things in simple ways
188
What does API stand for?
Application Programming Interface
189
What is the purpose of an API?
to give programmers a way to interact with a system abstractly, ie DOM API
190
What is this in JavaScript?
this is an implicit parameter of all functions whose value is the object this method was called from. It only receives value when a function is actually called, there is no value for this within a function definition
191
What does it mean to say that this is an "implicit parameter"?
this is available in a function's code block even though it was never included as function parameter or declared with var
192
When is the value of this determined in a function; call time or definition time?
call time
193
What kind of inheritance does the JavaScript programming language use?
prototype-based
194
What is a prototype in JavaScript?
an object that contains properties and methods that can be used by other objects
195
How is it possible to call methods on strings, arrays, and numbers even though those methods don't actually exist on strings, arrays, and numbers?
they delegate methods to their prototype object
196
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
it looks at the object's prototype object
197
What does the new operator do?
it creates an instance of one of the built in object types with that constructor function
198
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
199
What does the instanceof operator do?
it returns boolean of whether constructor.prototype is found in a certain object
200
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?
setTimeout()
201
How can you set up a function to be called repeatedly without using a loop?
setInterval()
202
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
defaults to 0
203
What do setTimeout() and setInterval() return?
unique ID's
