JavaScript Flashcards
Why do we log things to the console?
to see the state of the code
tracking values, debugging
What is a “model”?
a recreation of something for resemblance
Which “document” is being referred to in the phrase Document Object Model?
HTML document
What is the word “object” referring to in the phrase Document Object Model?
javascript object
What is a DOM Tree?
element and all of its content
Give two examples of document methods that retrieve a single element from the DOM.
queryselector and getelementbyid
Give one example of a document method that retrieves multiple elements from the DOM at once.
queryselectorall
Why might you want to assign the return value of a DOM query to a variable?
to be able to reuse it later
so you don’t have to do the same work
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
so the html and css finishes loading
What console method allows you to inspect the properties of a DOM element object?
console.dir
What does document.querySelector() take as its argument and what does it return?
css selector and it returns first element of that selector
What does document.querySelectorAll() take as its argument and what does it return?
css selector and a nodelist with all elements with that selector
Why do we log things to the console?
to verify values and debug
What is the purpose of events and event handling?
events are for detecting user interaction and response
Are all possible parameters required to use a JavaScript method or function?
no
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addeventlistener
What is a callback function?
function that gets called when something else happens
What object is passed into an event listener callback when the event fires?
callback function
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
event target is to see which event triggered. if you didn’t know, you could look it up on mdn
What is the className property of element objects?
get or set value of class attribute on html element
How do you update the CSS class attribute of an element using JavaScript?
classname property of object equal operator to value
What is the textContent property of element objects?
text that is being displayed
Is the event parameter of an event listener callback always useful?
no
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
What event is fired when a user places their cursor in a form control?
focus event
What event is fired when a user’s cursor leaves a form control?
blur event
What event is fired as a user changes the value of a form control?
value event
What event is fired when a user clicks the “submit” button within a ?
submit event
What does the event.preventDefault() method do?
prevent someone from doing the default behavior of event
What does submitting a form without event.preventDefault() do?
refreshes the page
What property of a form element object contains all of the form’s controls.
elements
What property of a form control object gets and sets its value?
value
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
Does the document.createElement() method insert a new element into the page?
no
How do you add an element as a child to another element?
appendchild method
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
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
What is the textContent property of an element object for?
get value or reassign text
Name two ways to set the class attribute of a DOM element.
property classname, and assign it a value, or use setattribute method
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
Give two examples of media features that you can query in an @media rule.
min-width and min-height
What is the event.target?
the origin of the element that got triggered
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
What DOM element property tells you what type of element it is?
tagName
What does the element.closest() method take as its argument and what does it return?
css selector and returns closest parent element
How can you remove an element from the DOM?
remove method
What is the event.target?
the origin element that got triggered
What is the affect of setting an element to display: none?
takes it out of view and document flow
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
How can you retrieve the value of an element’s attribute?
getattribute method
At what steps of the solution would it be helpful to log things to the console?
anytime u need it
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
What is a breakpoint in responsive Web design?
the point where the layout/ website changes to adjust for devices
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
What is JSON?
way to store long term data by converting data into strings
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.
Why are serialization and deserialization useful?
to store and transfer data in an efficient way.
How do you serialize a data structure into a JSON string using JavaScript?
stringify method of JSON object or type it out
How do you deserialize a JSON string into a data structure using JavaScript?
parse method of JSON object
How do you store data in localStorage?
setItem method
How do you retrieve data from localStorage?
getItem method, keyname as argument
What data type can localStorage save in the browser?
a string
When does the ‘beforeunload’ event fire on the window object?
when the tab is refreshed or closed
What is a method?
function being stored in property of an object
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.
Describe method definition syntax (structure).
object name, dot, method name, followed by parentheses and argument.
Describe method call syntax (structure).
object name, dot, function name, paranthesis
How is a method different from any other function?
you have to specify object name before with a dot
What is the defining characteristic of Object-Oriented Programming?
pairing data with behavior in the same space
What are the four “principles” of Object-Oriented Programming?
abstraction, encapsulation, inheritance, polymorphism
What is “abstraction”?
take a complex tool and give a simple interface for it
What does API stand for?
Application programming interface
What is the purpose of an API?
allow people to use complex tools without fully understanding/creating them
What is this in JavaScript?
gets the value of whatever is being used
What does it mean to say that this is an “implicit parameter”?
implied that it’s there, no visual queues to be seen
When is the value of this determined in a function; call time or definition time?
call time
What does this refer to in the following code snippet?
nothing
What kind of inheritance does the JavaScript programming language use?
prototype based programming
What is a prototype in JavaScript?
an object with methods you can use on the main variable
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
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
What does the new operator do?
creates a new data set based on the function called
What property of JavaScript functions can store shared behavior for instances created with new?
prototype
What does the instanceof operator do?
It checks to see if it has the prototype/methods of an object
What is a “callback” function?
function that gets executed later
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
How can you set up a function to be called repeatedly without using a loop?
setInterval
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
the interval ID
What is AJAX?
sending information, receiving information and updating without refreshing the site.
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
Which object is built into the browser for making HTTP requests in JavaScript?
XML http request
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
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.
What is a code block? What are some examples of a code block?
curly braces
What does block scope mean?
area of where the variable exists inside a block
What is the scope of a variable declared with const or let?
block
What is the scope of a variable declared with var
block, var variables are function scoped
What is the difference between let and const?
let can be reassigned
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
How should you decide on which type of declaration to use?
use const until you cant
What is the syntax for writing a template literal?
string ${variable}
What is “string interpolation”?
substitute string with variables
What is destructuring, conceptually?
getting property values/array elements and assigning them into multiple variables in one line
syntax for object destructuring
let {property: variableName} = object
syntax for array destructuring
let [a, b, c] = array
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
What is the syntax for defining an arrow function?
parameter, equals greater than, then code block
What is the syntax for defining an arrow function?
parameter, equals greater than, then code block or return expression
When an arrow function’s body is left without curly braces, what changes in its functionality?
implicit return for statement (return expression)
How is the value of this determined within an arrow function?
it shadows the outer function
What is a CLI?
command line interface
What is a GUI?
graphical user interface
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
What are the three virtues of a great programmer?
laziness, impatient, humorous
What is Node.js?
way to run javascript outside a web browser
What can Node.js be used for?
backend for web apps, command line programs
What is a REPL?
read–eval–print loop
takes input, executes actions, returns product to the user
When was NodeJS created?
May 27, 2009
What back end languages have you heard of?
ruby, python, java, rust, javascript, php, c++, golang, c, c#
What is the process object in a Node.js program?
global variable that stores data about entire program
How do you access the process object in a Node.js program?
you can just reference it like any other variable
What is the data type of process.argv in Node.js?
array of strings
What is a JavaScript module?
a new js file, containing code of a smaller component out of a bigger codebase
What values are passed into a Node.js module’s local scope?
filename, dirname, module, exports, require
Give two examples of truly global variables in a Node.js program.
process and console
What is the purpose of module.exports in a Node.js module?
to be able to use a value from that module
How do you import functionality into a Node.js module from another Node.js module?
require function
What is the process object in a Node.js program?
global variable with all of the information about current process
How do you access the process object in a Node.js program?
reference process, because it is global
What is the data type of process.argv in Node.js?
array
What is a JavaScript module?
another js file containing a small part of code
What values are passed into a Node.js module’s local scope?
export, module, require, __filename, __dirname
Give two examples of truly global variables in a Node.js program.
global & process
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
How do you import functionality into a Node.js module from another Node.js module?
require function
What is the JavaScript Event Loop?
responsible for taking callbacks from stack and putting them in a queue
What is a directory?
folder
what is a relative file path
specifies path from current spot
what is an absolute file path
specifies path from root directory
What method is available in the Node.js fs module for writing data to a file?
writeFile
What is a client?
computer that sends a request to a server
What is a server?
computer that respond to requesters with information
Which HTTP method does a browser issue to a web server when you visit a URL?
GET request
What is on the first line of an HTTP request message?
HTTP method, request target, protocol version
What is on the first line of an HTTP response message?
protocol, status code, and text for status
What are HTTP headers?
extra meta information
Is a body required for a valid HTTP message?
no
What is NPM?
node package manager
What is a package?
pre made reusable code (package.json, directory, one or more files)
How can you create a package.json with npm?
npm init –yes
What is a dependency and how to you add one to a package?
third party code that you can use
How do you add express to your package dependencies?
npm install express
How do you add express to your package dependencies?
npm install express
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
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
applications/json
What is the significance of an HTTP request’s method?
allows the programmer to know what function to do
What is a database schema?
how database is stored
What is a table?
collection of rows where every row has attribute
What is a row?
each specific item
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
What are some advantages of learning a relational database?
efficiency and organizing
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
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
How do you retrieve specific columns from a database table?
select keyword then column names separated by commas
How do you filter rows based on some specific criteria?
where clause
What are the benefits of formatting your SQL?
organizing
How do you limit the number of rows returned in a result set?
limit keyword
What are four comparison operators that can be used in a where clause?
=, !=, <, >
How do you retrieve all columns from a database table?
*
How do you control the sort order of a result set?
order by keyword
What is a tuple?
a row
How do you get back the row being inserted into a table without a separate select statement?
returning
How do you add a row to a SQL table?
insert value, them tuple
How do you add multiple rows to a SQL table at once?
multiple tupiles
How do you specific update rows in a database table?
set what you want with a where clause
Why is it important to include a where clause in your update statements?
you will update everything that meets that condition
How do you delete rows from a database table?
delete from “table”
what is a foreign key?
shared data value
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
How do you temporarily rename columns or tables in a SQL statement?
as keyword - you can use it on columns and tables
What are some examples of aggregate functions?
sum, count, max
What is the purpose of a group by clause?
separate rows into groups
what are the 3 states a promise can be in
pending, fulfilled, and rejected
How do you handle the fulfillment of a Promise?
.then method
How do you handle the rejection of a Promise?
What is Array.prototype.filter useful for?
get specific elements for an array
what is webpack
create a bundle out of modules
How do you add a devDependency to a package?
–save-dev
what is an npm script
automate npm commands
how do u execute webpack with npm run
npm run (key)
What is “syntactic sugar”?
write code in a readable way
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
function name, brackets, then constructor, parameter, brackets, then methods name, parameter, brackets
What is “refactoring”?
rewriting code to improve it without affecting functionality
How are ES Modules different from CommonJS modules?
syntax, es6 modules are async, es6 modules are official
what is react
frontend framework
What is a React element?
object
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
what is babel
compiler to convert different versions of js to more compatible versions
what is a plugin
additional software on pre existing software
what is a webpack loader
transformations that are applied to the source code of a module
how can you make babel and webpack work together
use babel loader in webpack
what is jsx?
javascript syntax extension
why must the react object be imported when authoring jsx in a module
jsx compiles into react
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
What is a React component?
function that returns react elements
How do you define a function component in React?
regular function definition with capital first letter as name, and parameter props
How do you mount a component to the DOM?
call render method of root object passing component as argument
library vs framework
ioc (inversion of control)
library - code that you call
framework - calls your code, you give ur power to framework
what are props in react
object that contains properties
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
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
what is the purpose of state in react
data model of values that changes overtime
What are controlled components?
inputs values is owned by state of component
What two props must you pass to an input for it to be “controlled”?
value and onChange
What Array method is commonly used to create a list of React elements?
.map
What does express.static() return?
a function
What is the local __dirname variable in a Node.js module?
path to the current directory
What does the join() method of Node’s path module do?
combines strings to form a path
what does fetch() return
promise
what is the default request method used by fetch()
get
When does React call a component’s componentDidMount method?
after the first render
Name three React.Component lifecycle methods.
constructor, render, componentdidmount
How do you pass data to a child component?
props
what does a LIFO mean?
last in first out
What methods are available on a Stack data structure?
pop and push
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
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
What does the acronym FIFO mean?
first in first out
What methods are available on a Queue data structure?
enqueue and dequeue
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
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
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
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
defined
