Brainscape's Knowledge GenomeTM

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


See full index

LF > HTML-CSS-JS > Flashcards

HTML-CSS-JS Flashcards

1
Q

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

A

in the 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

in the element

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

Where do the and tags go in a valid HTML document?

A

in the element

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

What is the purpose of a declaration?

A

it tells the browser what type of document it is looking at, so it knows what to do with it

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>" - paragraph
"</p><h1>" heading biggest size
 "" main body
  "" the title, what you see on the tab
  "" the opening tag of an entire html doc
"<div>"</div></h1>
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

they provide additional information about 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

&lt - less than sign

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

take up all the width of its parent element

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

takes up as much space as their content

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

block element takes up the full width available to it and the height is equal to its contents

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 height and width is determined by the boundary of its element tags.

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 list shows a list using numbers <ol>

Unordered shows a list using bullet points </ol><ul></ul>

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

a list 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

<a> </a>
anchor element
attribute href with the value of an absolute/relative URL to —

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

What is an absolute URL?

A

Absolute URL is a link to another website

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

What is a relative URL?

A

relative URL is linking to another page within 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

href=”../folder-file name”

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

href=”folder name/file name”

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

href=”../../file name”

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

href=”file name”

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

allows you to collect user input

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

adding text, radio buttons, checkboxes, drop-down boxes, 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

submit, checkbox, radio

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

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

A

inline element

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 row
  • table data
  • a cell header
  • headings of a table sits inside
  • the table body sits inside
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

They help distinguish between the main content of the table and first row

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

schedules, sports results, fiances, data

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

.name of class

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

element name

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

color name - from 147 selections
hex code
rgb value

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

margin, padding, border

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 selected 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

They’re useful for helping the user interact with the page. To allow the user some visual representation of what they’re doing or that something is interact-able

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

px

em

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

nowrap - all flex items will be on one line

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

because they’re block-level

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 - left to right

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

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

A

it takes the element out of normal flow, and other elements can take its place. Other elements will move into its space.

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

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

A

It looks for a non-static positioned parent to align to.

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

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

A

set a non-static position to the parent you want it to align to.

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

What is the purpose of variables?

A

to remember specific values, to store or manipulate later

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

How do you declare a variable?

A

in the js file

var variableName;

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

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

A

after you declare

variableName = X

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

What characters are allowed in variable names?

A

letters, $, or _ to start
numbers and letters, _ inside
no - or . in a name

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

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

A

the name of the variable needs to match its name exactly, so runFaster is not the same as runfaster.

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

What is the purpose of a string?

A

to have text content as a value of a variable. Literal representation of characters.

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

What is the purpose of a number?

A

math, size of a screen, moving the position of something on screen. Setting time.
Hold and represent numerical data.

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

What is the purpose of a boolean?

A

to hold either true or false.

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

What does the = operator mean in JavaScript?

A

assignment operator, assign a value to something

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

How do you update the value of a variable?

A

by assigning it a new value

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

What is the difference between null and undefined?

A

null is an intentionally nonexistent or invalid object.

undefined is something that has a variable that is only declared and not assigned a value.

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

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

A

labels help to distinguish what is being logged to the console if you have multiple console logs.

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

Give five examples of JavaScript primitives.

A

null, undefined, boolean, string, number

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

What is string concatenation?

A

combining two or more strings to make a longer string.

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

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

A

to add two things together, either by concatenation or numerically

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

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

A

boolean, true or false

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

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

A

it adds the value of the right operand to a variable and assigns the results to the variable.

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

What are objects used for?

A

grouping together sets of variables and functions to create a model of something you would recognize in the real world.

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

What are object properties?

A

properties are variables

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

Describe object literal notation.

A

it is creating an object by first typing
var objectName = {
propertyName: propertyValue,
};

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

How do you remove a property from an object?

A

using the delete operator

delete objectName.propertyName

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

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

A

dot notation
objectName.propertyName = propertyValue;

bracket notation
objectName[‘propertyName’] = propertyValue;

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

What are arrays used for?

A

lists or sets of values that are related to each other

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

Describe array literal notation.

A

var arrayName = [‘arrayValue1’,’arrayValue2’]

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

How are arrays different from “plain” objects?

A

are numerically indexed

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

What is the length property of an array?

A

arrayName.length - it tells you the amount of values in the array.

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

How do you calculate the last index of an array?

A

(arrayName.length - 1)

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

What is a function in JavaScript?

A

A small program that can be called and reused for a number of different situations.

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

Describe the parts of a function definition.

A 
function keyword
optional name
parameters
code block
optional return statement
end of the function code block
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
79
Q

Describe the parts of a function call.

A

typing the function keyword and its parameters.

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

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

A

A call uses a function already defined, while a definition is creating a function to be called

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

What is the difference between a parameter and an argument?

A

parameter is a placeholder for arguments

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

Why are function parameters useful?

A

allow us to give data to functions

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

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

A
  1. Causes the function to produce a value we can use

2. Prevents any more code in the functions code block from being run.

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

Why do we log things to the console?

A

To test our JS

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

What is a method?

A

a Function that is a property of an object.

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

How is a method different from any other function?

A

methods are called to/from an object

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

How do you remove the last element from an array?

A

pop() method, removes the last element from an array

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

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

A

Math.floor() method

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

How do you generate a random number?

A

Math.random() creates a # 1 or 0, to make a larger random number it must be multiplied by another number.

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

How do you delete an element from an array?

A

splice(index starting #, how many elements to remove)

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

How do you append an element to an array?

A

push() method adds one or more elements to the end of an array.

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

How do you break a string up into an array?

A

split() method

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

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

A

String methods do not change the original string. Strings are immutable, so any changes to strings are actually new strings.
log the console object

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

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

A

50

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

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

A

no

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

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

A

38

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

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

A

MDN

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

Give 6 examples of comparison operators.

A 
> less then
> greater then
>= greater then or equals
<= less then or equals
=== strictly equals
!= is not equal to
== equals
!== strictly not equal
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
99
Q

What data type do comparison expressions evaluate to?

A

boolean

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

What is the purpose of an if statement?

A

What is the purpose of an if statement?

to determine if the condition is true or false

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

Is else required in order to use an if statement?

A

no

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

Describe the syntax (structure) of an if statement.

A

if keyword
condition
curly brace - code to execute if value is true - closing curly brace

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

What are the three logical operators?

A

|| one is true - logical or
&& both are true - logical and
! - logical not - inverts the boolean value

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

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

A

put them in parenthesis and use a logical operator

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

What is the purpose of a loop?

A

Loops check a condition, until the condition returns false.

Loops allow us to create a code block and repeat it as fast as the computer can do it.

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

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

A

It tells the loop when to stop running

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

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

A

one full pass through a loop. The code block running one time.

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

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

A

before each iteration of the loop

109
Q

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

A

before the loop runs for the first time

110
Q

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

A

before each loop iteration

111
Q

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

A

at the end of each loop iteration

112
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

113
Q

What does the ++ increment operator do?

A

increases something by 1

114
Q

How do you iterate through the keys of an object?

A

for in loop

115
Q

What are the four components of “the Cascade”.

A

Source Order
inheritance
Specificity
!Important

116
Q

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

A

It means how the CSS rule sets are listed, from top to bottom, the last rule having the priority

117
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

CSS inheritance - Fonts and Colors
CSS rule sets for certain properties are automatically transferred to the children elements.
using inherit keyword after the the property
propertyName: inherit;

118
Q

List the three selector types in order of increasing specificity.

A

Type(element tag)
Class
ID

119
Q

Why is using !important considered bad practice?

A

because it can make debugging more difficult

120
Q

What is a “model”?

A

a representation of something

121
Q

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

A

a representation of the html

122
Q

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

A

html, and the elements within the html

123
Q

What is a DOM Tree?

A

a tree showing the relationship between the elements making up the html

124
Q

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

A

.querySelector

.getElementById

125
Q

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

A

.querySelectorAll

126
Q

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

A

because you dont want to query the document more than necessary

127
Q

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

A

console.dir

128
Q

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

A

because the html runs from top to bottom

129
Q

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

A

a valid css selector, return the first instance it locates

130
Q

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

A

a valid css selector, a node list of those items that apply

131
Q

Why do we log things to the console?

A

to see what the code is doing and to confirm the data

132
Q

What is the purpose of events and event handling?

A

to do something when the user does something specific

When something happens, we have something else happen in return.

133
Q

What do [] square brackets mean in function and method syntax documentation?

A

optional arguments/parameters

134
Q

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

A

addEventListenr()

135
Q

What is a callback function?

A

A function that we do not call directly. The function called into the addEventListener.

136
Q

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

A

the event object

137
Q

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

A

event.target is the element where the event takes place or is the origin of the event. MDN

138
Q

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

A

element. addEventListener(‘click’, handleClick) - indicates that the function should run when the event happens.
element. addEventListener(‘click’, handleClick()) - indicates that the function should run when the page loads.

139
Q

What is the className property of element objects?

A

it can assign a class name to an element

140
Q

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

A

.className = “new class name”;

141
Q

What is the textContent property of element objects?

A

shows the text content in that element

142
Q

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

A

.textContent = “new text content”;

143
Q

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

A

No

144
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

145
Q

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

A

calling the DOM over and over can be taxing on the browser. Better to keep it controlled in javascript

146
Q

What does the transform property do?

A

it can rotate, scale, etc an image

147
Q

Give four examples of CSS transform functions.

A

rotate
translateY - move up and down on the Y axis
scale
matrix

148
Q

The transition property is shorthand for which four CSS properties?

A

transition-delay: the time before starting a transition
transition-duration: the time it takes to complete the transition
transition-property: which property to change
transition-timing-function: lets you vary the speed of the transition over its duration

149
Q

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

A

focus

150
Q

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

A

blur

151
Q

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

A

input

152
Q

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

A

submit

153
Q

What does the event.preventDefault() method do?

A

stops any default behavior of an element.

for forms - prevents the page from reloading and sending the submitted information out

154
Q

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

A

It adds the form’s values to the URL

155
Q

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

A

.elements

156
Q

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

A

.value

157
Q

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

A

It can be harder to discover where your error is, if there is one.

158
Q

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

A

You can test and see

159
Q

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

A

no, it just creates the element.

160
Q

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

A

parentEleName.appendChild(child name)

161
Q

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

A

attribute name and its value

element attributes, like src for images or href for links.

162
Q

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

A 
var newPElement = document.createElement('p');
return the element
163
Q

What is the textContent property of an element object for?

A

its used to get or add textContent to an element.

164
Q

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

A

elementName.className = ‘class-name’;

elementName.setAttribute(‘class’, ‘class-name’)

165
Q

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

A

It can be used over and over again.

It can take in sets of data like an array and create multiple items with different information.

166
Q

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

A

height

width

167
Q

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

A

meta name=”viewport”

168
Q

What is the event.target?

A

the element or area where the event took place

169
Q

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

A

because the descendant is inside the parent, so in interacting with the descendant you are also interacting with the parent.
Event bubbling

170
Q

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

A

event.target.tagName

171
Q

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

A 
class name or element name
the closest parent element that matches that class or element
172
Q

How can you remove an element from the DOM?

A

nameOfElement.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

event delegation, by adding an eventlistener to the parent element.

174
Q

What is the event.target?

A

the element where the event took place. the point of interaction

175
Q

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

A

It hides the element from view, while not taking up any space on the page.

visibility none, hides the element from view, but still maintains its space.

176
Q

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

A

an element tagName or classname

177
Q

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

A

eleName.getattribute(attName)

178
Q

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

A

anytime you change something or add something new

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

manually query each tab and event

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

if statements running through each individual view to check if it matches.

181
Q

What is a breakpoint in responsive Web design?

A

the point at which the web page changes based on meeting specific cretiriea

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

percentage will always take up the same amount of space on each and every screen regardless of pixel count.
columns and images - %
padding and margin - fixed amounts, like px

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

because code is read from top to bottom, so the furthermost most rule will take precedent

184
Q

What is JSON?

A

Text based data format that uses JS object syntax.

185
Q

What are serialization and de-serialization?

A

Serialization is converting a native object into a string(stream of bytes).
de-serialization is converting a string(stream of bytes) to a native object.

186
Q

Why are serialization and de-serialization useful?

A

Its useful for transferring data between computer systems

187
Q

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

A

JSON.stringify()

188
Q

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

A

JSON.parse()

189
Q

How to you store data in localStorage?

A

localStorage.setItem(key name, value )

190
Q

How to you retrieve data from localStorage?

A

localStorage.getItem(key name, value or Var)

191
Q

What data type can localStorage save in the browser?

A

JSON string

192
Q

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

A

right before the page will unload

193
Q

What is a method?

A

A function that is a property of an object.

194
Q

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

A

method has parameters and the code block for what to do with the parameters.

Calling the method is using it with the proper arguments to get the desired outcome.

195
Q

Describe method definition syntax (structure).

A

var object name = {
method name: function(keyword) (parameters) {
code block for what the method will do with the parameters.
}

196
Q

Describe method call syntax (structure).

A

objectName.methodName(arguments)

197
Q

How is a method different from any other function?

A

a method is tied to a specific object.

198
Q

What is the defining characteristic of Object-Oriented Programming?

A

objects can contain both data(as properties) and behavior(as methods).

199
Q

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

A

Abstraction
Encapsulation
Inheritance
Polymorphism

200
Q

What is “abstraction”?

A

Being able to work with complex things in simple ways.

201
Q

What does API stand for?

A

Application programming interface

202
Q

What is the purpose of an API?

A

simplifying programming by abstracting the underlying implementation and only exposing objects or actions the developer needs.

a set of services available to a programmer for performing certain tasks.

to share information/functionality

203
Q

What is this in JavaScript?

A

the implicit parameter that refers to the object at call time of all JS functions.

204
Q

What does it mean to say that this is an “implicit parameter”?

A

It is always there, even though it is never explicitly defined.

205
Q

When is the value of this determined in a function; call time or definition time?

A

call time

206
Q

What does this refer to in the following code snippet?

var character = {
  firstName: 'Mario',
  greet: function () {
    var message = 'It\'s-a-me, ' + this.firstName + '!';
    console.log(message);
  }
};
A

character

207
Q

Given the above character object, what is the result of the following code snippet? Why?
character.greet();

A

It’s-a-me, Mario!

208
Q 
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
A

It’s-a-me, undefined.

the this here is referring to the window object and the window does not have a first name property.

209
Q

How can you tell what the value of this will be for a particular function or method definition?

A

if the function/method will be called with an object, like object.method, this will be have the value of the object. So the item left of the “.” in the call.

210
Q

How can you tell what the value of this is for a particular function or method call?

A

if the function/method will be called with an object, like object.method, this will be have the value of the object. So the item left of the “.” in the call.

if its not called with an object, this will be the global window object.

211
Q

What kind of inheritance does the JavaScript programming language use?

A

prototype-based or prototypal

212
Q

What is a prototype in JavaScript?

A

A generalized object that can be cloned and extended to represent properties and functionality of the specific object.

213
Q

How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?

A

strings, arrays, and numbers all have prototypes that have specific functionality built into them.

214
Q

If an object does not have it’s own property or method by a given key, where does JavaScript look for it?

A

the prototype chain

215
Q

What does the new operator do?

A

creates a new object type based on either a previously user-defined object type or one of the built in object-types that has a constructor function.

Creates a blank, plain JavaScript object.

Adds a property to the new object (__proto__) that links to the constructor function’s prototype object.

Binds the newly created object instance as the this context (i.e. all references to this in the constructor function now refer to the object created in the first step).

Returns this if the function doesn’t return an object.

216
Q

What property of JavaScript functions can store shared behavior for instances created with new?

A

function.prototype

217
Q

What does the instanceof operator do?

A

checks to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.

218
Q

What is a “callback” function?

A

A function passed into another function as an argument, which is then processed inside the outer function to complete the action.

219
Q

Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?

A

setTimeout()

220
Q

How can you set up a function to be called repeatedly without using a loop?

A

setInterval()

221
Q

What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?

A

0, or the next event cycle

222
Q

What do setTimeout() and setInterval() return?

A

timeoutID

223
Q

What is a client?

A

service requesters (or personal computer devices, phones, laptops, etc.)

224
Q

What is a server?

A

Providers of a resource or service

225
Q

Which HTTP method does a browser issue to a web server when you visit a URL?

A

GET

226
Q

What three things are on the start-line of an HTTP request message?

A

an HTTP method: GET PUT POST or HEAD or OPTIONS - describe the action to be performed.

The request target, usually a URL, absolute path

The HTTP version - defines the structure of the remaining message, lets you know the expected version to use for the response

227
Q

What three things are on the start-line of an HTTP response message?

A

1 The protocol version
2 A status code - indicating success or failure
3 A status text - a brief, purely informational, text description of the status code, to help human understanding of the HTTP message.

228
Q

What are HTTP headers?

A 
They let the client and the server pass additional information with an HTTP request or response. It consists of its case-insensitive name followed by a colon: then by its value.
General header 
Request Header
Response Header
Representation header
229
Q

Where would you go if you wanted to learn more about a specific HTTP Header?

A

MDN HTTP Headers

230
Q

Is a body required for a valid HTTP request or response message?

A

No, not all requests or responses have them.

231
Q

What is AJAX?

A

A technique for loading data into part of a page without having to refresh the entire page.
Allows you to make asynchronous requests.

232
Q

What does the AJAX acronym stand for?

A

Asynchronous JavaScript And XML

233
Q

Which object is built into the browser for making HTTP requests in JavaScript?

A

XMLHttpRequest

234
Q

What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?

A

load event

235
Q

Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?

A

Using prototype

236
Q

What is a code block? What are some examples of a code block?

A

the space between {}.
if, else, for, do
A function that has a code block.

237
Q

What does block scope mean?

A

Only exists in the area within the code block

238
Q

What is the scope of a variable declared with const or let?

A

block scoped

var is function scoped

239
Q

What is the difference between let and const?

A

const is immutable (can’t be changed)

let is mutable

240
Q

Why is it possible to .push() a new value into a const variable that points to an Array?

A

The properties are what are unchangeable, but the values can be changed.

241
Q

How should you decide on which type of declaration to use?

A

If you will be reassigning the variable (such as a for loop) you will want to use let.
If the variable will stay the same, use const. Default to const unless you realize it will change and then use let.

242
Q

What is destructuring, conceptually?

A

assigning object/array properties to individual variables

243
Q

What is the syntax for Object destructuring?

A

const/let { property1: variable1, etc } = objectName;

244
Q

What is the syntax for Array destructuring?

A

const/let [index[x], etc] = arrayName;

245
Q

How can you tell the difference between destructuring and creating Object/Array literals?

A

they have reversed syntax. Creation starts with the variable name. Destructuring ends with variable name.

246
Q

What is the syntax for writing a template literal?

A

(backtick) textContent ${varName};

247
Q

What is “string interpolation”?

A

String concatentation using variables or expressions in a way to make the code more readable.

248
Q

What is the syntax for defining an arrow function?

A

const/let funName = (parameter) => {code block}

249
Q

When an arrow function’s body is left without curly braces, what changes in its functionality?

A

returns expression- implicit return, auto return

250
Q

How is the value of this determined within an arrow function?

A

Whatever this is where its defined, the arrow function will be that this.
Captures the this value of the enclosing context, instead of creating its own this context.

251
Q

What is a CLI?

A

Command line interface

252
Q

What is a GUI?

A

Graphical user interface

253
Q

Give at least one use case for each of the commands listed in this exercise.

A

man - look up command information
cat - combine the contents of files into one file, print the file info to the cmd line
ls - listing out what is in a folder
pwd - tells you exactly where you’re at. see the contents of your current folder
echo - print something to the cmd window
touch - create files
mkdir - create directories and folders in folders
mv - rename or move a folder or file somewhere else
rm - remove files or folders
cp - copy files or folders

254
Q

What is Node.js?

A

cmd line program that allows for JavaScript to be run outside of a browser

255
Q

What can Node.js be used for?

A

to build back ends for web apps, cmd line programs, or automation.

256
Q

What is a REPL?

A

Read-eval-print loop

A programming environment that takes single user inputs and executes them

257
Q

When was Node.js created?

A

May 27th, 2009

258
Q

What back end languages have you heard of?

A

Ruby, Java, Python, PHP, C#, JavaScript

259
Q

What is a computer process?

A

An instance of a computer program that is being executed. The program passes an input to the computer and the computer returns an output.

260
Q

Why should a full stack Web developer know that computer processes exist?

A

To understand how your apps and code actually work with the computer. Good to know and understand the load and resources that being used at once.

261
Q

What is the process object in a Node.js program?

A

a global object that provides information about, and control over, the current running Node.js process.

262
Q

How do you access the process object in a Node.js program?

A

process

263
Q

What is the data type of process.argv in Node.js?

A

An array

264
Q

What is a JavaScript module?

A

A single .js file

265
Q

What values are passed into a Node.js module’s local scope?

A 
\_\_dirname
\_\_filename
require
exports
module
266
Q

Give two examples of truly global variables in a Node.js program.

A

process
console
require

267
Q

What is the purpose of module.exports in a Node.js module?

A

to allow the use of a function or item in other modules

268
Q

How do you import functionality into a Node.js module from another Node.js module?

A

in module you want to export from you use module.export = nameOfWhatYoureExporting

in module you are wanting to import to you use const nameOfWhatYourExporting = require(‘filePath’)

LF (1 decks)

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