HTML Flashcards
Where do you put non-visible content about the HTML document?
Within the head element
Where do you put visible content about the HTML document?
Within the body element
Where do the head and body tags go in a valid HTML document?
Within the html element
What is the purpose of a ! DOCTYPE declaration?
To inform the web browser about what version of html the page is written in
Give five examples of HTML element tags.
div h1 p img article
What is the purpose of HTML attributes?
To add details/extra info to elements
Give an example of an HTML entity (Escape character)
& = & a m p ; < = & l t ; > = & g t ;
How do block-level elements affect the document flow?
It creates a line break.
How do inline elements affect the document flow?
It stays within the same line if possible and only takes as much space as needed.
What are the default width and height of a block-level element?
width: 100%
height: auto
What are the default width and height of an inline element?
width: auto
height: auto
What is the difference between an ordered list and an unordered list in HTML?
An ordered list is numbered.
An un ordered list has 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?
Anchor tag (tag for anchor element) <a href=""></a>
What is an absolute URL?
Complete web address starting with domain name (must include https://)
What is a relative URL?
Shorthand address linking parts/pages within the same website (omits domain name)
How do you indicate the relative link to a parent directory?
../filename
How do you indicate the relative links to a child directory?
directory/filename
How do you indicate the relative link to a grand parent directory?
../../filename
How do you indicate the relative link to the same directory?
its own filename
or
#id within same page
What is the purpose of an HTML form element?
Form element sets boundary /enclosure for form control elements
Give five examples of form control elements.
input select option textarea button
Give three examples of type attributes for HTML elements.
text
password
radio
checkbox
Is an HTML element a block element or an inline element?
Inline element
In CSS, how do you select elements by their class attribute?
.class {
}
In CSS, how do you select elements by their type?
element {
}
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.
hex code
rgb/rgba
color name
hsl/hsla
What CSS properties make up the box model?
Border
Margin
Padding
Which CSS property pushes boxes away from each other?
Margin
Which CSS property add space between a box’s content and its border?
Padding
What is a pseudo-class?
A keyword/class added to a selector after : to specify a special state of the selected element to which the rule set will be applied.
What are CSS pseudo-classes useful for?
Creating an interactive website
Name at least two units of type size in CSS.
px
em
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 (from left to right)
What is the default flex-wrap of a flex container?
Nowrap (same line)
Why do two div elements “vertically stack” on one another by default?
Because they are block elements.
What is the default flex-direction of an element with display: flex?
Row
What is the default value for the position property of HTML elements?
position: static;
How does setting position: relative; on an element affect document flow?
No change
How does setting position: relative; on an element affect where it appears on the page?
It changes location in relation to normal location of static position.
How does setting position: absolute; on an element affect document flow?
The element is removed from the document flow entirely.
How does setting position: absolute; on an element affect where it appears on the page?
It changes location in relation to its containing element with disregard to other sibling elements.
How do you constrain an absolutely positioned element to a containing block?
Set the containing block to
position: relative; or absolute; (non-static)
What are the four box offset properties?
top
bottom
left
right
What is the purpose of variables?
To store data, which can be accessed later and inserted in functions .
How do you declare a variable?
Use ‘var’, ‘let’, or ‘const’ + variable name
Different scoping
How do you initialize (assign a value to) a variable?
= value
What characters are allowed in variable names?
Dollar sign, underscore, numbers, and letters. (Cannot start with a number.)
What does it mean to say that variable names are “case sensitive”?
Names in different cases are considered as different variables.
What is the purpose of a string?
To assign text-content data / series of characters; naming and assigning significance
What is the purpose of a number?
To assign a number-type value; calculations
What is the purpose of a boolean?
To assign a value of true/false. Its purpose is to make a decision.
What does the = operator mean in JavaScript?
Value is assigned to
How do you update the value of a variable?
Reassign the variable / update the value of the variable by using an equal sign without declaration keywords such as ‘var’
What is the difference between null and undefined?
Null is an object type data. (Must be assigned. Intentional.)
Undefined is an undefined type data. (When a variable is declared but no value is assigned. Usually by mistake.)
Why is it a good habit to include “labels” when you log values to the browser console?
To clarify what the values are for, since console.log only shows values unless labeled.
Give five examples of JavaScript primitives.
String Number Boolean Undefined Null
What data type is returned by an arithmetic operation?
Number which is the result of a calculation
What is string concatenation?
To combine multiple strings.
What purpose(s) does the + plus operator serve in JavaScript?
It combines strings.
It also adds numbers.
What data type is returned by comparing two values (, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
x += y returns x = x + y
What are objects used for?
To create a collection of things
What are object properties?
Individual pieces of data stored within an object
Describe object literal notation.
Variable key = {
property: value;
}
How do you remove a property from an object?
Use the operator delete followed by a dot notation
What are the two ways to get or update the value of a property?
dot notation
or
bracket notation
What are arrays used for?
To list out multiple values, usually similar data
Describe array literal notation.
Square brackets:
variable = [ ] ;
How are arrays different from “plain” objects?
Numbered index
To add a value to an array:
arrayName.push(objectName)
What number represents the first index of an array?
0
What is the length property of an array?
arrayName.length
How do you calculate the last index of an array?
arrayName.length - 1
What is a function in JavaScript?
A special type of object that can be called. Its function is to re-use the codes.
Describe the parts of a function definition.
Function keyword, Function name (optional), Parameter (can be empty), Code block, Return statement (optional).
Describe the parts of a function call.
Function name,
Parenthesis containing optional arguments.
When comparing them side-by-side, what are the differences between a function call and a function definition?
Call runs the code, using actual values.
Definition defines the code, using a code block.
What is the difference between a parameter and an argument?
Function parameters are the names listed in the function’s definition. Function arguments are the real values passed to the function.
Why are function parameters useful?
To push additional data into the same function
What two effects does a return statement have on the behavior of a function?
(1) Produces a value where the function is called.
(2) Stops and exits the function.
Why do we log things to the console?
To inspect codes / For debugging purposes.
It is a method for developers to write code to inconspicuously inform the developers what the code is doing.
What is a method?
Function stored within a property of an object
How is a method different from any other function?
It requires an object
How do you remove the last element from an array?
object.pop()
How do you round a number down to the nearest integer?
Math.floor()
How do you generate a random number?
Math.floor(Math.random() * range)
Ex:
function getRandomNumberInRange(start, end) {
var randomNum = Math.floor(Math.random() * (end-start) + 1 ) + start;
return randomNum;
}
How do you delete an element from an array?
array.splice(index)
How do you append an element to an array?
To add to end of array:
array.push()
To add to start of array:
array.unshift()
How do you break a string up into an array?
array.split(‘breakpoint’)
Do string methods change the original string? How would you check if you weren’t sure?
No, strings are immutable.
You can check by console.log().
Roughly how many string methods are there according to the MDN Web docs?
100
Is the return value of a function or method useful in every situation?
Not all the time.
Roughly how many array methods are there according to the MDN Web docs?
100
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?
To execute a function depending on a condition
Is else required in order to use an if statement?
No, it’s optional
Describe the syntax (structure) of an if statement.
if (condition) {
function
};What are the three logical operators?
|| (OR), && (AND), ! (NOT).
How do you compare two different expressions in the same condition?
Use a logical operator and put parenthesis around each condition.
What is the purpose of a condition expression in a loop?
To see if the code is permitted to run.
What does “iteration” mean in the context of loops?
Single time that code block within declaration runs.
When does the condition expression of a while loop get evaluated?
Before each iteration
When does the initialization expression of a for loop get evaluated?
Before anything
When does the final expression of a for loop get evaluated?
Right after every time code is run.
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?
Add 1
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
!Important Rule
What does the term “source order” mean with respect to CSS?
The order CSS rules are written in a stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance
List the three selector types in order of increasing specificity.
Type Selector
Class Selector
ID Selector
Why is using !important considered bad practice?
It hinders debugging by breaking the natural cascading in CSS stylesheet.
Why do we log things to the console?
To check the values of variables.
What is a “model”?
Representation or Re-creation of an actual thing.
Which “document” is being referred to in the phrase Document Object Model?
html document
What is the word “object” referring to in the phrase Document Object Model?
JavaScript object
What is a DOM Tree?
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.
Give two examples of document methods that retrieve a single element from the DOM.
document. getElementByID();
document. querySelector();
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll();
Why might you want to assign the return value of a DOM query to a variable?
So that we can re-use the variable to locate the desired object.
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?
When you place your JavaScript at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.
What does document.querySelector() take as its argument and what does it return?
CSS selector(s). It returns the first element with matching selector(s).
What does document.querySelectorAll() take as its argument and what does it return?
CSS selector(s). It returns all elements with matching selector(s).
Why do we log things to the console?
To check functions are running without errors. To check values.
What is the purpose of events and event handling?
To respond to certain events, for organic interactions and dynamic features.
Are all possible parameters required to use a JavaScript method or function?
No.
What is a callback function?
Function getting passed around as a value to other places.
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?
console.dir(event.target);
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
event.target is the element where the event occurs.
console.log & console.dir(event.target);
MDN;
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
If there is a parenthesis, function is being called when page loads, instead of when the event happens.
What is the className property of element objects?
Used either to retrieve current value of, or assign a new value (update) of, the class name of an element.
How do you update the CSS class attribute of an element using JavaScript?
element.querySelector( css selector).className = ‘newName’
What is the textContent property of element objects?
Grabs just the text of an element, without grabbing styling details.
How do you update the text within an element using JavaScript?
element.querySelector( css selector).textContent = ‘newText’
Is the event parameter of an event listener callback always useful?
No, not always necessary.
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?
It saves so much time and energy of both the user and the computer.
What does the transform property do?
To alter an object spatially.
To modify the coordinate space of the CSS.
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
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?
Tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.
What does submitting a form without event.preventDefault() do?
Page reloads.
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?
It’s more difficult to troubleshoot and takes more time.
What is an advantage of having your console open when writing a JavaScript program?
You can constantly check your codes as writing them.
Does the document.createElement() method insert a new element into the page?
parent.appendChild(child)
What do you pass as the arguments to the element.setAttribute() method?
‘Name’, value
of attribute
What steps do you need to take in order to insert a new element into the page?
variable = document.createElement
query parent element
parent.appendChild(child)
What is the textContent property of an element object for?
To grab textContent so that you can update it.
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)?
You can use the same set of data repeatedly to create different projects.
Give two examples of media features that you can query in an @media rule.
min-width
max-width
Which HTML meta tag is used in mobile-responsive web pages?
Viewport meta tag
What is the event.target?
Element receiving the event
Why is it possible to listen for events on one element that actually happen its descendent elements?
Due to bubbling event flow
What DOM element property tells you what type of element it is?
element.tagName
What does the element.closest() method take as its argument and what does it return?
Argument: CSS selector
Return: element that is the closest ancestor with matching selector
How can you remove an element from the DOM?
element.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 event listener to the closest parent containing those DOM elements.
What is the affect of setting an element to display: none?
It completely hides the element.
What does the element.matches() method take as an argument and what does it return?
Argument: string of selector
Return: boolean value
How can you retrieve the value of an element’s attribute?
element.getAttribute(‘attributename’)
At what steps of the solution would it be helpful to log things to the console?
After declaring a new variable,
After looping,
After updating a value, etc.
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?
Since $tabList is a node list, you would have to do ‘addEventListener’ to each of the individual nodes inside node list.
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 have to write codes for every possible situation. (for each index)
What is a breakpoint in responsive Web design?
What is a breakpoint in responsive design? In responsive design, a breakpoint is the “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience.
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
Width of an element can be automatically calculated instead of being fixed at a certain value. This maintains proportions and thus makes the layout more responsive and aesthetic.
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?
It’s just following cascading rules.
(Same specificity, different source order).
What is JSON?
JSON is a format that encodes objects in a string.
It is commonly used for transmitting data in web applications.
What are serialization and deserialization?
Simply speaking Serialization is a process of converting an Object into stream of bytes so that it can be transferred over a network or stored in a persistent storage.
Deserialization is the exact opposite - Fetch a stream of bytes from network or persistence storage and convert it back to the Object with the same state.
The thing to understand is how those stream of bytes are interpreted or manipulated so that we get the exact same Object/ same state. There are various ways to achieve that. Some of them are -
XML: Convert Object to XML, transfer it over a network or store it in a file/db. Retrieve it and convert it back to the object with same state. In Java we use JAXB(Java architecture for XML binding) library.(From java 6 it comes bundled with JDK).
JSON: Same can be done by converting the Object to JSON (JavaScript Object notation). Again there is GSON library that can be used for this.
Or we can use the Serialization that is provided by the OOP language itself. For example, in Java you can serialize an Object my making it implement Serializable interface and writing to Object Stream.
Why are serialization and deserialization useful?
Transfer of data over a network
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringfy()
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
How to you store data in localStorage?
localStorage.setIte(‘keyName’, ‘keyValue’);
How to you retrieve data from localStorage?
localStorage.getItem(‘keyName’);
What data type can localStorage save in the browser?
String. The keys and the values stored with localStorage are always in the UTF-16 DOMString format.
When does the ‘beforeunload’ event fire on the window object?
When the window is about to be unloaded.
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?
Using var, const, let
Describe method definition syntax (structure).
var objectName = {
methodName: function(parameter) {
function block
}
};Describe method call syntax (structure).
objectName.methodName(argument);
How is a method different from any other function?
It only works on specific object(s).
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”?
Reducing a complex idea/function to a simplified interaction mechanism.
What does API stand for?
Application Programming Interface. It is a type of software interface, offering a service to other pieces of software.
What is the purpose of an API?
The purpose of every software API is to give programmers a way to interact with a system in a simplified, consistent fashion: aka, an abstraction.
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”?
Parameters are not explicitly spelled out in a function definition’s parameter list.
When is the value of this determined in a function; call time or definition time?
The value of this is determined at the call time of the function.
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);
}
};
Nothing.
It doesn’t have a value yet, because the greet method’s function () has not been called.
When it is called, this will refer to the the object character.
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
The result will be a console log of the message of the concatenated string ‘It’s-a-me, Mario!’
Reason: It is calling a function.
Given the above character object, what is the result of the following code snippet? Why? var hello = character.greet; hello();
Undefined.
Reason: When greet method’s function is not called, here this refers to the window when the function hello is called. Window does not have firstName property.
How can you tell what the value of this will be for a particular function or method definition?
By looking at what kind of object comes before it within the definition code block.
This is only a value when a function is being invoked. When a function is being invoked, this refers to the object to the left of the dot.
How can you tell what the value of this is for a particular function or method call?
By looking at what kind of object comes before it within the definition code block.
This is only a value when a function is being invoked. When a function is being invoked, this refers to the object to the left of the dot.
What kind of inheritance does the JavaScript programming language use?
Prototype-based (or Prototypal) Inheritance, which means that JavaScript objects give certain behaviors (methods) or data (properties) to other objects.
What is a prototype in JavaScript?
An object that contains properties and (predominantly) methods that can be used by other objects.
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?
By defining a prototype, then:
Object.setPrototypeOf(object, prototypeObject);
If an object does not have its own property or method by a given key, where does JavaScript look for it?
Its prototype object.
What does the new operator do?
It creates an instance of a constructor.
Steps:
- Creates an empty object
- Adds a property to the new object (__proto__) that links to the constructor function’s prototype object
- Binds the newly created object instance as the this context
- Function runs, then 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 instance of operator do?
Returns a boolean value of whether the variable represents an instance of the constructor
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()?
Zero.
What do setTimeout() and setInterval() return?
Return of setTimeout():
The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval() to cancel the interval.
Return of setInterval():
undefined;
What is a client?
Service requesters
What is a server?
Service providers (always listening)
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?
Method
Target
HTTP Version
What three things are on the start-line of an HTTP response message?
Protocal Version
Status Code
Status Text
What are HTTP headers?
Additional meta data;
Easily accessible for user
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?
a programming practice of building complex, dynamic webpages using a technology known as XMLHttpRequest.
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML,
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest() object;
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They share the same prototype: eventTarget();
What is a code block? What are some examples of a code block?
Whatever sits inside a curly brace pair {}
function body,
loop code blocks,
conditional code blocks
What does block scope mean?
Existing only within the code block in between curly braces.
What is the scope of a variable declared with const or let?
block scope
What is the difference between let and const?
let: variable’s value can be re-assigned.
const: variable’s value cannot be re-assigned.
Why is it possible to .push() a new value into a const variable that points to an Array?
Because .push() changes the array, but it doesn’t re-assign name-binding. We’re not assigning a new value to the variable.
How should you decide on which type of declaration to use?
Stick with const until you can’t.
What is the syntax for writing a template literal?
backticks ``
for value of variables: ${}
What is “string interpolation”?
The substitutions allow you to embed variables and expressions in a string. The JavaScript engine will automatically replace these variables and expressions with their values. This feature is known as string interpolation.
What is destructuring, conceptually?
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
What is the syntax for Object destructuring?
const {property: variable, … } = object
What is the syntax for Array destructuring?
const [array[0]: variable, … ] = array
How can you tell the difference between destructuring and creating Object/Array literals?
{} or []
When an arrow function’s body is left without curly braces, what changes in its functionality?
Must be an expression.
It returns the expression.
How is the value of this determined within an arrow function?
Inherits this value from its parent (closest ancestor) code block.
Use for command: cat
ls pwd echo touch mkdir mv rm cp
print or combine contents of a file
Use for command: ls
list
Use for command: man
show manual
Use for command: pwd
print working directory
Use for command: echo
Similar to console.log
Use for command: touch
Create a file / Time stamper?
Use for command: mkdir
Make directory
Use for command: mv
Rename a directory
When you’re moving something, you’re also renaming it
Use for command: rm
Remove a file/directory
Use for command: cp
Copy a file/directory
What are the three virtues of a great programmer?
laziness,
impatience,
hubris
What is Node.js?
As an asynchronous event-driven JavaScript runtime
What can Node.js be used for?
build scalable network applications.
What is a REPL?
A read–eval–print loop (REPL), also termed an interactive toplevel or language shell, is a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user; a program written in a REPL environment is executed piecewise.
When was Node.js created?
May 27, 2009
What back end languages have you heard of?
PHP, Ruby, Python, JavaScript, Perl, TypeScript, Elixir, Lisp, Clojure, SQL, Java, Kotlin, Scala, Haskell, Go, C, C++, VBA, C#, F#, Fortran, Pascal, Julia, Rust, Objective-C, Swift
What is a computer process?
In computing, a process is the instance of a computer program that is being executed by one or many threads. It contains the program code and its activity.
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?
Because full stack web development involves multiples 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?
by using the argument process.
What is the data type of process.argv in Node.js?
Array of strings
What is a JavaScript module?
In JavaScript, modules are files.
What values are passed into a Node.js module’s local scope?
filename, dirname, module, export, require
Give two examples of truly global variables in a Node.js program.
process
What is the purpose of module.exports in a Node.js module?
To export functionality of a Node.js module into another Node.js module.
How do you import functionality into a Node.js module from another Node.js module?
In new module do: const add = require('./add') (relative file path)
after doing: module.property = function. in original module.What is the JavaScript Event Loop?
The call stack is a LIFO queue (Last In, First Out). The event loop continuously checks the call stack to see if there’s any function that needs to run.
What is different between “blocking” and “non-blocking” with respect to how code is executed?
A blocking assignment takes affect immediately it is processed. A nonblocking assignment takes place at the end of processing the current “time delta”.
Blocking is in call stack.
What is a directory?
A reference to the location of files or other directories
What is a relative file path?
A relative path refers to a location that is relative to a current directory.
What is an absolute file path?
An absolute path always contains the root element and the complete directory list required to locate the file.
What module does Node.js include for manipulating the file system?
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 synchronous and asynchronous
Sync = blocking
Asynchronous is almost always better
What is a package?
a directory with one or more files in it that also has a file called package.json with some metadata about this package
How do you add express to your package dependencies?
npm install
What Express application method starts the server and binds it to a network PORT?
app.listen()
Difference between internet vs. web?
Internet = Global network of computers Web = messaging format called HTTP
How do you mount a middleware with an Express application?
app.use() method
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req, res objects
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?
It parses incoming requests with JSON payloads/data.
What is the significance of an HTTP request’s method?
To get a desired action from a request
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a powerful, free, open source Relational Database Management System (RDBMS). It is often cited as the most advanced open source database of its kind and is well-liked by the developer community for its robust feature set, standards compliance, and reliability.
Other relational databases include MySQL (also free), SQL Server by Microsoft, and Oracle by Oracle Corporation.
What are some advantages of learning a relational database?
A quality of many relational databases is that they support good guarantees about data integrity. They can store and modify data in a way that makes data corruption as unlikely as possible. This means that developers can set up their database to reject “bad” data and not worry about data being “half written”. For more information, read about ACID.
What is one way to see if PostgreSQL is running?
top
What is a database schema?
A collection of tables is called a schema. A schema defines how the data in a relational database should be organized.
What is a table?
A table is a list of rows, showing relations of data
What is a row?
Each row has the same set of attributes.
What is SQL and how is it different from languages like JavaScript?
Language that allows for interacting with relational databases. A way of retrieving, creating, and manipulating data in relational databases.
It is declarative instead of imperative, meaning it comes up with a way to process requested function.
How do you retrieve specific columns from a database table?
select “columnName”
How do you filter rows based on some specific criteria?
where “columnName” = condition true/false
What are the benefits of formatting your SQL?
Readability
What are four comparison operators that can be used in a where clause?
=, !=, >, =, <=,
anything true or false
How do you limit the number of rows returned in a result set?
limit #
How do you retrieve all columns from a database table?
select *
How do you control the sort order of a result set?
order by “columnName”
How do you add a row to a SQL table?
insert into “tableName” (“columnName”)
values (“columnValue”);
What is a tuple?
a list of values inside parenthesis
How do you add multiple rows to a SQL table at once?
multiple tupules, comma separated.
How do you get back the row being inserted into a table without a separate select statement?
returning *;
or
returning “columnName”
How do you update rows in a database table?
update “tableName”
set “columnName” = ‘columnValue’
where “columnName” = ‘columnValue’;
Why is it important to include a where clause in your update statements?
Otherwise, you are updating all rows.
How do you delete rows from a database table?
delete from “tableName”
where “columnName” = ‘columnValue’;
How do you accidentally delete all rows from a table?
By omitting where clause
What is a foreign key?
a shared key value that links different tables together
How do you join two SQL tables?
join “tableName” using (“columnName”)
How do you temporarily rename columns or tables in a SQL statement?
as “pseudonym”
What are some examples of aggregate functions?
count() sum() min() max() avg() every()
What is the purpose of a group by clause?
Combining data by groups/categories and perform aggregate function across the groups instead of generating just one result and combining all data
What are the three states a Promise can be in?
pending, fulfilled, rejected
How do you handle the fulfillment of a Promise?
then method
How do you handle the rejection of a Promise?
catch method
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 Person {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
let john = new Person(“John Doe”);
What is “refactoring”?
Restructuring codes without changing functionality
tick(), getTime(), reset() -> Are they commands or queries?
tick() is a command, and getTime() is a query.
A command changes values while a query doesn’t.
When coding, trying to use queries when possible. Use commands only when necessary and separate them from queries.
How are ES Modules different from CommonJS modules?
CommonJS require() and module.exports statements, whereas ES6 modules use import and export default statements.
CommonJS module is executed at require command.
ES6 modules is not executed at import command but generates a reference to the loaded module.
ES6 is official.
——–
- CommonJs exports a copy of variables, and ES6 Module exports the binding of variables.
- CommonJs exports a single value export, and ES6 Module can export multiple values.
- CommonJs is a dynamic syntax (runtime) that can be written in judgment, while ES6 Module static syntax (compile time) can only be written in the top level
What kind of modules can Webpack support?
ECMAScript modules. CommonJS modules. AMD modules.
What is React?
React is a JavaScript library for creating user interfaces.
The react package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.
What is a React element?
object
How do you mount a React element to the DOM?
ReactDOM.render( )
What is JSX?
syntax extension
Why must the React object be imported when authoring JSX in a module?
So that the compiled elements can call its React.crateElemenet method
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
install webpack and babel as devDependencies and do npm run build for webpack
How do you define a function component in React?
function functionName {
return (
reactElement
)
}
Function component MUST BE capitalized.
How do you mount a component to the DOM?
ReactDOM.render(
,
div
);
What are props in React?
attributes to React elements
How do you pass props to a component?
How do you write JavaScript expressions in JSX?
curly braces {}
How do you create “class” component in React?
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}How do you access props in a class component?
this.props.text
Must use this
What is the purpose of state in React?
State is a plain JavaScript object used by React to represent an information about the component’s current situation.
Just like data model.
How to you pass an event handler to a React element?
As a prop to a React element
What are controlled components?
A controlled component is a component that renders form elements and controls them by keeping the form data in the component’s state. In a controlled component, the form element’s data is handled by the React component (not DOM) and kept in the component’s state.
What two props must you pass to an input for it to be “controlled”?
value
onChange
