Quiz Questions Flashcards
Where do you put non-visible content about the HTML document?
. It’s about the meta information
head element
Where do you put visible content about the HTML document?
The body tag of the HTML document
Where do the and tags go in a valid HTML document?
The tag will usually go right after the tag and before the tag. The tag will go after the tag.
What is the purpose of a declaration?
The purpose is to tell a browser which version of HTML the page is using
Give five examples of HTML element types.
, <li>, <ul>, ,
</ul></li>
What is the purpose of HTML attributes?
Provides additional information about the contents of an element
Give an example of an HTML entity (escape character).
< less than <
> greater than >
How do block-level elements affect the document flow?
Makes certain elements start on a new line in the browser window
How do inline elements affect the document flow?
Makes it appear to continue on the same line as their neighboring elements
What are the default width and height of a block-level element?
Expands to a width of 100% of its parent container and the height would be according to the height of the content
What are the default width and height of an inline element?
The height and width of the content
What is the difference between an ordered list and an unordered list in HTML?
Ordered: numbered
Unordered: bullet point
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
Anchor tag
What is an absolute URL?
Linking to a different website / a full web address for the site
What is a relative URL?
When linking to other pages within the same site
How do you indicate the relative link to a parent directory?
use ../ to indicate the folder above the current one, then follow it with the file name
example: <a>Home</a>
How do you indicate the relative link to a child directory?
use the name of the child folder, followed by a forward slash, then the file name
example: <a></a>
How do you indicate the relative link to the same directory?
just use the file name (nothing else is needed)
example: <a>Reviews</a>
How do you indicate the relative link to a sibling directory?
use ../ to indicate the folder above the current one, then with a forward slash, write the sibling folder, then write the file name
example: <a>Home</a>
How do you indicate the relative link to a grand parent directory?
repeat the ../ to indicate that you want to go up two folders (rather than one), then follow it with the file name
example: <a>Home</a>
What is the purpose of an HTML form element?
collect data from users
Give five examples of form control elements.
text input
password input
radio buttons
checkboxes
dropdown boxes
Give three examples of type attribute values for HTML elements.
type=”image” when you want to use an image for the submit button
type=”submit” used to send a form to the server
type=”file” creates a box that looks like a text input followed by a browse button to select a file from their cmp and upload it
Is an HTML element a block element or an inline element?
inline block
What are the six primary HTML elements for creating tables?
table row tr
table data td
table heading th
table header thead
table body tbody
table footer tfoot
What purpose do the thead and tbody elements serve?
thead - headings of the table
tbody - body/data of the table
Give two examples of data that would lend itself well to being displayed in a table.
stock reports
train timetables
sports results
What are the names of the individual pieces of a CSS rule?
selector, declaration, property, value
In CSS, how do you select elements by their class attribute?
period and class name
.class {
}
In CSS, how do you select elements by their type?
match the element names
example: h1, h2, h3 {}
In CSS, how do you select an element by its id attribute?
Name three different types of values you can use to specify colors in CSS.
rgb, hex codes, color names
What CSS properties make up the box model?
border
margin
padding
Which CSS property pushes boxes away from each other?
margin
Which CSS property add space between a box’s content and its border?
padding
What is a pseudo-class?
keyword added to a selector that specifies a special state of the selected elements
What are CSS pseudo-classes useful for?
lets you apply a style to an element, not only in relation to the actual content, but to external factors like position of mouse, history of the navigator, etc
Name two types of units that can be used to adjust font-size in CSS.
pixels
percentages
ems
What CSS property controls the font used for the text inside an element?
font-family
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
nowrap: all flex items will be on one line
Why do two div elements “vertically stack” on one another by default?
because they’re block elements
What is the default flex-direction of an element with display: flex?
row
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
doesn’t affect the position of surround elements and they will stay in the position they would be in normal flow
How does setting position: relative on an element affect where it appears on the page?
you could change the position of the element where it would otherwise have been in normal flow
it doesn’t inherently affect where it appears, but you can move it from the original position
How does setting position: absolute on an element affect document flow?
it affects the document flow, as the other elements would simply ignore the space it would have taken up
How does setting position: absolute on an element affect where it appears on the page?
does not necessarily affect where it appears on the page, but it can affect where it appears on the page
How do you constrain an absolutely positioned element to a containing block?
using a relative position
What are the four box offset properties?
top
bottom
left
right
What are the four components of “the Cascade”.
source order
inheritance
specificity
!important
What does the term “source order” mean with respect to CSS?
the order that your css rules are written in your spreadsheet
styling provided last in your spreadsheet is the one that will take effect
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
List the three selector types in order of increasing specificity.
ID - CLASS - VALUE
Why is using !important considered bad practice?
it has side effects that mess with specificity
VERY HARD TO OVERRIDE
reverses the cascade order of stylesheets
What is the purpose of variables?
a temporary storage for data types
How do you declare a variable?
specify the type, leave at least one space, then the name for the variable and end the line with a semicolon;
How do you initialize (assign a value to) a variable?
use an assignment operator after the variable keyword and name, then give it its value
What characters are allowed in variable names?
letter, $, underscore, numbers
What does it mean to say that variable names are “case sensitive”?
there is a difference in identification of the variables using uppercase and using lowercase letters
What is the purpose of a string?
data type that is used to represent text
What is the purpose of a number?
data type that represents numbers
What is the purpose of a boolean?
data type that is used to create true/false statements
What does the = operator mean in JavaScript?
assignment operator
to perform operations on the variables and values (operands)
How do you update the value of a variable?
reassign the value of the variable
you don’t have to write the keyword var again
What is the difference between null and undefined?
undefined: primitive variable that has been declared but not defined yet / it is undefined
null: assigned nothing value / it is an object
Why is it a good habit to include “labels” when you log values to the browser console?
helps you debug as well and gives context of what to expect in the console
Give five examples of JavaScript primitives.
string
number
boolean
undefined
null
What data type is returned by an arithmetic operation?
number
What is string concatenation?
the combination of 2+ strings to form one string
What purpose(s) does the + plus operator serve in JavaScript?
concatenation (strings) and addition (numbers)
What data type is returned by comparing two values (<, >, ===, etc)?
boolean
What does the += “plus-equals” operator do?
addition assignment operator
adds the value of the right operand to a variable and assigns the result to the variable
What are objects used for?
to group together a set of variables/functions to create of model of something you’d recognize from the real world
What are object properties?
variables set to the object
Describe object literal notation.
first define a variable and assign it a properties inside a curly brace
keys:value
then end it with a curly brace
How do you remove a property from an object?
delete key.value
What are the two ways to get or update the value of a property?
dot notation method
hotel.name = ‘Park’;
square bracket method
hotel[‘name’] = ‘Park’;
What are arrays used for?
stores a list of values
Describe array literal notation.
var colors;
colors = [‘white’, ‘black’, ‘custom’];
How are arrays different from “plain” objects?
in an object, the order of the properties is not important
however, in an array, the index numbers dictate the order of the properties
What number represents the first index of an array?
0
What is the length property of an array?
holds the number of items in the array
How do you calculate the last index of an array?
subtracting 1 from the length of an array gives the last index of an array
What is a function in JavaScript?
a set of statements that performs a task or calculates a value
Describe the parts of a function definition.
function keyword to start
optional name
comma separated list of 0+ parameters
start of a function’s code block
optional return statement
end of the function’s code block shown by }
Describe the parts of a function call.
function’s name
comma separated list of 0+ arguments surrounded by ()
When comparing them side-by-side, what are the differences between a function call and a function definition?
if there is a code block, it’s a function definition, if not it’s a function call
What is the difference between a parameter and an argument?
parameter is a placeholder
argument is actual value
Why are function parameters useful?
What two effects does a return statement have on the behavior of a function?
makes functions more reusable and flexible
Why do we log things to the console?
to debug our code
validate our assumptions about how something works
What is a method?
function which is a property of an object
How is a method different from any other function?
a method is associated with an object, while a function is not
How do you remove the last element from an array?
pop() method
How do you round a number down to the nearest integer?
Math.floor() method
How do you generate a random number?
Math.random() method
How do you delete an element from an array?
splice() method
pop() method
shift() method
How do you append an element to an array?
push() method
unshift () method
splice() method
How do you break a string up into an array?
string.split() method
Do string methods change the original string? How would you check if you weren’t sure?
it does not mutate the original string
you can assign a variable to the original string and check it at the end
Roughly how many string methods are there according to the MDN Web docs?
60-70 methods
Is the return value of a function or method useful in every situation?
no, it’s only useful when you need the function/method to return something
ex: pop(), shift() method
Roughly how many array methods are there according to the MDN Web docs?
around 40 methods (?)
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators.
== equal to
=== strict equal to
=! not equal to
==! strict not equal to
> greater than
< less th an
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
to check if a condition is true or false
Is else required in order to use an if statement?
a code block to execute if the value is true
Describe the syntax (structure) of an if statement.
What are the three logical operators?
logical &&
logical ||
logical !
How do you compare two different expressions in the same condition?
logical &&
logical ||
What is the purpose of a loop?
to repeat a portion of code a set number of times until the desired process is complete
What is the purpose of a condition expression in a loop?
tells how many times the loop should continue running until the counter reaches a certain number
What does “iteration” mean in the context of loops?
each time the code runs
When does the condition expression of a while loop get evaluated?
before executing the statement again
once before the initialization
When does the initialization expression of a for loop get evaluated?
occurs one time only before the loop begins
When does the condition expression of a for loop get evaluated?
each time before the loop runs
When does the final expression of a for loop get evaluated?
at the end of each loop iteration
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break statement
What does the ++ increment operator do?
increment the value of a variable by 1 and reassigning it
How do you iterate through the keys of an object?
Using the for in statement.
Why do we log things to the console?
it’s a feature for debugging purposes
What is a “model”?
general def: representation
Which “document” is being referred to in the phrase Document Object Model?
the document node in the DOM tree (webpage)
What is the word “object” referring to in the phrase Document Object Model?
the nodes in the dom tree
What is a DOM Tree?
model of the webpage
Give two examples of document methods that retrieve a single element from the DOM.
getElementById()
querySelector()
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName(‘class’)
getElementsByTagName(‘tagName’)
Why might you want to assign the return value of a DOM query to a variable?
to store the location of the element in a variable
saves the browser looking through the DOM tree to find the same element again
caches the selection
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
if you place the script tag on top, it’ll load up the main.js and run the dom, making the webpage take longer to load and slow down the pg rendering speed
What does document.querySelector() take as its argument and what does it return?
takes a string containing one or more selector and returns
the element object representing the first element in the doc that matches the argument
returns null if it doesn’t find anything
What does document.querySelectorAll() take as its argument and what does it return?
argument: selectors
returns: all of those elements that match the selector in a node list
Why do we log things to the console?
to debug
to see what our code is doing
What is the purpose of events and event handling?
`we want to get events to trigger some sort of JS code
allows our page to be more interactive
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 passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action
What object is passed into an event listener callback when the event fires?
the event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
target property of the event object
point of interaction on the dom
the object that dispatches the event
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
What is the className property of element objects?
`
How do you update the CSS class attribute of an element using JavaScript?
What is the textContent property of element objects?
How do you update the text within an element using JavaScript?
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
Why is storing information about a program in variables better than only storing it in the DOM?
What does the transform property do?
CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
The transition property is shorthand for which four CSS properties?
transition delay, transition timing function
What event is fired when a user places their cursor in a form control?
focus()
What event is fired when a user’s cursor leaves a form control?
blur()
What event is fired as a user changes the value of a form control?
change
What event is fired when a user clicks the “submit” button within a form?
submit
What does the event.preventDefault() method do?
prevents the default behavior
What does submitting a form without event.preventDefault() do?
it will reload the page
What property of a form element object contains all of the form’s controls.
elements property
What property of a form control object gets and sets its value?
value attribute
use object.value
What is one risk of writing a lot of code without checking to see if it works so far?
you won’t know which parts don’t work
What is an advantage of having your console open when writing a JavaScript program?
Does the document.createElement() method insert a new element into the page?
no, it is not yet part of the dom tree until it is appended
How do you add an element as a child to another element?
you can use append child
What do you pass as the arguments to the element.setAttribute() method?
the element you would want to be appended or made a child\
element, value
What steps do you need to take in order to insert a new element into the page?
- createElement()
- optionally, you setAttribute() and createTextNode()
- appendChild() to add it to the page
What is the textContent property of an element object for?
The text content of the element and all descendaces, with spacing and CSS hidden text, but without tags
Name two ways to set the class attribute of a DOM element.
setAttribute()
className property
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
we’re able to call the function more than once
What is the event.target?
gets the element on which the event originally occurred
Why is it possible to listen for events on one element that actually happen its descendent elements?
due to event capturing?
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?
it takes the css selector you want to match the element and its ancestors against
returns the first ancestor of the selected element
How can you remove an element from the DOM?
remove()
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?
adding an event listener to the parent element
What is the event.target?
event that is being targeted
element interacted with
the element that dispatches the event
What is the effect of setting an element to display: none?
the affected element will disappear and will not take up space in the web page
What does the element.matches() method take as an argument and what does it return?
argument: takes in a css selector
returns: true if the element matches the selectors, otherwise false
How can you retrieve the value of an element’s attribute?
getAttribute()
At what steps of the solution would it be helpful to log things to the console?
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?
add addeventlistener for each element
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?
display none and display show? with buttons?
Give two examples of media features that you can query in an @media rule.
Which HTML meta tag is used in mobile-responsive web pages?
meta name=”viewport”
What is a breakpoint in responsive Web design?
the point at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience
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?
you don’t know the pixel count for every screen so it makes everything relative to the screen
columns are boxes so they can negotiate between those breakpoints and maintain their shape and boxes
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?
because the css rules for the smaller min-width was written after
rules at the end of the style sheet take precedence over the front rules
What is JSON?
extremely common data interchange format used to send and store information in computer systems
What are serialization and deserialization?
process of converting an Object into stream of bytes so that it can be transferred over a network or stored in a persistent storage
reverse process: turning a stream of bytes into an object in memory
Why are serialization and deserialization useful?
Its main purpose is to save the state of an object in order to be able to recreate it when needed. The reverse process is called deserialization
How do you serialize a data structure into a JSON string using JavaScript?
using the JSON.stringify() method
How do you deserialize a JSON string into a data structure using JavaScript?
usign the JSON.parse() method
How do you store data in localStorage?
setItem()
How do you retrieve data from localStorage?
getItem()
What data type can localStorage save in the browser?
string data
When does the ‘beforeunload’ event fire on the window object?
What is a method?
a function which is a property of an object
How can you tell the difference between a method definition and a method call?
Describe method definition syntax (structure).
keyword function with function name and with (parameter) open curly brace for the code block with whatever you want it to execute then close curly brace
Describe method call syntax (structure).
function object of a property with an argument in the parenthesis`
How is a method different from any other function?
method is associated with an object, while a function is not
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods)
What are the four “principles” of Object-Oriented Programming?
abstraction
encapsulation
inheritance
polymorphism
What is “abstraction”?
being able to work with complex things in simple ways
What does API stand for?
application programming interface
What is the purpose of an API?
give programmers a way to interact with a system in a simplified, consistent fashion
What is this in JavaScript?
an implicit parameter of all JavaScript functions
What does it mean to say that this is an “implicit parameter”?
it is available in a function’s code block even though it was never included in the function’s parameter list or declared with var
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?
var character = {
firstName: ‘Mario’,
greet: function () {
var message = ‘It's-a-me, ‘ + this.firstName + ‘!’;
console.log(message);
}
};
object character
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
It’s a me Mario!
we are calling the greet method of the character object.
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
It’s a me, undefined because var hello does not have a value stored for the firstName property
How can you tell what the value of this will be for a particular function or method definition?
we would not know from the definition!
How can you tell what the value of this is for a particular function or method call?
“the object to the left of the dot” when the function is called (as a method).
What kind of inheritance does the JavaScript programming language use?
prototype-based inheritance
What is a prototype in JavaScript?
original model on which something is patterned
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?
because they are prototyped onto it
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
proto
What does the new operator do?
lets developers create an instance of user-defined object type or of one of the built-in object types that has a constructor function
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
What does the instanceof operator do?
test to see if the prototype property of a constructor appears anywhere in the prototype chain of an object
What is a “callback” function?
function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action
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() function
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 or immediately
What do setTimeout() and setInterval() return?
The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout(). This value can be passed to clearTimeout() to cancel the timeout.
The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval() to cancel the interval.
What is a client?
service requesters
program that’s capable
What is a server?
providers of a resource or service
provides whatever the request is
Which HTTP method does a browser issue to a web server when you visit a URL?
GET request
What three things are on the start-line of an HTTP request message?
HTTP method - describing what action to be performed
request target - usually a URL or the absolute path of the protocol, port, and domain are usually characterized by the request context
HTTP version - defines the structure of the remaining message, acting as an indicator of the expected version to use for the `response
What three things are on the start-line of an HTTP response message?
- The protocol version, usually HTTP/1.1.
- A status code, indicating success or failure of the request. Common status codes are 200, 404, or 302
- A status text. A brief, purely informational, textual description of the status code to help a human understand the HTTP message.
What are HTTP headers?
let the client and server pass additional information with an HTTP request or response
consists of its case-insensitive name followed by a colon, then by its value
meta information
allows us to get or put information about the request
Is a body required for a valid HTTP request or response message?
NO, responses with a status code that sufficiently answer the request without the need for corresponding payload usually don’t
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
What is AJAX?
technique for loading data into part of a pg without having to refr3esh the entire pg
What does the AJAX acronym stand for?
asynchronous javascript and xml
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest object
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
‘load’`
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
prototypical inheritance
What is a code block? What are some examples of a code block?
statements to be executed
What does block scope mean?
restricts the variable that is declared inside a specific block, from access by the outside of the block
What is the scope of a variable declared with const or let?
block scope
What is the difference between let and const?
let can be reassigned while const cannot
Why is it possible to .push() a new value into a const variable that points to an Array?
we are adding new elements to the array, but we are not reassigning the array
How should you decide on which type of declaration to use?
if you know that the value won’t/can’t be reassigned, use const
if you know that the value will/can be reassigned, use let, esp for loops or mathematical algorithms where the value is changing
What is the syntax for writing a template literal?
uses backticks and use a backslash if the string contains a backtick
\n for new liens
interpolation: ${ }
What is “string interpolation”?
the ability to transform a string so that it is safe to include in HTML
What is destructuring, conceptually?
to dismantle something
to unpack values from arrays or properties from objects into distinct variables
What is the syntax for Object destructuring?
const or let { property1: variable1, property2: variable2 } = object;
What is the syntax for Array destructuring?
let [x, y, z] = array;
How can you tell the difference between destructuring and creating Object/Array literals?
the assignment is after the curly braces for creating,
for destructuring, writing the actual value is not required
What is the syntax for defining an arrow function?
=>
When an arrow function’s body is left without curly braces, what changes in its functionality?
it implicitly returns
How is the value of this determined within an arrow function?
arrow function captures the this value of the enclosing context instead of creating its own this context
uses it from the enclosing lexical scope
What is a CLI?
command-line interfaces
What is a GUI?
graphical user interface
aimed for users of the technology, not the producers
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 - interface to the system reference manuals
cat - to concatenate files to standard output
ls - list directory contents
pwd - print name of current/working directory (print working directory)
echo - display a line of text
touch - change file timestamps
mkdir - make directories
mv - move (rename) files
rm - remove files or directories
cp - copy files and directories
What are the three virtues of a great programmer?
laziness, hubris, impatience
What is Node.js?
program that allows JavaScript to be run outside of a web browser
environment that allows us to execute Javascript code without a browser
What can Node.js be used for?
used to build back ends for web applications, command-line programs, or any kind of automation that developers wish to perform
What is a REPL?
read-eval-print loop
takes single user inputs, executes them, and returns the result to the user
When was Node.js created?
may 27 2009
What back end languages have you heard of?
Ruby, Python, Java
What is the process object in a Node.js program?
global that provides information about, and control over, the current Node.js process
object that has a lot of info about node js
How do you access the process object in a Node.js program?
using require()
globally available
What is the data type of process.argv in Node.js?
array
What is a JavaScript module?
single .js file
What values are passed into a Node.js module’s local scope?
filename dirname
Give two examples of truly global variables in a Node.js program.
dirname filename
console
process object
What is the purpose of module.exports in a Node.js module?
instructions that allow us to export from a given file so that other files are allowed to access the exported code
How do you import functionality into a Node.js module from another Node.js module?
require()
What is the JavaScript Event Loop?
constantly running process that monitors both the callback queue and the call stack
What is different between “blocking” and “non-blocking” with respect to how code is executed?
blocking is executed synchronously
non-blocking is executed asynchronously
What is a directory?
file system cataloging structure
What is a relative file path?
the path related to the present working directly(pwd)
What is a absolute file path?
always contains the root element and the complete directory list required to locate the file
What module does Node.js include for manipulating the file system?
file system module
fs module
What method is available in the Node.js fs module for writing data to a file?
writefile method
Are file operations using the fs module synchronous or asynchronous?`
asynchronous
What is NPM?
world’s largest software registry
What is a package?
directory with one or more files in it
How can you create a package.json with npm?
use the npm init command
What is a dependency and how to you add one to a package?
another package that your package needs in order to work
npm install
What happens when you add a dependency to a package with npm?
Install the dependencies to the local node_modules folder.
How do you add express to your package dependencies?
npm install express
What Express application method starts the server and binds it to a network PORT?
listen method
How do you mount a middleware with an Express application?
use method
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req - request object
res - response object
next - function that triggers the request to be sent to the next middleware
- lets us break our logic into multiple pieces
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json
What is the significance of an HTTP request’s method?
So we can indicate what the intent of the request method is
What does the express.json() middleware do and when would you need it?
parses incoming requests with JSON data and turns it into an object
to send JSON data to the server
What is PostgreSQL and what are some alternative relational databases?
powerful, free, open source Relational Database Management System (RDBMS)
MySQL, SQL Server by Microsoft, Oracle by Oracle Corporation
What are some advantages of learning a relational database?
they support good guarantees about data integrity
- They can store and modify data in a way that makes data corruption as unlikely as possible
What is one way to see if PostgreSQL is running?
sudo service postgresql status
What is a database schema?
collection of tables
defines how the data in relational database should be organized
blueprint on how a database should look like
What is a database schema?
collection of tables
defines how the data in relational database shoudl be organized
What is a table?
list of rows each having the same set of attributes i.e. all students in a “students” table could have “firstName” “lastName” and “dateOfBirth”
What is a row?
record in that spreadsheet
What is SQL and how is it different from languages like JavaScript?
SQL (structured Query Language) : primary way of interacting with relational databases
declarative programming language instead of JS which is an imperative language
How do you retrieve specific columns from a database table?
select “”
from “”
How do you filter rows based on some specific criteria?
select “”
from “”
where “” = ‘’
What are the benefits of formatting your SQL?
consistent style and readability
What are four comparison operators that can be used in a where clause?
<, >, =, and !=
How do you limit the number of rows returned in a result set?
limit integer
How do you retrieve all columns from a database table?
select *
How do you control the sort order of a result set?
order by “” desc/asc
How do you add a row to a SQL table?
using the insert statement
What is a tuple?
list of values
How do you add multiple rows to a SQL table at once?
separate the tuples by commas
How do you get back the row being inserted into a table without a separate select statement?
returning clause
How do you update rows in a database table?
update statement
set
Why is it important to include a where clause in your update statements?
it might update every row in the table!
How do you delete rows from a database table?
delete statement
where clause
How do you accidentally delete all rows from a table?
delete statement without stating a where clause
What is a foreign key?
one column that links 2 tables together
How do you join two SQL tables?
select statement
from clause
join clause
- join “blank” using (“foreign key”)`
How do you temporarily rename columns or tables in a SQL statement?
create an alias for it by using as
ex: select “products”.”name” as “product”,
“suppliers”.”name” as “supplier”
What are some examples of aggregate functions?
max()
min()
avg()
What is the purpose of a group by clause?
separate rows into groups and perform aggregate functions on those groups of rows
What are the three states a Promise can be in?
pending
fulfilled
rejected
How do you handle the fulfillment of a Promise?
using a .then method
How do you handle the rejection of a Promise?
using a .catch method
What is Array.prototype.filter useful for?
creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function
What is Array.prototype.map useful for?
creates a new array populated with the results of calling a provided function on every element in the calling array
What is Array.prototype.reduce useful for?
allows you to “reduce” an array to a single value
executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value
What is “syntactic sugar”?
syntax within a programming language that is designed to make things easier to read or to express
What is the typeof an ES6 class?
function
Describe ES6 class syntax.
declare a class with keyword class, name of class, then open curly braces
initialize the properties with constructor keyword and properties in parenthesis
open curly brace
this.properties = proeprties
What is “refactoring”?
the process of restructuring existing computer code—changing the factoring—without changing its external behavior
What is Webpack?
a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.
module bundler
How do you add a devDependency to a package?
you install it using npm install
What is an NPM script?
a convenient way to bundle common shell commands for your project
How do you execute Webpack with npm run?
npm run build
How are ES Modules different from CommonJS modules?
syntax is even mroe compact than CommonJS
structure can be statically analyzed (for static checking, optimization, etc.)
Their support for cyclic dependencies is better than CommonJS’s
What kind of modules can Webpack support?
ECMAScript modules
CommonJS modules
AMD modules
Assets
WebAssembly modules
What is React?
React is a JavaScript library for creating user interfaces.
What is a React element?
an object representation of a DOM node
How do you mount a React element to the DOM?
render()
What is Babel?
toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments
takes newer syntax and converts into a widely used syntax
What is a Plug-in?
software component that adds a specific feature to an existing computer program
What is a Webpack loader?
transformations that are applied to the source code of a module
allow you to pre-process files as you import or “load” them
How can you make Babel and Webpack work together?
incorporate the babel loader allows them work together
What is JSX?
allows us to write HTML-like syntax in React
a syntax extension to JavaScript
Why must the React object be imported when authoring JSX in a module?
internally every JSX is creating a React Component using JSX transformer
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
use the babel-loader and have
What is a React component?
independent and reusable bits of code
function that takes in arbitrary inputs and returns JSX
How do you define a function component in React?
- is a JavaScript/ES6 function.
- must return a React element (JSX)
- always starts with a capital letter (naming convention)
How do you mount a component to the DOM?
render method
What are props in React?
arguments passed into React components
props stands for properties
How do you pass props to a component?
pass props with key value pair attributes
How do you write JavaScript expressions in JSX?
You can put any valid JavaScript expression inside the curly braces in JSX
How do you create “class” component in React?
class keyword
the component’s name must start with an upper case letter
needs “extends React.Component” creates an inheritance to React.Component, and gives your component access to React.Component’s functions
needs render()
How do you access props in a class component?
this.props
What is the purpose of state in React?
states is for managing data and contains data or info about the component
How to you pass an event handler to a React element?
With JSX you pass a function as the event handler
using camelCase, rather than lowercase
inside curly braces
What are controlled components?
An input form element whose value is controlled by React
What two props must you pass to an input for it to be “controlled”?
value
onChange
What Array method is commonly used to create a list of React elements?
map method
What is the best value to use as a “key” prop when rendering lists?
use a string that uniquely identifies a list item among its siblings
What does the acronym LIFO mean?
last-in-first-out //
the last thing pushed onto the stack is the first thing that can be popped out
What methods are available on a Stack data structure?
push()
pop()
What must you do to access the value at an arbitrary point in a stack (not just the “top”)?
peek()
what in javascript uses a stack
array?
What does the acronym FIFO mean?
first-in-first-out (FIFO) operations: the first thing enqueued onto the queue is the first thing that can be dequeued out.
What methods are available on a Queue data structure?
enqueue(value) - adds a value to the “back” of the queue
dequeue() - removes the “front” value from the queue and returns it
peek() - returns the “front” value of the queue without removing it.
What must you do to access the value at an arbitrary point in a queue (not just the “front”)?
Dequeue until you reach desired value
How are linked lists different from an array?
Linked lists are sequential access (like a queue), not random access (like an array)
How would you access an arbitrary node in a linked list (not just the “head”)?
you have to start at the beginning, then jump from node to node until you get there
