Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

RC 1022 Web Development > HTML > Flashcards

HTML Flashcards

HTML skeleton, syntax, block and inline, lists, links, relative links

1
Q

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

A

Between the head element opening and closing tags.

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

Between the body element opening and closing tags.

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

Where do the <head> and <body> tags go in a valid HTML document?

A

Between the doctype declaration and the HTML element opening and closing tags.

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

What is the purpose of a <!DOCTYPE> declaration?

A

Tell the browser which version of HTML the page is using, it helps the browser render the page correctly.

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

Give five examples of HTML element types.

A

Html, head, body, h1, p

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

Attributes provide additional information about the contents of an element.

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

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

A

” & a m p ; “ for ampersand
“ & e a c u t e ; “ - accent on e

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

They create elements that will start on a new row and use the entirety of the row (horizontal space)

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

Appears on the same line as their neighboring elements.

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

What are the default width and height of a block-level element?

A

The default height is the height of the content and the width is the entire length of the page.

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

What are the default width and height of an inline element?

A

The default height and width is the height of the content and the width of the content.

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

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

A

Ordered lists are numbered (alphabetical, etc.) and unordered lists begin with a bullet point (squares, etc.).

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

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

A

Block element

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

What HTML tag is used to link to another website?

A

<a> tag and href attribute.</a>

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

What is an absolute URL?

A

Full web address of a site to visit a specific page.. (domain name for that site, followed by the path to a specific page).

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

What is a relative URL?

A

Links to other pages within the same site. (shorthand versions because they do not need the domain name).

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

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

A

Use ../ to indicate the folder above the current one, then the file name. <a href= “../index.html”>

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

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

A

Name of child folder, followed by forward slash, the the file name . <a href= “ child/child.html “ >

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

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

A

You can use ../ as many times to reach the root directory/grandparent directory

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

How do you indicate the relative link to the same directory?

A

You can just name the file of the directory <a href = “ filename.html”>

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

What is the purpose of an HTML form element?

A

The form element identifies the webpage as a form in which a user can input information

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

Give five examples of form control elements.

A

Input, label, select, button, option

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

Give three examples of type attribute values for HTML <input></input> elements.

A

Radio, checkbox, email, submit, time, calendar

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

Is an HTML <input></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
25
Q

What are the six primary HTML elements for creating tables?

A

Table, tr, td, th, tbody, thead, (optional: tfoot)

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

What purpose do the thead and tbody elements serve? (semantic elements)

A

thead= defines a set of rows defining the head of the columns of the table
tbody= encapsulates a set of table rows, indicating that they comprise the body of the table.
Helps people who needs screen readers, improves search engine indexing, control appearance of tables better

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

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

A

TV schedules, stocks

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

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

A

Selector, declaration, property, value

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

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

A

.class (period followed by the class name)

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

In CSS, how do you select elements by their tag name?

A

Just use the element name followed by {}.

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

In CSS, how do you select an element by its id attribute?

A

ID (hashtag followed by the ID name)

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

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

A

Rgb values, hex codes, color names.

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

What CSS properties make up the box model?

A

Border, margin , padding, content

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

What is a pseudo-class?

A

A keyword added to a selector that specifies a special state of the element.

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

What are CSS pseudo-classes useful for?

A

Pseudo-classes allow for stylization of elements in relation to external factors, status of the content, or the position of the mouse.
Makes changes based on user interaction

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

Name two types of units that can be used to adjust font-size in CSS.

A

Pixels, percentages, em, etc.

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

What CSS property controls the font used for the text inside an element?

A

font-family

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

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

A

row

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

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

A

no wrap

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

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

A

They are block-level elements and will not allow other elements to sit next to it

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

What is the default flex-direction of an element with display: flex?

A

row

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

What are the three primary components of a page layout? (Which helper classes do you need?)

A

Container, column, row

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

What is the minimum number of columns that you should put in a row?

A

1

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

What is the purpose of a container?

A

Contains everything in the web page to group together
Gives us a boundary for the web page.

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

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

A

Element remains in normal document flow.
An elements final position can be modified to overlap other elements

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

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

A

Will not affect where it appears on the page. It will stay in the same place.
You can control how far an element is placed from its original position.

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

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

A

Element will be removed from normal document flow.

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

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

A

Element will be positioned relative to closest positioned non-static ancestor.
The element sits on its own separate layer from all other elements

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

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

A

You make the containing block that you want it to be positioned to into a relative position. They will position themselves within the first non-static ancestor.
Parent element can use (Absolute, sticky, fixed) to be a non static element

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

What are the four box offset properties?

A

Top, bottom, left, right

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

What is the purpose of variables?

A

To store data

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

How do you declare a variable?

A

Keyword + creating a variable and giving it a name.

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

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

A

Using the assignment operator. (=)

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

What characters are allowed in variable names?

A

letters , numbers, $ dollar sign, _ underscore

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

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

A

A variable starting with a lowercase and a variable starting with an uppercase will create two separate variables.

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

What is the purpose of a string?

A

Hold data type consisting of letters/ other characters. Any type of text content.

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

What is the purpose of a number?

A

Hold any data type handling numbers/numeric values. Counting, calculating sums, determining size, moving the position, setting time, etc.

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

What is the purpose of a boolean?

A

To hold data types of true or false.
To turn a script on or off.

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

What does the = operator mean in JavaScript?

A

Assign a value to the variable, also used to update the value given to a variable.

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

How do you update the value of a variable?

A

Using the assignment operator.
Do not need to use ‘var’ again, just the name and (=)

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

What is the difference between null and undefined?

A

Null represents a placeholder value, might hold value in the future.
Undefined is a value that has not been thought of yet, does not hold value yet.

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

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

A

To help debug. It makes it clearer which variables are being logged and in which order.

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

Give five examples of JavaScript primitives.

A

String, number, boolean, undefined, null

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

What data type is returned by an arithmetic operation?

A

A numerical value

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

What is string concatenation?

A

The joining of two or more strings using (+) to create a new string

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

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

A

This will combine the value of the string before and after the (+) operator
(a concatenated string)
Addition for numerical numbers.

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

What data type is returned by comparing two values (<, >, ===, etc)?

A

true/false

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

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

A

This will add the number value on the right and assigns the result to the variable

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

What are objects used for?

A

To group together a set of variables and functions to create a model.

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

What are object properties?

A

Variables that are part of an object.

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

Describe object literal notation.

A

The object is in curly braces with its contents, then stored in a variable. Each key is separated from its value using a colon and each property and method is separated with a comma.
Var (varName) = { property: ‘string’, };

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

How do you remove a property from an object?

A

Use keyword delete then dot notation to identify the property or method you want to remove from the object.
Delete var.varName;

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

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

A

Using square brackets or dot notation.
Bracket: varName[‘newString’] = ‘updatedVal’;
Dot: varName.newString = updatedVal;

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

What are arrays used for?

A

To create ordered list of data.

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

Describe array literal notation.

A

Var varName = [ ‘one’, ‘two’, ‘three’];
Open brackets
List of data values followed by commas

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

How are arrays different from “plain” objects?

A

Arrays are a special type of objects, they hold a related set of values
Arrays use numbers as indexes

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

What number represents the first index of an array?

A

0

81
Q

What is the length property of an array?

A

Gives you the total number of items in an array

82
Q

How do you calculate the last index of an array?

A

Subtracting 1 from the array length
arrayName.length - 1

83
Q

What is a function in JavaScript?

A

An object that can be called to make code more dynamic.
A set of statements to perform a task or calculate a value.

84
Q

Describe the parts of a function definition.

A

Function keyword to begin the creation of a new function
An optional name for the function
Zero or more parameters surrounded by parentheses.
{ } opening and closing curly brace for the start and end of the function code block.
Optional return statement.

85
Q

Describe the parts of a function call.

A

Function name, 0 or more arguments surrounded by parentheses.

86
Q

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

A

The definition has a series of statements to be run in the codeblock.
The function call is just the function name.

87
Q

What is the difference between a parameter and an argument?

A

Parameter: a placeholder / stores local variables to the function
Argument: the value that we want to use for the function.

88
Q

Why are function parameters useful?

A

Parameters are useful because they can be replaced with different arguments to run the same code block on that argument.

89
Q

What two effects does a return statement have on the behavior of a function?

A

Produces a value from the function.
Prevents any more code in the function’s code block from being run.
A return will exit the function, any code after a return will not be logged..

90
Q

Why do we log things to the console?

A

To check whether we get the desired results

91
Q

What is a method?

A

A function that is a property of an object that
contains a function definition. Actions that can be performed on objects.

92
Q

How is a method different from any other function?

A

Methods are associated with an object property whereas any other function themselves are objects

93
Q

How do you remove the last element from an array?

A

pop() method

94
Q

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

A

Math.floor() method - takes any float values 1.9 → to 1
Math.round (not preferred) - based on the rounding system (less than .4 rounds down, greater than .5 rounds up)
Not relevant to question ceil() rounds up: 1.1 → 2

95
Q

How do you generate a random number?

A

Math.random() method
Returns 0-1

96
Q

How do you delete an element from an array?

A

shift()- beginning
pop() - end
splice() method
Syntax: you can specify which index in the first argument and how many objects in the second argument

97
Q

How do you append an element to an array?

A

unshift() method
push() method

98
Q

How do you break a string up into an array?

A

split() method of the string

99
Q

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

A

No, the original string would still be present. You can console.log to make sure.
Strings cannot be changed in Java.

100
Q

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

A

50

101
Q

Is the return value of a function or method useful in every situation?

A

Not always

102
Q

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

A

40

103
Q

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

A

MDN

104
Q

Give 6 examples of comparison operators.

A

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

105
Q

What data type do comparison expressions evaluate to?

A

Boolean true or false

106
Q

What is the purpose of an if statement?

A

If statements set conditions that will run a code block whether it is true or false
If the initial condition is false, it will keep running until the last condition

107
Q

Is else required in order to use an if statement?

A

No it is not required, it is only needed if there a condition you want to run if the first is not true.

108
Q

Describe the syntax (structure) of an if statement.

A

If (keyword) if
Condition surrounded by parenthesis ex. (score > 50)
Opening curly brace {
Code to execute if value is true ex: congratulate()
Closing curly brace }

109
Q

What are the three logical operators?

A

And logical &&: both conditions must be true to pass
Or logical ||: one or the other condition must be true to pass
Not logical !: inverts the boolean value

110
Q

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

A

Using the logical && or logical || operators
Ex: ((5>2) && (2<=3)) will run both expressions and only give true if both are.
Ex ((5>2) || (2>3)) This will run true because the first statement is true.
Using an else if

111
Q

What is the purpose of a loop?

A

The purpose of a loop is to perform repeated tasks based on a condition

112
Q

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

A

The condition expression in a loop dictates when a loop should stop running.

113
Q

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

A

Each pass through the loop.

114
Q

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

A

Before each iteration.

115
Q

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

A

Once before the loop begins.

116
Q

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

A

Before each loop iteration.

117
Q

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

A

At the end of each loop iteration, until condition is false.

118
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

119
Q

What does the ++ increment operator do?

A

Increments the value by 1.

120
Q

How do you iterate through the keys of an object?

A

Using a for in loop.

121
Q

What are the four components of “the Cascade”.

A

Source order, inheritance, specificity, !important

122
Q

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

A

The order that your CSS rules are written your spreadsheet. The last stylization will take effect over the previous one.

123
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

124
Q

List the three selector types in order of increasing specificity.

A

Class, ID or element type

125
Q

Why is using !important considered bad practice?

A

It overrides everything before it, so it is hard to be specific or maintain elements.
Other elements are being read by specificity, source order, etc.

126
Q

Why do we log things to the console?

A

To check if we got the desired results.

127
Q

What is a “model”?

A

An example of something

128
Q

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

A

The HTML document / whatever DOCTYPE is being declared

129
Q

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

A

Javascript objects
Represents different parts of the page that is loaded
The document represented as a large object that holds all info about its content

130
Q

What is a DOM Tree?

A

The model of the HTML webpage as a tree of objects.

131
Q

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

A

getElementByID: Selects an element by a specified ID
querySelector: CSS selectors

132
Q

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

A

querySelectorAll
getElementsByClassName
getElementsByTagName

133
Q

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

A

Saves the browser time looking for the element again. Also makes it easier to reuse.

134
Q

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

A

console.dir(): Selects an element by specifying the ID

135
Q

Why would a 

 tag need to be placed at the bottom of the HTML content instead of at the top?
A

The browser needs to access all elements of the HTML page before the JavaScript code can access them.

136
Q

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

A

It takes CSS selectors and returns the first element that matches that selector/group of selectors.

137
Q

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

A

It takes CSS selectors and returns a NodeList with a list of the document’s elements that match the specified group of selectors.

138
Q

Why do we log things to the console?

A

To check if we got the desired results

139
Q

What is the purpose of events and event handling?

A

Events can be selected for event handling to trigger code that responds to users.

140
Q

Are all possible parameters required to use a JavaScript method or function?

A

no

141
Q

What method of element objects lets you set up a function to be called when a specific type of event occurs?

A

addEventListener

142
Q

What is a callback function?

A

A call back is when a function is passed into another function as an argument.
A function that you don’t call but is called when an event occurs.
ex) $hoverButton.addEventListener - when mouseover happens, the function handleMouseover fires

143
Q

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

A

The event object.

144
Q

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

A

Can find more info on MDN
A reference to the object where the event is occurring.//object that triggered the event
Can be checked by console.log
The element that the user interacts with

145
Q

What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())

A

No ()= function only runs when event is fired.
A callback function// The definition of the function
When using an addEventListener, the function should always be a callback function
() = The function with no parameters. . Will run the function before the page finishes loading., instead of when the event occurs.

146
Q

What is the className property of element objects?

A

The class attribute of the object.

147
Q

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

A

Using the className property of the element object and assigning a value.

148
Q

What is the textContent property of element objects?

A

The text content of the node and its descendants.

149
Q

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

A

Using the textContent property of the object and assigning a value with an assignment operator.

150
Q

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

A

no

151
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

152
Q

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

A

It is easily retrievable and caching the elements allows for the browser to find it quicker.

153
Q

What does the transform property do?

A

Applies a 2d or 3d transformation to an element
Can manipulate the element by rotation, scaling, skewing, or translating

154
Q

Give four examples of CSS transform functions.

A

translateY(), scale(), skew() , rotate()

155
Q

The transition property is shorthand for which four CSS properties?

A

Transition is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

156
Q

What event is fired when a user places their cursor in a form control?

A

focus

157
Q

What event is fired when a user’s cursor leaves a form control?

A

blur

158
Q

What event is fired as a user changes the value of a form control?

A

input

159
Q

What event is fired when a user clicks the “submit” button within a <form>?

A

submit

160
Q

What does the event.preventDefault() method do?

A

Prevents the browser from performing the default action of the event, in this case it
Prevents the browser from automatically reloading the page with the form’s values in the URL

161
Q

What does submitting a form without event.preventDefault() do?

A

Loads the form’s values in the URL

162
Q

What property of a form element object contains all of the form’s controls?

A

Elements property
DOM.elements()

163
Q

What property of a form control object gets and sets its value?

A

value property

164
Q

What is one risk of writing a lot of code without checking to see if it works so far?

A

Being unable to find the point of where it is wrong later.

165
Q

What is an advantage of having your console open when writing a JavaScript program?

A

Being able to see any changes you made, being able to see console log to see if you got the correct data.
You can see any console error every time you save changes

166
Q

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

A

no

167
Q

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

A

appendChild()

168
Q

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

A

A source attribute and the value.

169
Q

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

A

Create element, give it a class name (optional ) give it an attribute (optional) , give it text content ( optional) , query for an element already on page, append child.

170
Q

What is the textContent property of an element object for?

A

To assign text content to an element.

171
Q

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

A

className, set attribute to class and value of class name.

172
Q

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

A

You don’t need to manually do everything, ensures everything is consistent.

173
Q

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

A

width, height

174
Q

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

A

content= “viewport

175
Q

What is the event.target?

A

It retrieves the object from which an event was dispatched from
The element that was interacted with

176
Q

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

A

The event travels down to the point of interaction (event bubbling)

177
Q

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

A

event.target.tagName

178
Q

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

A

Event.target at the beginning and takes the css selector
It will return the closest element it was nested in

179
Q

How can you remove an element from the DOM?

A

element.remove();

180
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 an event listener to the parent tag.

181
Q

What is the event.target?

A

Element that triggered the event

182
Q

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

A

Hides the element

183
Q

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

A

CSS Selectors, returns true or false.

184
Q

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

A

getAttribute()

185
Q

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

A

each step

186
Q

If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?

A

Add an event listener to each tab

187
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

else if statements

188
Q

What is a breakpoint in responsive Web design?

A

The point at which a media query is introduced
Ex: when we set the browser to a specific width, it will change to the respective CSS

189
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

It will resize according to the screen/device dimensions, whereas pixels will vary between devices

190
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

It will take the latest ruleset and override the previous rules set
Should be styling from small to large

191
Q

What is JSON?

A

JSON is a string that represents structured data. It is used to easily transmit data.

192
Q

What are serialization and deserialization?

A

Serialization is turning data into a linear “string” of bytes to store information
Deserializaiton turning a string of bytes into an object in memory.

193
Q

Why are serialization and deserialization useful?

A

It easily helps transmit and store data.

194
Q

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

A

JSON.stringify

195
Q

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

A

JSON.parse

196
Q

How do you store data in localStorage?

A

You stringify the data and then use the localStorage.setItem() method.

197
Q

How do you retrieve data from localStorage?

A

localStorage.getItem() method

198
Q

What data type can localStorage save in the browser?

A

JSON Strings

199
Q

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

A

Before the document is about to be unloaded
Document still visible and event can still be canceled
Can ask the user to confirm before closing out/leaving a web page

RC 1022 Web Development (1 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions