WebDev Flashcards
Is an HTML list a block element or an inline element?
An HTML list is a block-level element.
What is the difference between an ordered list and an unordered list in HTML?
An unordered list is a list with bullet points. An ordered list is numbered.
How do block-level elements affect the document flow?
Block level elements push items on the same line as it down or up depending on orientation. To the left of the element means its pushed up and vice versa for items to the right.
How do inline elements affect the document flow?
Inline elements allow for other items to be on the same horizontal space as them.
What are the default width and height of a block-level element?
The default height of a block level element would be the height of the the element itself. The default width of a block-level element would be the length of the web page.
What are the default width and height of an inline element?
The default height and width of an inline element would be the height and width of the element itself.
Give five examples of HTML element types.
, , <h1>, , </h1><p></p>
What is the purpose of HTML attributes?
To modify the behavior of a specific element.
Give an example of an HTML entity (escape character).
The less-than sign ( < ) can be denoted as <
Where do you put non-visible content about the HTML document?
You put non-visible content in the element of the HTML document.
Where do you put visible content about the HTML document?
You place visible content about the HTML document in the element.
Where do the and tags go in a valid HTML document?
They go inside of the element.
What is the purpose of a declaration?
It is an instruction to the web browser about which version of HTML is being used.
What HTML tag is used to link to another website?
<a> </a>
What is an absolute URL?
An absolute URL contains all the information necessary to locate a resource
What is a relative URL?
A relative URL locates a resource using an absolute URL as a starting point. Generally used to link to resources within the same website.
How do you indicate the relative link to a parent directory?
You use the ../ to indicate the folder above the current one. EX. href=”../index.html”
How do you indicate the relative link to a child directory?
Use the name of the child folder.
EX. href=”music/listings.html”
How do you indicate the relative link to a grand parent directory?
You use two of the ../ operator in the file address.
EX. href=”../../index.html”
How do you indicate the relative link to the same directory?
You only need to use the file name. There are no other things needed.
EX. href=”reviews.html”
What is the purpose of an HTML form element?
It is a document section that allows for users to submit information
Give five examples of form control elements.
Input, select, textarea, button, a
Is an HTML element a block element or an inline element?
Inline-Block
Give three examples of type attribute values for HTML elements.
password, image, text
What are the six primary HTML elements for creating tables?
table, tr, td, th, tbody, thead
What purpose do the thead and tbody elements serve?
The thead serves as a container for the headings of the table. The tbody serves as a container for the body of the table
Give two examples of data that would lend itself well to being displayed in a table.
Sports results and financial reports both lend themselves to being displayed in a table.
What are the names of the individual pieces of a CSS rule?
A CSS rule consists of a selector and a declaration. Each line in the declaration block has a property and a value.
In CSS, how do you select elements by their class attribute?
Similar to a type selector, however you add a . in front of the class name.
EX. .note {}
In CSS, how do you select elements by their tag name?
You simply put the name of the tag that you wish to affect.
EX. h1, h2, h3 {}
In CSS, how do you select an element by its id attribute?
You would add a # in front of the tag that you would like to affect.
EX. #introduction {}
Name three different types of values you can use to specify colors in CSS.
RGB values, Hex codes, and Color names
What CSS properties make up the box model?
Margins, Borders, Padding, Content of box.
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 that allows for styles to be applied to an element only under specific circumstances.
What are CSS pseudo-classes useful for?
They are useful for denoting an element in a special state.
For example, a button can have a pseudo class that makes the button feel more like it is being pressed by changing the style or position of the element slightly
Name two types of units that can be used to adjust font-size in CSS.
You can use percentages or EM’s
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?
In a row
What is the default flex-wrap of a flex container?
No Wrap is the default, namely, all items will try and be on one single line.
Why do two div elements “vertically stack” on one another by default?
They are default Block
What is the default flex-direction of an element with display: flex?
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?
The element can now move in relation to where it would have been in normal flow. However, you can now move the element around the page.
How does setting position: relative on an element affect where it appears on the page?
Depending on offset properties, The image can be moved in relation to where it originally would have been in normal flow.
How does setting position: absolute on an element affect document flow?
The element is removed from normal flow and no long affects the position of other elements on the page. The other elements act as if the element doesnt exist.
How does setting position: absolute on an element affect where it appears on the page?
It appears relative to its nearest non-static ancestor.
How do you constrain an absolutely positioned element to a containing block?
You constrain it to the box of its nearest ancestor element.
Make the nearest ancestor element not static in positioning.
What are the four box offset properties?
top, bottom, left, and right.
What is the purpose of variables?
A way to store data so you can see it, manipulate it, etc. Adds permanence to data.
How do you declare a variable?
var variableName;
How do you initialize (assign a value to) a variable?
var hasName = true;
What characters are allowed in variable names?
Letters, numbers, dollar signs, underscores. However, variables cannot start with a number.
What does it mean to say that variable names are “case sensitive”?
Capital letters matter in the naming of variables.
What is the purpose of a string?
For storing and manipulating text/a set of characters. JS will not interpret this as code.
What is the purpose of a number?
For counting, measuring, or for seeing the numerical value of something.
What is the purpose of a boolean?
To measure if something is true or false, used for decision making.
What does the = operator mean in JavaScript?
This is the assignment operator. Whatever data is being declared will be stored inside of the variable.
How do you update the value of a variable?
To update a variable you only need to omit the var keyword :
var something = 8
something = 7
The value of variable something is now 7
What is the difference between null and undefined?
Null is a value that does not exist, a placeholder of sorts. Null is a value that can only be assigned. When you see null, a developer purposely set it as such.
Undefined is javascripts automatic way of saying empty. If you declare a variable without a value, JS reads it as undefined. As a developer, you should never use undefined.
Why is it a good habit to include “labels” when you log values to the browser console?
It can be difficult in longer projects to remember what a variables name or value is.
Give five examples of JavaScript primitives.
string, number, null, undefined, boolean
What data type is returned by an arithmetic operation?
A number data type.
What is string concatenation?
The combination of two strings to form one string.
What purpose(s) does the + plus operator serve in JavaScript?
It is the arithmetic operator for addition and it is used to add one value to another.
What data type is returned by comparing two values (<, >, ===, etc)?
A boolean data type.
What does the += “plus-equals” operator do?
The plus equals operators adds two number values together and then assigns the resulting number to a variable.
What are objects used for?
They are used to store multiple variables into a single container with one name (an object)
What are object properties?
Object Properties are variables that are defined under an object.
Describe object literal notation.
Object literal notation is when the object properties are directly defined inside of the object declaration
var object = {
property: propertyValue,
property2: propertyValue2
}
How do you remove a property from an object?
use the delete operator.
Delete student.firstName
What are the two ways to get or update the value of a property?
object.property
object[‘property’]
What are arrays used for?
It is used to store a collection of data, a list of sorts
Describe array literal notation.
[index1, index2,…]
How are arrays different from “plain” objects?
When adding to an array, we use the method push.
When adding to an object, we use dot or bracket notation and assign it a value.
Arrays also have a length property.
What number represents the first index of an array?
0
What is the length property of an array?
styled as array.length, the length property returns the number of items inside of the array. Automatically kept up to date.
How do you calculate the last index of an array?
You would use the length keyword and then subtract 1 off of that value.
array[0, 1, 2, 3]
array.length = 4
lastIndex = array.length - 1 (This is equal to 3)
length[lastIndex] will return 3 I.e. length[3]
What is a function in JavaScript?
A set of statements that do a task or calculate a value. It can also be reused.
Describe the parts of a function definition.
Starts with a function keyword, has a function name, a comma separated list of parameters in parenthesis, Then there is the function code block separated by curly braces, an optional return statement.
Describe the parts of a function call.
Name of the function, arguments located in the comma spaced parentheses.
When comparing them side-by-side, what are the differences between a function call and a function definition?
A function call is just the name of the function with whatever arguments you wish to place into the function. In a function definition, the arguments are known as parameters and there is a placeholder parameter along with the definition of the actual function within curly braces. The function keyword is also present in a definition
What is the difference between a parameter and an argument?
A parameter is found in a function definition, an argument is used when the function is actually being called.
Why are function parameters useful?
Without them you lose the re-usability of functions. They allow us to use a function for multiple different situations.
What two effects does a return statement have on the behavior of a function?
The return statement ends the function execution and also returns a value to the user.
Why do we log things to the console?
Gives us a way to observe and communicate with our code.
What is a method?
It is a property of an object that contains a function definition.
How is a method different from any other function?
A method is specifically defined inside of an object. It is also technically a property of an object. To call a method you need to provide the context of its call.
ex. arr.pop()
How do you remove the last element from an array?
By using the .pop() method. The syntax would be arr.pop()
How do you round a number down to the nearest integer?
By using the Math.floor() method.
How do you generate a random number?
You would use the Math.random() method.
How do you delete an element from an array?
You could use the .splice method.
How do you append an element to an array?
You could use the .push() method
How do you break a string up into an array?
You would use the .split() method.
Do string methods change the original string? How would you check if you weren’t sure?
The string methods don’t change the original string specifically. You could console.log it to see if it has. Strings are immutable in JavaScript
Roughly how many string methods are there according to the MDN Web docs?
50?
Is the return value of a function or method useful in every situation?
No, not always. Often times, we want to delete something and we just want to make sure that thing has been removed.
I.e .pop() method
Roughly how many array methods are there according to the MDN Web docs?
A ton, like 50.
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN (Mozilla Developing Network)
Give 6 examples of comparison operators.
Equal to: ===
not equal to: !=
Greater than: >
Less than: <
Greater than or equal to: >=
Less than or equal to: <=
What data type do comparison expressions evaluate to?
Boolean data types
What is the purpose of an if statement?
An if statement provides a conditional for the code to make a decision.
Is else required in order to use an if statement?
No it is not.
Describe the syntax (structure) of an if statement.
if (score >= 50) {
congratulate();
}
if = keyword
(score >= 50) = condition
code block = code that will be executed if the condition is filled
What are the three logical operators?
And Operator = &&
Logical Or operator = ||
Logical Not = ! (inverts boolean value)
How do you compare two different expressions in the same condition?
You would link them with the && or the || operator
What is the purpose of a loop?
They are used to repeatedly run a block of code until a condition is met
What is the purpose of a condition expression in a loop?
The condition expression gives the loop the parameters it needs in order to stop the loop
What does “iteration” mean in the context of loops?
Each pass through the block of code is called an iteration
When does the condition expression of a while loop get evaluated?
It is evaluated prior to the execution of the statement and prior to each iteration.
When does the initialization expression of a for loop get evaluated?
It is evaluated once before the start of the loop. Before the first iteration.
When does the condition expression of a for loop get evaluated?
The condition expression is evaluated at the start of an iteration.
When does the final expression of a for loop get evaluated?
The final expression is executed at the end of an iteration.
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
The break keyword.
What does the ++ increment operator do?
It adds one to its operand and returns the new value.
How do you iterate through the keys of an object?
You would use bracket notation paired with a for…in loop
I.E
function valuesFromKeys(object) {
var keys = [ ];
for( var x in object) {
keys.push(x);
}
return keys;
}
What are the four components of “the Cascade”.
Importance, Specificity, Source Order, !important
What does the term “source order” mean with respect to CSS?
Source order is the order in which CSS will display new stylings dependent on the order in which they are written in the stylesheet
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
When dealing with nested elements, when you apply a CSS styling to the parent element and there is no styling specified for the child element, the child will receive the same styling as the parent.
List the three selector types in order of increasing specificity.
Type selector, class selector, ID selector
Why is using !important considered bad practice?
Because it directly ignores the rules of CSS Specificity
What does the transform property do?
It allows you to scale, skew, rotate, or translate an element.
Give four examples of CSS transform functions.
Rotate, translate(Y), scale, skew
The transition property is shorthand for which four CSS properties?
Transition-property, transition-duration, transition-timing-function, transition-delay
Why do we log things to the console?
To communicate with our code and see how it is doing.
What is a “model”?
It is a rendition or a replica of something.
Which “document” is being referred to in the phrase Document Object Model?
The document is the actual webpage itself. The HTML document.
What is the word “object” referring to in the phrase Document Object Model?
The object in DOM refers to the nodes and objects that the webpage gets broken up into.
The JavaScript Objects.
The DOM realistically is JavaScript Objects that are representing the HTML document.
What is a DOM Tree?
It is a model of an element and all of its configurations and all of the contents contained.
Give two examples of document methods that retrieve a single element from the DOM.
.getElementByID( ) and .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?
So that you can reuse it in different scenarios.
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 through all of the HTML elements before we can access them with JavaScript
What does document.querySelector() take as its argument and what does it return?
It takes in a CSS selector as its argument and it returns the first matching element that it finds.
What does document.querySelectorAll() take as its argument and what does it return?
It takes a CSS selector as an argument and it returns a Node list of all the matching elements that it finds. A node list is not a DOM element, it is an object that stores DOM elements.
What is the purpose of events and event handling?
The purpose of events is so that the webpage can react to specific things that may occur from the user. Event handling is a routine that is performed when the event that is being watched for occurs.
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?
element.addEventListener( )
What is a callback function?
A callback function is when one function is passed into another function as an argument.
What object is passed into an event listener callback when the event fires?
The event object itself. Its contents are all of the data about said event.
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 a reference to the exact element in which the event affects. If I wasnt sure I could log event.target and see what comes out. You could also check MDN.
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
The first snippet calls the function as an argument or a callback function.
The second snippet actually calls the function itself without any parameters which will result in a return value for said function.
1) Never call an event handler function yourself
What is the className property of element objects?
The className property of an element gets or sets the value of the name of the class.
How do you update the CSS class attribute of an element using JavaScript?
You would use the className method.
EX
$someDOMvar.className = ‘new class name’
What is the textContent property of element objects?
It is a property that returns all the text content of the element and all of its descendents.
How do you update the text within an element using JavaScript?
You would use the textContent method.
EX.
$domVar. textContent = ‘new text content’
Is the event parameter of an event listener callback always useful?
No. Because there are instances where you do not want variability in your event handler functions.
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
I feel like it would be more difficult. The counter helped me track where I was in terms of amount of clicks.
Why is storing information about a program in variables better than only storing it in the DOM?
The DOM is only temporary and is applicable to only the instance of the webpage. Once you refresh it you restart to the beginning. There is also a security concern. Its better to have a variable to work off of instead of relying on output.
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 (on the form element, not on the button itself)
What does the event.preventDefault() method do?
If the event is not specifically handled, it should not take its normal default action.
What does submitting a form without event.preventDefault() do?
It will just refresh the page. ALWAYS include a preventDefault in your submit event listener
What property of a form element object contains all of the form’s controls.
HTML form elements
What property of a form control object gets and sets its value?
the .values property
What is one risk of writing a lot of code without checking to see if it works so far?
If you run into a bug that occurred early on in the code and theres a bug, youll have to go through more debugging than if you just checked as you worked.
What is an advantage of having your console open when writing a JavaScript program?
You can test and see if the javascript is doing the things to the Web Document the way you want it to.
Does the document.createElement() method insert a new element into the page?
No not immediately, it still needs to be appended to the parent element.
How do you add an element as a child to another element?
parentElement.appendChild(childElement)
What do you pass as the arguments to the element.setAttribute() method?
You would pass two strings. The first would be the attribute you wish to set, and the second would be the value of the attribute.
What steps do you need to take in order to insert a new element into the page?
1) Create the element.
2) Create and append any textContent or Attributes.
3) append the new element to a parent element. (after query selecting)
What is the textContent property of an element object for?
It is used to either retrieve or set the text content of an element.
Name two ways to set the class attribute of a DOM element.
one would be to use the .setAttribute(‘class’, ‘xxx’)
You could also use element.ClassName
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
You can return the same function to do different jobs. You can also reuse the function multiple times.
Give two examples of media features that you can query in an @media rule.
width and height
Which HTML meta tag is used in mobile-responsive web pages?
The viewport HTML meta tag
What is the event.target?
The property of the event object that holds the element where the event originated from.
Why is it possible to listen for events on one element that actually happen its descendent elements?
Because the default for JS is for the event listener to have a bubbling effect.
What DOM element property tells you what type of element it is?
the element.tagName property. = Actual name of the element in FULL CAPS
What does the element.closest() method take as its argument and what does it return?
The argument takes the selector that we are looking for. It returns the closest ancestor that fits the argument. It is the opposite of querySelector, it looks outward.
How can you remove an element from the DOM?
You use the .remove() method.
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?
Youd use Event Delegation. Put it on an ancestor and use closest to look for instances from within the parent element.
What is the event.target?
The property of the event object that holds the element where the event originated from.
What is the affect of setting an element to display: none?
The element disappears from the page. It doesnt even save space for where it would be.
What does the element.matches() method take as an argument and what does it return?
It takes the selector that you wish to compare against. It returns a boolean.
How can you retrieve the value of an element’s attribute?
You can use the getAttribute() method
At what steps of the solution would it be helpful to log things to the console?
When checking to see what the event.target value is. When checking to see the attribute. Or checking to see if the .matches method is returning the proper boolean. Any time you have comparisons or you are calling a method on an object.
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?
You would have to make an event listener for the new tab. Along with new event listeners for every other tab as well.
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?
Youd most likely need to write separate if statements for each individual tab in order to change the views on the page.
What is a breakpoint in responsive Web design?
The point in which a website will adjust and adapt in accordance to the code in order for the user to have a more positive 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?
This allows for the column class to stay relatively the same regardless of the size of the viewport. As the viewport shrinks or grows, percentages will allow for the elements to stay in relatively the same position.
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?
The Source Order of cascade. You want to reduce the influence of source order and let the cascade do its job.
What is JSON?
JSON stands for Javascript Object Notation. It is a text based format used to represent data. It takes the form of a javascript object literal. It is most commonly used to transmit data to web apps.
What are serialization and deserialization?
Serialization is effectively the conversion of something into a series of 1’s and 0’s (binary code). Deserialization is the opposite, it is the construction of something out of binary code.
Why are serialization and deserialization useful?
Serialization allows us to convert temporary object data into bytes which allows us to store it on the hard drive for long term storage. Deserialization allows for us to take these serialized objects and convert them back into object data again.
How do you serialize a data structure into a JSON string using JavaScript?
You would use the method JSON.stringify( )
How do you deserialize a JSON string into a data structure using JavaScript?
You would use the JSON.parse( ) method.
How do you store data in localStorage?
You would use localStorage.setItem( )
Kebab case for keys
How do you retrieve data from localStorage?
Youd use the localStorage.getItem( ) method
What data type can localStorage save in the browser?
It can save data with the string data type.
When does the ‘beforeunload’ event fire on the window object?
It fires when the window, the document, and its resources are about to be unloaded.
What is a method?
A method is a function that is also a property of an object.
How can you tell the difference between a method definition and a method call?
The method definition will usually be in an object literal and will only have the name of the function with its parameters.
A method call will have the object its attached to in front of it in dot notation.
EX. calculator.getSum(1, 2)
Describe method definition syntax (structure).
var newObj = {
function(para) {
definition
},
function(para) {
definition
}
}
Describe method call syntax (structure).
objectName.function(arg);
How is a method different from any other function?
A method is actually a function that is a property of an object. Any other function exists outside of an object.
What is the defining characteristic of Object-Oriented Programming?
The pairing of data (properties) and behavior (methods) together in a single object.
What are the four “principles” of Object-Oriented Programming?
Abstraction : the generalization of data
Encapsulation: the bundling of data with methods that will interact with it
Inheritance: basing a class or object upon previously existing objects or classes
Polymorphism: the use of a single symbol to represent multiple data types
What is “abstraction”?
The generalization of complex data and adding it to a simple interface. “Being able to work with potentially complex things in simple ways”.
What does API stand for?
Application Programming Interface
What is the purpose of an API?
In regards to OOP, an API is a description of how objects work in a given object oriented language. Abstractions created in order for you to interact with complex systems.
What is this in JavaScript?
‘this’ is a keyword in javascript. Depending on the time in which it is used, it can represent many things. However, it is most commonly used to represent the object that is being worked in.
What does it mean to say that this is an “implicit parameter”?
It means that ‘this’ is available in a functions codeblock even if it does not appear in the parameter list or is not being defined as a variable.
When is the value of this determined in a function; call time or definition time?
The value of ‘this’ is determined by 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’ does not even exist yet because the greet method is not being called.
var character = {
firstName: ‘Mario’,
greet: function () {
var message = ‘It's-a-me, ‘ + this.firstName + ‘!’;
console.log(message);
}
};
Given the above character object, what is the result of the following code snippet? Why?
character.greet();
character.greet() will console log the message “It’s a me, Mario!”
(this.firstName = ‘Mario’)
Given the previous character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
This will console log “Its-a-me, undefined!” because ‘this’ is currently undefined because its being called outside of the object.
How can you tell what the value of this will be for a particular function or method definition?
because the function that holds ‘this’ has not been called yet, we cannot say what ‘this’ means definitively.
How can you tell what the value of this is for a particular function or method call?
You would need to look to the left of the dot operator of the method call. If there is nothing there, then it is window.
What kind of inheritance does the JavaScript programming language use?
Javascript uses Prototype-based or prototypal inheritance. Which is when javascript objects are able to give behaviors (methods) or data (variables) to other javascript objects.
What is a prototype in JavaScript?
A prototype is an object that has methods and variables that can be inherited by other objects.
How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on strings, arrays, and numbers?
Because strings, arrays, and numbers have prototypes that have the methods that are being used on them.
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
Javascript goes and looks for it in the object prototype that applies to the object.
What does the new operator do?
The new operator creates an instance of a user-defined object type or prebuilt object type (array, function, string)
1. Creates new blank, plain object
2. Points new instances prototype to the constructor functions prototype property
3. Executes the constructor function with the given arguments and bind the new instance as ‘this’
4. If the constructor returns a non-primitive, the return value becomes the result of the ‘new’ expression.
The purpose of a constructor is to help us get access to the actualy prototype which houses all the methods / data
What property of JavaScript functions can store shared behavior for instances created with new?
The prototype property allows for sharing of data and methods between instances of the same object.
What does the instanceof operator do?
The instanceof operator checks to see if any given object is an instance of a prototype.
What is a “callback” function?
It is a function that is called as an argument to another function
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?
You could put the function that you wish to perform in the global method setTimeout() with the function and the millisecond delay you wish.
How can you set up a function to be called repeatedly without using a loop?
You could use the setInterval method, passing in the function and the time between each function call.
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
It automatically sets to 0 if no delay is given.
What do setTimeout() and setInterval() return?
They return an IntervalID which identifies the interval. This allows for the user to stop the interval using the clearInterval method.
What is a client?
A piece of hardware or software that accesses services provided by a server.
(Requests resources from servers)
What is a server?
A piece of hardware or software that provides functionality to requesting clients
Which HTTP method does a browser issue to a web server when you visit a URL?
GET method
What three things are on the start-line of an HTTP request message?
1) An http method (GET, PUT, POST, etc)
2) The request target (usually a URL)
3) The HTTP version
What three things are on the start-line of an HTTP response message?
1) The protocol version (usually HTTP 1.1)
2) A status code, indicating failure or success
3) A status text to allow the user to understand the HTTP message.
What are HTTP headers?
They allow for the client and the server to pass along 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 always. HTTP methods like GET, HEAD, DELETE, or OPTIONS dont need one.
What is AJAX?
A programming practice of building dynamic webpages using XMLHttpRequest.
The act of grabbing data, adding data, all asynchronously.
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?
The 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?
A code block is a grouping of code grouped together by curly braces. An example of a code block would be in a function definition.
function () {
codeblock
}
What does block scope mean?
Block scope means that variables only exist within that code block
What is the scope of a variable declared with const or let?
Const and Let variables are block scoped
What is the difference between let and const?
Unlike let variables, const variables cannot be reassigned once they are declared
Why is it possible to .push() a new value into a const variable that points to an Array?
Const cannot be changed through reassignment or redeclaration. .push() only adds onto the already existing array.
How should you decide on which type of declaration to use?
It all depends on what you are going to do with the variable. If you don’t need to reassign it you should use const, but if you need to reassign the variable you should use let.
What is the syntax for writing a template literal?
backticks would bookend the string, if youd like to add variables you would add ${}
I.e.My name is Markus or My name is ${firstName}
What is “string interpolation”?
The process in which an expression is inserted or placed into a string.
What is destructuring, conceptually?
It is the act of unpacking or breaking down data structures to retrieve their individual values and the assigning those values to variables
What is the syntax for Object destructuring?
const {property1, property2, property3} = obj ,
const {property1: prop1, property2:prop2} = obj
What is the syntax for Array destructuring?
const [ element1, element2, element3 ] = newArr
How can you tell the difference between destructuring and creating Object/Array literals?
The big difference is what is on either side of the assignment operator (=). If the object/array literal looks to be on the left with the variable name on the right it is being destructured, if it is swapped, then its being created.
What is the syntax for defining an arrow function?
let newFunction = (arg1, arg2, … argN) => {statement/s}
one arg:
const newFunc = arg1 => {statement/s}
no arg:
const newFunc = () => {statement/s}
When an arrow function’s body is left without curly braces, what changes in its functionality?
The function now has an implicit return. It will return the expression even without the use of the return keyword
How is the value of this determined within an arrow function?
It looks at the scope surrounding it. (Lexical Scope)
The value of this is determined WHERE it is defined.
What is a CLI?
Command-Line Interface, text-based way to talk to a program
What is a GUI?
Graphical User Interface
Give a use case for ‘man’
When youd want to look into more information about a CLI command
Give a use case for ‘cat’
When you want to print out the contents of a text file.
Give a use case for ‘ls’
When you want to list the contents of a directory
Give a use case for ‘pwd’
When you want to print the current directory that you are in
Give a use case for ‘echo’
When youd like to display a line of text in the Command Terminal
Give a use case for ‘touch’
Technically you would use it when you want to modify a timestamp, but many use it to create new files.
Give a use case for ‘mkdir’
When you’d want to make a new directory
Give a use case for ‘mv’
For when youd like to rename (effectively, move) a file.
Give a use case for ‘rm’
When youd like to remove a file or a directory
Give a use case for ‘cp’
Whenever you would want to copy a file or directory
Give a use case for ‘history’
When you want to see or save your command line history
What are the three virtues of a great programmer?
Laziness, Impatience, and Hubris
What is node.js?
You can run javascript outside of the browser
What can Node JS be used for
Backends for web apps, cmd line programs, automation
What is a REPL?
Read-Eval-Print-Loop
Reads the javascript, evaluates it, prints it out. Used in programming languages.
When was Node.js created?
2009
What back end languages have you heard of?
Java, Ruby, Rust, Python, SQL, C#, Golang, JavaScript, C++, C
What is the process object in a Node.js program?
The process object is a global variable that provides information and control on the current Node.js process. Process = instance of a running program
How do you access the process object in a Node.js program?
The process object can be accessed directly because it is a global variable. You can also access it with the syntax:
const process = require(‘process’)
What is the data type of process.argv in Node.js?
It is an array of strings
What is a JavaScript module?
A file containing a function or a group of similar functions. They often contain code that can execute specific tasks when called into a larger application.
What values are passed into a Node.js module’s local scope?
exports, require, module, __dirname, __filename
Give two examples of truly global variables in a Node.js program.
global and console
What is the purpose of module.exports in a Node.js module?
It allows for us to achieve modular programming because it allows for us to split functionality to different files. Sends whatever variables/functions we want to share.
How do you import functionality into a Node.js module from another Node.js module?
You would have to make sure that the functionality that you want has been assigned to module.exports. You would then create a variable which would be assigned required(‘./otherFile’)
What is the JavaScript Event Loop?
The Javascript event loop is used when the stack is clear but there are items inside of the task queue. The event loop will grab the first item out of the task queue and put it onto the stack to be executed.
What is different between “blocking” and “non-blocking” with respect to how code is executed?
Blocking is when the code is being run synchronously on the call stack. Non-blocking is when the code is run asynchronously off of the call stack so multiple things can occur simultaneously
What is a directory?
A directory is a file that holds other files
What is a relative file path?
A relative path is one that refers to a locations in relation to the current working directory. Generally used with ./ or ../
What is an absolute file path?
The specific location of a file starting with the root directory
What module does Node.js include for manipulating the file system?
They incorporate the file system module or 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?
It would depend on what method you would use from the fs module. .readFile and .writeFile are both asynchronous
What is a client?
A client is something that requests content or services from a server.
What is a server?
Provider of a resource or service
Which HTTP method does a browser issue to a web server when you visit a URL?
It sends the GET method
What is on the first line of an HTTP request message?
A http method(GET, PUT, POST, etc, and then the URL of the website you wish to request from (request target)
What is on the first line of an HTTP response message?
The status line. Contains the protocol verson, a status code indicating success or failure, and then status text which tells the user what the status code means
What are HTTP headers?
The header for both request and responses both contain metadata and context about the request/response
Is a body required for a valid HTTP message?
No. Depending on what you wish to do with your request there often is no body. Methods like GET requests dont need bodies.
What is NPM?
NPM is a package manager that is effectively a software registry that houses thousands of packages or modules for use.
Website
Registry
CLI
What is a package?
A package is something that contains a file with everything that youd need for a module. (Directory with 1 or more file + package.json)
How can you create a package.json with npm?
you would use the command line
npm init –yes
What is a dependency and how to you add one to a package?
A dependency is a code from a third party that a package needs to work. To add one you would use the command line npm install ‘dependency’
What happens when you add a dependency to a package with npm?
The dependency appears on your package.json file. Also, a node-modules file appears in your local directory
How do you add express to your package dependencies?
you would use on the command line ‘ 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?
You would use .use()
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
The res and req objects
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?
The HTTP request method indicates intent from the client and also a label for what the method actually does
What does the express.json() middleware do and when would you need it?
express.json() takes in incoming request in JSON and parses it. You would need it if someone was trying to post some JSON data.
What does the express.json() middleware do and when would you need it?
express.json() takes in incoming request in JSON and parses it. You would need it if someone was trying to post some JSON data.
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is an open source relational database. Relational databases stores data and sorts them by predefined relationships. Some other relational databases would be Microsoft SQL server, Firebird, and Helix
What are some advantages of learning a relational database?
Many domains can be modeled well with relational databases. Relational databases also support good data integrity. Learning relational databases are transferable skills
What is one way to see if PostgreSQL is running?
You can use the command: sudo service postgresql status
What is a database schema?
A schema is a definition to how data in a relational database should be organized and stored
What is a table?
A table is data being stored in a relation. The table has rows and columns. Each individual row is an entry into the table. Each column is an attribute that each entry can have
What is a row?
A row is a record in the spreadsheet. Each row is made up of columns that represent attributes for each row.
What is SQL and how is it different from languages like JavaScript?
SQL is a language used primarily to communicate with databases. It differs from languages like JavaScript because it is a declarative language which means we tell SQL what we want vs an imperative language where we have to tell it exactly how to do what we want.
How do you retrieve specific columns from a database table?
You would use the select key word with the name of the columns youd like to see in double quotes.
EX.
select “firstName”
How do you filter rows based on some specific criteria?
You would use the where keyword along with whatever condition youd like
EX.
select *
from “server”
where “firstName” = ‘Don’
What are the benefits of formatting your SQL?
It helps to make the query more readable. It effectively ‘beautifies” our query
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?
You would use the keyword limit and then the amount of entries youd like.
EX:
limit 5;
How do you retrieve all columns from a database table?
You would use the asterisk character
EX:
select *
from “server”;
How do you control the sort order of a result set?
You can use the order by keywords. By default order by is in ascending order. To get it to show in descending order you would use the desc keyword.
EX:
select *
from “server”
order by “price” desc
How do you add a row to a SQL table?
You would use the insert into clause.
EX:
insert into “server” (“value1”, “value2”)
values (‘data1’, ‘data2’)
returning *
What is a tuple?
In SQL, a tuple is a list of values.
How do you add multiple rows to a SQL table at once?
You would just need multiple tuples defined.
EX:
insert into “server” (“firstName”, “lastName”)
values (‘Markus’, ‘Doan-Le’),
(‘Andrew’, ‘Kao’)
returning *
How do you get back the row being inserted into a table without a separate select statement?
You would need to use the returning clause along with the * or the column you want back
EX:
returning *
How do you update rows in a database table?
You would use the update clause in the following context:
EX:
update “nameOfTable”
set “firstName” = ‘first’,
“lastName” = ‘last
where “firstName” = ‘spanky’
returning *;
Why is it important to include a where clause in your update statements?
If you dont, you will change every single row in the table
EX:
update “nameOfTable”
set “firstName” = ‘first’
returning *;
This will change every firstName attribute for each row to ‘first’
How do you delete rows from a database table?
You would use the delete clause
EX:
delete from “tableName”
where “firstName” = ‘Leticia’
How do you accidentally delete all rows from a table?
By not including the where clause.
EX;
delete from “tableName”;
OOPS, the rows inside of tableName are gone
What is a foreign key?
The shared data value between the two tables. That is used to link them.
How do you join two SQL tables?
You would find a column that they have in common and the would use the join/using clause with the shared column name.
EX:
select “firstName”
from “students”
join “course” using (“studentId”)
How do you temporarily rename columns or tables in a SQL statement?
You would use the as clause to create aliases
EX:
select “students”.”name” as “studentName”
from “students”
What are some examples of aggregate functions?
sum( ) , count( ), avg( ), max( ), min( ), every( ), json_agg( )
What is the purpose of a group by clause?
Separate rows into groups and then perform aggregate functions on those groups.
What are the three states a Promise can be in?
Pending: In its initial state, it is neither fulfilled or rejected.
Fulfilled: The operation was completed successfully
Rejected: The operation failed
How do you handle the fulfillment of a Promise?
You would use the Promises.prototype.then() method
How do you handle the rejection of a Promise?
You would use the Promises.prototype.catch() method
What is Array.prototype.filter useful for?
Its useful for when you want to create an array that has data that fits a certain parameter
What is Array.prototype.map useful for?
When you need an array that has all of its elements affected by function
What is Array.prototype.reduce useful for?
For when you want to combine all elements into a single value
What is Webpack?
Webpack is a javascript module bundler. It even supports images, stylesheets, and fonts. It takes multiple modules and puts out fewer files (possibly even one)
How do you add a devDependency to a package?
You would use npm install packagename –save-dev
What is an NPM script?
A command line command with a nickname. It helps to automate multiple actions into a single command line command
How do you execute Webpack with npm run?
You would npm run build on the command line.
What is “syntactic sugar”?
Syntax within a programming language that makes things easier to read or express
What is the typeof an ES6 class?
It is a function
Describe ES6 class syntax.
Key word class, name of class, curly braces, constructor, methods
EX.
class Pizza {
constructor(isAPizza) {
this.isAPizza = isAPizza
}
topping() {
}
}
What is “refactoring”?
Restructuring code without changing functionality
How are ES Modules different from CommonJS modules?
CommonJS modules are synchronous which means they may cause blocking. ES modules are asynchronous. ES modules are official. CommonJS modules are a community effort
What kind of modules can Webpack support?
ECMAScript modules, CommonJS Modules, and AMD modules (asynchronous module definition)
What is React?
A JavaScript library used to create interfaces
What is a React element?
Objects that you want to see on the screen. Not real DOM elements.
How do you mount a React element to the DOM?
You would use the ReactDOM.render() method, passing in what youd want to mount to the DOM
1. Query for actual dom element
2. CreateRoot using .createRoot
3. call .render method on root passing in what you want to mount.
What is Babel?
A JavaScript compiler that turns ES6 backwards compatible in older or newer browsers.
What is a Plug-in?
Software that adds new features or extends functionality
What is a Webpack loader?
A transformation that is applied to the source code of the module
How can you make Babel and Webpack work together?
You install babel-loader into your dev dependencies using NPM. This allows webpack to bundle up jsx files and gives it to babel to transform it and then return it to webpack.
What is JSX?
A javascript syntax extension that allows for us to embed javascript into html elements. It is not HTML!
Why must the React object be imported when authoring JSX in a module?
It is because JSX is effectively creating a React component using the JSX transformer
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
You would use the babel-loader with the plugin for translating jsx into react
What is a React component?
Conceptually, React components are like JavaScript functions. They accept props and they return React elements that mimic HTML elements. They are reusable.
How do you define a function component in React?
It would be defined similarly to a JavaScript function:
function TestComponent (props) {
return React ELEMENT
} name must be capitalized
How do you mount a component to the DOM?
You would use the ReactDOM.render() method, passing in what youd want to mount to the DOM
1. Query for actual dom element
2. CreateRoot using .createRoot
3. call .render method on root passing in what you want to mount.
4. Generally we will be passing in a react component
What are props in React?
A JavaScript object that stores the value of attributes of a React element. Short for ‘properties’
How do you pass props to a component?
prop name, equal sign, then prop value. If the value is not a string it needs to be in a set of curly braces
How do you write JavaScript expressions in JSX?
To write JavaScript expressions inside of JSX we need to bookend our desired javascript expressions with curly braces
EX.
{props.text}
How do you create “class” component in React?
You would use this syntax:
class CustomElement extends React.Component {
render() {
return React element
}
}
How do you access props in a class component?
Inside of the class component, when you are defining the render method you would use the this object in order to access props
What is the purpose of state in React?
Data model of values that change over time. “What changed in the state of the world?”
How to you pass an event handler to a React element?
You would pass it in as a prop and set the value to the method and bind it
EX. onClick = { this.handleClick}
What are controlled components?
When a form’s data is handled by the component’s state
What two props must you pass to an input for it to be “controlled”?
the value and onChange props
What Array method is commonly used to create a list of React elements?
The .map array method
What is the best value to use as a “key” prop when rendering lists?
A string that uniquely identifies the item, like an id
What does express.static() return?
It returns a function
What is the local __dirname variable in a Node.js module?
It is the absolute path of the directory that contains the currently executing file.
What does the join() method of Node’s path module do?
It joins the specified path segments into a single file path.
What does fetch() return?
It returns a Promise that resolves into a response object.
What is the default request method used by fetch()?
GET
How do you specify the request method (GET, POST, etc.) when calling fetch?
You would pass in an object that would have the desired method on it.
EX:
fetch(“API URL”, {method: “POST”})
When does React call a component’s componentDidMount method?
Immediately after a component is mounted (first render) (inserted on DOM tree)
Name three React.Component lifecycle methods.
constructor, componentDidMount, render
How do you pass data to a child component?
passing a prop
What does the acronym LIFO mean?
“Last in, First Out”
What methods are available on a Stack data structure?
.peek(convenience), .pop, .push, .print(for debugging)
What must you do to access the value at an arbitrary point in a stack (not just the “top”)?
You would have to pop off the top until you are at the point in the stack you wish to be at.
What does the acronym FIFO mean?
“First In, First out”
What methods are available on a Queue data structure?
.enqueue, .dequeue
What must you do to access the value at an arbitrary point in a queue (not just the “front”)?
You’d have to dequeue until you get to the value that you wish to access
How are linked lists different from an array?
Linked lists cannot be accessed randomly by an index. It is in sequential order.
How would you access an arbitrary node in a linked list (not just the “head”)?
You would have to use the .next method in order to access the arbitrary node.
What must the return value of myFunction be if the following expression is possible?
myFunction()();
The return value is the return of the inner function
What must the return value of myFunction be if the following expression is possible?
myFunction()();
The return value is the return of the inner function
What does this code do?
const wrap = value => () => value;
When wrap is called, it will return the function inside that returns the value
In JavaScript, when is a function’s scope determined; when it is called or when it is defined?
When it is defined
What allows JavaScript functions to “remember” values from their surroundings?
Closures
