Brainscape's Knowledge GenomeTM

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


See full index

LFZ Web Development > Module 1 > Flashcards

Module 1 Flashcards

1
Q

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

A

This type of content goes in the head element

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

Where do you put visible content about the HTML document?

A

This type of content goes in the body element

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

These tags go in the html element

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

What is the purpose of a !DOCTYPE declaration?

A

This tag tells you what type of document you are working on and also specifies the specific version

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

Give five examples of HTML element tags.

A

<p> p
</p>

<h1> h1 </h1>

through<h6> h6 </h6>
<img></img> img
<a> a</a>

<div> div </div>

</a>

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

these allow you to provide additional information about your html elements by assigning attributes to specific values.

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

without spaces
© “& copy ;”
® “& reg ;”
€ “& eruo ;”
& “& amp ;”

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

These types of elements take up as much space as they can and elements always start on a new line

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

How do inline elements affect the document flow?

A

These types of elements take up as much space as they need and appear adjacent to other 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

Default width=full width available on the screen
Default height=height of the content

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

Default width=width of the content *cannot be changed
Default height=height 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

Unordered lists <ul> are not in a specified order and by default notated with bullet points

Ordered lists </ul><ol> are numbered and in a specified orderer</ol>

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

This is 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

The anchor tag <a></a>

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

What is an absolute URL?

A

The full web address containing domain name

To be used for external links on other sites

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

What is a relative URL?

A

The file path for a file within the same domain, can notate this shorthand in html

To be used for internal links to link files on the same site

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

to indicate
a href=”../file-name”>Text Content /a

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

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

A

to indicate
a href=”folder-name/file-name”Text Content/a

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

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

A

a href=”../../file-name”>Text Content/a

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

to indicate
a href=”file-name”>Text Content/a

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 purpose of this is to allow users to input information on a webpage via a form which is tracked by key value pairs i.e. Name: Hannah (key value pair would be saved as name=name, value=Hannah)

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

5 examples are:
1. Text input
2. Password input
3. Radio buttons
4. Checkboxes
5. Submit buttons

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

Give three examples of type attributes for HTML elements.

A

3 examples are:
1. type=”text”
2. type=”password”
3. type=”radio”

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

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

A

this element is 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
  1. table
  2. thead
  3. th
  4. tbody
  5. tr
  6. td
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?

A

These elements signify the heading and body sections of the table to make it clearer for screenreading and also because if the table is longer than the screen, the browser can keep the header visible while you are scrolling down the page

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
  1. Financial Reports
  2. Pricing plan charts (different types of jelly plans and pricing)
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 Block (with Properties & Values)

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

with a .

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

A

with the name of the element

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

with a #

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
  1. rgb ()
  2. # hexcode
  3. Name (147 built in to CSS)
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
  1. Margin
  2. Border
  3. Padding
  4. 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 the specifies a special state of the selected element(s)

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

they allow you to change the style of the element when you interact with the webpage (i.e. hover)

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

Name at least two units of type size in CSS.

A

pixels
percentages
ems

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 are the four components of “the Cascade”.

A
  1. Source Order
  2. Inheritance
  3. Specificity
  4. !important
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

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

A

the order dictating importance on styling when the same elements of the same specificity are being used

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
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 - children receive parent styling by default

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

List the three selector types in order of increasing specificity.

A
  1. type selector (p)
  2. class selector (p.class)
  3. ID selector (p#id)
  4. Inline styling (bad practice)
  5. !important (bad practice)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

Why is using !important considered bad practice?

A

bad practice because it breaks natural cascading and makes debugging more difficult

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

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

A

because they are block-level elements

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

What is the default value for the position property of HTML elements?

A

position: static

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

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

A

position: relative element will going on top of other elements (as they stay statically positioned to where they should have been if that element were not moved)

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

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

A

position: relative will allow that element to move relative to where it normally should have been, going on top of other elements (as they stay statically positioned to where they should have been)

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

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

A

position: absolute makes other elements treat this element as if it does not exist

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

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

A

position: absolute positions element relative to the parent container

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

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

A

set the container you want to constrain it to a non-static position (position: absolute elements will constrain themselves to the nearest non-static container)

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

What are the four box offset properties?

A

top
bottom
right
left

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

What is the purpose of variables?

A

variables store data of a script into a variable for later use that can be changed

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

How do you declare a variable?

A

using the var keyword (or const or let), variable name, and assignment operator

var variableName = ‘value’;

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

What characters are allowed in variable names?/What are the rules?

A
  1. Must begin with a letter, $ or _
  2. cannot use a - or .
  3. cannot use keywords or reserved words
  4. case sensitive
  5. Non-mystical variable names
  6. capitalize after 1st word
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

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

A

variable and Variable are not the same variable

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

What is the purpose of a string?

A

labelling, adding new content to a page

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

What is the purpose of a number?

A

for arithmetic operations / calculations

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

What is the purpose of a boolean?

A

assigning true and false values and acting like an on/off switch to determine which part of the script should run

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

What does the = operator mean in JavaScript?

A

assignment

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

How do you update the value of a variable?

A

later in the script, set the variable = to the new value

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

What is the difference between null and undefined?

A

null is of type object that is non-existent or empty
undefined if of type undefined which is automatically assigned a value of undefined since no value is specified

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

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

A

makes the console.log easier to understand and read especially when consoling many things at once

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

Give five examples of JavaScript primitives.

A
  1. String
  2. Boolean
  3. Number
  4. Null
  5. Undefined
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
69
Q

What data type is returned by an arithmetic operation?

A

Number

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

What is string concatenation?

A

addition of two strings together with +

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

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

A

string concatenation and arithmetic additions

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

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

A

Boolean (true/false)

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

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

A

shorthand for adding variable to a value and assigning the variable equal to that result i.e.
variableName += 2 is the same as variableName = variableName +2

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

What are objects used for?

A

used to group together key value pairs including data and functions that relate back to a real-world object
i.e. person -> functions like breathing, eating, sleeping and data like favorite color, name

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

What are object properties?

A

variables of object

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

Describe object literal notation.

A

var object = {
property1: value 1,
property2: value2
};

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

How do you remove a property from an object?

A

delete keyword

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

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

A

dot notation or bracket notation
dot notation has to be the exact name of the property

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

What are arrays used for?

A

useful for things where order matters i.e. recipe, shopping list, top 10 favorite movies

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

Describe array literal notation.

A

var array = [ num1, num2, num3];

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

How are arrays different from “plain” objects?

A

doesn’t have key value pairs, order matters

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

What number represents the first index of an array?

A

0

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

What is the length property of an array?

A

property that shows # of items in the array

84
Q

How do you calculate the last index of an array?

A

array.length - 1

85
Q

What is a function in JavaScript?

A

a set of statements that performs a task or calculates a value

86
Q

Describe the parts of a function definition.

A

function keyword, optional function name, optional parameters, opening {, function code block with 0-multiple statements, optional return statement, closing } ;

function functionName(num1, num2) = {
var addition = num1 + num2
return addition
};

87
Q

Describe the parts of a function call.

A

function name and ( ) with arguments listed inside

88
Q

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

A

one defines the function with statements, the other provides the return value of the defined function

89
Q

What is the difference between a parameter and an argument?

A

function call requires arguments, function definition requires parameters

90
Q

Why are function parameters useful?

A

allow you to pass arguments in later when you call the function

91
Q

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

A

stops the code in the function block, anything listed after the return statement will not be read

92
Q

Why do we log things to the console?

A

to help with debugging & make sure our script is running properly

93
Q

What is a method?

A

a function that is a property of an object

94
Q

How is a method different from any other function?

A

method is just attached to an object

95
Q

How do you remove the last element from an array?

A

.pop()

96
Q

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

A

Math.floor()

97
Q

How do you generate a random number?

A

Math.random()

98
Q

How do you delete an element from an array?

A

.pop() - removes the item at the end of the array
.shift() - removes the item at beginning of array

.splice(start, deleteCount, item1, item2, itemN)
^use the deleteCount - removes at index where you specify (start) and deletes # of items where you specify (deleteCount), replaces with the following items listed

99
Q

How do you append an element to an array?

A

.push() - adds to the end of an array
.unshift() - adds to the beginning of an array

.splice(start, deleteCount, item1, item2, itemN)

100
Q

How do you break a string up into an array?

A

.split()

101
Q

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

A

No
you would console.log the original string to check

102
Q

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

A

about 35+

103
Q

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

A

Not always, sometimes you want to use that return value in another way / to create a better/more useful variable or function

104
Q

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

A

about 35+

105
Q

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

A

MDN

106
Q

Give 6 examples of comparison operators.

A

=== strictly equal
!== strictly not equal
> greater than
>= greater than or equal to
< less than
<= less than or equal to

107
Q

What data type do comparison expressions evaluate to?

A

Booleans

108
Q

What is the purpose of an if statement?

A

if statements evaluate a condition to determine the path the script should take / what to do in a given situation

109
Q

Is else required in order to use an if statement?

A

No

110
Q

Describe the syntax (structure) of an if statement.

A

if (condition goes here) { execution/function goes here. }

111
Q

What are the three logical operators?

A

&& and
| | or
! not

112
Q

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

A

by using a logical operator

113
Q

What is the purpose of a loop?

A

Loops check a condition if it is true and if so, allow code block to run. The condition is checked again and run again repeatedly until it is false.

114
Q

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

A

The condition expression is checked each time the loop is run and will only run if the return value is true

115
Q

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

A

iteration refers to the number of times you are looping through the loop

116
Q

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

A

during each iteration of the loop while it is still true (will keep going infinitely if the condition is never false)

117
Q

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

A

only the first time the loop is run

118
Q

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

A

during each iteration of the loop

119
Q

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

A

after the code block is executed, at the end of the iteration, before checking the condition for the next iteration

120
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

121
Q

What does the ++ increment operator do?

A

increments the counter by 1

122
Q

How do you iterate through the keys of an object?

A

Using a for in loop
for (var key in object) {
}

123
Q

What is a “model”?

A

a model is representation of something
in context model is an organized chart/hierarchy of the page in memory called a DOM tree (document object model)

124
Q

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

A

Document Node (refers to the entire page)

125
Q

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

A

object refers to collection of the nodes of the DOM tree which are all represented by objects (document nodes and element nodes - document itself is an object as well)

126
Q

What is a DOM Tree?

A

DOM tree shows the organization/chart of all the page’s nodes and those nodes’ children that are representative of the HTML elements and content.
Not all nodes are elements, but all elements are nodes

127
Q

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

A

.querySelector( ) - takes any CSS selector as an argument and gives the first of its type
.getElementById( ) - takes an id as an argument will return the only id (as they are unique on the page)
.getElementByTagName( )

128
Q

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

A

.querySelectorAll( ) - takes any CSS selector
.getElementsByClassNames( ) - only takes classes
.getElementsByTagNames( ) - only takes element names

all will return collection of items in a NodeList

129
Q

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

A

because you will likely need to use that variable in a function

to save time - document needs to query itself and look for those items each time you do a query search. This way it saves the information as a pointer in memory

130
Q

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

A

console.dir( )

131
Q

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

A

the HTML content has to be loaded on the page before JavaScript can access it (if we don’t, the HTML doesn’t exist yet)

132
Q

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

A

takes any valid CSS selector as an argument and returns the first of that selector’s type

133
Q

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

A

takes any valid CSS selector as an argument and returns a NodeList of all of that selector’s type

134
Q

What is the purpose of events and event handling?

A

events are always happening on a webpage when the user is interacting with it, the event handling allows javascript to “listen” for the events and do something about it/create functionality surrounding particular events
you are able to change css properties dynamically based on how you handle events for example

135
Q

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

A

No, don’t always need to use the event parameter

136
Q

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

A

.addEventListener( )

137
Q

What is a callback function?

A

the callfunction is a function definition that is passed in as an argument in another function

callback function is essentially a function definition that we are handing to another function (function handed to another function that at that point will be called)

can be anonymous or named

purpose is to give functionality to another function - I want this to happen (the outer defined function) when the addEventListener function happens

138
Q

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

A

the event object
who passes in the event object -> the element that we attached it to
the $hoverbutton is the one that calls handleMouseOver and the one that passes in event object because it is the origination point of it in below example

$hoverbutton.addEventListener(‘mouseover’, handleMouseOver);

139
Q

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

A

target property of the event object

dispatches the event, the element which triggers the event, point of interaction by the user.

check by console.dir( )
more info on MDN

140
Q

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

A

the first includes handleClick as part of a callback function within the addEventListener function

the second passes in the return value of the handleClick function into the addEventListener function as an argument

you will NEVER pass a function being called in .addEventListener( ), will be using callback functions

141
Q

What is the className property of element objects?

A

property that allows us to access or set the value of the class for that element

deletes all previous classes listed in the element and replaces with what it set -> REMEDY: .classList, has its own methods to add, remove, toggle, and replace classes

142
Q

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

A

set className property to whatever value you want it to be with the assignment operator

getter or setter = a property that can serve 2 different functions
1. allows you to access className property & setter is activated when you assign it to a value i.e. $hotbutton.classList.add(‘cold’);

143
Q

What is the textContent property of element objects?

A

property that allows you to update the text content of the element that you are working with

144
Q

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

A

TextContent property to whatever value you want it to be with the assignment operator

getter or setter = a property that can serve 2 different functions
1. allows you to access className property & setter is activated when you assign it to a value

145
Q

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

A

No, not always
the event argument is always passed in, but you do not always have to use your parameters

146
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
There would be nothing to track the click number to isolate the amount of clicks so you would have to

would require taking that data from the DOM, taking the string, trimming it away so we are actually getting the number of clicks, doing something with that number (converting it into a number), increment that value and use it to display and make some determination based on it

we would have to RELY on the info in the DOM (which we don’t want to do)

147
Q

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

A

DO NOT WANT TO RELY ON THE DOM (if something can go wrong in 0.00001% of the time, it is too much in programming)

lean towards as much certainty as we can get

So you can reuse it in other cases
adds a layer of complexity
would make us dependent on info stored in the DOM for JavaScript functionality
we’re setting the DOM info, not depending on it

148
Q

What does the transform property do?

A

transform lets you rotate, scale, skeew, or translate an element

149
Q

Give four examples of CSS transform functions.

A

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

150
Q

The transition property is shorthand for which four CSS properties?

A

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

151
Q

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

A

focus

152
Q

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

A

blur

153
Q

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

A

input event

154
Q

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

A

submit event

155
Q

What does the event.preventDefault() method do?

A

prevents the page from reloading / keeps the data instead of throwing it away
will be using this as a standard to take the data before sending it somewhere

156
Q

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

A

refreshes the page and throws the data away

157
Q

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

A

form.elements
name attribute & id

158
Q

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

A

.value
$contactForm.elements.message.value
works the same as textContent, can assign it to something

159
Q

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

A

min-width
max-width
height
& more!

160
Q

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

A

viewport meta tag

161
Q

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

A

No

162
Q

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

A

.appendChild( )

163
Q

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

A

attribute name and value

164
Q

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

A

Create it and then append it

165
Q

What is the textContent property of an element object for?

A

setter and getter
assignment operator to set the value of the text content
or without the assignment to get value of the text content

166
Q

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

A

.setAttribute( )
.ClassName property

167
Q

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

A

Can pass in values automatically with a loop
Fulfills separation of concerns (void functions vs return functions) - not appending to the DOM in functions

Can add it to an event listener

168
Q

What is the event.target?

A

the element that the user interacted with

169
Q

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

A

because of event flow connecting parent elements to their children

170
Q

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

A

.tagName
make sure you search in all CAPS

171
Q

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

A

The closest( ) method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returns null.

selectors, returns itself or matching ancestor, or if nothing then null

172
Q

How can you remove an element from the DOM?

A

.remove( )

173
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 all the new elements first
use event delegation by querying the parent div that the new elements are under
add a click eventListener on the parent element and add functionality that checks for the event if it is event.target and the closest ancestor element that matches the class name of the new element

174
Q

What is the event.target?

A

the element you are working with / the element at which the event took place
point of interaction

175
Q

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

A

makes the element invisible
removes it from the whole flow of the document

visibility hidden does NOT interrupt the flow of the document

176
Q

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

A

argument is a string value, returns a boolean

177
Q

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

A

.getAttribute( )

178
Q

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

A

All of the steps

179
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

could have a bunch of if else statements and use single events for each one
(not as clean)

180
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

you would have to use a bunch of conditional statements

181
Q

What is a breakpoint in responsive Web design?

A

points at which you use a media query is introduced that otherwise overrides the normal flow

visually a shift and something breaks
when a media query is fired

182
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

% are relative to the users browser or screen
will maintain that percentage of its container all the time across device sizes & you do not have to calculate anything

99% of column classes will use this

183
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

Source order: (code reads) top to bottom - last media query we have will be the one that fires and overrides

184
Q

What is JSON?

A

a standard of encoding data so that it can be encoded in another system. An example would be a Javascript object that is converted into a string so that you can transmit the data over to another server
JSON is an extremely common data interchange format used to send and store information in computer systems.

string format to store data

185
Q

What are serialization and deserialization?

A

serialization is converting an object in memory into a stream of bytes (string) so you can store it on a disk or send it over a network
deserialization is converting a stream of bytes (string) into an object in memory

186
Q

Why are serialization and deserialization useful?

A

Because you can send it over a network or store bytes on a disk (hard drive, CD, DVD where data will be burned to it)

187
Q

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

A

JSON.stringify( )

188
Q

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

A

JSON.parse( )

189
Q

How to you store data in localStorage?

A

localStorage.setItem(keyName, keyValue);

190
Q

How to you retrieve data from localStorage?

A

localStorage.getItem(keyName);

191
Q

What data type can localStorage save in the browser?

A

JSON string value

192
Q

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

A

Right before before the page refreshes, before the data is wiped

193
Q

How to you store data in localStorage?

A

localStorage.setItem( ‘keyname’, ‘key value’)

194
Q

How to you retrieve data from localStorage?

A

localStorage.getItem(‘keyname’)

195
Q

What data type can localStorage save in the browser?

A

Strings
(DOM string = javascript strings aka serialization)

196
Q

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

A

before the page is refreshed or closed
when the window is getting torn down by the browser

197
Q

What is a method?

A

A method is a function which is a property of an object.

198
Q

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

A

methods are defined within the object literal in a series of function definitions, a method is called as a property of the object called when optional parameters are included in the parenthesis

199
Q

Describe method definition syntax (structure).

A

methods are defined in the object literal using a method name : function (parameters) { code block for function definition }

200
Q

Describe method call syntax (structure).

A

object.methodName(parameters);

201
Q

How is a method different from any other function?

A

it is attached to an object and must be called as a method of the object that describes the behavior of the object (property of the object)

202
Q

What is the defining characteristic of Object-Oriented Programming?

A

Objects contain both data (properties) and behavior (methods)

203
Q

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

A
  1. Abstraction
  2. Encapsulation
  3. Inheritance
  4. Polymorphism
204
Q

What is “abstraction”?

A

the most important part of the term “abstraction” boils down to being able to work with (possibly) complex things in simple ways.

205
Q

What does API stand for?

A

application programming interface

206
Q

What is the purpose of an API?

A

the purpose of every software API is to give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction

LFZ Web Development (3 decks)

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