JavaScript Flashcards
(235 cards)
1
Q
Why do we log things to the console?
A
to see the state of the code
tracking values, debugging
2
Q
What is a “model”?
A
a recreation of something for resemblance
3
Q
Which “document” is being referred to in the phrase Document Object Model?
A
HTML document
4
Q
What is the word “object” referring to in the phrase Document Object Model?
A
javascript object
5
Q
What is a DOM Tree?
A
element and all of its content
6
Q
Give two examples of document methods that retrieve a single element from the DOM.
A
queryselector and getelementbyid
7
Q
Give one example of a document method that retrieves multiple elements from the DOM at once.
A
queryselectorall
8
Q
Why might you want to assign the return value of a DOM query to a variable?
A
to be able to reuse it later
so you don’t have to do the same work
9
Q
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
A
so the html and css finishes loading
10
Q
What console method allows you to inspect the properties of a DOM element object?
A
console.dir
11
Q
What does document.querySelector() take as its argument and what does it return?
A
css selector and it returns first element of that selector
12
Q
What does document.querySelectorAll() take as its argument and what does it return?
A
css selector and a nodelist with all elements with that selector
13
Q
Why do we log things to the console?
A
to verify values and debug
14
Q
What is the purpose of events and event handling?
A
events are for detecting user interaction and response
15
Q
Are all possible parameters required to use a JavaScript method or function?
A
no
16
Q
What method of element objects lets you set up a function to be called when a specific type of event occurs?
A
addeventlistener
17
Q
What is a callback function?
A
function that gets called when something else happens
18
Q
What object is passed into an event listener callback when the event fires?
A
callback function
19
Q
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
A
event target is to see which event triggered. if you didn’t know, you could look it up on mdn
20
Q
What is the className property of element objects?
A
get or set value of class attribute on html element
21
Q
How do you update the CSS class attribute of an element using JavaScript?
A
classname property of object equal operator to value
22
Q
What is the textContent property of element objects?
A
text that is being displayed
23
Q
Is the event parameter of an event listener callback always useful?
A
no
24
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
25
What event is fired when a user places their cursor in a form control?
focus event
26
What event is fired when a user's cursor leaves a form control?
blur event
27
What event is fired as a user changes the value of a form control?
value event
28
What event is fired when a user clicks the "submit" button within a ?
submit event
29
What does the event.preventDefault() method do?
prevent someone from doing the default behavior of event
30
What does submitting a form without event.preventDefault() do?
refreshes the page
31
What property of a form element object contains all of the form's controls.
elements
32
What property of a form control object gets and sets its value?
value
33
What is one risk of writing a lot of code without checking to see if it works so far?
it could break along the way
34
Does the document.createElement() method insert a new element into the page?
no
35
How do you add an element as a child to another element?
appendchild method
36
What do you pass as the arguments to the element.setAttribute() method?
first argument would be the attribute you want, the second would be the value
37
What steps do you need to take in order to insert a new element into the page?
appendchild to an element inside the page already
38
What is the textContent property of an element object for?
get value or reassign text
39
Name two ways to set the class attribute of a DOM element.
property classname, and assign it a value, or use setattribute method
40
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
function is reusable and the return can be used somewhere else
41
Give two examples of media features that you can query in an @media rule.
min-width and min-height
42
What is the event.target?
the origin of the element that got triggered
43
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
44
What DOM element property tells you what type of element it is?
tagName
45
What does the element.closest() method take as its argument and what does it return?
css selector and returns closest parent element
46
How can you remove an element from the DOM?
remove method
47
What is the event.target?
the origin element that got triggered
48
What is the affect of setting an element to display: none?
takes it out of view and document flow
49
What does the element.matches() method take as an argument and what does it return?
takes css selector as argument and return boolean depending on if the targeted element matches the css selector
50
How can you retrieve the value of an element's attribute?
getattribute method
51
At what steps of the solution would it be helpful to log things to the console?
anytime u need it
52
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?
need an event listener for each tab
53
What is a breakpoint in responsive Web design?
the point where the layout/ website changes to adjust for devices
54
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?
adaptability and less possible failure points
55
What is JSON?
way to store long term data by converting data into strings
56
What are serialization and deserialization?
serialization is to convert human data for humans into data for the computer. deserialization is to convert computer data into readable human data.
57
Why are serialization and deserialization useful?
to store and transfer data in an efficient way.
58
How do you serialize a data structure into a JSON string using JavaScript?
stringify method of JSON object or type it out
59
How do you deserialize a JSON string into a data structure using JavaScript?
parse method of JSON object
60
How do you store data in localStorage?
setItem method
61
How do you retrieve data from localStorage?
getItem method, keyname as argument
62
What data type can localStorage save in the browser?
a string
63
When does the 'beforeunload' event fire on the window object?
when the tab is refreshed or closed
64
What is a method?
function being stored in property of an object
65
How can you tell the difference between a method definition and a method call?
if a method is being defined the word function will be prevalent. if it is being called only the function name followed by parentheses will be present.
66
Describe method definition syntax (structure).
object name, dot, method name, followed by parentheses and argument.
67
Describe method call syntax (structure).
object name, dot, function name, paranthesis
68
How is a method different from any other function?
you have to specify object name before with a dot
69
What is the defining characteristic of Object-Oriented Programming?
pairing data with behavior in the same space
70
What are the four "principles" of Object-Oriented Programming?
abstraction, encapsulation, inheritance, polymorphism
71
What is "abstraction"?
take a complex tool and give a simple interface for it
72
What does API stand for?
Application programming interface
73
What is the purpose of an API?
allow people to use complex tools without fully understanding/creating them
74
What is this in JavaScript?
gets the value of whatever is being used
75
What does it mean to say that this is an "implicit parameter"?
implied that it's there, no visual queues to be seen
76
When is the value of this determined in a function; call time or definition time?
call time
77
What does this refer to in the following code snippet?
nothing
78
What kind of inheritance does the JavaScript programming language use?
prototype based programming
79
What is a prototype in JavaScript?
an object with methods you can use on the main variable
80
How is it possible to call methods on strings, arrays, and numbers even though those methods don't actually exist on strings, arrays, and numbers?
prototype
81
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
prototype of said data
82
What does the new operator do?
creates a new data set based on the function called
83
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
84
What does the instanceof operator do?
It checks to see if it has the prototype/methods of an object
85
What is a "callback" function?
function that gets executed later
86
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
87
How can you set up a function to be called repeatedly without using a loop?
setInterval
88
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
89
What do setTimeout() and setInterval() return?
the interval ID
90
What is AJAX?
sending information, receiving information and updating without refreshing the site.
91
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
92
Which object is built into the browser for making HTTP requests in JavaScript?
XML http request
93
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
94
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
XHR shares prototype with dom elements.
95
What is a code block? What are some examples of a code block?
curly braces
96
What does block scope mean?
area of where the variable exists inside a block
97
What is the scope of a variable declared with const or let?
block
98
What is the scope of a variable declared with var
block, var variables are function scoped
99
What is the difference between let and const?
let can be reassigned
100
Why is it possible to .push() a new value into a const variable that points to an Array?
value of content is mutable, but not reassignable
101
How should you decide on which type of declaration to use?
use const until you cant
102
What is the syntax for writing a template literal?
`string ${variable}`
103
What is "string interpolation"?
substitute string with variables
104
What is destructuring, conceptually?
getting property values/array elements and assigning them into multiple variables in one line
105
syntax for object destructuring
let {property: variableName} = object
106
syntax for array destructuring
let [a, b, c] = array
107
How can you tell the difference between destructuring and creating object/array literals
where the brackets are located, left is destructuring, while creating is on the right of the assignment operator
108
What is the syntax for defining an arrow function?
parameter, equals greater than, then code block
109
What is the syntax for defining an arrow function?
parameter, equals greater than, then code block or return expression
110
When an arrow function's body is left without curly braces, what changes in its functionality?
implicit return for statement (return expression)
111
How is the value of this determined within an arrow function?
it shadows the outer function
112
What is a CLI?
command line interface
113
What is a GUI?
graphical user interface
114
Give at least one use case for each of the commands listed in this exercise.
man
cat
ls
pwd
echo
touch
mkdir
mv
rm
cp
man - manual
cat - see content
ls - list items in a directory
pwd - print directory
echo - create text
touch - create file/ change time
mkdir - make folder/directory
mv - rename/move directory
rm - remove files/directories
cp - copy
115
What are the three virtues of a great programmer?
laziness, impatient, humorous
116
What is Node.js?
way to run javascript outside a web browser
117
What can Node.js be used for?
backend for web apps, command line programs
118
What is a REPL?
read–eval–print loop
takes input, executes actions, returns product to the user
119
When was NodeJS created?
May 27, 2009
120
What back end languages have you heard of?
ruby, python, java, rust, javascript, php, c++, golang, c, c#
121
What is the process object in a Node.js program?
global variable that stores data about entire program
122
How do you access the process object in a Node.js program?
you can just reference it like any other variable
123
What is the data type of process.argv in Node.js?
array of strings
124
What is a JavaScript module?
a new js file, containing code of a smaller component out of a bigger codebase
125
What values are passed into a Node.js module's local scope?
filename, dirname, module, exports, require
126
Give two examples of truly global variables in a Node.js program.
process and console
127
What is the purpose of module.exports in a Node.js module?
to be able to use a value from that module
128
How do you import functionality into a Node.js module from another Node.js module?
require function
129
What is the process object in a Node.js program?
global variable with all of the information about current process
130
How do you access the process object in a Node.js program?
reference process, because it is global
131
What is the data type of process.argv in Node.js?
array
132
What is a JavaScript module?
another js file containing a small part of code
133
What values are passed into a Node.js module's local scope?
export, module, require, __filename, __dirname
134
Give two examples of truly global variables in a Node.js program.
global & process
135
What is the purpose of module.exports in a Node.js module?
get a value from a module to be able to use into others
136
How do you import functionality into a Node.js module from another Node.js module?
require function
137
What is the JavaScript Event Loop?
responsible for taking callbacks from stack and putting them in a queue
138
What is a directory?
folder
139
what is a relative file path
specifies path from current spot
140
what is an absolute file path
specifies path from root directory
141
What method is available in the Node.js fs module for writing data to a file?
writeFile
142
What is a client?
computer that sends a request to a server
143
What is a server?
computer that respond to requesters with information
144
Which HTTP method does a browser issue to a web server when you visit a URL?
GET request
145
What is on the first line of an HTTP request message?
HTTP method, request target, protocol version
146
What is on the first line of an HTTP response message?
protocol, status code, and text for status
147
What are HTTP headers?
extra meta information
148
Is a body required for a valid HTTP message?
no
149
What is NPM?
node package manager
150
What is a package?
pre made reusable code (package.json, directory, one or more files)
151
How can you create a package.json with npm?
npm init --yes
152
What is a dependency and how to you add one to a package?
third party code that you can use
153
How do you add express to your package dependencies?
npm install express
154
How do you add express to your package dependencies?
npm install express
155
How do you mount a middleware with an Express application?
use method to the app object, and callback function will be an argument. cb will be middleware
156
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
applications/json
156
What is the significance of an HTTP request's method?
allows the programmer to know what function to do
157
What is a database schema?
how database is stored
158
What is a table?
collection of rows where every row has attribute
159
What is a row?
each specific item
160
What is PostgreSQL and what are some alternative relational databases?
postgresql is a relational database, an alternative to relational database is monodb which uses json
161
What are some advantages of learning a relational database?
efficiency and organizing
162
What does the express.json() middleware do and when would you need it?
parses JSON body of request, and you would need it anytime you want to change data
163
What is SQL and how is it different from languages like JavaScript?
in SQL we state what we want and we get it, while in JS we declare things and get create the result by ourselves
164
How do you retrieve specific columns from a database table?
select keyword then column names separated by commas
165
How do you filter rows based on some specific criteria?
where clause
166
What are the benefits of formatting your SQL?
organizing
167
How do you limit the number of rows returned in a result set?
limit keyword
168
What are four comparison operators that can be used in a where clause?
=, !=, <, >
169
How do you retrieve all columns from a database table?
*
170
How do you control the sort order of a result set?
order by keyword
171
What is a tuple?
a row
172
How do you get back the row being inserted into a table without a separate select statement?
returning
173
How do you add a row to a SQL table?
insert value, them tuple
174
How do you add multiple rows to a SQL table at once?
multiple tupiles
175
How do you specific update rows in a database table?
set what you want with a where clause
176
Why is it important to include a where clause in your update statements?
you will update everything that meets that condition
177
How do you delete rows from a database table?
delete from "table"
178
what is a foreign key?
shared data value
179
How do you join two SQL tables?
join keyword followed by table name in quotes, followed by using keyword and foreign key in quotes in paranthesis
180
How do you temporarily rename columns or tables in a SQL statement?
as keyword - you can use it on columns and tables
181
What are some examples of aggregate functions?
sum, count, max
182
What is the purpose of a group by clause?
separate rows into groups
183
what are the 3 states a promise can be in
pending, fulfilled, and rejected
184
How do you handle the fulfillment of a Promise?
.then method
185
How do you handle the rejection of a Promise?
186
What is Array.prototype.filter useful for?
get specific elements for an array
187
what is webpack
create a bundle out of modules
188
How do you add a devDependency to a package?
--save-dev
189
what is an npm script
automate npm commands
190
how do u execute webpack with npm run
npm run (key)
191
What is "syntactic sugar"?
write code in a readable way
192
What is the typeof an ES6 class?
function
193
Describe ES6 class syntax.
function name, brackets, then constructor, parameter, brackets, then methods name, parameter, brackets
194
What is "refactoring"?
rewriting code to improve it without affecting functionality
195
How are ES Modules different from CommonJS modules?
syntax, es6 modules are async, es6 modules are official
196
what is react
frontend framework
197
What is a React element?
object
198
How do you mount a React element to the DOM?
grab a real root element, make it a react root, set a react element, and mount the element to the root by using render method
199
what is babel
compiler to convert different versions of js to more compatible versions
200
what is a plugin
additional software on pre existing software
201
what is a webpack loader
transformations that are applied to the source code of a module
202
how can you make babel and webpack work together
use babel loader in webpack
203
what is jsx?
javascript syntax extension
204
why must the react object be imported when authoring jsx in a module
jsx compiles into react
205
how can you make webpack and babel work together to convert jsx into valid JavaScript
we use babel loader plugins to convert into valid JS and webpack takes all of modules & packages & bundles them
206
What is a React component?
function that returns react elements
207
How do you define a function component in React?
regular function definition with capital first letter as name, and parameter props
208
How do you mount a component to the DOM?
call render method of root object passing component as argument
209
library vs framework
ioc (inversion of control)
library - code that you call
framework - calls your code, you give ur power to framework
210
what are props in react
object that contains properties
211
How do you pass props to a component?
prop name equals value, if it is an expression it has to be wrapped in curly braces
212
How do you create "class" component in React?
define class but extends to React.Component and need atleast one prototype method that is render, and that render returns react element
213
what is the purpose of state in react
data model of values that changes overtime
214
What are controlled components?
inputs values is owned by state of component
215
What two props must you pass to an input for it to be "controlled"?
value and onChange
216
What Array method is commonly used to create a list of React elements?
.map
217
What does express.static() return?
a function
218
What is the local __dirname variable in a Node.js module?
path to the current directory
219
What does the join() method of Node's path module do?
combines strings to form a path
220
what does fetch() return
promise
221
what is the default request method used by fetch()
get
222
When does React call a component's componentDidMount method?
after the first render
223
Name three React.Component lifecycle methods.
constructor, render, componentdidmount
224
How do you pass data to a child component?
props
225
what does a LIFO mean?
last in first out
226
What methods are available on a Stack data structure?
pop and push
227
What must you do to access the value at an arbitrary point in a stack (not just the "top")?
you have to pop until you reach that point
228
What must you do to access the value at an arbitrary point in a stack (not just the "top")?
you have to pop until you reach that point
229
What does the acronym FIFO mean?
first in first out
230
What methods are available on a Queue data structure?
enqueue and dequeue
231
What must you do to access the value at an arbitrary point in a queue (not just the "front")?
get rid of the ones before
232
how are linked lists different from an array
in an array u can go to a random index while in a linked list its linear
233
how would u access an arbitrary node in a linked list (not just the "head")?
to get to an arbitrary node in a linkedlist u have to go through everything before it
234
In JavaScript, when is a function's scope determined; when it is called or when it is defined?
defined
