Quiz Questions Flashcards
Where do you put non-visible content about the HTML document?
In the header element
Where do you put visible content about the HTML document?
In the body element
Where do the and tags go in a valid HTML document?
The header element goes below the html tag, and the body goes below the header tag.
What is the purpose of a declaration?
Instruction to the browser on which version of HTML the page is written in
Give five examples of HTML element tags.
- h1
- p
- div
- body
- html
What is the purpose of HTML attributes?
Attributes control an elements behavior
Give an example of an HTML entity (escape character).
® &
How do block-level elements affect the document flow?
Take up all the width available
Starts on a new line
Has a top and bottom margin by default
How do inline elements affect the document flow?
Only takes up as much width as necessary
Does not start on a new line
What are the default width and height of a block-level element?
The width is the entirety of the available space on the page
The height is the height of whatever content is in the element
What are the default width and height of an inline element?
The default width and height are based on the content that reside in the element
What is the difference between an ordered list and an unordered list in HTML?
An ordered list uses numbers to form a list that has a specific order while an unordered list uses bullet points and does not have a specific order to the elements
Is an HTML list a block element or an inline element?
They are block elements
What HTML tag is used to link to another website?
an a element tag
What is an absolute URL?
Uses a http or https and links to an outside website
What is a relative URL?
Links to a page within the same directory
How do you indicate the relative link to a parent directory?
../ (Parent directory)
How do you indicate the relative link to a child directory?
/ (folder) / (child directory)
How do you indicate the relative link to a grand parent directory?
../../(Grandparent directory)
How do you indicate the relative link to the same directory?
./(same directory)
What is the purpose of an HTML form element?
Collect data from a user or visitor of your site
Give five examples of form control elements.
input label select text area button
Give three examples of type attributes for HTML input elements.
radio
email
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 specify which elements are in the header and body of the table created
Give two examples of data that would lend itself well to being displayed in a table.
Class grades
Schedules
What are the names of the individual pieces of a CSS rule?
Selector Declaration block Declaration Property Value
In CSS, how do you select elements by their class attribute?
.class {
}
In CSS, how do you select elements by their type?
type {
}
In CSS, how do you select an element by its id attribute?
#id {
}Name three different types of values you can use to specify colors in CSS.
Hexadecimal
Keywords
RGB
(also HSL)
What CSS properties make up the box model?
Content
Margin
Padding
Border
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 to specify a specific state
What are CSS pseudo-classes useful for?
Helps add style when certain actions are performed by user (i.e. hover, focus)
Name at least two units of type size in CSS.
px, em, 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 (left-to-right)
What is the default flex-wrap of a flex container?
nowrap
Why do two div elements “vertically stack” on one another by default?
They are block level elements
What is the default flex-direction of an element with display: flex?
row (left-to-right)
What is the default value for the position property of HTML elements?
Static, normal flow
How does setting position: relative on an element affect document flow?
It does not
How does setting position: relative on an element affect where it appears on the page?
Does not change unless you have offset properties
How does setting position: absolute on an element affect document flow?
Removed from document flow
How does setting position: absolute on an element affect where it appears on the page?
It will reposition to top left of parent that is non-static unless it is contained
How do you constrain an absolutely positioned element to a containing block?
Make sure parent is non-static
What are the four box offset properties?
top, bottom, left, right
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 order in which css rule sets are in your style sheet will define their specificity
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
by inheriting the properties from all the parent elements
inheritance
List the three selector types in order of increasing specificity.
type -> class -> ID
Why is using !important considered bad practice?
It makes debugging hard and breaks the natural cascading in style sheets
What is the purpose of variables?
Store data
How do you declare a variable?
using var before a name for the variable
How do you initialize (assign a value to) a variable?
using the = operator and adding a value after it with a semicolon at the end
What characters are allowed in variable names?
letter, underscores, dollar signs, numbers but cannot start with a number and cannot contain spaces
What does it mean to say that variable names are “case sensitive”?
The capitalization of variable names matters and must be typed with consistent capitalization
What is the purpose of a string?
To store text or characters within a variable
What is the purpose of a number?
To store numerical data within a variable
What is the purpose of a boolean?
To store a value of true or false to a variable to create true/false statements
What does the = operator mean in JavaScript?
Means a value is assigned to a variable
How do you update the value of a variable?
Reassign a value to it
What is the difference between null and undefined?
Null is an object while undefined is a type
Undefined means no value is set to it yet, where as null is intentional absence
Why is it a good habit to include “labels” when you log values to the browser console?
Makes debugging your code easier and checking your results
Give five examples of JavaScript primitives.
Boolean, Null, Undefined, String, Number
What data type is returned by an arithmetic operation?
number
What is string concatenation?
combines two or more strings together
What purpose(s) does the + plus operator serve in JavaScript?
for arithmetic or string concatenation
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
adds the value on the right, to the variable on the left, and then assigns that value back into the variable on the left
What are objects used for?
Objects group together a set of variables and functions to create a model
of a something you would recognize from the real world
What are object properties?
Storing information
Describe object literal notation.
The object is the curly braces and their contents
Each key is separated from its value by a colon
Separate each property and method with a comma
How do you remove a property from an object?
using the delete operator
What are the two ways to get or update the value of a property?
dot notation and bracket notation
hotel.name = ‘Park’;
or
hotel[‘name] = ‘Park’;
What are arrays used for?
Creating a list of values that are related to each other.
Describe array literal notation.
var (variable name) = []
How are arrays different from “plain” objects?
They use index numbers as keys
What number represents the first index of an array?
0
What is the length property of an array?
the number of values in an array
How do you calculate the last index of an array?
the length of an array minus 1
What is a function in JavaScript?
a set of statements that takes an input and performs a task or calculates a value as an output
Describe the parts of a function definition.
function functionName(parameters) {
}Describe the parts of a function call.
functionName(arguments);
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call doesn’t need the word function before it, defn does
What is the difference between a parameter and an argument?
a parameter is in the function definition, where an argument is the value passed in the function when called
Why are function parameters useful?
Allow passing of information in the function
What two effects does a return statement have on the behavior of a function?
Ends the function
Returns a value to the calling function
Why do we log things to the console?
To check that we are getting the correct results
What is a method?
A function that is the property of an object
How is a method different from any other function?
Regular functions aren’t associated with objects, methods are
How do you remove the last element from an array?
.pop()
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?
.splice()
How do you append an element to an array?
.push()
How do you break a string up into an array?
.split()
Do string methods change the original string? How would you check if you weren’t sure?
They do not. You can check by using console.log()
Roughly how many string methods are there according to the MDN Web docs?
40 ish
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?
30 ish
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?
Making logical comparisons
Is else required in order to use an if statement?
Else is optional
Describe the syntax (structure) of an if statement.
if (condition) {
instruction;
}
What are the three logical operators?
&&, ||, !
How do you compare two different expressions in the same condition?
Using logical operators
What is the purpose of a loop?
Repeating through code multiple times until we tell it to stop
What is the purpose of a condition expression in a loop?
To tell the computer to keep looping that coding or to stop based on value of true or false
What does “iteration” mean in the context of loops?
How many times to go through the loop
When does the condition expression of a while loop get evaluated?
Before each pass through of the loop
When does the initialization expression of a for loop get evaluated?
One time before the first loop begins
When does the condition expression of a for loop get evaluated?
Once before every iteration
When does the final expression of a for loop get evaluated?
end of each for loop
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?
Increase value of a variable by 1
How do you iterate through the keys of an object?
using a for in loops of the object and pushing the key values of that object
Why do we log things to the console?
To check that our results are accurate, makes debugging issues easier
What is a “model”?
the DOM tree, or the model of the web page
Which “document” is being referred to in the phrase Document Object Model?
all the elements and information in the HTML
What is the word “object” referring to in the phrase Document Object Model?
Each node represents an object in the document
What is a DOM Tree?
The document model containing document nodes, element nodes, attribute nodes and text 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 retrieves multiple elements from the DOM at once.
getElementsByClassName()
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
In case we need to access a particular node in the DOM
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?
A CSS selector and returns the first element in the document with that selector
What does document.querySelectorAll() take as its argument and what does it return?
A CSS selector and returns a node list of the document’s elements that match the specified selectors
Why do we log things to the console?
To make sure that we are getting the expected results
What is the purpose of events and event handling?
to execute code based on an event that happens to an element
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?
A function passed in another function as an argument
What object is passed into an event listener callback when the event fires?
The function which we want to execute
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The element that triggered the event. By checking the console and MDN
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
One calls a function and one is a definition
What is the className property of element objects?
sets the value of the class attribute of the specified element
How do you update the CSS class attribute of an element using JavaScript?
elementNodeReference.className =
What is the textContent property of element objects?
the text content of the node and its descendants
How do you update the text within an element using JavaScript?
elementNodeReference.textContent =
or
innerHTML
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?
Easier to maintain code and you can track it much easier
What does the transform property do?
lets you rotate, scale, skew, or translate an element
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 form?
submit
What does the event.preventDefault() method do?
prevents the default action from happening
i.e. page reloading on submit
What does submitting a form without event.preventDefault() do?
reloads the page and pushes form to url
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?
Makes debugging harder, more code to look through
What is an advantage of having your console open when writing a JavaScript program?
You can see errors as they happen
Does the document.createElement() method insert a new element into the page?
No, just creates the elements until we append to existing element
How do you add an element as a child to another element?
append.Child()
What do you pass as the arguments to the element.setAttribute() method?
name, value
What steps do you need to take in order to insert a new element into the page?
Create element
Create text node
Add text node to element
Add element to DOM
What is the textContent property of an element object for?
sets text content for a specific node
Name two ways to set the class attribute of a DOM element.
.className
setAttribute()
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
its reusable and dynamically creates
Give two examples of media features that you can query in an @media rule.
width
height
color
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
What is the event.target?
Reference to where the event was fired
Why is it possible to listen for events on one element that actually happen its descendent elements?
Because events bubble up
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?
takes a css selector and retuns the element that is closest to the target
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?
add the listener to the parent
What is the event.target?
the target of the event being fired
What is the affect of setting an element to display: none?
does not show up on the screen
What does the element.matches() method take as an argument and what does it return?
css selector as an argument and checks if the selector matches the element
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?
all the time
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?
It would act independently from other tabs
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?
You wouldnt be able to check each element
The transition property is shorthand for which four CSS properties?
transition-delay
transition-duration
transition-property
transition-timing-function
What is JSON?
common 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?
Allow us to transfer data between different computer systems
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
How to you store data in localStorage?
localStorage.setItem()
How to you retrieve data from localStorage?
localStorage.getItem()
What data type can localStorage save in the browser?
string data
When does the ‘beforeunload’ event fire on the window object?
when they are about to be unloaded
What is a breakpoint in responsive Web design?
Defined pixel value in which when the screen reaches a point, a transformation happens, where 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?
Dynamically adapts as the screen changes
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?
CSS source order
media query below another one has less precedence
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?
Definition is inside an object as a property with a function value, call is objectName.methodName
Describe method definition syntax (structure).
property name: function
Describe method call syntax (structure).
objectName.methodName()
How is a method different from any other function?
Associated with an object
What is the defining characteristic of Object-Oriented Programming?
It has to do with grouping similar functions and values in objects (Encapsulation)
What are the four “principles” of Object-Oriented Programming?
Abstraction, Inheritance, Encapsulation, 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?
Allows applications to talk to eachother
What is this in JavaScript?
Refers to the object it belongs to
What does it mean to say that this is an “implicit parameter”?
Is the object of the method it belongs to
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?
the object character
Given the above character object, what is the result of the following code snippet? Why?
It’s-a-me, Mario!
this.firstName = Mario
Given the above character object, what is the result of the following code snippet? Why?
It’s-a-me, undefined!
Function is called, but this is no longer part of the character object, therefore doesnt exist
How can you tell what the value of this is for a particular function or method call?
Exercise
The property
What kind of inheritance does the JavaScript programming language use?
prototypal
What is a prototype in JavaScript?
the mechanism by which JavaScript objects inherit features from one another
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?
They are inherited
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
prototype
What does the new operator do?
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?
prototype
__proto__
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()
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 seconds
What do setTimeout() and setInterval() return?
an identifying value you can use later when you need to clear the interval
What is a client?
a piece of computer hardware or software that accesses a service made available by a server
What is a server?
a piece of computer hardware or software (computer program) that provides functionality for other programs or devices
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, Request Target, HTTP Version
What three things are on the start-line of an HTTP response message?
Protocol version, status code, status text
What are 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?
No
What is Ajax?
technique for loading data into part of a page without having to refresh 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?
prototypal inheritance
What is a code block? What are some examples of a code block?
Code within curly braces
Function, if statement
What does block scope mean?
Within curly braces, variables defined within are only available there
What is the scope of a variable declared with const or let?
Block
What is the difference between let and const?
const cannot be reassigned, let can
Why is it possible to .push() a new value into a const variable that points to an Array?
We can change values but not reassign them
How should you decide on which type of declaration to use?
Depends on if the value is going to be reassigned or not
What is the syntax for writing a template literal?
wrapping string in backticks
${var} to substitute
What is “string interpolation”?
substituting allows embedded values and expressions into string
What is destructuring, conceptually?
provides an alternative way to assign properties of an object to variables
What is the syntax for Object destructuring?
let { firstName: fname, lastName: lname } = person;
What is the syntax for Array destructuring?
let [x, y, z] = getScores();
How can you tell the difference between destructuring and creating Object/Array literals?
Curly vs square brackets
What is the syntax for defining an arrow function?
let add = (x, y) => x + y;
When an arrow function’s body is left without curly braces, what changes in its functionality?
do not need to specify return
How is the value of this determined within an arrow function?
this inside an arrow function is equivalent to the global object
What is a CLI?
a command line program that accepts text input to execute operating system functions
What is a GUI?
type of user interface through which users interact with electronic devices via visual indicator representations
What are the three virtues of a great programmer?
laziness, impatience, hubris
What is Node.js?
an asynchronous event-driven JavaScript runtime
What can Node.js be used for?
build scalable network applications
What is a REPL?
a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user
When was Node.js created?
2009
What back end languages have you heard of?
Python
PHP
C++
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
30+
Why should a full stack Web developer know that computer processes exist?
Having an understanding of processes helps know whats going on when
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
How do you access the process object in a Node.js program?
Just use it or use require(‘process’)
What is the data type of process.argv in Node.js?
Array
What is a JavaScript module?
A 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.
global
setInterval
What is the purpose of module.exports in a Node.js module?
specify what in that file are able to be used in another file it is called
How do you import functionality into a Node.js module from another Node.js module?
require() and then use its return value
What is the JavaScript Event Loop?
a 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 methods execute synchronously and non-blocking methods execute asynchronously
What is a directory?
Collection of files
What is a relative file path?
refers to a location that is relative to a current directory
What is an absolute file path?
full path, starts with the root element and ends with the other subdirectories
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?
writeFile()
Are file operations using the fs module synchronous or asynchronous?
asynchronous
What is NPM?
package manager for the JavaScript programming language
What is a package?
a directory with one or more files in it
reusable, self containing code
How can you create a package.json with npm?
npm init –yes
What is a dependency and how to you add one to a package?
another package that your package needs in order to work
npm install (package name)
What happens when you add a dependency to a package with npm?
will add all the dependencies that the dependency has as all
How do you add express to your package dependencies?
npm install express –save
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?
const app = express();
app.use(function (req, res, next) {
console.log(‘Time:’, Date.now());
next();
});
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
request and response
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?
indicate the desired action to be performed for a given resource
What does the express.json() middleware do and when would you need it?
deal with the (incoming) data (object) in the body of the request
What is PostgreSQL and what are some alternative relational databases?
a powerful, free, open source Relational Database Management System (RDBMS)
alternatives: MySQL, SQL Server, Oracle
What are some advantages of learning a relational database?
support good guarantees about data integrity
can store and modify data in a way that makes data corruption as unlikely as possible
arguably the most widely used kind of database
What is one way to see if PostgreSQL is running?
top command
What is a database schema?
A collection of tables, describes the table
What is a table?
all data stored in relations
What is a row?
record of the data
What is SQL and how is it different from languages like JavaScript?
SQL is a declarative programming language
JavaScript is imperative where you basically tell the JavaScript runtime what to do and how to do it
How do you retrieve specific columns from a database table?
a select statement
example:
select “name”,
“price”
from “products”;
How do you filter rows based on some specific criteria?
using a where clause
What are the benefits of formatting your SQL?
enhance readability and keep consistent styling
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 at end of statement
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 “table” (“ “)
values (‘ ‘)
What is a tuple?
a list of values
How do you add multiple rows to a SQL table at once?
enter the values on a new line
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 “table nam”
set “header” = 100
where “header” = 24;
Why is it important to include a where clause in your update statements?
to target a specific row
How do you delete rows from a database table?
delete from “table”
where “column header” = 24
returning *;
How do you accidentally delete all rows from a table?
Not specifying what row you want to delete
What is a foreign key?
set of attributes in a table that refers to the primary key of another table
How do you join two SQL tables?
example:
select *
from “products”
join “suppliers” using (“supplierId”);
How do you temporarily rename columns or tables in a SQL statement?
Example:
“products”.”name” as “product”
What are some examples of aggregate functions?
sum() avg() count()
What is the purpose of a group by clause?
used to group rows that have the same values
What are the three states a Promise can be in?
pending, fufilled, rejected
How do you handle the fulfillment of a Promise?
promiseObject.then(value) => {}
How do you handle the rejection of a Promise?
promiseObject.catch(error) => {}
What is Array.prototype.filter useful for?
filtering an array to get specific results
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?
return a calculation from an array
What is “syntactic sugar”?
designed to make things easier to read or to express
What is the typeof an ES6 class?
returns a string indicating the type of the unevaluated operand
Describe ES6 class syntax.
template for creating objects that encapsulate data with code to work on that data
ex:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
What is “refactoring”?
restructuring existing computer code—changing the factoring—without changing its external behavior
What is Webpack?
bundle JavaScript files for usage in a browser
How do you add a devDependency to a package?
–save-dev
What is an NPM script?
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?
pre-parsed in order to resolve further imports before code is executed, using import from or export
What kind of modules can Webpack support?
ES6 modules. CommonJS modules. AMD modules
What is React?
JavaScript library that is used for building user interfaces
What is a React element?
an object that virtually describes the DOM nodes that a component represents
How do you mount a React element to the DOM?
ReactDOM.render(element, container[, callback])
What is Babel?
used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers
What is a Plug-in?
a software component that adds a specific feature to an existing computer program
What is a Webpack loader?
node-based utilities built for webpack to help webpack to compile and/or transform a given type of resource that can be bundled as a javascript module
How can you make Babel and Webpack work together?
use a babel loader
What is JSX?
JSX is an extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers. It is similar in appearance to HTML
Why must the React object be imported when authoring JSX in a module?
Because JSX is syntactic sugar for react create element
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
load the transform react jsx plugin
What is a React component?
independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML
How do you define a function component in React?
function Welcome(props) {
return <h1>Hello,{props.name</h1>;
}How do you mount a component to the DOM?
ReactDOM.render()
What are props in React?
arguments passed into React components
How do you pass props to a component?
function parameter
How do you write JavaScript expressions in JSX?
surround the JavaScript code in { } brackets
How do you create “class” component in React?
you need to extend React.Component
How do you access props in a class component?
this.props
What is the purpose of state in React?
represent an information about the component’s current situation
How to you pass an event handler to a React element?
onClick={function}
instead of onClick = “function()”
What are controlled components?
a component that renders form elements and controls them by keeping the form data in the component’s state
What two props must you pass to an input for it to be “controlled”?
value
onChange()
What does express.static() return?
An object
What is the local __dirname variable in a Node.js module?
tells you the absolute path of the directory containing the currently executing file
What does the join() method of Node’s path module do?
all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path
What does fetch() return?
returns the data of the format JSON or XML. This method returns a promise
What is the default request method used by fetch()?
.then()
How do you specify the request method (GET, POST, etc.) when calling fetch?
specify a method: (POST, etc)
When does React call a component’s componentDidMount method?
After the component is mounted to the DOM
Name three React.Component lifecycle methods.
componentWillUnmount(),
componentDidUpdate(),
componentDidMount()
How do you pass data to a child component?
using the props
