Module 1 Javascript Flashcards

1
Q

What is the purpose of variables?

A

It tells the script to store information to be used again later.

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

How do you declare a variable?

A

declare var, let, or const. Can be declared undefined or can have value assigned initially.

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

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

A

Use equal sign =

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

What characters are allowed in variable names?

A

Must start with any letter, dollar sign $, or underscore _, numbers as long as it is not the first letter, no - or .

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

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

A

Capitalization matters in variable name

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

What is the purpose of a string?

A

String stores a series of letters or other characters, used for adding text.

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

What is the purpose of a number?

A

Store numerical values.

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

What is the purpose of a boolean?

A

Booleans store a true or false value.

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

What does the = operator mean in JavaScript?

A

single equal sign = is for assigning values.

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

How do you update the value of a variable?

A

state variableName = newValue; Reassign, not redeclare.

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

What is the difference between null and undefined?

A

Null represents an nonexistend or invalid object. Undefined means nothing has been declared or assigned, so there is nothing, not even an object.

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

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

A

Helps you debug so you know at which step and for what reason the console is logged.

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

Give five examples of JavaScript primitives.

A

string, number, boolean, null, undefined.

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

What data type is returned by an arithmetic operation?

A

A number

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

What is string concatenation?

A

Combining two or more strings into one string. Numbers concatenated with strings also become a string.

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

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

A

It can both add numbers as an operator and concatenate strings.

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

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

A

Boolean

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

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

A

Adds the value to the right and assigns it to the variable on the left.

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

What are objects used for?

A

Grouped set of property variables to create a model of a real world object.

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

What are object properties?

A

The variables within the object

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

Describe object literal notation.

A

the object name is being declared and assigned with opening curly brace, within are key values and property pairs separated by commas, and closing curly brace.

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

How do you remove a property from an object?

A

Use delete keyword and call out the object property using either dot or bracket notation.

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

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

A

Name the object property using either dot or bracket notation, and assign a new value if desired.

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

What are arrays used for?

A

To have an ordered list of items

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

Describe array literal notation.

A

The array name being declared and assigned with an opening bracket, a list of values separated by commas, and a closing bracket.

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

How are arrays different from “plain” objects?

A

Array values are numerically indexed.

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

What is the length property of an array?

A

The number of values the array contains

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

How do you calculate the last index of an array?

A

Take the array.length - 1

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

What is a function in JavaScript?

A

Pack up a dynamic code that can be reused to do something within javascript. Or- set of instructions that we can call again at any time.

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

Describe the parts of a function definition.

A

function name, function parameters, function codeblock with opening and closing curly braces, return statement within codeblock.

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

Describe the parts of a function call.

A

Function name with the parentheses and parameters within if applicable.

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

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

A

Function definition sets up the code for the function to run when it is called, but does not run it. Function call runs the code within the definition.

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

What is the difference between a parameter and an argument?

A

Parameters are placeholders for arguments to be used, arguments are what the code actually uses.

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

Why are function parameters useful?

A

They let you hold the place of future unknown arguments to be used.

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

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

A

It tells the function to produce a value, prevents anything else after in the function code from being run, and exits the function codeblock.

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

Why do we log things to the console?

A

To help keep track of what is going on in the code and help with debugging

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

What is a method?

A

Functions that are properties of an object

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

How is a method different from any other function?

A

They are stored within and called from an object. They are attached to an object.

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

How do you remove the last element from an array?

A

use array.prototype.pop() method.

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

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

A

use Math.floor(#) method.

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

How do you generate a random number?

A

use Math.random() method. Only generates between 0 and 1, 0 and 1 not inclusive.

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

How do you delete an element from an array?

A

use array.prototype.splice(index, deleteCount)

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

How do you append an element to an array?

A

Use array.prototype.push() method to end, unshift to push to front.

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

How do you break a string up into an array?

A

Use string.prototype.split() method.

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

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

A

No, and you can check with console.log(). Note strings are immutable, they cannot be changed.

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

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

A

38 (Just note that there are more than 30 and it can be looked up)

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

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

A

No. Note keyword ‘every’, not always have to be returned. For example, pop method just used to remove something from array but you don’t use what is popped.

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

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

A

36 (Just note that there are more than 30 and it can be looked up)

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

Give 6 examples of comparison operators.

A

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

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

What data type do comparison expressions evaluate to?

A

boolean value (true or false)

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

What is the purpose of an if statement?

A

Sets up conditional statement and tells it run if true.

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

Describe the syntax (structure) of an if statement.

A

if (condition) {code}

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

What are the three logical operators?

A

and &&, or ||, not !

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

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

A

Use logical operator to use both expressions

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

What is the purpose of a loop?

A

To repeat a code multiple times as needed

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

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

A

It tells the loop whether to run or stop

60
Q

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

A

Each time the loop is run once

61
Q

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

A

Before start of loop every loop

62
Q

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

A

Once at start of loop

63
Q

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

A

After initialization, before each loop iteration, and after final expression.

64
Q

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

A

After code block is completed.

65
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. Note break ends a loop, but does not end the function. Bonus: continue tells loop don’t do anything for the iteration, go to next.

66
Q

What does the ++ increment operator do?

A

Adds 1 to the variable and assigns it to the variable.

67
Q

How do you iterate through the keys of an object?

A

with for…in loop

68
Q

What is a “model”?

A

A representation of something

69
Q

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

A

HTML document

70
Q

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

A

The objects representing the parts document

71
Q

What is a DOM Tree?

A

The object model made up of objects representing parts of the html document.

72
Q

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

A

getElementById() or querySelector()

73
Q

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

A

querySelectorAll(), alternatively getElementsByClassName() or getElementsByTagName()

74
Q

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

A

So you can easily save and reference the location of the elements to be used again later. Why it is useful: saves time to keep querying the every time an element needs to be pulled up. Saving it in variable no longer re-queries the whole document.

75
Q

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

A

console.dir()

76
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 parse all elements of a html document before javascript can access them.

77
Q

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

A

It takes css selectors as arguments and returns the first matching element.

78
Q

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

A

It takes css selectors as arguments and returns a nodelist of matching elements.

79
Q

What does the transform property do?

A

Lets you modify an element on the screen. Rotate, scale, skew, or translate (move) an element.

80
Q

Give four examples of CSS transform functions.

A

rotate, scale, skew, translate

81
Q

What is the purpose of events and event handling?

A

To create an interactive website, set up functionality in response to user interactions.

82
Q

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

A

No

83
Q

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

A

addEventListener method

84
Q

What is a callback function?

A

A function used as an argument for another function.

85
Q

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

A

Event object.

Note: event is an object. addEventListener passes in the event object.

86
Q

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

A

It returns the target that triggered the event. You can console log or look it up on MDN.

87
Q

What is the difference between these two snippets of code?

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

One calls a callback function. The other sets up an incomplete definition that does nothing.

88
Q

What is the className property of element objects?

A

It queries the class name of the element

89
Q

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

A

Query the class location and reassign className to a new string

90
Q

What is the textContent property of element objects?

A

It is the text content contained within the node

91
Q

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

A

Query the text location and reassign textContent to a new string

92
Q

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

A

No

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

94
Q

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

A

DOM is always being modified, but javascript maintains variables within it.

95
Q

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

A

focus event

96
Q

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

A

blur event

97
Q

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

A

input event

98
Q

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

A

submit event

99
Q

What does the event.preventDefault() method do?

A

Prevents page from refreshing after submittal

100
Q

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

A

Page refreshes upon submittal

101
Q

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

A

HTMLFormElement.elements

102
Q

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

A

(HTMLFormElement.elements[index#] or HTMLFormElement[‘name’])

103
Q

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

A

You don’t know where or why some part of the code fails or does something unexpected

104
Q

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

A

To see how the code is working at each step

105
Q

The transition property is shorthand for which four CSS properties?

A

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

106
Q

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

A

No, it only creates a node

107
Q

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

A

node.appendChild()

108
Q

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

A

the name of the attribute as a string and the attribute value as a string.

109
Q

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

A

Create an element and append it to an existing element in the document

110
Q

What is the textContent property of an element object for?

A

The text to be displayed within the text node.

111
Q

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

A

node.className = ‘classname’ or element.setAttribute(‘class’, ‘classname’)
Bonus 3rd: classList.add

112
Q

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

A

It can repeatedly do the same thing as needed and keeps the code organized.

113
Q

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

A

Height and width, see mdn for full list of features

114
Q

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

A

viewport meta tag, aka meta tag with name=”viewport”

115
Q

What is the event.target?

A

the target element of that event

116
Q

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

A

Bubbling, where the event starts from most specific and flows out to least specific.

117
Q

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

A

event.target.tagname. Note: always uppercase. Trivia: all HTML used to be written in uppercase, which is why this happens.

118
Q

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

A

It takes a selector as argument and returns the closest ancestor to that selector, or the element itself. Or null if nothing can be found.

119
Q

How can you remove an element from the DOM?

A

element.remove();

120
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 event listener to the parent element.

121
Q

What is a breakpoint in responsive Web design?

A

Any points at which css changes relative to media query. Not just screen width. Example: print.

122
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

They stay at a percent relative to the total content width

123
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

Css is read from top to bottom. Last one read is on top. So smaller min width should be placed earlier.

124
Q

What is the event.target?

A

The target element of an event triggered

125
Q

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

A

It is not visibly displayed on a document and removes that element from document flow. Note this is different from visibility: none. Visibility none will maintain its space. Opacity none will still be interactable.

126
Q

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

A

It takes a selector and returns true or false.

127
Q

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

A

the element.getAttribute(attributeName) method.

128
Q

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

A

All steps such as checking event target, event target matches, event target attribute, whether the loops are properly looping through the right elements, etc.

129
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

You would have to set up listener for every tab

130
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 manually check each nodelist with long list of if-statements to see if it is the right node to show or hide.

131
Q

What is JSON?

A

A string that represents an object which can be passed as information to other computers and programs

132
Q

What are serialization and deserialization

A

Taking an object and turning it into a string which is saved as different data, and turning a string back into an object.

133
Q

Why are serialization and deserialization useful?

A

It lets you transfer data between computers and different programs

134
Q

How do you serialize data into JSON using JavaScript?

A

stringify

135
Q

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

A

parse

136
Q

How do you store data in localStorage?

A

Use the localStorage.setItem(keyname, keyvalue) method.

137
Q

How do you retrieve data from localStorage?

A

Use the localStorage.getItem(keyname) method.

138
Q

What data type can localStorage save in the browser?

A

JSON data.

139
Q

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

A

Before a page is unloaded, such as if it is refreshed or closed.

140
Q

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

A

Declarations of code within curly braces { } such as in function, if, for, while.

141
Q

What does block scope mean?

A

When something exists only within a code block.

142
Q

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

A

Both are block scope

143
Q

What is the difference between let and const?

A

let can declare new variables in loops so each iteration is tracked. Const ‘constant’ creates a read-only variable that cannot be changed, though the contents of the variable (if it is object, array, or number) can be changed.

144
Q

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

A

The variable cannot be reassigned so the reference to the array is immutable. But you can change the array contents within. It is only immutable reference. You can’t change a string for example.

145
Q

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

A

Whether or not you want it to be global scope and if it can be changed.

146
Q

What is the syntax for writing a template literal?

A

Use backticks `

147
Q

What is “string interpolation”?

A

Turning a variable value into a string.