JavaScript Flashcards
1
Q
What is the purpose of variables?
A
they hold a value and preserve it for future use
2
Q
How do you declare a variable?
A
var, let, const
3
Q
How do you initialize(assign a value to) a variable?
A
=
4
Q
What characters are allowed in variable names?
A
letters, numbers, $, _
5
Q
What does it mean to say that variable names are “case sensitive”?
A
need to make sure casing is correct
6
Q
What is the purpose of a string?
A
adds new text-value content into a page
7
Q
What is the purpose of a number?
A
math use
8
Q
What is the purpose of a boolean?
A
making decisions
9
Q
What does the = operator mean in JavaScript?
A
making the variable contain value - assign value to a variable
10
Q
How do you update the value of a variable?
A
variableName = new value;
11
Q
What is the difference between null and undefined?
A
null: intentionally assign it as empty
undefined: does not exist yet
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
13
Q
Give 5 examples of JavaScript primitives:
A
string, number, boolean, undefined, null
14
Q
What data type is returned by an arithmetic operation?
A
number
15
Q
What is string concatenation?
A
joining together two or more strings to create one new string
16
Q
What purpose does the + operator serve in JavaScript?
A
adds one value to another (math and concatenation)
17
Q
What data type is returned by comparing two values (, ===, etc..)?
A
a boolean value - based on whether the comparison is true
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
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
20
Q
What are object properties?
A
key/value pairs
21
Q
Describe object literal notation:
A
{
key: value (properties),
method: function() {}
};
22
Q
How do you remove(delete) a property from an object?
A
delete object.property
23
Q
What are the two ways to get or update the value of a property?
A
- dot notation
- square bracket syntax
24
Q
What are arrays used for?
A
a list of values that are related to each other
25
Describe array literal notation:
var arrayName = ['value', 'value', 'value'];
26
How are arrays different than "plain" objects?
- array values are numbered
- the key for each value is its index #, rather than property name
- order matters, whereas order in objects doesn't
27
What number represents the first index of an array?
0
28
What is the length property of an array?
tells us the number of items in the array
| - starts count at 1 rather than 0
29
How do you calculate the last index of an array?
the value of the array's length property minus 1
30
What is a function in JavaScript?
a reusable block of code
31
Describe the parts of a function definition:
function keyword, function name(parameters), {code block}
32
Describe the parts of a function call:
functionName(arguments);
33
What are the differences between function definition and a function call?
```
function definition: has function keyword, parameters, and {code block}
function call: functionName followed by arguments in parenthesis
```
34
Why do we log things to the console?
to verify expected output and see changes over time
35
What is a method?
a function stored in a property of an object
36
How is a method call different from any other function?
you need to specify what object they are coming from
| - object.method()
37
How do you remove the last element of an array?
.pop()
38
How do you round a number down to the nearest integer?
Math.floor()
39
How do you generate a random number?
Math.random()
40
How do you delete an element from an array?
.splice()
41
How do you append an element to an array?
.push()
42
How do you break a string up into an array?
.split(' ')
43
Do string methods change the original string? How would you check?
No - strings cant change.
| console.log()
44
Is the return value of a function or method useful in every situation?
No - sometimes you just want it to do what it does
45
What 3 letter acronym should you always include in your google search about a JavaScript method or CSS property?
MDN
46
Give six examples of comparison operators:
>, =, <=, ===, !==
47
What data type do comparison expressions evaluate to?
boolean
48
What is the purpose of an if statement?
checks if a condition is true, then executes code in the code block
49
Is else required in order to use an if statement?
No
50
Describe the syntax of an if statement
if, (condition), conditional code block
51
What are the three logical operators?
&& (and), | | (or), ! (not)
52
How do you compare two different expressions in the same condition?
with logical operators (&& | |)
53
What is the purpose of a loop?
to give us the ability to repeat actions over and over for as long as we need
54
What is the purpose of a condition expression in a loop?
how to end the loop
55
What does 'iteration' mean in the context of a loop?
one execution of the code block
56
When does the condition expression of a while loop get evaluated?
before each pass through the loop
57
When does the initialization expression of a for loop get evaluated?
before anything
58
When does the condition expression of a for loop get evaluated?
before each loop iteration
59
When does the final expression of a for loop get evaluated?
after each loop iteration - before the next evaluation of the condition
60
Besides a return statement, which exits its entire function block, Which keyword exits a loop before its condition expression evaluates to false?
break
61
What does the ++ increment operator do?
adds 1 to the counter variable
62
How do you iterate through the keys of an object?
a for..in loop
| (only used for objects);
63
Why do we log things to the console?
To verify expected output and see changes overtime
64
What is a "model"
a recreation/representation of something
65
Which "document" is being referred to in the phrase "Document Object Model"?
The HTML document
66
What is the word "object" referring to in the phrase "Document Object Model"?
it's an object that is made referring to the original html document
67
What is a DOM Tree?
an element and all of its children elements and related information. similar to a family tree
68
Give 2 examples of document methods that retrieve a single element from the DOM:
.getElementById( ) & .querySelector( )
69
Give 1 example of a document method that retrieves multiple elements from the DOM at once:
.querySelectorAll( )
70
Why might you want to assign the return value of a DOM query to a variable?
if the script needs to use the same element(s) more than once
71
What console method allows you to inspect the properties of a DOM element object?
console.dir( )
72
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
the HTML content needs to load first
73
What does document.querySelector( ) take as its argument and what does it return?
argument: 'css Selector' returns: first element within the document that matches the selector
74
What does document.querySelectorAll( ) take as its argument and what does it return?
argument: 'css Selector' returns: all elements within the document that match the selector
75
What is the purpose of events and event-handling?
user interaction
76
Are all possible parameters required to use a JavaScript method or function?
No, just the first two (event and handler) are
77
What method of element objects lets you set up a function to be called when a specific type of event is called?
.addEventListener( )
78
What is a callback function?
passing a function by value. (a function as an argument in another call)
79
What object is passed into an event listener callback when the event fires?
event object - (an object built by javascript)
80
What is the event.target? If you weren't sure, how would you check? Where could you get more info about it?
- an object referencing what started the event process/where the event started.
- can console.log it
- MDN
81
What is the .className property of element objects?
gets and sets the value of the class attribute of the specified element
82
How do you update the CSS class attribute of an element using JavaScript?
element.className = 'class-name'
83
What is the .textContent property of element objects?
represents the text content of the node(element) and its descendants
84
How do you update the text within an element using JavaScript?
element.textContent = 'new text content'
85
Is the event parameter of an event listener callback always useful?
no - but always use it so you know its an event handler function
85
Is the event parameter of an event listener callback always useful?
no - but always use it so you know its an event handler function
86
Why is storing information about a program in variables better than only storing it in the DOM?
it's easily accessible and easy to update
87
What event is fired when a user places their cursor in a form control?
'focus'
88
What event is fired when a users cursor leaves a form control?
'blur'
89
What event is fired as a user changes the value of a form control?
'input'
90
What event is fired when a user clicks the 'submit' button with a form?
'submit'
91
What does the event.preventDefault( ) method do?
prevents the default action from taking place as it normally would
92
What does submitting a form without event.preventDefault( ) do?
refreshes the page
93
What property of a form element object contains all of the form controls contained in the form element?
.elements
94
What property of a form-control object gets and sets its value?
.value
95
What is one risk of writing a lot of code without checking to see if it works so far?
you wont know what exactly caused the error/misfunction
96
Does the document.createElement( ) method insert a new element to the page?
no - still hasn't been appended to the visible page yet
97
How do you add an element as a child to another element?
.appendChild( )
syntax = oldEL.appendChild(new-El)
98
What do you pass as the arguments to the element.setAttribute( ) method?
('name', 'value')
99
What steps do you need to take to insert a new element into the page?
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
What is the .textContent property of an element object for?
represents the text content of the node/element and its descendants
101
Name two ways to set the class attribute of a DOM element:
- element.setAttribute('class', 'value')
| - element.className = 'new'
102
What are two advantages of defining a function to create something?
(like the work of creating a DOM tree?)
- the work becomes much simpler and reusable
| - easier to keep track of values and methods etc..
103
What is the event.target?
the object onto which the event happened/started on
104
Why is it possible to listen to events on one element that actually happened on its descendant elements?
due to event bubbling - (start at where event happened and makes its way up)
105
What DOM element property tells you what type of element it is?
.tagName
106
What does the element.closest( ) method take as its argument and what does it return?
- argument: css-selector
| - returns: DOM of closest ancestor that matches that selector
107
How can you remove an element from the DOM?
element.remove( )
108
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?
by adding an event listener to the parent element
109
What is the event.target?
the object of which the event happened/started on
110
What is the affect of setting an element to display: none?
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
What does the element.matches( ) method take as an argument and what's it return?
argument: a string representing the selector to test
returns: a boolean value
112
How can you retrieve the value of an elements attribute?
element.getAttribute( 'attribute' )
113
At what steps of the solution would it be helpful to log things to the console?
declaring a variable, changing variable value, going through a loop, conditionals.... basically after everything!
114
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)
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
What is a breakpoint in responsive web design?
- 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
What is the advantage of using a percentage width instead of a fixed (px) width for a column class in a responsive layout?
It becomes responsive/adaptive in relation to the size of the container/viewport
117
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?
due to media queries being reliant on source order - (further bottom on stylesheet has priority)
118
How do you store data in localStorage?
localStorage.setItem( 'keyName', keyValue);
119
How do you retrieve data from localStorage?
localStorage.getItem ( 'keyName');
120
What data type can localStorage save in the browser?
a string
121
When does the 'beforeunload' event fire on the window object?
before the page unloads (reloading the page, reloading the tab, closing the page)
122
What must the return value of myFunction be if the following expression is possible?
myFunction( )( );
must return a function
123
What does this code do?
const wrap = value => ( ) => value;
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
In JavaScript, when is a function's scope determined? When it is called or when it is defined?
- When it is defined
125
What allows JavaScript functions to "remember" values from their surroundings?
- closures
