Module 1 Javascript Flashcards
(147 cards)
1
Q
What is the purpose of variables?
A
It tells the script to store information to be used again later.
2
Q
How do you declare a variable?
A
declare var, let, or const. Can be declared undefined or can have value assigned initially.
3
Q
How do you initialize (assign a value to) a variable?
A
Use equal sign =
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 .
5
Q
What does it mean to say that variable names are “case sensitive”?
A
Capitalization matters in variable name
6
Q
What is the purpose of a string?
A
String stores a series of letters or other characters, used for adding text.
7
Q
What is the purpose of a number?
A
Store numerical values.
8
Q
What is the purpose of a boolean?
A
Booleans store a true or false value.
9
Q
What does the = operator mean in JavaScript?
A
single equal sign = is for assigning values.
10
Q
How do you update the value of a variable?
A
state variableName = newValue; Reassign, not redeclare.
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.
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.
13
Q
Give five examples of JavaScript primitives.
A
string, number, boolean, null, undefined.
14
Q
What data type is returned by an arithmetic operation?
A
A number
15
Q
What is string concatenation?
A
Combining two or more strings into one string. Numbers concatenated with strings also become a string.
16
Q
What purpose(s) does the + plus operator serve in JavaScript?
A
It can both add numbers as an operator and concatenate strings.
17
Q
What data type is returned by comparing two values (, ===, etc)?
A
Boolean
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.
19
Q
What are objects used for?
A
Grouped set of property variables to create a model of a real world object.
20
Q
What are object properties?
A
The variables within the object
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.
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.
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.
24
Q
What are arrays used for?
A
To have an ordered list of items
25
Describe array literal notation.
The array name being declared and assigned with an opening bracket, a list of values separated by commas, and a closing bracket.
26
How are arrays different from "plain" objects?
Array values are numerically indexed.
27
What number represents the first index of an array?
0
28
What is the length property of an array?
The number of values the array contains
29
How do you calculate the last index of an array?
Take the array.length - 1
30
What is a function in JavaScript?
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.
31
Describe the parts of a function definition.
function name, function parameters, function codeblock with opening and closing curly braces, return statement within codeblock.
32
Describe the parts of a function call.
Function name with the parentheses and parameters within if applicable.
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
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.
34
What is the difference between a parameter and an argument?
Parameters are placeholders for arguments to be used, arguments are what the code actually uses.
35
Why are function parameters useful?
They let you hold the place of future unknown arguments to be used.
36
What two effects does a return statement have on the behavior of a function?
It tells the function to produce a value, prevents anything else after in the function code from being run, and exits the function codeblock.
37
Why do we log things to the console?
To help keep track of what is going on in the code and help with debugging
38
What is a method?
Functions that are properties of an object
39
How is a method different from any other function?
They are stored within and called from an object. They are attached to an object.
40
How do you remove the last element from an array?
use array.prototype.pop() method.
41
How do you round a number down to the nearest integer?
use Math.floor(#) method.
42
How do you generate a random number?
use Math.random() method. Only generates between 0 and 1, 0 and 1 not inclusive.
43
How do you delete an element from an array?
use array.prototype.splice(index, deleteCount)
44
How do you append an element to an array?
Use array.prototype.push() method to end, unshift to push to front.
45
How do you break a string up into an array?
Use string.prototype.split() method.
46
Do string methods change the original string? How would you check if you weren't sure?
No, and you can check with console.log(). Note strings are immutable, they cannot be changed.
47
Roughly how many string methods are there according to the MDN Web docs?
38 (Just note that there are more than 30 and it can be looked up)
48
Is the return value of a function or method useful in every situation?
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.
49
Roughly how many array methods are there according to the MDN Web docs?
36 (Just note that there are more than 30 and it can be looked up)
50
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
51
Give 6 examples of comparison operators.
===, >=, <=, =, !==
52
What data type do comparison expressions evaluate to?
boolean value (true or false)
53
What is the purpose of an if statement?
Sets up conditional statement and tells it run if true.
54
Is else required in order to use an if statement?
No
55
Describe the syntax (structure) of an if statement.
if (condition) {code}
56
What are the three logical operators?
and &&, or ||, not !
57
How do you compare two different expressions in the same condition?
Use logical operator to use both expressions
58
What is the purpose of a loop?
To repeat a code multiple times as needed
59
What is the purpose of a condition expression in a loop?
It tells the loop whether to run or stop
60
What does "iteration" mean in the context of loops?
Each time the loop is run once
61
When does the condition expression of a while loop get evaluated?
Before start of loop every loop
62
When does the initialization expression of a for loop get evaluated?
Once at start of loop
63
When does the condition expression of a for loop get evaluated?
After initialization, before each loop iteration, and after final expression.
64
When does the final expression of a for loop get evaluated?
After code block is completed.
65
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
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
What does the ++ increment operator do?
Adds 1 to the variable and assigns it to the variable.
67
How do you iterate through the keys of an object?
with for...in loop
68
What is a "model"?
A representation of something
69
Which "document" is being referred to in the phrase Document Object Model?
HTML document
70
What is the word "object" referring to in the phrase Document Object Model?
The objects representing the parts document
71
What is a DOM Tree?
The object model made up of objects representing parts of the html document.
72
Give two examples of document methods that retrieve a single element from the DOM.
getElementById() or querySelector()
73
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll(), alternatively getElementsByClassName() or getElementsByTagName()
74
Why might you want to assign the return value of a DOM query to a variable?
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
What console method allows you to inspect the properties of a DOM element object?
console.dir()
76
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to parse all elements of a html document before javascript can access them.
77
What does document.querySelector() take as its argument and what does it return?
It takes css selectors as arguments and returns the first matching element.
78
What does document.querySelectorAll() take as its argument and what does it return?
It takes css selectors as arguments and returns a nodelist of matching elements.
79
What does the transform property do?
Lets you modify an element on the screen. Rotate, scale, skew, or translate (move) an element.
80
Give four examples of CSS transform functions.
rotate, scale, skew, translate
81
What is the purpose of events and event handling?
To create an interactive website, set up functionality in response to user interactions.
82
Are all possible arguments required to use a JavaScript method or function?
No
83
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener method
84
What is a callback function?
A function used as an argument for another function.
85
What object is passed into an event listener callback when the event fires?
Event object.
| Note: event is an object. addEventListener passes in the event object.
86
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
It returns the target that triggered the event. You can console log or look it up on MDN.
87
What is the difference between these two snippets of code?
- element.addEventListener('click', handleClick)
- element.addEventListener('click', handleClick())
One calls a callback function. The other sets up an incomplete definition that does nothing.
88
What is the className property of element objects?
It queries the class name of the element
89
How do you update the CSS class attribute of an element using JavaScript?
Query the class location and reassign className to a new string
90
What is the textContent property of element objects?
It is the text content contained within the node
91
How do you update the text within an element using JavaScript?
Query the text location and reassign textContent to a new string
92
Is the event parameter of an event listener callback always useful?
No
93
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
More complicated.
94
Why is storing information about a program in variables better than only storing it in the DOM?
DOM is always being modified, but javascript maintains variables within it.
95
What event is fired when a user places their cursor in a form control?
focus event
96
What event is fired when a user's cursor leaves a form control?
blur event
97
What event is fired as a user changes the value of a form control?
input event
98
What event is fired when a user clicks the "submit" button within a ?
submit event
99
What does the event.preventDefault() method do?
Prevents page from refreshing after submittal
100
What does submitting a form without event.preventDefault() do?
Page refreshes upon submittal
101
What property of a form element object contains all of the form's controls.
HTMLFormElement.elements
102
What property of form a control object gets and sets its value?
(HTMLFormElement.elements[index#] or HTMLFormElement['name'])
103
What is one risk of writing a lot of code without checking to see if it works so far?
You don't know where or why some part of the code fails or does something unexpected
104
What is an advantage of having your console open when writing a JavaScript program?
To see how the code is working at each step
105
The transition property is shorthand for which four CSS properties?
transition-delay, transition-duration, transition-property, transition-timing-function
106
Does the document.createElement() method insert a new element into the page?
No, it only creates a node
107
How do you add an element as a child to another element?
node.appendChild()
108
What do you pass as the arguments to the element.setAttribute() method?
the name of the attribute as a string and the attribute value as a string.
109
What steps do you need to take in order to insert a new element into the page?
Create an element and append it to an existing element in the document
110
What is the textContent property of an element object for?
The text to be displayed within the text node.
111
Name two ways to set the class attribute of a DOM element.
node.className = 'classname' or element.setAttribute('class', 'classname')
Bonus 3rd: classList.add
112
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
It can repeatedly do the same thing as needed and keeps the code organized.
113
Give two examples of media features that you can query in an @media rule.
Height and width, see mdn for full list of features
114
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag, aka meta tag with name="viewport"
115
What is the event.target?
the target element of that event
116
Why is it possible to listen for events on one element that actually happen its descendent elements?
Bubbling, where the event starts from most specific and flows out to least specific.
117
What DOM element property tells you what type of element it is?
event.target.tagname. Note: always uppercase. Trivia: all HTML used to be written in uppercase, which is why this happens.
118
What does the element.closest() method take as its argument and what does it return?
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
How can you remove an element from the DOM?
element.remove();
120
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?
Add event listener to the parent element.
121
What is a breakpoint in responsive Web design?
Any points at which css changes relative to media query. Not just screen width. Example: print.
122
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?
They stay at a percent relative to the total content width
123
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?
Css is read from top to bottom. Last one read is on top. So smaller min width should be placed earlier.
124
What is the event.target?
The target element of an event triggered
125
What is the affect of setting an element to display: none?
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
What does the element.matches() method take as an argument and what does it return?
It takes a selector and returns true or false.
127
How can you retrieve the value of an element's attribute?
the element.getAttribute(attributeName) method.
128
At what steps of the solution would it be helpful to log things to the console?
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
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?
You would have to set up listener for every tab
130
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?
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
What is JSON?
A string that represents an object which can be passed as information to other computers and programs
132
What are serialization and deserialization
Taking an object and turning it into a string which is saved as different data, and turning a string back into an object.
133
Why are serialization and deserialization useful?
It lets you transfer data between computers and different programs
134
How do you serialize data into JSON using JavaScript?
stringify
135
How do you deserialize a JSON string into a data structure using JavaScript?
parse
136
How do you store data in localStorage?
Use the localStorage.setItem(keyname, keyvalue) method.
137
How do you retrieve data from localStorage?
Use the localStorage.getItem(keyname) method.
138
What data type can localStorage save in the browser?
JSON data.
139
When does the 'beforeunload' event fire on the window object?
Before a page is unloaded, such as if it is refreshed or closed.
140
What is a code block? What are some examples of a code block?
Declarations of code within curly braces { } such as in function, if, for, while.
141
What does block scope mean?
When something exists only within a code block.
142
What is the scope of a variable declared with const or let?
Both are block scope
143
What is the difference between let and const?
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
Why is it possible to .push() a new value into a const variable that points to an Array?
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
How should you decide on which type of declaration to use?
Whether or not you want it to be global scope and if it can be changed.
146
What is the syntax for writing a template literal?
Use backticks `
147
What is "string interpolation"?
Turning a variable value into a string.
