LFZ Flashcards
(196 cards)
1
Q
Where do you put non-visible content about the HTML document?
A
head element
2
Q
Where do you put visible content about the HTML document?
A
body element
3
Q
Where do the and tags go in a valid HTML document?
A
inside the html element
4
Q
What is the purpose of a declaration?
A
to tell a browser which version of HTML the page is using
5
Q
Give five examples of HTML element types.
A
html, head, title, body, h1, h2, h3, h4, h5, h6, p, div, span, a
6
Q
What is the purpose of HTML attributes?
A
Attributes provide additional information about the contents of an element.
7
Q
Give an example of an HTML entity (escape character).
A
Less-than sign - & lt; Greater-than sign - & gt; Ampersand - & amp; Quotation mark - & quot; Cent-sign - & cent; Pound sign - & pound; Yen sign - & yen; Euro sign - & euro; Copyright symbol - & copy; Registered trademark - & reg; Trademark - & trade; Left single quote - & lsquo; Right single quote - & rsquo; Left double quotes - & ldquo; Right double quotes - & rdquo; Multiplication sign - & times; Division sign - & divide;
8
Q
How do block-level elements affect the document flow?
A
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
9
Q
How do inline elements affect the document flow?
A
An inline element does not start on a new line and only takes up as much width as necessary.
10
Q
What are the default width and height of a block-level element?
A
The default height of a block-level element is the height of the content.
The default width of a block-level element is the length of the page.
11
Q
What are the default width and height of an inline element?
A
The height of an inline element is the height of the content.
The width of an inline element is the width of the content.
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
Ordered list displays numbered list. Unordered list displays bullet point list.
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
<a> (anchor element)</a>
15
Q
What is an absolute URL?
A
the full web address for the site
16
Q
What is a relative URL?
A
link to other pages within the same site
17
Q
How do you indicate the relative link to a parent directory?
A
Use ../ to indicate the folder above the current one, then follow it with the file name.
18
Q
How do you indicate the relative link to a child directory?
A
For a child folder, use the name of the child folder, followed by a forward slash, then the file name.
19
Q
How do you indicate the relative link to a grand parent directory?
A
Repeat the ../ to indicate that you want to go up two folders (rather than one), then follow it with the file name.
20
Q
How do you indicate the relative link to the same directory?
A
To link to a file in the same folder, just use the file name. (Nothing else is needed.)
21
Q
What is the purpose of an HTML form element?
A
An HTML form is used to collect user input.
22
Q
Give five examples of form control elements.
A
input label select textarea button fieldset legend datalist output option optgroup
23
Q
Give three examples of type attribute values for HTML input elements.
A
text, password, radio, checkbox, file, submit, image, hidden
24
Q
Is an HTML element a block element or an inline element?
A
inline element
25
What are the six primary HTML elements for creating tables?
table, tr, th, td, thead, tbody
26
What purpose do the thead and tbody elements serve?
The headings of the table should sit inside the thead element.
The body should sit inside the tbody element.
27
Give two examples of data that would lend itself well to being displayed in a table.
Examples of tables include financial reports, TV schedules, and sports results.
28
Give 6 examples of comparison operators.
==, !=, ===, !==, > < >= <=
29
What data type do comparison expressions evaluate to?
boolean
30
What is the purpose of an if statement?
to execute code if a condition evaluates to true
31
Is else required in order to use an if statement?
no
32
Describe the syntax (structure) of an if statement.
```
if key word
condition
opening curly brace
code to execute if value is true
closing curly brace
```
33
What are the three logical operators?
&&
||
!
34
How do you compare two different expressions in the same condition?
and operator
| or operator
35
What is the purpose of a loop?
Loops are all about doing the same thing over and over again.
36
What is the purpose of a condition expression in a loop?
The conditionExpression expression is evaluated. If the value of conditionExpression is true, the loop statements execute. If the value of condition is false, the for loop terminates.
37
What does "iteration" mean in the context of loops?
one loop
38
When does the condition expression of a while loop get evaluated?
before a loop begins
39
When does the initialization expression of a for loop get evaluated?
it's executed once at the beginning of the first loop
40
When does the condition expression of a for loop get evaluated?
before each loop
41
When does the final expression of a for loop get evaluated?
end of the loop
42
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
43
What does the ++ increment operator do?
adds one
44
How do you iterate through the keys of an object?
for...in loop
45
What are the names of the individual pieces of a CSS rule?
selectors, declarations
46
In CSS, how do you select elements by their class attribute?
.class-name
47
In CSS, how do you select elements by their type?
element-name
48
In CSS, how do you select an element by its id attribute?
#id-name
49
Name three different types of values you can use to specify colors in CSS.
RGB values, hex codes, color names
50
What CSS properties make up the box model?
content, padding, border, margin
51
Which CSS property pushes boxes away from each other?
margin
52
Which CSS property add space between a box's content and its border?
padding
53
What is a pseudo-class?
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
54
What are CSS pseudo-classes useful for?
allow you to change the appearance of elements when a user is interacting with them
55
Name two types of units that can be used to adjust font-size in CSS.
pixels, percentages, ems
56
What CSS property controls the font used for the text inside an element?
font-family
57
What is the default flex-direction of a flex container?
row
58
What is the default flex-wrap of a flex container?
no wrap
59
Why do two div elements "vertically stack" on one another by default?
div elements are block-level elements by default
60
What is the default flex-direction of an element with display: flex?
row
61
What is the default value for the position property of HTML elements?
static
62
How does setting position: relative on an element affect document flow?
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
63
How does setting position: relative on an element affect where it appears on the page?
The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
64
How does setting position: absolute on an element affect document flow?
The element is removed from the normal document flow
65
How does setting position: absolute on an element affect where it appears on the page?
, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
66
How do you constrain an absolutely positioned element to a containing block?
containing block position should be set to relative
67
What are the four box offset properties?
top, bottom, right, left
68
What are the four components of "the Cascade".
source order, inheritance, specificity, importantance
69
What does the term "source order" mean with respect to CSS?
Source order is, simply put, the order that your CSS rules are written in your stylesheet.
70
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
71
List the three selector types in order of increasing specificity.
type, class, id
72
Why is using !important considered bad practice?
Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
73
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay
74
What is the purpose of variables?
store information
75
How do you declare a variable?
var variable;
76
How do you initialize (assign a value to) a variable?
var variable = value;
77
What characters are allowed in variable names?
letters, numbers, dollar signs, underscore
78
What does it mean to say that variable names are "case sensitive"?
variables with the same name but different cases are different variables
79
What is the purpose of a string?
working with text
80
What is the purpose of a number?
counting or calculating
81
What is the purpose of a boolean?
logic
82
What does the = operator mean in JavaScript?
assign value
83
How do you update the value of a variable?
declare the variable and assign new value
84
What is the difference between null and undefined?
null is the given value of no value
| undefined is no value given
85
Why is it a good habit to include "labels" when you log values to the browser console?
to help you debug
86
Give five examples of JavaScript primitives.
undefined , null , boolean , string and number
87
What data type is returned by an arithmetic operation?
number
88
What is string concatenation?
combining strings
89
What purpose(s) does the + plus operator serve in JavaScript?
adding numbers and combining strings
90
What data type is returned by comparing two values (, ===, etc)?
boolean
91
What does the += "plus-equals" operator do?
The addition assignment operator (+=) adds the value of the right operand to a variable and assigns the result to the variable.
92
What are objects used for?
Objects group together a set of variables and functions to create a model of a something you would recognize from the real world. In an object, variables and functions take on new names, properties and methods.
93
What are object properties?
variables that are part of an object
94
Describe object literal notation.
The object is the curly braces and their contents. The object is stored in a variable. Separate each key from its value using a colon. Separate each property and method with a comma.
95
How do you remove a property from an object?
delete
96
What are the two ways to get or update the value of a property?
dot notation or bracket notation
97
What are arrays used for?
store a list of values
98
Describe array literal notation.
var array = [value1, value2, value3, etc.];
99
How are arrays different from "plain" objects?
for arrays, the key for each value is its index number
100
What number represents the first index of an array?
0
101
What is the length property of an array?
number of items in an array
102
How do you calculate the last index of an array?
array.length - 1
103
What is a function in JavaScript?
A JavaScript function is a block of code designed to perform a particular task.
104
Describe the parts of a function definition.
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.
105
Describe the parts of a function call.
Notice that we are simply writing the name of the function and placing () parentheses next to it.
106
When comparing them side-by-side, what are the differences between a function call and a function definition?
```
// defining the sayHello function
function sayHello() {
var greeting = 'Hello, World!';
console.log(greeting);
}
```
```
// calling the sayHello function
sayHello();
```
107
What is the difference between a parameter and an argument?
parameter is for function definition
| argument is for function calling
108
Why are function parameters useful?
we can pass information or instructions into our functions
109
What two effects does a return statement have on the behavior of a function?
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.
110
Why do we log things to the console?
console.log() is a powerful tool for debugging and an easy way to inspect your variables in the browser.
111
What is a method?
A method is a function which is a property of an object.
112
How is a method different from any other function?
A function is independent, whereas a method is a function linked with an object.
113
How do you remove the last element from an array?
array.pop()
114
How do you round a number down to the nearest integer?
Math.floor()
115
How do you generate a random number?
Math.random()
116
How do you delete an element from an array?
array.splice()
117
How do you append an element to an array?
array.push() or array.unshift()
118
How do you break a string up into an array?
string.split()
119
Do string methods change the original string? How would you check if you weren't sure?
No, logging to the console
120
Roughly how many string methods are there according to the MDN Web docs?
50
121
Is the return value of a function or method useful in every situation?
no
122
Roughly how many array methods are there according to the MDN Web docs?
40
123
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
124
What event is fired when a user places their cursor in a form control?
focus
125
What event is fired when a user's cursor leaves a form control?
blur
126
What event is fired as a user changes the value of a form control?
input
127
What event is fired when a user clicks the "submit" button within a ?
submit
128
What does the event.preventDefault() method do?
to prevent the browser from automatically reloading the page with the form's values in the URL
129
What does submitting a form without event.preventDefault() do?
form's values in the URL
130
What property of a form element object contains all of the form's controls.
elements property
131
What property of a form control object gets and sets its value?
value property
132
What is one risk of writing a lot of code without checking to see if it works so far?
if there is an error, it will be hard to find where the error is
133
What is an advantage of having your console open when writing a JavaScript program?
catch errors early
134
Why do we log things to the console?
easy way to inspect your variables in the browser
135
What is a "model"?
representation
136
Which "document" is being referred to in the phrase Document Object Model?
web page
137
What is the word "object" referring to in the phrase Document Object Model?
web page and everything in it
138
What is a DOM Tree?
model of a web page
139
Give two examples of document methods that retrieve a single element from the DOM.
get El ement Byld ()
| querySe 1 ector ()
140
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll()
141
Why might you want to assign the return value of a DOM query to a variable?
if your script needs to use the same element(s) more than once, you can store the location of the element(s) in a variable.
142
What console method allows you to inspect the properties of a DOM element object?
console.dir()
143
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
144
What does document.querySelector() take as its argument and what does it return?
returns the first Element within the document that matches the specified selector, or group of selectors (valid CSS selector)
145
What does document.querySelectorAll() take as its argument and what does it return?
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
146
Why do we log things to the console?
easy way to inspect your variables in the browser
147
What is the purpose of events and event handling?
to have your web page react to the user
148
Are all possible parameters required to use a JavaScript method or function?
no
149
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener()
150
What is a callback function?
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.
151
What object is passed into an event listener callback when the event fires?
event object
152
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
The read-only target property of the Event interface is a reference to the object onto which the event was dispatched.
point of interaction
153
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
function runs as the page loads vs function runs when the event fires
154
What is the className property of element objects?
value of the class attribute
155
How do you update the CSS class attribute of an element using JavaScript?
assigning an updated value to className
156
What is the textContent property of element objects?
all the text inside
157
How do you update the text within an element using JavaScript?
assigning an updated value to the textContent property of that element
158
Is the event parameter of an event listener callback always useful?
no
159
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
160
Why is storing information about a program in variables better than only storing it in the DOM?
access it faster
161
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
162
Give four examples of CSS transform functions.
rotate, translate, skew, scale
163
Does the document.createElement() method insert a new element into the page?
no
164
How do you add an element as a child to another element?
appendChild method
165
What do you pass as the arguments to the element.setAttribute() method?
name and value of the attribute
166
What steps do you need to take in order to insert a new element into the page?
createElement method
| appendChild method
167
What is the textContent property of an element object for?
manipulate the text content of the element
168
Name two ways to set the class attribute of a DOM element.
setAttribute method
| class = ''
169
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
saves time
| less code writing
170
What is a breakpoint in responsive Web design?
The points at which a media query is introduced
171
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?
width will scale with the page (more responsive)
172
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?
when the specificity is equal, the sequence of declaration decides which css rule will apply, which is the last rule in the sequence.
173
What is the event.target?
reference to the object onto which the event was dispatched
174
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
175
What DOM element property tells you what type of element it is?
tagName property
176
What does the element.closest() method take as its argument and what does it return?
selector string
| Will return itself or the matching ancestor. If no such element exists, it returns null.
177
How can you remove an element from the DOM?
remove method
178
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 an event listener to the parent and find a match on child elements
179
Give two examples of media features that you can query in an @media rule.
width
| height
180
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
181
What is the event.target?
point of interaction
182
What is the affect of setting an element to display: none?
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist)
183
What does the element.matches() method take as an argument and what does it return?
Parameters
selectorString is a string representing the selector to test.
Return value
result is a boolean value.
184
How can you retrieve the value of an element's attribute?
getAttribute method
185
At what steps of the solution would it be helpful to log things to the console?
each time you add in new functionality
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?
each tab would have its own addEventListener method
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?
we would need to change the class name for all elements one at a time
188
What is JSON?
JSON is a text-based data format following JavaScript object syntax
189
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.
190
Why are serialization and deserialization useful?
JSON exists as a string — useful when you want to transmit data across a network. It needs to be converted to a native JavaScript object when you want to access the data.
191
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify
192
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse
193
How to you store data in localStorage?
setItem method
194
How to you retrieve data from localStorage?
getItem method
195
What data type can localStorage save in the browser?
strings
196
When does the 'beforeunload' event fire on the window object?
The beforeunload event is fired when the window, the document and its resources are about to be unloaded.
