HTML Flashcards
Where do you put non-visible content about the HTML document?
In the tag
Where do you put visible content about the HTML document?
In the tag.
Where do the and tags go in a valid HTML document?
Both are within the tag with coming before .
What is the purpose of a declaration?
declares the specific language that the code will be in.
Give five examples of HTML element types.
<p>, </p>
<div></div>
, <img></img>, <h1>, </h1>, head
What is the purpose of HTML attributes?
They give additional information about the contents of an element.
Give an example of an HTML entity (escape character).
® ® ““”
How do block-level elements affect the document flow?
block-level elements appear on new lines in the browser window.
How do inline elements affect the document flow?
inline elements will appear to continue on the same line as neighboring elements.
What are the default width and height of a block-level element?
width of 100% the parent container, full width available
length default to whatever height it needs to have depending on content.
What are the default width and height of an inline element?
Height and width are the exact height and width of the content.
What is the difference between an ordered list and an unordered list in HTML?
An ordered list will automatically assign numbers to the list elements underneath it. an unordered list uses bullets.
What HTML tag is used to link to another website?
<a></a> anchor tag
What is an absolute URL?
web address in the browser to visit a specific page. has domain name and path. links to website other than current one.
Is an HTML list a block element or an inline element?
Block
What is a relative URL?
relative url if linking within the same site. has the name of the file or navigation to folder. - no domain name.
How do you indicate the relative link to a parent directory?
<a></a>
How do you indicate the relative link to a child directory?
<a></a>
How do you indicate the relative link to a grand parent directory?
<a></a>
How do you indicate the relative link to the same directory?
<a></a>
What is the purpose of an HTML form element?
gather data from clients.
specifies the method and URL for the page on the server that will receive the form information.
Give five examples of form control elements.
input, label, select, textarea, option
Give three examples of type attribute values for HTML input elements.
image, submit, file, checkbox
Is an HTML input element a block element or an inline element?
inline
What are the six primary HTML elements for creating tables?
Table, thead, tbody, tfoot, th, td
What purpose do the thead and tbody elements serve?
thead contains the first row of the of the table that has the headings.
tbody contains the content of the tables
Give two examples of data that would lend itself well to being displayed in a table.
Finance sheets, prices, schedules
What kind of inheritance does the JavaScript programming language use?
JavaScript includes a specific kind of inheritance known as prototype-based (or prototypal) inheritance.
What is a prototype in JavaScript?
prototype is simply 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?
if those are inherited as a prototytpe
If an object does not have it’s own property or method by a given key, where does JavaScript look for it?
it’s parent
What is a client?
A client is the receiving end of a service or the requestor of a service
What is a server?
provides functionality for other programs or devices
Which HTTP method does a browser issue to a web server when you visit a URL?
The browser sends a HTTP request to the server. get method
What three things are on the start-line of an HTTP request message?
An HTTP method, a verb (like GET , PUT or POST ) or a noun (like HEAD or OPTIONS )
target
httpversion
What three things are on the start-line of an HTTP response message?
Status line, header and body.
What are HTTP headers?
Response headers hold additional information about the response, like its location or about the server providing it
Is a body required for a valid HTTP request or response message?
Exercise
no
What does the new operator do?
Creates a blank, plain JavaScript object.
Adds a property to the new object (__proto__) that links to the constructor function’s prototype object
Note: Properties/objects added to the construction function prototype are therefore accessible to all instances created from the constructor function (using new).
Binds the newly created object instance as the this context (i.e. all references to this in the constructor function now refer to the object created in the first step).
Returns this if the function doesn’t return an object.
What property of JavaScript functions can store shared behavior for instances created with new?
You can add a shared property to a previously defined object type by using the Function.prototype property.
What does the instanceof operator do?
The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object.
What is a “callback” function?
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
settimeout
How can you set up a function to be called repeatedly without using a loop?
setinterval
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
What do setTimeout() and setInterval() return?
intervalID
What is AJAX?
Asynchronous JavaScript And XML
A browser built-in XMLHttpRequest object (to request data from a web server)
JavaScript and HTML DOM (to display or use the data)
tool for making network requests for the website without having to load a new webpage
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
Bonus Question: An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
xhr prototypes from xhr event target and that prototypes from eventtarget
What is a code block? What are some examples of a code block?
code enclosed by {}
used in if, for, while, functions
What does block scope mean?
Means while in the block, which is the {}, the variables are only accessible within that block,
What is the scope of a variable declared with const or let?
block scope
What is the difference between let and const?
const is immutable
Why is it possible to .push() a new value into a const variable that points to an Array?
The const keyword ensures that the variable it creates is read-only. However, it doesn’t mean that the actual value to which the const variable reference is immutable.
How should you decide on which type of declaration to use?
If you are planning to change the value of the variable or not
What is the syntax for writing a template literal?
using backticks
What is “string interpolation”?
substituting parts of the string for values or variables
What is destructuring, conceptually?
taking properties and assigning them to variables
What is the syntax for Object destructuring?
let {propertyName : variableName} = object
What is the syntax for Array destructuring?
let [variable1, variable2] = Array
How can you tell the difference between destructuring and creating Object/Array literals?
use of let/const in defining variables. structuring
What is the syntax for defining an arrow function?
let add = (x, y) => x + y;
When an arrow function’s body is left without curly braces, what changes in its functionality?
implicit return vs explicit return
How is the value of this determined within an arrow function?
Unlike an anonymous function, an arrow function captures the this value of the enclosing context instead of creating its own this context.
What is a CLI?
command line interface
What is a GUI?
graphical user interface
ive at least one use case for each of the commands listed in this exercise. man cat ls pwd echo touch mkdir mv rm cp
man- manual look up man man cat-show contents of file cat -a ls- list out files pwd- print current directory echo-log to directory or put text into file touch-create new file mkdir- make new directory mv- rename file rm- remove file cp-copy contents of file to another file
What are the three virtues of a great programmer?
adaptability, recognition, diligence
What is Node.js?
Node.js is a program that allows JavaScript to be run outside of a web browser.
What can Node.js be used for?
It is commonly used to build back ends for Web applications, command-line programs, or any kind of automation that developers wish to perform.
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
When was Node.js created?
2009
What back end languages have you heard of?
C#, python, Ruby
What is a computer process?
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)?
40
Why should a full stack Web developer know that computer processes exist?
Full stack Web development is based on making multiple processes work together to form one application, so having at least a cursory awareness of computer processes is necessary
What is the process object in a Node.js program?
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?
can just call it as process since it is global
What is the data type of process.argv in Node.js?
Array
What is a JavaScript module?
In JavaScript, a “module” is a single .js file.
Most non-trivial Node.js programs are made of many, many modules.
What values are passed into a Node.js module’s local scope?
exports, require, __filename, __dirname, module
Give two examples of truly global variables in a Node.js program.
console, process
What is the purpose of module.exports in a Node.js module?
use content in a different js file
How do you import functionality into a Node.js module from another Node.js module?
require
What is the JavaScript Event Loop?
Pushes the queue events into the stack
What is different between “blocking” and “non-blocking” with respect to how code is executed?
blocking calls onto the stack so other processes can’t complete until the stack clears
non-blocking pushes the task into a callback on the task queue that allows other processes to also be called in between callback tasks
What is a directory?
A directory is an area on the computer containing other directories and files and helps keep the computer organized.
What is a relative file path?
the hierarchical path that locates a file or folder on a file system starting from the current directory.
What is an absolute file 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
What method is available in the Node.js fs module for writing data to a file?
fs.writeFile
Are file operations using the fs module synchronous or asynchronous?
Asynchronous
What is a client?
system sending requests to server
What is a server?
system that holds data and receives request from client
Which HTTP method does a browser issue to a web server when you visit a URL?
get
What is on the first line of an HTTP request message?
method ,target, version
What is on the first line of an HTTP response message?
protocol version, status code, status text
What are HTTP headers?
HTTP headers let the client and the server pass additional information with an HTTP request or response.
Is a body required for a valid HTTP message?
no
What is NPM?
npm is the world’s largest software registry.
What is a package?
directory with files including a package.json
How can you create a package.json with npm?
npm init -y
What is a dependency and how to you add one to a package?
dependencies are the package references that are used by your library without which it cannot work and to be installed along with your library installation automatically.
What happens when you add a dependency to a package with npm?
add to the node modules folder and list it in the dependencies in the
How do you mount a middleware with an Express application?
Bind application-level middleware to an instance of the app object by using the app.use() and app.METHOD() functions,
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req, res, next
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
app/json
What is the significance of an HTTP request’s method?
it is what the app will read to determine what action to take
What does the express.json() middleware do and when would you need it?
parses for json data and stores it in req.body
need it when receiving json data
What is PostgreSQL and what are some alternative relational databases?
PostgreSQL is a powerful, free, open source Relational Database Management System (RDBMS).
Other popular 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.
Many problem domains can be modeled well using a relational database.
What is one way to see if PostgreSQL is running?
top
sudo service postgresql status
What is a database schema?
a collection of tables
What is a table?
A table is a list of rows each having the same set of attributes.
What is a row?
row is a record in that spreadsheet. an instance of a data
What is SQL and how is it different from languages like JavaScript?
Structured Query Language (SQL) is the primary way of interacting with relational databases. It is a powerful way of retrieving, creating, and manipulating data in a relational database.
SQL is a declarative programming language while JS is imperative
How do you retrieve specific columns from a database table?
select “column-name”
How do you filter rows based on some specific criteria?
where “category” = ‘category-name’
What are the benefits of formatting your SQL?
easier to read and not make mistakes, catch errors more easily
What are four comparison operators that can be used in a where clause?
= , >,
How do you limit the number of rows returned in a result set?
limit number;
How do you retrieve all columns from a database table?
*
How do you control the sort order of a result set?
order by
How do you add a row to a SQL table?
insert
What is a tuple?
a list of values
How do you add multiple rows to a SQL table at once?
values (), (), ()
How do you get back the row being inserted into a table without a separate select statement?
returning *
How do you update rows in a database table?
update
Why is it important to include a where clause in your update statements?
updates the entire table by default
How do you delete rows from a database table?
delete from “”
How do you accidentally delete all rows from a table?
not specifying using where
What is a foreign key?
a key id that points to another table
How do you join two SQL tables?
using
join using ("key")How do you temporarily rename columns or tables in a SQL statement?
as
What are some examples of aggregate functions?
count, avg, sum,min, every,
What is the purpose of a group by clause?
to apply aggregate functions to specific categories
What are the three states a Promise can be in?
pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.
How do you handle the fulfillment of a Promise?
with a promise.then value=>{}
How do you handle the rejection of a Promise?
catch (err)=>
What is Array.prototype.filter useful for?
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
What is Array.prototype.map useful for?
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
What is Array.prototype.reduce useful for?
reduces array to single value
What is “syntactic sugar”?
In computer science, 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;
}
}What is “refactoring”?
In computer programming and software design, code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior.
What is Webpack?
modular bundler- compiles js modules
How do you add a devDependency to a package?
npm install –save-dev
What is an NPM script?
short cut scripts to run commands
How do you execute Webpack with npm run?
in package.json you add key value pair to run webpack
How are ES Modules different from CommonJS modules?
import/export usage instead of require/module.export
What kind of modules can Webpack support?
ECMAScript modules CommonJS modules AMD modules Assets WebAssembly modules ES6 In addition to that webpack supports modules written in a variety of languages and preprocessors via loaders.
What is React?
JS library for creating user interfaces
Built with JS
What is a React element?
Object that represents a DOM element
How do you mount a React element to the DOM?
ReactDom.render(mounting, base)
What is Babel?
Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
What is a Plug-in?
In computing, a plug-in (or plugin, add-in, addin, add-on, or addon) is a software component that adds a specific feature to an existing computer program.
What is a Webpack loader?
Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them.
Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs
How can you make Babel and Webpack work together?
use bable as a plugin for the export in the config
What is JSX?
syntax extension to JavaScript.
allows combination of design and logic
Why must the React object be imported when authoring JSX in a module?
Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
Babel uses a plugin to convert JSX into javascript
@babel/plugin-transform-react-jsx
What is a React component?
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
components are usable and describes piece of the ui
How do you define a function component in React?
The simplest way to define a component is to write a JavaScript function:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
How do you mount a component to the DOM?
root.render
What are props in React?
arguments passed into react components
How do you pass props to a component
set prop.property = “”
How do you write JavaScript expressions in JSX?
within {}
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.wantedproperty
What is the purpose of state in React?
state is private and fully controlled by the component. updating state with setstate updates the component’s render also
How to you pass an event handler to a React element?
provide a listener when the element is rendered
What are controlled components?
In HTML, form elements such as , , and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().
We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.
What two props must you pass to an input for it to be “controlled”?
handleChange and handleSubmit
What Array method is commonly used to create a list of React elements?
map
What is the best value to use as a “key” prop when rendering lists?
id
What does express.static() return?
a function
What is the local __dirname variable in a Node.js module?
the directory path of where the node file is being run
What does the join() method of Node’s path module do?
join() method joins the specified path segments into one path.
What does fetch() return?
response object as json
What is the default request method used by fetch()?
get
How do you specify the request method (GET, POST, etc.) when calling fetch?
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
----The fetch() method can optionally accept a second parameter, an init object that allows you to control a number of different settings:When does React call a component’s componentDidMount method?
After rendering the component to the dom
Name three React.Component lifecycle methods.
componentDidMount
componentWillUnmount
componentDidUpdate
How do you pass data to a child component?
into their props
What does the acronym LIFO mean?
Last in first out
What methods are available on a Stack data structure?
pop, push, peek, print
What must you do to access the value at an arbitrary point in a stack (not just the “top”)?
take out the items above that point
What does the acronym FIFO mean?
first in first out
What methods are available on a Queue data structure?
enqueue, dequeue, peek, print
What must you do to access the value at an arbitrary point in a queue (not just the “front”)?
index through the queue, dequeue and enqueue
