Javascript Flashcards
(174 cards)
1
Q
What is the purpose of variables?
A
Used to store data
2
Q
How do you declare a variable?
A
var keyword + variable name
3
Q
How do you initialize a variable?
A
By using the assignment operator ( = ) and giving it value
4
Q
What characters are allowed in variable names?
A
Letters, numbers, dollar signs, and underscores
5
Q
What does it mean to say that variable names are “case-sensitive”
A
Uppercase and lowercase variables with the same name will have different values
6
Q
What is the purpose of a string?
A
Used to store data of letters and words.
Used to add new content into a page
Can contain HTML markup
7
Q
What is the purpose of a number?
A
Used for calculations or tasks such as determining size of screen, moving the position of an element on a page, or setting the amount of time an element should take to fade it
8
Q
What is the purpose of a boolean?
A
Helpful in determining which part of a script should run
9
Q
What does the = operator mean in javascript?
A
the assignment operator.
states that you are going to assign value to a variable
10
Q
How do you update the value of a variable?
A
Reassign it.
Variable name + equal sign +new value
11
Q
What is the difference between null and undefined?
A
Null is an assigned value (means nothing)
Undefined means a variable has been declared but not yet defined
Null is an object, undefined is undefined
12
Q
Why is it a good habit to include labels when you log values to the browser console?
A
For clarity - to keep your code clean and help you fix issues
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
Numbers
15
Q
What is string concatenation?
A
Adding two strings together with the + symbol
16
Q
What purpose does the + operator serve in javascript
A
Addition with numbers, concatenation with strings or strings & numbers
17
Q
What data type is returned by comparing two values ( ‘ > ‘, ‘ < ‘ , === ,etc)?
A
Boolean
18
Q
What does the += “plus equal” operator do
A
assigns the value of the right operand to a variable and assigns the result to the variable
x+=5 is the same as x= x+5
19
Q
What are objects for?
A
Grouping together a set of variables and functions to create a model of something
Objects store related data
20
Q
What are object properties?
A
The variables of the object
collection of key: value pairs
21
Q
Describe object literal notation
A
Key value pairs that are separated from each other with a colon and separated from other properties and methods with a comma and then stored in a variable inside curly braces
22
Q
How do you remove a property from an object?
A
delete keyword followed by object name period and property name
delete object.property
23
Q
What are the two ways to get or update the value of a property?
A
dot notation: var name = object.newproperty bracket: var name = object['property']
24
Q
What are arrays used for?
A
storing lists or sets of values
25
Describe the array literal notation
var keyword followed by the name of the array, equal sign, then the lists of values within square brackets.
each value is separated by a comma
26
How are arrays different from ‘plain’ objects?
arrays can store a series of objects and remember their order
27
What number represents the first index of an array?
0
28
What is the length property of an array?
holds the number of items in the array
29
How do you calculate the last index of an array?
array.length -1
| the length of the array - 1
30
What is a function in Javascript?
collection of code that is reusable and helps make the code easier to read
allow you to package up code for use later in your program
31
Describe the parts of a function definition
1. function keyword
2. an optional name
3. zero or more parameters
4. a code block
5. an optional return statement
32
Describe the parts of a function call
function named followed by ( ) parentheses with zero or more arguments
33
When comparing them side-by-side, what are the differences between a function call and a function definition?
- calling causes the functions code block to be executed
- definition has parameters, calling has arguments with ( )
- definition includes the function keyword, code block & return statement
34
What is the difference between a parameter and an argument?
parameters occur in the definition, while arguments occur when called
parameters are placeholders, arguments are values
35
Why are function parameters useful?
when a function is called, the parameters in its definition take on the values of the arguments that were passed
36
What two effects does a return statement have on the behavior of a function?
causes the function to produce a value
| exits the function
37
Why do we log things to the console?
as a debugging tool - easy way to inspect your variables in the browser
38
What is a method?
a function which is a property of an object
39
How is a method different from any other function?
methods are associated with an object
40
How do you remove the last element from an array?
pop ( ) method
41
How do you round a number down to the nearest integer?
Math.floor ( )
42
How do you generate a random number?
Math.random ( )
43
How do you delete an element from an array?
splice( )
44
How do you append an element to an array?
push( )
45
How do you break a string up into an array?
split ( )
46
Do string methods change the original string?
| How do you check if you werent sure?
no
| MDN or the console
47
Roughly how many string methods are there according to the MDN web docs?
3 static methods
| 34 instance methods
48
Is the return value of a function or method useful in every situation?
no - sometimes return isn't needed
49
Roughly how many array methods are there according to the MDN web docs?
3 static methods
| 31 instance methods
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
1. ==
2. !=
3. ===
4. !==
5. >, >=
6.
52
What data type do comparison expressions evaluate to?
boolean
53
What is the purpose of an if statement?
to evaluate a condition and if true, to execute the code block
54
Is else required in order to use an if statement?
no
55
Describe the syntax (structure) of an if statement
1. if keyword
2. condition in parentheses ( )
3. code block to execute within curly brace { }
56
What are three logical operators?
&& logical and
|| logical or
! logical not
57
How do you compare two different expressions in the same condition?
using logical operators and (&&) or (||)
58
What is the purpose of a loop?
to repeat an action or a code to check a condition
59
What is the purpose of a condition expression in a loop?
if returns true a code block will run, if false it will stop
60
What does ‘iteration’ mean in the context of loops?
each time the loop runs through
61
When does the condition expression of a while loop get evaluated?
before each pass through the loop
| - if evaluates true, statement is executed
62
When does the initialization expression of a for loop get evaluated?
once before the loop begins
63
When does the condition expression of a for loop get evaluated?
before each loop iteration
64
When does the final expression of a for loop get evaluated?
at the end of each loop iteration but before the condition runs a second time
65
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
66
What does the ++ increment operator do?
adds one to its operand and returns a value
67
How do you iterate through the keys of an object?
for..in loops
68
Why do we log things to the console?
to check for errors/debugging/double checking your values
69
What is a model?
a recreation or representation of something
70
Which document is being referred to in the phrase Document Object Model?
the model of the webpage created by the browser
71
What is the word ‘object’ referring to in the phrase Document Object Model?
the objects that make up the DOM - each object represents a different part of the page loaded in the browser window
72
What is a DOM tree?
the model of a webpage created by the browser
- has four main types of nodes
a structure with all the child elements inside it
73
Give two examples of document methods that retrieve a single element from the DOM.
getElementById( )
| querySelector ( )
74
Give one example of a document method that retrieves multiple elements from the DOM at once
getElementsByClassName ( )
| querySelectorAll ( )
75
Why might you want to assign the return value of a DOM query to a variable?
allows you to access those elements faster in the future
76
What console method allows you to inspect the properties of a DOM element object?
console.dir ( )
77
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
the browser needs to go through all the elements in the HTML page before the javascript code can access them
78
What does document.querySelector() take as its argument and what does it return?
CSS selectors
| returns the first element with the document that matches the specified selector or group of selectors
79
What does document.querySelectorAll() take as its argument and what does it return?
one or more selectors to match against
| returns a NodeList (that is static) of the documents elements that match the specified group of selectors
80
What is the purpose of events and event handling?
to notify code of interesting things that have taken place
- handling is the steps involved in triggering javascript code when a user interacts with the HTML on a webpage
- to respond to the actions of users
81
What do [ ] square brackets mean in function and method syntax documentation
square brackets in syntax documentation indicates an optional section
82
what method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener ( )
83
What is a callback function?
function that is passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action
84
What object is passed into an event listener callback when the event fires?
object built by the javascript engine that is describing all the relative info that occurred.
- the event object which contains all the data
85
What is the event.target ? If you weren’t sure how would you check? Where could you get more info about it?
- the element object from which the event originated from
- a reference to the object onto which the event was dispatched
- console.log(event.target)
- MDN
86
What is the difference between element.addEventListener('click', handleClick)& element.addEventListener('click', handleClick())?
when the parentheses are after a function call, the code will run straight away rather than waiting until the event triggers it
87
What is the className property of element objects?
sets or returns the class name of an element
88
How do you update the CSS class attribute of an element using Javascript?
element.className
89
What is the textContent property of element objects?
represents the text content of the node and its descendants
90
How do you update the text within an element using Javascript?
node.textContent
91
Is the event parameter of an event listener callback always useful?
not always necessary
92
Why is story information about a program in variables better than only storing it in the DOM?
easier to keep track of and cleaner code
93
What event is fired when a user places their cursor in a form control?
focus
94
What event is fired when a user’s cursor leaves a form control?
blur
95
What event is fired as a user changes the value of a form control?
input
96
What event is fired when a user clicks the ‘submit’ button within a ?
submit
97
What does event.preventDefault() method do?
cancels the event if it is cancelable
98
What does submitting a form without event.preventDefault() do?
submits the form and disappears
99
What property of a form element object contains all of the form’s controls?
elements property
100
What property of a form control object gets and sets its value?
value property
101
What is one risk of writing a lot of code without checking to see if it works so far?
you wont know if the code isnt working
102
What is an advantage of having your console open when writing a Javascript program?
always helps check for error in code
103
Does the document.createElement() method insert a new element into the page?
no
104
How do you add an element as a child to another element?
appendchild()
105
What do you pass as the arguments to the element.setAttribute() method?
name of the attribute and its value
106
What steps do you need to take in order to insert a new element into the page?
```
1. create the element node
optionally give it content
2. grab the spot you want to append it to
using querySelector
3. add the element to the DOM tree
```
107
What is the textContent property of an element object for?
reading and writing textContent
108
Name two ways to set the class attribute of a DOM element
element. setAttribute(“class”)
| element. className
109
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
can define function once and repeat it as much as you want throughout the code
can manipulate based on user response
110
Give two examples of media features you can query in an @media rule
1. width
| 2. aspect-ratio
111
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
| - < meta name="viewport" content="width=device-width, initial-scale=1" >
112
What is the event.target?
the target property of the Event interface.
| a reference to the object onto which the event was dispatched
113
Why is it possible to listen for events on one element that actually happen to its descendent elements?
Event bubbling
114
What DOM element property tells you what type of element it is?
element.tagName property
115
What does element.closest( ) method take as its argument and what does it return?
takes selectors as its argument - a DOMString containing a selector list
- will return itself or the matching ancestor
116
How can you remove an element from the DOM?
remove ( ) method
| - removes objects from the tree it belongs to
117
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?
event delegation
| - adds the event listener to the one parent and then analyzes the bubbled events to find a match on child elements
118
What is the event.target?
- the thing on which the event was dispatched
the target property of the Event interface
- a reference to the object onto which the event was dispatched
119
What is the effect of setting an element to display: none?
hides the entire document and removes it from the document flow
120
What does the element.matches( ) method take as an argument and what does it return?
a string representing the CSS selector it wants to test
| returns a boolean
121
How can you retrieve the value of an element’s attribute?
getAttribute ( ) method
122
At what steps of the solution would it be helpful to log things to the console?
after you declare a variable or any time a variable changes
| after an if statement or conditional to see if code is working
123
If you were to add another tab and view to your html, but you didnt use event delegation, how would your javascript code be written instead?
would have to use a new addEventListener for each tab and view you wanted to add
124
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?
lots more conditionals
| lots more code - would have to change each className and attribute individually
125
What is JSON?
A standard text-based format for representing structured data based on Javascript Object Syntax
126
What are serialization and deserialization?
Serialization is the process of converting an object into a stream of bytes so that it can be transferred over a network or stored in persistent storage
Deserialization is the reverse: when you get a stream of bytes from network or storage and convert it back into an object
127
Why are serialization and deserialization useful?
allows you to transfer data between different platforms
network transmission
persistence
128
How do you serialize a data structure into a JSON string using Javascript?
stringify method of the JSON object
129
How do you deserialize a JSON string into a data structure using Javascript?
parse method of the JSON object
130
How do you store data in localStorage?
localStorage.setItem
| - takes a key name and value name as arguments
131
How do you retrieve data from localStorage?
localStorage.getItem
132
What data type can localStorage save in the browser?
only strings
133
When does the ‘beforeunload’ event fire on the window object?
when the window, the document and its resources are about to be unloaded
134
What is a method?
A function that is the property of an object
135
How can you tell the difference between a method definition and a method call?
A call will have real values in its arguments whereas a definition will placeholders as parameters
136
Describe method definition syntax (structure).
Variable declared with the name of the function as its property
the function has a function keyword as its value along with the function codeblock and return statement
137
Describe method call syntax (structure).
object.method(argument)
138
How is a method different from any other function?
method is a function, but it is a function attached to an object which has access to the data stored on that object
it is a property of an object
139
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods)
pairs data with behavior
140
What are the four principles of object-oriented programming?
1. abstraction
2. encapsulation
3. inheritance
4. polymorphism
141
What is abstraction?
being able to work with possibly complex things in simple ways
142
What does API stand for?
application programming interface
143
What is the purpose of an API?
simplifies programming by abstracting the underlying implementation and only exposing objects or actions the developer needs
144
What is this in javascript?
an implicit parameter that refers to the object it belongs to
145
What does it mean to say that this is an implicit parameter?
its available in a functions code block even though it was never included in the functions parameter list or declared with var
146
When is the value of this determined in a function; call time or definition time?
call time
147
How can you tell what the value of this will be for a particular function or method definition?
you can't determine until it has been called
148
How can you tell what the value of this is for a particular function or method call?
its either given the value of the global window object OR
| you find where the function is called and look for an object to the left of the dot
149
What kind of inheritance does the Javascript programming language use?
a prototype based (or prototypal) inheritance
150
What is a prototype in javascript?
an object that contains properties and (predominantly) methods that can be used by other objects
151
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?
by defining on a prototype object and calling the datatypes with those methods
152
If an object does not have it’s own property or method by a given key, where does javascript look for it?
the proto object
153
What does the new operator do?
creates an instance of a user-defined object type or of one of the built in object types that has a constructor function
154
What property of Javascript functions can store shared behavior for instances created with new?
function.prototype property
155
What does the instanceof operator do?
tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object
return value is a boolean value
156
What is a callback function?
a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine action
157
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?
setTimeout( )
158
How can you set up a function to be called repeatedly without using a loop?
setInterval( )
159
What is the default time delay if you omit the delay parameter from setTimeout( ) or setInterval( )?
0 - executes immediately
160
What do setTimeout( ) and setInterval( ) return?
a non-zero number that identifes the timer created by the call to setInterval - value can be passed to clearInterval to cancel
161
What is a client?
service requester
162
What is a server?
provider of a resource or service
163
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
164
What three things are on the start-line of an HTTP request message?
HTTP method
Request Target
HTTP version
165
What three things are on the start-line of an HTTP response message?
protocol version
| usually 1.1
166
What are HTTP headers?
the metadata of your requests
let the client and the server pass additional information with an HTTP request or response
consists of its case-insensitive name followed by a colon then by its value
whole header consist of one single line
167
Is a body required for a valid HTTP request or response message?
no it is optional
168
What is AJAX?
a technique for loading data into part of a page without having to refresh the entire page
169
What does the AJAX acronym stand for?
Asynchronous Javascript and XML
170
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
171
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server
load
172
An XMLHttpRequest object has an addEventListener( ) method just like DOM elements. How is it possible that they both share this functionality?
prototypal inheritance
173
What is the JavaScript Event Loop?
checks if the call stack is empty - if it is then new functions are added from the event queue, if it’s not then the current function is processed
174
What is different between ‘blocking’ and ‘non-blocking’ with respect to how code is executed?
blocking executes in a series - blocks executing of a statement until it completes the current statement
non-blocking executes in parallel or concurrently
blocking refers to operations that block further execution until that operation finishes while non-blocking refers to code that doesn’t block execution
