C0521 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 head and body tags go in a valid HTML document?
HTML Element
What is the purpose of a !DOCTYPE declaration?
To tell the browser which version of HTML
Give five examples of HTML element tags.
html, head, body, h1, p
What is the purpose of HTML attributes?
Attributes provide additional information about the Element
Give an example of an HTML entity (escape character).
© copyright
How do block-level elements affect the document flow?
Block-level elements start on a new line
How do inline elements affect the document flow?
They don’t interrupt the flow
What are the default width and height of a block-level element?
100% Width, Auto Height
What are the default width and height of an inline element?
Auto Width, Auto Height
What is the difference between an ordered list and an unordered list in HTML?
Ordered implies that that the content goes in an order. ie. 1, 2, 3, etc.
Unordered does not have a specific order and by default has bullet points.
Is an HTML list a block element or an inline element?
Block
What HTML tag is used to link to another website?
The anchor tag
What is an absolute URL?
Link to a specific page on the web (external source)
What is a relative URL?
Link to other pages on the same site (local files)
How do you indicate the relative link to a parent directory?
../
How do you indicate the relative link to a child directory?
Name of the directory
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
Name of the file
What is the purpose of an HTML form element?
To collect information from visitors
Give five examples of form control elements.
input, textarea, select, label, button
Give three examples of type attributes for HTML input elements.
radio, submit, text
Is an HTML input element a block element or an inline element?
Inline
What are the six primary HTML elements for creating tables?
table, thead, tbody, tr, th, td
What purpose do the thead and tbody elements serve?
To separate the head and the body of the table
Give two examples of data that would lend itself well to being displayed in a table.
Tabular data
What are the names of the individual pieces of a CSS rule?
Selector, Declaration, Property, and Value
In CSS, how do you select elements by their class attribute?
.
In CSS, how do you select elements by their type?
Element name
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.
Hexcode, RGB, and HSL
What CSS properties make up the box model?
Content, Padding, Border, and Margin
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?
A class added to a selector that specifies a special state of that element
What are CSS pseudo-classes useful for?
Adding styling to an element that is in that state
Name at least two units of type size in CSS.
px and rem
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?
divs are a block element
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 document flow
How does setting position: relative on an element affect where it appears on the page?
Starts at normal flow position
How does setting position: absolute on an element affect document flow?
Doesn’t affect flow, gets removed from flow
How does setting position: absolute on an element affect where it appears on the page?
The element gets positioned to the nearest positioned ancestor that is non-static
How do you constrain an absolutely positioned element to a containing block?
Set parent to a position
What are the four box offset properties?
Top, Right, Bottom, Left
What is the purpose of variables?
Store information to go back to and use it
How do you declare a variable?
var
How do you initialize (assign a value to) a variable?
=
What characters are allowed in variable names?
Letters, Numbers, Dollar Sign, or an Underscore.
Can’t start with a number
What does it mean to say that variable names are “case sensitive”?
If you capitalize a letter in a variable name, it will be a different variable
ie. var score; is different from var Score;
What is the purpose of a string?
To contain text or any characters
What is the purpose of a number?
To hold numeric value
What is the purpose of a boolean?
To provide true or false values
What does the = operator mean in JavaScript?
Assign a value to a variable
How do you update the value of a variable?
Assign a value to that variable
What is the difference between null and undefined?
Null and Undefined are both empty but Null is the developers way of saying empty and Undefined is Javascript’s way of saying empty
Why is it a good habit to include “labels” when you log values to the browser console?
To know what you are logging and testing
Give five examples of JavaScript primitives.
String, Number, Boolean, Undefined, and Null
What data type is returned by an arithmetic operation?
Number
What is string concatenation?
Adding strings together to make a new string
What purpose(s) does the + plus operator serve in JavaScript?
To add numerical values or concatenating strings
What data type is returned by comparing two values (, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
Shorthand for x = x + y
What are objects used for?
To have multiple properties (variables) and methods (functions) under one value
What are object properties?
Variables that live within an object
Describe object literal notation.
Create an object and give it a name. Inside the pair of curly braces are name-value pairs that are separated by a comma. Those values can be properties (variables) and methods (functions).
How do you remove a property from an object?
Use the delete operator and then dot notation for the property in the object
ie. delete object.property
What are arrays used for?
To store a list of values that are related to each other
Describe array literal notation.
Create an array and give it a name. Inside the pair of square brackets are values that are separated by a comma.
How are arrays different from “plain” objects?
Arrays have an index
What number represents the first index of an array?
0
What is the length property of an array?
Returns the number of values in the array
How do you calculate the last index of an array?
Subtract 1 from the length
What is a function in JavaScript?
A block of code that can be named and used an infinite amount of times
Describe the parts of a function definition.
Function Keyword, Function Name, Parameter, Code Block
Describe the parts of a function call.
Function Name, and Argument(s)
When comparing them side-by-side, what are the differences between a function call and a function definition?
Function keyword, and the code block
What is the difference between a parameter and an argument?
Parameters are used when you define a function and arguments are used when you call a function
Why are function parameters useful?
Parameters let us run the function with different values instead of having a fixed result.
What two effects does a return statement have on the behavior of a function?
Stops the function and takes the result out of the function
Why do we log things to the console?
To test our code and see what the value of something is at a certain point
What is a method?
A method is a function which is a property of an object
How is a method different from any other function?
Methods are properties of an object
How do you remove the last element from an array?
The .pop method
How do you round a number down to the nearest integer?
Math.floor()
How do you generate a random number?
Math.random()
How do you delete an element from an array?
The .splice method
How do you append an element to an array?
The .push method
How do you break a string up into an array?
The .split method
Do string methods change the original string? How would you check if you weren’t sure?
No, you can check by logging the console of the original string and checking the return value of the documentation
Roughly how many string methods are there according to the MDN Web docs?
Over 30
Is the return value of a function or method useful in every situation?
Sometimes the return value will be useful but not always
ie. splice method return value is the removed value
Roughly how many array methods are there according to the MDN Web docs?
Over 30
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 values
What is the purpose of an if statement?
the if statement checks if the condition is met to run the code in the block
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if keyword follow by a condition in between parentheses which is followed by a code block that will run if the condition is met
What are the three logical operators?
&&, ||, !
How do you compare two different expressions in the same condition?
logical operator
What is the purpose of a loop?
To repeat code
What is the purpose of a condition expression in a loop?
Permission to run code and also to stop running code
What does “iteration” mean in the context of loops?
Each the code block is executed
When does the condition expression of a while loop get evaluated?
Beginning of each iteration
When does the initialization expression of a for loop get evaluated?
Beginning of everything else and it only happens once
When does the condition expression of a for loop get evaluated?
Before each iteration
When does the final expression of a for loop get evaluated?
After each 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?
Adds 1 to the value of a variable
How do you iterate through the keys of an object?
For in loop
What are the four components of “the Cascade”.
Source Order, Inheritance, Specificity, and !important
What does the term “source order” mean with respect to CSS?
The last rule that was applied to the same element is stronger than the ones created before it
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.
Type, Class, ID
Why is using !important considered bad practice?
It rules out any other styling and will be harder to debug because it destroys the natural cascade
Why do we log things to the console?
To see if the code is working
What is a “model”?
A model is a representation of something
Which “document” is being referred to in the phrase Document Object Model?
The HTML document
What is the word “object” referring to in the phrase Document Object Model?
The objects in the HTML document
What is a DOM Tree?
A DOM tree is a model of a web page
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.
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
To quickly access the values of that DOM method so that the code doesn’t have to run every time
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?
To create a model after the whole page has loaded
What does document.querySelector() take as its argument and what does it return?
It takes a selector as an argument and returns a JavaScript object or null if nothing is found
What does document.querySelectorAll() take as its argument and what does it return?
It takes a selector as an argument and returns a NodeList
What is the purpose of events and event handling?
To run code if something occurs
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 callback function is a function passed into another function as an argument
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?
The target property of the Event object holds the element that the event was triggered on
MDN
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
The first one has a function that will wait til the event happens
The second one runs immediately and returns undefined
What is the className property of element objects?
The className property is the class name of the element
How do you update the CSS class attribute of an element using JavaScript?
Assign the new class name to the className property of the object
What is the textContent property of element objects?
The textContent is the text content of the element
How do you update the text within an element using JavaScript?
Assign the new text content to the textContent property of the object
Is the event parameter of an event listener callback always useful?
No
Why is storing information about a program in variables better than only storing it in the DOM?
You can reuse the information stored in variables rather than calling the DOM every time
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element
Give four examples of CSS transform functions.
rotate, scale, skew, translate
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay
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 the default behavior of the event
i.e. preventing the data to be in the url
What does submitting a form without event.preventDefault() do?
the values in the form will be in the url when the page refreshes
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?
Code could be broken
What is an advantage of having your console open when writing a JavaScript program?
Checking for errors
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()
What do you pass as the arguments to the element.setAttribute() method?
the attribute name and the name of the attribute
What steps do you need to take in order to insert a new element into the page?
create the new element, query the parent element from the document, append child to the parent element
What is the textContent property of an element object for?
get the text content of an element or replace the value
Name two ways to set the class attribute of a DOM element.
.setAttribute()
.className
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
the function can be reused and will be easier to read code
Give two examples of media features that you can query in an @media rule.
min-width and max-width
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
What is the event.target?
The DOM element object which the event was called on
Why is it possible to listen for events on one element that actually happen its descendent elements?
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?
its takes a css selector and returns the closest ancestor
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?
assign the event listener to the ancestor
What is the affect of setting an element to display: none?
The element doesn’t show on the page
What does the element.matches() method take as an argument and what does it return?
takes a css selector and returns a boolean value
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 step
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?
assign an event listener 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 a condition for each view
What is a breakpoint in responsive Web design?
The points where the media queries are introduced
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?
Percentages scale to the display where as pixels are different percentages on different displays
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?
source order
What is JSON?
JSON is a data interchange format used to send and store information in computer systems
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.
Deserialization is the reverse process: turning a stream of bytes into an object in memory.
Why are serialization and deserialization useful?
Serialization and deserialization allows the computer to save the state of an object and recreate it when needed
How do you serialize a data structure into a JSON string using JavaScript?
.stringify()
How do you deserialize a JSON string into a data structure using JavaScript?
.parse()
How to you store data in localStorage?
.setItem()
How to you retrieve data from localStorage?
.getItem()
What data type can localStorage save in the browser?
string (most common is a JSON string)
When does the ‘beforeunload’ event fire on the window object?
right before the window closes
What is a method?
A method is a function which is a property of an object
How can you tell the difference between a method definition and a method call?
A method definition has code within curly braces with a function keyword and a method call is attached to an object.
Describe method definition syntax (structure).
An object with a property that has a value of a function
Describe method call syntax (structure).
The method name as a property of an object
How is a method different from any other function?
A method is a property of an object.
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”?
Abstraction is the process of 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?
an API delivers a user response to a system and sends the system’s response back to a user.
What is this in JavaScript?
this is an implicit parameter of all JavaScript functions.
What does it mean to say that this is an “implicit parameter”?
it’s an implicit parameter, meaning that 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);
}
};“this” is referring to the object character.
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?
“this” will be the object that the method is defined in.
How can you tell what the value of this is for a particular function or method call?
“this” will be the object that the method is attached to.
What kind of inheritance does the JavaScript programming language use?
prototype-based inheritance
What is a prototype in JavaScript?
An object with a set of data that other objects can use.
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?
The methods are properties of the prototype object of those data types.
If an object does not have its own property or method by a given key, where does JavaScript look for it?
The prototype object
What does the new operator do?
The new operator lets developers create an instance of a 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?
The prototype property
What does the instanceof operator do?
The instanceof operator 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 callback function is a 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()
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()?
0ms which will execute immediately
What do setTimeout() and setInterval() return?
timeoutID and intervalID which are positive non-zero integers that can be passed through clearTimeout() and clearInterval() to cancel the timeout/interval.
What is a client?
A client requests content or services from a server
What is a server?
A server host runs one or more server programs, which share their resources with clients
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?
A HTTP method, the request target (usually a URL), the HTTP version
What three things are on the start-line of an HTTP response message?
The protocol version, status code, status text
What are HTTP headers?
HTTP headers let the client and the server pass additional information with an HTTP request or response.
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?
Not all
What is AJAX?
AJAX is a technique for loading data into part of a page without having to refresh the entire page
What does the AJAX acronym stand for?
AJAX stands 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?
The XMLHttpRequest object shares the same prototype from eventTarget.
What is a code block? What are some examples of a code block?
A code block is code within curly braces.
For example, code for an if statement and loops.
What does block scope mean?
Variables defined inside the code block mean they only exist in that code block.
What is the scope of a variable declared with const or let?
block-scoped
What is the difference between let and const?
const creates a read only reference to the value
Why is it possible to .push() a new value into a const variable that points to an Array?
pushing a new value to an array doesn’t change the name of the variable declared by const.
How should you decide on which type of declaration to use?
You want to use const always unless you can not.
What is the syntax for writing a template literal?
`` aka backticks and to include variables and expressions, you would use ${}
What is “string interpolation”?
the ability to substitute part of the string for the values of variables or expressions.
What is destructuring, conceptually?
Declaring multiple variables at once from properties of an object or elements of an array.
What is the syntax for Object destructuring?
const { propertyName: newVariableName } = object; or const { newVariableName } = object; (if the property name is the same)
What is the syntax for Array destructuring?
const [newVariableName] = array;
How can you tell the difference between destructuring and creating Object/Array literals?
the {} and [] on the left side of the assignment operator means destructuring and if they are on the right side, and object or array is being created.
What is the syntax for defining an arrow function?
One parameter. With a simple expression return is not needed:
param => expression
Multiple parameters require parentheses. With simple expression return is not needed:
(param1, paramN) => expression
Multiline statements require body brackets and return:
param => {
let a =1;
return a + param;
}
Multiple parameters require parentheses. Multiline statements require body brackets and return:
(param 1, paramN) => {
let a = 1;
return a + param1 + paramN;
}
When an arrow function’s body is left without curly braces, what changes in its functionality?
The expression is returned.
How is the value of this determined within an arrow function?
An 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 cat ls pwd echo touch mkdir mv rm cp
man: shows the manual of a specific command
cat: displays the text content of a file into the terminal
ls: shows the contents of the directory you are in
pwd: prints the name of the current/working directory
echo: displays a line of text
touch: create a new file
mkdir: makes directories
mv: renames files
rm: removes files or directories
cp: makes a copy of files and directories
What are the three virtues of a great programmer?
Laziness, Impatience, Hubris
What is Node.js?
Node.js is a JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
What can Node.js be used for?
Node.js is primarily used for non-blocking, event-driven servers, due to its single-threaded nature. It’s used for traditional web sites and back-end API services, but was designed with real-time, push-based architectures in mind.
What is a REPL?
Read-eval-print loop
When was Node.js created?
2009
What back end languages have you heard of?
JavaScript, Python, PHP, Ruby, C++, C#, C, Java, Go (Golang)
What is a computer process?
A computer process is the instance of a computer program that is being executed by one or many threads.
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
Hundreds
Why should a full stack Web developer know that computer processes exist?
The code that a web developer writes are computer processes.
What is the process object in a Node.js program?
The process object is 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?
Just like any other object
What is the data type of process.argv in Node.js?
String
What is a JavaScript module?
an individual .js file
What values are passed into a Node.js module’s local scope?
exports, require, module, __filename, and __dirname
Give two examples of truly global variables in a Node.js program.
process and global
What is the purpose of module.exports in a Node.js module?
To export a function and store it in the exports property of the module object so that other modules can import those functions.
How do you import functionality into a Node.js module from another Node.js module?
Use the require method with the module that you want to import as the argument.
What is the JavaScript Event Loop?
The process where code is put in a call stack in order to execute code.
What is different between “blocking” and “non-blocking” with respect to how code is executed?
Blocking code is code that is occupying the call stack while it is executing and non-blocking code gets removed from the call stack when it is executed.
What is a directory?
a file that lists other files
What is a relative file path?
a point to a file in the same directory
What is an absolute file path?
a point to a file starting from the root of the directory
What module does Node.js include for manipulating the file system?
the fs module
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?
both
What is a client?
Clients request content or services from a server
What is a server?
Servers respond to clients with the information that they requested if possible
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?
an HTTP method like a verb (GET, PUT, or POST) or a noun like (HEAD or OPTIONS) , the request target (usually a URL), the HTTP version
What is on the first line of an HTTP response message?
The protocol version, a status code, and a status text
What are HTTP headers?
HTTP headers let the client and the server pass additional information with an HTTP request or response.
Is a body required for a valid HTTP message?
No
What is NPM?
NPM is the world’s largest software registry that developers use to share and borrow packages. NPM can be the website, the Command Line Interface (CLI), or the registry.
What is a package?
A package is a directory described by a package.json file
How can you create a package.json with npm?
npm init –yes
What is a dependency and how do you add one to a package?
A dependency is a package that lets the dependent package run. You can add one to a package using npm install.
What happens when you add a dependency to a package with npm?
The package gets placed into the dependencies key of the package.
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?
the listen method
How do you mount a middleware with an Express application?
the use method
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req for request and res for response
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application/json
What does the express.json() middleware do and when would you need it?
Parses JSON and would use it if you need to parse the request body.
What is the significance of an HTTP request’s method?
To know what to do with the data given whether it be GET, POST, DELETE, etc.
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a powerful, free, open source Relational Database Management System (RDBMS). Other relational databases are MySQL, SQL Server by Microsoft, and Oracle by Oracle Corporation.
What are some advantages of learning a relational database?
You use the SQL language and they are the most widely used kind of database
What is one way to see if PostgreSQL is running?
sudo service postgresql status
What is a database schema?
A collection of tables which defines how the data in a relational database should be organized.
What is a table?
A table is a list of rows each having the same set of attributes.
What is a row?
A row is a data record within a table.
What is SQL and how is it different from languages like JavaScript?
SQL is a declarative programming language. In declarative languages, programmers describe the results they want and the programming environment comes up with its own plan for getting those results.
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 by
How do you add a row to a SQL table?
insert into
What is a tuple?
a tuple is a list of values
How do you add multiple rows to a SQL table at once?
after each tuple, add a comma and then add another tuple
How do you get back the row being inserted into a table without a separate select statement?
returning
How do you update rows in a database table?
update and set
Why is it important to include a where clause in your update statements?
to know which rows to update instead of everything in the table
How do you delete rows from a database table?
delete from and specifying where
How do you accidentally delete all rows from a table?
delete from without specifying where
What is a foreign key?
A value that refers to another column in another table
How do you join two SQL tables?
join “table name” using (“foreign key”)
How do you temporarily rename columns or tables in a SQL statement?
as
What are some examples of aggregate functions?
count(“columnName”) sum(“columnName”)
What is the purpose of a group by clause?
To separate rows into groups and to perform aggregate functions on those groups
What are the three states a Promise can be in?
pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.
How do you handle the fulfillment of a Promise?
Use the then method of the returned promise object and pass in the callback function to run if the promise is fulfilled
How do you handle the rejection of a Promise?
Use the catch method of the return promise object and pass in the callback function to run if the promise is unfulfilled
What is Array.prototype.filter useful for?
It lets you filter an array with a condition which will check if each index meets the condition. The method will return a new array of values that met the condition.
What is Array.prototype.map useful for?
It lets you modify the array with an expression which will return a new array with new values at each index
What is Array.prototype.reduce useful for?
It lets you call a function to every index and returns the accumulation of all the return values of the function
What is “syntactic sugar”?
syntactic sugar is 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 keyword followed by the class name and a pair of curly braces. Within the curly braces, you can assign properties to the class by using the constructor function. Also you can assign methods to the class by defining the function without the function keyword.
What is “refactoring”?
code refactoring is the process of restructuring existing computer code while maintaining functionality
What is Webpack?
Webpack is a module that can bundle dependencies together so that the application doesn’t have to run on script tags which will bottleneck the browser and performance
How do you add a devDependency to a package?
npm install –save-dev
What is an NPM script?
npm scripts are shortcuts to execute in a cli
How do you execute Webpack with npm run?
npm run build
How are ES Modules different from CommonJS modules?
ES modules have more compact syntax compared the CommonJS, the structure can be statically analyzed, and the support for cyclic dependencies are better than CommonJS.
What kind of modules can Webpack support?
ECMAScript, CommonJS, AMD Modules, Assets, WebAssembly Modules
What is React?
React is a JavaScript library for building user interfaces
What is a React element?
Object
How do you mount a React element to the DOM?
ReactDOM.render(element, container)
What is Babel?
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
What is a Plug-in?
a Plug-in is a software component that adds a specific feature to an existing computer program.
What is a Webpack loader?
Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them.
How can you make Babel and Webpack work together?
install the babel-loader as a devDependency
What is JSX?
JSX is a syntax extension to JavaScript based in ES6. JSX allows you to write HTML in React by converting HTML into React components
Why must the React object be imported when authoring JSX in a module?
the syntax for JSX gets converted to react which will show react when it converts it
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
install @babel/plugin-transform-react-jsx and babel-loader as a devDependency
What is a React component?
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
How do you define a function component in React?
function FunctionName(props) { return someJSX; }
How do you mount a component to the DOM?
ReactDOM.render(element, container);
What are props in React?
Props are properties for react elements.
How do you pass props to a component?
take the prop as a parameter and then you can access it by the property of the props
How do you write JavaScript expressions in JSX?
{ JavaScript Expression }
How do you create “class” component in React?
class nameOfClass extends React.Component. The class must have a render function inside of it.
How do you access props in a class component?
this.props
What is the purpose of state in React?
The purpose of a state in React is to know which React element to render based on the state.
How to you pass an event handler to a React element?
you would pass it by setting the onClick prop to the event handler function but you would need to bind that function so that the ‘this’ will be known in the future.
What are controlled components?
An input form element whose value is controlled by React. When the user’s inputs are set into the form’s state and the React element is rendered based on the value of the state.
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?
the map method
What is the best value to use as a “key” prop when rendering lists?
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.
What does express.static() return?
middleware function
What is the local __dirname variable in a Node.js module?
the directory name of the current module
What does the join() method of Node’s path module do?
The path.join() method joins all given path segments together
What does fetch() return?
a promise
What is the default request method used by fetch()?
GET
How do you specify the request method (GET, POST, etc.) when calling fetch?
The second argument for the fetch function takes in an object. In that object, you can set the value for the ‘method’ property to a different request method.
When does React call a component’s componentDidMount method?
After a component is mounted
Name three React.Component lifecycle methods
constructor(), render(), componentDidMount(), componentDidUpdate(), componentWillUnmount()
How do you pass data to a child component?
store the data as the value of a property in the state property of the component
What must the return value of myFunction be if the following expression is possible?
myFunction()();
myFunction must return a function
What does this code do? const wrap = value => () => value;
returns the second arrow function which takes no parameters and returns the value of the variable value
in JavaScript, when is a function’s scope determined; when it is called or when it is defined?
defined
What allows JavaScript functions to “remember” values from their surroundings?
lexical scoping
What does the acronym LIFO mean?
Last In First Out
What methods are available on a Stack data structure?
stack. peek()
stack. pop()
stack. print()
What must you do to access the value at an arbitrary point in a stack (not just the “top”)?
pop all values until you get to the point
What does the acronym FIFO mean?
First In First Out
What methods are available on a Queue data structure?
queue. peek()
queue. dequeue()
queue. enqueue()
What must you do to access the value at an arbitrary point in a queue (not just the “front”)?
dequeue the value and check if that is the value you want. if not, enqueue the value.
How are linked lists different from an array?
linked lists have a next. arrays have an index.
How would you access an arbitrary node in a linked list (not just the “head”)?
.next until you get to the point
