JavaScript Flashcards

1
Q

What is the purpose of variables?

A

they hold a value and preserve it for future use

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

How do you declare a variable?

A

var, let, const

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

=

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

letters, numbers, $, _

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

need to make sure casing is correct

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

adds new text-value content into a page

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

math use

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

making decisions

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

making the variable contain value - assign value to a variable

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

variableName = new value;

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: intentionally assign it as empty
undefined: does not exist yet

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

To have an immediate reference to what exactly is being logged

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

Give 5 examples of JavaScript primitives:

A

string, number, boolean, undefined, null

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

What is string concatenation?

A

joining together two or more strings to create one new string

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

What purpose does the + operator serve in JavaScript?

A

adds one value to another (math and concatenation)

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

a boolean value - based on whether the comparison is true

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

What does the += operator do?

A

adds the value of the right operand to a variable and assigns the result to the variable

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

What are objects used for?

A

Group together a set of properties and methods 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
20
Q

What are object properties?

A

key/value pairs

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

Describe object literal notation:

A

{
key: value (properties),
method: function() {}
};

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

How do you remove(delete) a property from an object?

A

delete object.property

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
  • dot notation

- square bracket syntax

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

What are arrays used for?

A

a list of values that are related to each other

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

Describe array literal notation:

A

var arrayName = [‘value’, ‘value’, ‘value’];

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

How are arrays different than “plain” objects?

A
  • array values are numbered
  • the key for each value is its index #, rather than property name
  • order matters, whereas order in objects doesn’t
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

tells us the number of items in the array

- starts count at 1 rather than 0

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

the value of the array’s length property minus 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

a reusable block of code

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 keyword, function name(parameters), {code block}

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

functionName(arguments);

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

What are the differences between function definition and a function call?

A
function definition: has function keyword, parameters, and {code block}
function call: functionName followed by arguments in parenthesis
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Why do we log things to the console?

A

to verify expected output and see changes over time

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

What is a method?

A

a function stored in a property of an object

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

How is a method call different from any other function?

A

you need to specify what object they are coming from

- object.method()

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

How do you remove the last element of an array?

A

.pop()

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

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

A

Math.floor()

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

How do you generate a random number?

A

Math.random()

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

How do you delete an element from an array?

A

.splice()

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

How do you append an element to an array?

A

.push()

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

How do you break a string up into an array?

A

.split(‘ ‘)

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

Do string methods change the original string? How would you check?

A

No - strings cant change.

console.log()

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

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

A

No - sometimes you just want it to do what it does

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

What 3 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
46
Q

Give six examples of comparison operators:

A

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

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

What is the purpose of an if statement?

A

checks if a condition is true, then executes code in the code block

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

Describe the syntax of an if statement

A

if, (condition), conditional code block

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

What are the three logical operators?

A

&& (and), | | (or), ! (not)

52
Q

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

A

with logical operators (&& | |)

53
Q

What is the purpose of a loop?

A

to give us the ability to repeat actions over and over for as long as we need

54
Q

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

A

how to end the loop

55
Q

What does ‘iteration’ mean in the context of a loop?

A

one execution of the code block

56
Q

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

A

before each pass through the loop

57
Q

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

A

before anything

58
Q

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

A

before each loop iteration

59
Q

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

A

after each loop iteration - before the next evaluation of the condition

60
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

61
Q

What does the ++ increment operator do?

A

adds 1 to the counter variable

62
Q

How do you iterate through the keys of an object?

A

a for..in loop

(only used for objects);

63
Q

Why do we log things to the console?

A

To verify expected output and see changes overtime

64
Q

What is a “model”

A

a recreation/representation of something

65
Q

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

A

The HTML document

66
Q

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

A

it’s an object that is made referring to the original html document

67
Q

What is a DOM Tree?

A

an element and all of its children elements and related information. similar to a family tree

68
Q

Give 2 examples of document methods that retrieve a single element from the DOM:

A

.getElementById( ) & .querySelector( )

69
Q

Give 1 example of a document method that retrieves multiple elements from the DOM at once:

A

.querySelectorAll( )

70
Q

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

A

if the script needs to use the same element(s) more than once

71
Q

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

A

console.dir( )

72
Q

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

A

the HTML content needs to load first

73
Q

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

A

argument: ‘css Selector’ returns: first element within the document that matches the selector

74
Q

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

A

argument: ‘css Selector’ returns: all elements within the document that match the selector

75
Q

What is the purpose of events and event-handling?

A

user interaction

76
Q

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

A

No, just the first two (event and handler) are

77
Q

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

A

.addEventListener( )

78
Q

What is a callback function?

A

passing a function by value. (a function as an argument in another call)

79
Q

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

A

event object - (an object built by javascript)

80
Q

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

A
  • an object referencing what started the event process/where the event started.
  • can console.log it
  • MDN
81
Q

What is the .className property of element objects?

A

gets and sets the value of the class attribute of the specified element

82
Q

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

A

element.className = ‘class-name’

83
Q

What is the .textContent property of element objects?

A

represents the text content of the node(element) and its descendants

84
Q

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

A

element.textContent = ‘new text content’

85
Q

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

A

no - but always use it so you know its an event handler function

85
Q

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

A

no - but always use it so you know its an event handler function

86
Q

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

A

it’s easily accessible and easy to update

87
Q

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

A

‘focus’

88
Q

What event is fired when a users cursor leaves a form control?

A

‘blur’

89
Q

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

A

‘input’

90
Q

What event is fired when a user clicks the ‘submit’ button with a form?

A

‘submit’

91
Q

What does the event.preventDefault( ) method do?

A

prevents the default action from taking place as it normally would

92
Q

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

A

refreshes the page

93
Q

What property of a form element object contains all of the form controls contained in the form element?

A

.elements

94
Q

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

A

.value

95
Q

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

A

you wont know what exactly caused the error/misfunction

96
Q

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

A

no - still hasn’t been appended to the visible page yet

97
Q

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

A

.appendChild( )

syntax = oldEL.appendChild(new-El)

98
Q

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

A

(‘name’, ‘value’)

99
Q

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

A
  1. create the new element node - document.createElement()
  2. configure the element (add textContent, .className, etc..)
  3. query for the parent element
  4. append new child element onto the parent element
100
Q

What is the .textContent property of an element object for?

A

represents the text content of the node/element and its descendants

101
Q

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

A
  • element.setAttribute(‘class’, ‘value’)

- element.className = ‘new’

102
Q

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

A
  • the work becomes much simpler and reusable

- easier to keep track of values and methods etc..

103
Q

What is the event.target?

A

the object onto which the event happened/started on

104
Q

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

A

due to event bubbling - (start at where event happened and makes its way up)

105
Q

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

A

.tagName

106
Q

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

A
  • argument: css-selector

- returns: DOM of closest ancestor that matches that selector

107
Q

How can you remove an element from the DOM?

A

element.remove( )

108
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

by adding an event listener to the parent element

109
Q

What is the event.target?

A

the object of which the event happened/started on

110
Q

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

A

turns off display of an element so that it has no affect on the layout.
(the document is rendered as though the element didn’t exist)

111
Q

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

A

argument: a string representing the selector to test
returns: a boolean value

112
Q

How can you retrieve the value of an elements attribute?

A

element.getAttribute( ‘attribute’ )

113
Q

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

A

declaring a variable, changing variable value, going through a loop, conditionals…. basically after everything!

114
Q

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

(JS view-swapping exercise)

A

you’d have to make an individual function for each tab/view swap, for each one you add you’d have to keep adding functions..

115
Q

What is a breakpoint in responsive web design?

A
  • the points at which an @media query rule is introduced is known as breakpoints
  • to change the design to a better one suited for the viewport space you have available
116
Q

What is the advantage of using a percentage width instead of a fixed (px) width for a column class in a responsive layout?

A

It becomes responsive/adaptive in relation to the size of the container/viewport

117
Q

If you introduced CSS rules for smaller min-width after the styles for a larger min-width in your stylesheet, the CSS rules for the smaller min-width will “win”.. Why is that?

A

due to media queries being reliant on source order - (further bottom on stylesheet has priority)

118
Q

How do you store data in localStorage?

A

localStorage.setItem( ‘keyName’, keyValue);

119
Q

How do you retrieve data from localStorage?

A

localStorage.getItem ( ‘keyName’);

120
Q

What data type can localStorage save in the browser?

A

a string

121
Q

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

A

before the page unloads (reloading the page, reloading the tab, closing the page)

122
Q

What must the return value of myFunction be if the following expression is possible?

myFunction( )( );

A

must return a function

123
Q

What does this code do?

const wrap = value => ( ) => value;

A

It’s an anonymous function being defined with the parameter value, and within that function’s code block there is another anonymous function being defined with no parameters, and it returns value. The const variable wrap is then assigned the inner function

124
Q

In JavaScript, when is a function’s scope determined? When it is called or when it is defined?

A
  • When it is defined
125
Q

What allows JavaScript functions to “remember” values from their surroundings?

A
  • closures