Quiz Flashcards
Where do you put non-visible content about the HTML document?
head element
Where do you put visible content about the HTML document?
body element
Where do the and tags go in a valid HTML document?
html element
What is the purpose of a declaration?
to tell a browser which version of HTML the page is using
Give five examples of HTML element tags
html, body, head, h1, p, a, span, ul, ol, li…
What is the purpose of HTML attributes
to provide additional information about the contents of an element
Give an example of an HTML entity
< < > > & & © ®
How do block-level elements affect the document flow?
always appear to start on a new line
How do inline elements affect the document flow?
appear to continue on the same line as their neighboring elements
What are the default width and height of a block-level element?
full width available of its parent element (container), and height of content length
What are the default width and height of an inline element?
width and height of parent element, non-adjustable
What is the difference between an ordered list and an unordered list in HTML
ol is numbered, while ul is bullet points
Is an HTML list a block element or an inline element?
block element
What HTML tag is used to link to another website?
a element (anchor)
What is an absolute URL?
domain name followed by the path to a specific page
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?
by using ../ to go up one folder, then followed by a file name (or could be a folder name)
How do you indicate the relative link to a child directory?
by using the name of the child folder, followed by a forward slash, then the file name
childfolder/file.name
How do you indicate the relative link to a grand parent directory?
by using ../../ to go up two folders, then followed by a file name (or could be a folder name)
How do you indicate the relative link to the same directory?
by using the file name (or ./)
What is the purpose of an HTML form element?
houses form controls/ group inputs together to capture submitted information
Give five examples of form control elements.
??
Give three examples of type attributes for HTML elements.
“text” “password” “email” “radio” “checkbox” “file” “submit” “image”
Is an HTML element a block element or an inline element?
inline element
What are the six primary HTML elements for creating tables?
html, head, body, doctype, title, meta
What purpose do the thead and tbody elements serve?
accessibility, semantically divide elements, styling purposes
Give two examples of data that would lend itself well to being displayed in a table.
schedule, tabular data - statistics, database
What are the names of the individual pieces of a CSS rule?
selector and declaration
In CSS, how do you select elements by their class attribute?
.class
In CSS, how do you select elements by their type?
tag name
In CSS, how do you select an element by its id attribute?
id
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 CSS properties make up the box model?
margin, border, padding
Name three different types of values you can use to specify colors in CSS.
color name, hex, rgb, rgba
What is a pseudo-class?
allows to change the appearance of elements when a user is interacting with them :hover :active :focus
What are CSS pseudo-classes useful for?
engaging
Name at least two units of type size in CSS.
px em rem % pt
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?
no wrap
Why do two div elements “vertically stack” on one another by default?
block elements take up 100% width by default
What is the result flex-direction of an element with display: flex?
asdf
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
same as static, doesn’t affect document flow
How does setting position: relative on an element affect where it appears on the page?
moves the element in relation to where it would have been in normal flow
How does setting position: absolute on an element affect document flow?
taken out of normal flow, no longer affects the position of other elements
How does setting position: absolute on an element affect where it appears on the page?
relative to non-static position parent////
How do you constrain an absolutely positioned element to a containing block?
set the parent container as non-static
What are the four box offset properties?
top bottom left right
What is the purpose of variables?
to store values
How do you declare a variable
var = ;
How do you initialize a variable?
= on declared variable
What characters are allowed in variable names?
letters, numbers, _, $
What does it mean to say that variable names are “case sensitive”?
apple and Apple are different
What is the purpose of a string?
texts
What is the purpose of a number?
numbers
What is the purpose of a boolean?
to show true and false
What does the = operator mean in JavaScript?
assign a value
How do you update the value of a variable?
assign a new value
What is the difference between null and undefined?
null is assigned to show empty value, undefined is to show no value has been assigned, (null is an object, which is a mistake)
Why is it a good habit to include “labels” when you log values to the browser console?
to show what values are being logged
Give five examples of JavaScript primitives.
number, string, boolean, undefined, bigint, symbol
What data type is returned by an arithmetic operation?
number
What is string concatenation?
connecting strings together
What purpose(s) does the + plus operator serve in JavaScript?
adding numbers, concatenating strings
What data type is returned by comparing two values ( . ===, etc)?
boolean
What does the += “plus-equals” operator do?
add a value to a variable, and assign that value to the variable
What are objects used for?
to create model of something
What are object properties?
variables as opposed to functions
Describe object literal notation?
{ }
How do you remove a property from an object?
delete keyword
What are the two ways to get or update the value of a property?
. (member operator) and constructor [ ]
What are arrays used for?
storing lists of data, anything that needs numerically indexed
Describe array literal notation.
[ ]
How are arrays different from “plain” objects?
indexed, objects are non-iterable
What number represents the first index of an array?
0
What is the length property of an array?
array.length;
How do you calculate the last index of an array?
array[array.length - 1]
What is a function in JavaScript?
performs a set of tasks, reapeat
Describe the parts of a function definition.
function name(parameter) {return}
Describe the parts of a function call.
function() or function(para)
When comparing them side-by-side, what are the differences between a function call and a function definition?
name of function and argument, while definition has the.. definition
What is the difference between a parameter and an arguement?
parameter represents data that function will be called with, argument represents the actual data that’s been passed on to the function
Why are function parameters useful?
pass info to function that function needs
What two effects does a return statement have on the behavior of a function?
causes the function to produce a value we can use, prevents any more code in the function’s code block from being run
Why do we log things to the console?
to debug
What is a method?
a function that is a property of an object
How do you remove the last element from an array?
.pop()
How do you round a number down to the nearest integer?
round
How do you generate a random number?
.random() * range of the number
How do you delete an element from an array?
splice(position, how many to delete, inserting item)
How do you break a string up into an array?
split(string)
Do string methods change the original string? How would you check if you weren’t sure?
console.log()
Roughly how many string methods are there according to the MDN Web docs?
40s
Is the return value of a function or method useful in every situation?
no
Roughly how many array methods are there according to the MDN Web docs?
a lot, 40s?
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.
> < == === <= >= != !==
What data type do comparison expressions evaluate to?
boolean
What is the purpose of an if statement?
decision making
is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement?
if (condition) { statement }
What are the three logical operators?
! && ||
How do you compare two different expressions in the same condition?
( ) comparison ( )
What is the purpose of a loop?
to iterate through a process multiple times
What is the purpose of a condition expression in a loop?
loops start and stop
What does “iteration” mean in the context of loops?
repeat
When does the condition expression of a while loop get evaluated?
before statement
When does the initialization expression of a for loop get evaluated?
once before loop begins
When does the condition expression of a for loop get evaluated?
before each evaluation
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
What does the ++ increment operator do?
increment by 1
How do you iterate through the keys of an object?
for var in object
What are the four components of “the Cascade”.
source order, inheritance, specificity, !important
What does the term “source order” mean with respect to CSS?
specificity
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 .
element class id
Why is using !important considered bad practice?
harder to debug
Why do we log things to the console?
to see what’s there
What is a “model”?
DOM Tree
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?
different part of the page loaded in the browser window
What is a DOM Tree?
connected nodes that represent the model
consists of 4 main types of nodes
Give two examples of document methods that retrieve a single element from the DOM.
getElementById(), querySelector()
Give one example of a document method that retireves multiple elements from the DOM at once.
getElementsByClassName(), getElementsByTagName(), querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
when working with an element more than once
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?
the browser needs to parse all of the elements in the HTML page before the JavaScript code can access them
What does document.querySelector() take as its argument and what does it return?
takes CSS selector, returns the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
takes CSS selector, returns a NodeList of all matching elements
Why do we log things to the console?
to test and debug
What is the purpose of events and event handling?
user interaction
What do [ ] square brackets mean in function and method syntax documentation?
optional
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?
a function passed into another function as an argument, which is then invoked inside the outer function
What object is passed into an event listener callback when the event fires?
event object
What is the event.target? if you weren’t sure, how would you check? Where could you get more information about it?
where interaction occurred, MDN, debugger
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
the latter won’t wait for the event
What is the className property of element objects?
gets and sets the value of the class attribute
How do you update the CSS class attribute of an element using JavaScript?
elementNodeReference.className = ‘new-class’
What is the textContent property of element objects?
represents the text content of the node and its descendants
How do you update the text within an element using JavaScript?
elementNodeReference.textContent = ‘new string’
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?
It would’ve been more complicated to keep track
Why is storing information about a program in variables better than only storing it in the DOM?
much easier to manipulate more than once, don’t depend on DOM
What does the transform property do?
manipulate images
Give four examples of CSS transform functions.
rotate(), scale(), skew(), translate()
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?
‘input’
What event is fired when a user clicks the “submit” button within a ?
‘submit’
What does the event.preventDefault() method do?
prevents default action
What does submitting a form without event.preventDefault() do?
reloads the page, send the info
What property of a form element object contains all of the form’s controls?
elements
What property of form a 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?
once finished, you don’t know what’s broken
What is an advantage of having your console open when writing a JavaScript program?
easier to follow and debug early, access tools
Does the document.createElement() method insert a new element into the page?
no, only creates a new element
How do you add an element as a child to another element?
parentNode.appendChild(‘childNode’)
What do you pass as the arguments to the element.setAttribute() method?
(‘attribute’, ‘value’)
What steps do you need to take in order to insert a new element into the page?
create an element, add any class/value to it, add any text content to it, then appendChild to the corresponding parent element, set correct attribute for CSS rules
What is the textContent property of an element object for?
setting the text content of the element
Name two ways to set the class attribute of a DOM element.
setAttribute(), className, classList
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
re using, modifying, and debugging each function will only effect its own little section without it harming other sections.
functions in general will be able to be called again later without having to rewrite the whole thing at another time.
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, transition-delay
Give two examples of media features that you can query in an @media rule.
width, height
Which HTML meta tag is used in mobile-responsive web pages?
meta viewport tag
what is the event.target?
target of the event (most specific element interacted with)
Why is it possible to listen for events on one element that actually happen its descendent elements?
event delegation analyzes bubbled events to find a match on child elements
What DOM element property tells you what type of element it is?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
string of element name, returns itself or matching ancestor, or null
How can you remove an element from the DOM?
ChildNode.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?
add the event listener to the parent element
What is the event.target?
target of the event (most specific element interacted with) element which dispatches the element.
What is the affect of setting an element to display: none?
hides the element
What does the element.matches() method take as an argument and what does it return?
string representing the selector to test
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?
every few steps
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 event listeners to each tab
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?
write code block that checks the tab’s attribute as many as the tabs
What is a breakpoint in responsive Web design?
at which point the media query applies
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?
allows to react to the container size
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?
cascading, happens afterwards, it overwrites / for mobile first design - media queries want to build CSS with smaller size to larger size.
What is JSON?
a text-based data format following JavaScript object syntax
What are serialization and deserialization?
Converting a string to a native object is called deserialization, while converting a native object to a string so it can be transmitted across the network is called serialization.
Why are serialization and deserialization useful?
provides a well accepted standard for transferring data
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
How do you deserialize a JSON into a data structure using JavaScript?
JSON.parse()
How do you store data in localStorage?
localStorage.setItem(‘key’, ‘value’)
How do you retrieve data from localStorage?
localStorage.getItem(‘key’)
What data type can localStorage save in the browser?
string (specifically JSON strings)
When does the ‘beforeunload’ event fire on the window object?
when the page is about to close (unload)
What is method
function that is part of an object
How can you tell the difference between a method definition and a method call?
definition: writing the code, call: call the function to use
Describe method definition syntax (structure).
var obj = {key: function (param) {code}};
Describe method call syntax (structure).
obj.key();
How is a method different from any other function?
property of an object
What is the defining characteristic of Object-Oriented Programming?
objects can contain data and method
What are four “principles” of Object-Oriented Programming?
abstraction, encapsulation, inheritance, polymorphism
What is “abstraction”?
working with complex things in simple ways
What does API stand for?
application programming interface
What is the purpose of an API?
simplifies programming by abstracting the underlying implementation and only exposing objects or actions the developer needs.
What is ‘this’ in Javascript?
an implicit parameter of all JS functions, keyword
What does it mean to say that ‘this’ is an “implicit parameter”?
not explicitly written in function definition, but accesible by the function
When is the value of ‘this’ determined in a function; call time or definition time?
determined at 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);
}
};character object
Given the above ‘character’ object, what is the result of the following code snippet? Why?
character.greet();
It’s-a-me, Mario!
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!
How can you tell what the value of ‘this’ will be for a particular function or method definition?
object that contains ‘this’
How can you tell what the value of ‘this’ is for a particular function or method call?
left of . of the method call
What kind of inheritance does the JavaScript programming language use?
prototypical
What is a prototype in JavaScript?
object with functionality that other object can delegate their work to
How it is possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?
attach prototypes to object and call any
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
prototype chain ex) array -> Array -> Object
What does the ‘new’ operator do?
- Creates a blank, plain JavaScript object;
- Links (sets the constructor of) the newly created object to another object by setting the other object as its parent prototype;
- Passes the newly created object from Step 1 as the ‘this’ context;
- Returns ‘this’ if the function doesn’t return an object
What property of JavaScript functions can store shared behavior for instances created with ‘new’?
prototype
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
What is a “callback” function?
a function passed into another function as an argument
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(); - using once
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?
- a positive integer value which identifies the timer created by the call to setTimeout()
- an interval ID which uniquely identifies the interval
What is a client?
request services
What is a server?
answer request from client, provides service
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
What three things are on the start-line of an HTTP ‘request’ message?
- HTTP method - describes the action
- request target - usually a URL, path
- HTTP version - defines the structure
What three things are on the start-line of an HTTP ‘response’ message?
- protocol version
- status code
- status text
What are HTTP headers?
specifies the request, or describe the body
info related to request
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
Is a body required for a valid HTTP request or response message?
optional
What is AJAX?
a programming practice of building complex, dynamic webpages using a technology known as XMLHttpRequest /
a technique for loading data into part of a page without having to refresh the entire page
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
What event is fired by ‘XMLHttpRequest’ objects when they are finished loading the data from the server?
‘load’
An ‘XMLHttpRequest’ object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
addEventListener is part of EventTarget
both are descendent of EventTarget
What is a code block? What are some examples of a code block?
{}, if, else, for, do while, while, try catch
What does block scope mean?
within curly braces
What is the scope of a variable declared with const or let?
block-scoped
What is the difference between let and const?
let: block-scope, cannot redeclare, does not initialize after hoisting, must use let for callback function in a for loop, not part of global object as a property, declare let early or TDZ with reference error
const: read-only, block-scope, immediately initialize, TDZ, Object.freeze(), can be used in for…of
Why is it possible to .push() a new value into a const variable that points to an Array?
read-only doesn’t mean that the actual value to which the const variable reference is immutable
How should you decide on which type of declaration to use?
use const unless let is needed
What is destructuring, conceptually?
assigns properties of an object or values of an array to individual variables
What is the syntax for Object destructuring?
let { property: variable } = 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?
{ } = vs = { }
What is the syntax for writing a template literal?
let variable = string ${variablename};
What is “string interpolation”?
substitute part of the string for the values of variables or expressions
What is the syntax for defining an arrow function?
(param1, param2) => expression;
When an arrow function’s body is left without curly braces, what changes in its functionality?
curly brace is not needed, unless a statement is used - return
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
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: reference manual
cat: view file contents and concatenating them/ create file with content
ls: list current directory
pwd: print current working directory
echo: display line of text
touch: change file timestamps/ create file with no content
mkdir: make directories/ folders
mv: move/rename files
rm: remove files or directories
cp: copy files and directories
What are the three virtues of a great programmer?
laziness, impatience, hubris
What is Node.js?
an asynchronous event-driven JavaScript runtime,
allows javascript to be run outside of a web browser
What can Node.js be used for?
, to build backends for web applications, command-line programs, or any kind of automation
What is a REPL?
read-eval-print
When was Node.js created?
2009
What back end languages have you heard of?
php, python
My questions reading about Node.js
event-driven, concurrent connections, OS threads are employed? -> thread-based networking?, not dead-locking because no locks, no direct I/O so no blocking, event loop as a runtime construct, child_process.fork(), cluster module for load balancing
What is a computer process?
the instance of a computer program that is being executed by one or many threads, containing the program code and its activity
Roughly how many computer processes are running on your host operating system (Activity Monitor)?
500
Why should a full stack Web developer know that computer processes exist?
Full stack Web development is based on making multiple processes work together to form one application, so having at least a cursory awareness of computer processes is necessary.
What is the ‘process’ object in a Node.js program?
a ‘global’ that provides information about, and control over, the current Node.js process
How do you ‘access’ the process object in a Node.js program?
process, because it’s global variable (otherwise need ‘require’)
What is the data type of ‘process.argv’ in Node.js?
object
What is a JavaScript module?
individual js file, performs a small task
What values are passed into a Node.js module’s local scope?
exports, require, module, __filename, __dirname
Give two examples of truly global variables in a Node.js program.
global, process, console
What is the purpose of ‘module.exports’ in a Node.js module?
to make the module readable by another file, for ease of transmit info
How do you import functionality into Node.js module from another Node.js module?
const variable = require(./path);
What is the JavaScript Event Loop?
look at the stack, if call stack is empty, move task queue to call stack
What is different between “blocking” and “non-blocking” with respect to how code is executed?
blocking - synchronous, prevents other codes to run
non-blocking - asychronous
What is a directory?
location
What is a relative file path?
path from the current location
What is an absolute file path?
path from the root location
What module does Node.js include for manipulating the file system?
fs
What method is available in the Node.js ‘fs’ module for writing data to a file?
fs.writeFile()
Are file operations using the ‘fs’ module synchronous or asynchronous?
asynchronous
What is a client?
sends request
What is a server?
fullfill or does not fullfil response, provides service
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
What is on the first line of an HTTP request message?
http version
What is on the first line of an HTTP response message?
http version,
What are HTTP headers?
s
Is a body required for a valid HTTP message?
no
What is NPM?
software registry to share and borrow packages, to manage private development
What is a package?
directory with files containing reusable code
How can you create a ‘package.json’ with ‘npm’
npm init (–yes) for default
What is a dependency and how do you add one to a package?
object that maps a package name to a version range,
npm install -P by default
What happens when you add a dependency to a package with ‘npm’?
download the module, add to package.json
How do you add ‘express’ to your package dependencies?
npm install express –save (save not required anymore)
npm init
What Express application method starts the server and binds it to a network ‘port’?
listen()
How do you mount a middleware with an Express application?
app.use(‘mount path’, function….
Which object does an Express application pass to your middleware to manage the request/response lifecycle of the server?
res.send or req.send
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?
passes desired outcome
What does the express.json() middleware do and when would you need it?
returns middleware that only parses JSON and only looks at requests where the Content-Type header matches the type option.
What is PostgreSQL and what are some alternative relational databases?
relational database, MySQL, SQL Server by Microsoft, Oracle by Oracle Corporation
What are some advantages of learning a relational database?
many problem domains can be modeled well, support good guarantees about data integrity, very flexible structure
What is one way to see if PostgreSQL is running
sudo service postgresql status or top
What is a database schema?
collection of tables
What is a table?
list of rows
What is a row?
entry with the same set of attributes
What is SQL and how is it different from language like JavaScript?
declarative language, others are imparative
How do you retrieve specific columns from a database table?
select
How do you filter rows based on some specific criteria?
where
What are the benefits of formatting your SQL?
readability
What are four comparison operators that can be used in a ‘where’ clause?
> > = <= < =
How do you limit the number of rows returned in a result set?
limit
How do you retrieve all columns from a database table?
*
How do you control the sort order of a result set?
order of , desc
How do you add a row to a SQL table?
insert into “table”
What is a tuple?
list of values
How do you add multiple rows to a SQL table at once?
separate tuple by comma (‘ ‘), (‘ ‘)
How do you get back the row being inserted into a table without a separate ‘select’ statement?
returning * or “column”
How do you update rows in a database table?
update “table”
set “value” = ‘ ‘
where “column” = ‘ ‘
Why is it important to include a where clause in your update statements?
otherwise updates everything
How do you delete rows from a database table?
delete from “table”
where “column” = ‘ ‘
How do you accidentally delete all rows from a table?
not including where clause
What is a foreign key?
key that connects to another table
How do you join two SQL tables?
select “ “
from “table1”
join “table2” using (“id”)
How do you temporarily rename columns or tables in a SQL statement?
select “column”.”colName” as “newName”
What are some examples of aggregate functions?
count, sum, max, min, avg
What is the purpose of a ‘group by’ clause?
to remove duplicates, to collapse/group based on specific columns
What are the three states a Promise can be in?
pending, fulfilled, rejected
How do you handle the fulfillment of a Promise?
.then
How do you handle the rejection of a Promise?
.then(.., onRejection) .catch(onRejection)
What is ‘Array.prototype.filter’ useful for?
creating a new array that meets a certain condition
What is ‘Array.prototype.map’ useful for?
creating a new array that has all indexes of an array manipulated
What is ‘Array.prototype.reduce’ useful for?
creating a new array that performs more complex callback function
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.
class Name {
constructor(var) {
}
funcName() {
}
static funcName2() {
}
}What is “refactoring”?
process of restructuring existing computer code without changing its external behavior
What is Webpack?
static module bundler for modern JS application into a JS file, builds dependency graphs
How do you add a ‘devDependency’ to a package?
npm install –save-dev package-name
What is an NPM script?
script for cli command to automate tasks
How do you execute Webpack with ‘npm run’?
npm run name-of-script-under-scripts-in-package.json
How are ES Modules different from CommonJS modules?
more compact syntax, structure can be statically analyzed (for static checking, optimization), support for cyclic dependencies is better, async loading
What kind of modules can Webpack support?
ecma 2015, amd, commonJS, assets, webassembly modules
What is React?
a JS library for building user interfaces
What is a React element?
object ,, DOM,,,,,
How do you mount a React element to the DOM?
import ReactDOM, use render method
What is Babel?
a JS compiler, toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JS in current and older browsers or environments/ and JSX
What is a Plug-in?
software component that adds a specific feature to an existing computer program, enabling customization
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?
install babel-loader, use webpack.config.js
What is JSX?
a syntax extension to JS, using HTML syntax with JS
Why must the React object be imported when authoring JSX in a module?
uses React method i.e. createElement
How can you make Webpack and Babel work together to convert JSX into valid JS?
@babel/plugin-transform-react-jsx
What is a React component?
reusable part of UI, accept inputs and return React elements describing what should appear on the screen
How do you define a function component in React?
like a normal function, first letter should be capitalized
How do you mount a component to the DOM?
ReactDOM.render(element, parent)
What are props in React?
object that’s passed as an argument
How do you pass props to a component?
prop => <>{prop.text}<>
How do you write JS expressions in JSX?
regular JS expressions wrapped in { }
How do you create “class” component in React?
class ‘name’ extends React.Component
How do you access props in a class component?
this.props
What is the purpose of state in React?
to determine what to display
How do you pass an event handler to a React element?
pass ‘onClick’ attribute, define function that handles the event
What ‘Array’ method is commonly used to create a list of React elements?
Array.map()
What is the best value to use as a “key” prop when rendering lists?
unique id
What are controlled components?
An input form element whose value is controlled by React, the React component that renders a form also controls what happens in that form on subsequent user input
What two props must you pass to an input for it to be “controlled”?
value, onChange
What does ‘express.static()’ return?
returns middleware
What is the local ‘__dirname’ variable in a Node.js module?
returns string absolute path to parent directory
What does the ‘join()’ method of Node’s ‘path’ module do?
join and return path of parameters
What does ‘fetch()’ return?
promise object
What is the default request method used by ‘fetch()’?
get
How do you specify the request method (‘get’,’post’,etc) when calling ‘fetch’?
second argument
When does React call a component’s ‘componentDidMount’ method?
after constructor() -> static getDerivedStateFromProps() -> render() -> componentDidMount()
Name three React.Component lifecylce methods.
componentDidMount, componentDidUpdate, componentWillUnmount
How do you pass data to a child component?
props
What must the return value of ‘myFunction’ be if the following expression is possible?
myFunction()();
return function
What does this code do? const wrap = value => () => value;
function that returns function ultimately returns original function???
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
when it’s defined
What allows JavaScript functions to “remember” values from their surroundings?
closure??
