HTML Flashcards
(193 cards)
1
Q
Where do you put non-visible content about the HTML document?
A
In the tag
2
Q
Where do you put visible content about the HTML document?
A
In the tag.
3
Q
Where do the and tags go in a valid HTML document?
A
Both are within the tag with coming before .
4
Q
What is the purpose of a declaration?
A
declares the specific language that the code will be in.
5
Q
Give five examples of HTML element types.
A
<p>, </p>
<div></div>
, <img></img>, <h1>, </h1>, head
6
Q
What is the purpose of HTML attributes?
A
They give additional information about the contents of an element.
7
Q
Give an example of an HTML entity (escape character).
A
® ® ““”
8
Q
How do block-level elements affect the document flow?
A
block-level elements appear on new lines in the browser window.
9
Q
How do inline elements affect the document flow?
A
inline elements will appear to continue on the same line as neighboring elements.
10
Q
What are the default width and height of a block-level element?
A
width of 100% the parent container, full width available
length default to whatever height it needs to have depending on content.
11
Q
What are the default width and height of an inline element?
A
Height and width are the exact height and width of the content.
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
An ordered list will automatically assign numbers to the list elements underneath it. an unordered list uses bullets.
13
Q
What HTML tag is used to link to another website?
A
<a></a> anchor tag
14
Q
What is an absolute URL?
A
web address in the browser to visit a specific page. has domain name and path. links to website other than current one.
15
Q
Is an HTML list a block element or an inline element?
A
Block
16
Q
What is a relative URL?
A
relative url if linking within the same site. has the name of the file or navigation to folder. - no domain name.
17
Q
How do you indicate the relative link to a parent directory?
A
<a></a>
18
Q
How do you indicate the relative link to a child directory?
A
<a></a>
19
Q
How do you indicate the relative link to a grand parent directory?
A
<a></a>
20
Q
How do you indicate the relative link to the same directory?
A
<a></a>
21
Q
What is the purpose of an HTML form element?
A
gather data from clients.
specifies the method and URL for the page on the server that will receive the form information.
22
Q
Give five examples of form control elements.
A
input, label, select, textarea, option
23
Q
Give three examples of type attribute values for HTML input elements.
A
image, submit, file, checkbox
24
Q
Is an HTML input element a block element or an inline element?
A
inline
25
What are the six primary HTML elements for creating tables?
Table, thead, tbody, tfoot, th, td
26
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
27
Give two examples of data that would lend itself well to being displayed in a table.
Finance sheets, prices, schedules
28
What kind of inheritance does the JavaScript programming language use?
JavaScript includes a specific kind of inheritance known as prototype-based (or prototypal) inheritance.
29
What is a prototype in JavaScript?
prototype is simply an object that contains properties and (predominantly) methods that can be used by other objects.
30
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
31
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
32
What is a client?
A client is the receiving end of a service or the requestor of a service
33
What is a server?
provides functionality for other programs or devices
34
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
35
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
36
What three things are on the start-line of an HTTP response message?
Status line, header and body.
37
What are HTTP headers?
Response headers hold additional information about the response, like its location or about the server providing it
38
Is a body required for a valid HTTP request or response message?
Exercise
no
39
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.
40
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.
41
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.
42
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.
43
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
44
How can you set up a function to be called repeatedly without using a loop?
setinterval
45
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0
46
What do setTimeout() and setInterval() return?
intervalID
47
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
48
What does the AJAX acronym stand for?
Asynchronous JavaScript And XML
49
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest
50
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load event
51
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
52
What is a code block? What are some examples of a code block?
code enclosed by {}
| used in if, for, while, functions
53
What does block scope mean?
Means while in the block, which is the {}, the variables are only accessible within that block,
54
What is the scope of a variable declared with const or let?
block scope
55
What is the difference between let and const?
const is immutable
56
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.
57
How should you decide on which type of declaration to use?
If you are planning to change the value of the variable or not
58
What is the syntax for writing a template literal?
using backticks
59
What is "string interpolation"?
substituting parts of the string for values or variables
60
What is destructuring, conceptually?
taking properties and assigning them to variables
61
What is the syntax for Object destructuring?
let {propertyName : variableName} = object
62
What is the syntax for Array destructuring?
let [variable1, variable2] = Array
63
How can you tell the difference between destructuring and creating Object/Array literals?
use of let/const in defining variables. structuring
64
What is the syntax for defining an arrow function?
let add = (x, y) => x + y;
65
When an arrow function's body is left without curly braces, what changes in its functionality?
implicit return vs explicit return
66
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.
67
What is a CLI?
command line interface
68
What is a GUI?
graphical user interface
69
```
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
```
70
What are the three virtues of a great programmer?
adaptability, recognition, diligence
71
What is Node.js?
Node.js is a program that allows JavaScript to be run outside of a web browser.
72
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.
73
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
74
When was Node.js created?
2009
75
What back end languages have you heard of?
C#, python, Ruby
76
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.
77
Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?
40
78
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
79
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.
80
How do you access the process object in a Node.js program?
can just call it as process since it is global
81
What is the data type of process.argv in Node.js?
Array
82
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.
83
What values are passed into a Node.js module's local scope?
exports, require, __filename, __dirname, module
84
Give two examples of truly global variables in a Node.js program.
console, process
85
What is the purpose of module.exports in a Node.js module?
use content in a different js file
86
How do you import functionality into a Node.js module from another Node.js module?
require
87
What is the JavaScript Event Loop?
Pushes the queue events into the stack
88
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
89
What is a directory?
A directory is an area on the computer containing other directories and files and helps keep the computer organized.
90
What is a relative file path?
the hierarchical path that locates a file or folder on a file system starting from the current directory.
91
What is an absolute file path?
always contains the root element and the complete directory list required to locate the file.
92
What module does Node.js include for manipulating the file system?
fs
93
What method is available in the Node.js fs module for writing data to a file?
fs.writeFile
94
Are file operations using the fs module synchronous or asynchronous?
Asynchronous
95
What is a client?
system sending requests to server
96
What is a server?
system that holds data and receives request from client
97
Which HTTP method does a browser issue to a web server when you visit a URL?
get
98
What is on the first line of an HTTP request message?
method ,target, version
99
What is on the first line of an HTTP response message?
protocol version, status code, status text
100
What are HTTP headers?
HTTP headers let the client and the server pass additional information with an HTTP request or response.
101
Is a body required for a valid HTTP message?
no
102
What is NPM?
npm is the world's largest software registry.
103
What is a package?
directory with files including a package.json
104
How can you create a package.json with npm?
npm init -y
105
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.
106
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
107
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,
108
Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?
req, res, next
109
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
app/json
110
What is the significance of an HTTP request's method?
it is what the app will read to determine what action to take
111
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
112
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.
113
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.
114
What is one way to see if PostgreSQL is running?
top
| sudo service postgresql status
115
What is a database schema?
a collection of tables
116
What is a table?
A table is a list of rows each having the same set of attributes.
117
What is a row?
row is a record in that spreadsheet. an instance of a data
118
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
119
How do you retrieve specific columns from a database table?
select "column-name"
120
How do you filter rows based on some specific criteria?
where "category" = 'category-name'
121
What are the benefits of formatting your SQL?
easier to read and not make mistakes, catch errors more easily
122
What are four comparison operators that can be used in a where clause?
= , >,
123
How do you limit the number of rows returned in a result set?
limit number;
124
How do you retrieve all columns from a database table?
*
125
How do you control the sort order of a result set?
order by
126
How do you add a row to a SQL table?
insert
127
What is a tuple?
a list of values
128
How do you add multiple rows to a SQL table at once?
values (), (), ()
129
How do you get back the row being inserted into a table without a separate select statement?
returning *
130
How do you update rows in a database table?
update
131
Why is it important to include a where clause in your update statements?
updates the entire table by default
132
How do you delete rows from a database table?
delete from ""
133
How do you accidentally delete all rows from a table?
not specifying using where
134
What is a foreign key?
a key id that points to another table
135
How do you join two SQL tables?
```
using
join using ("key")
```
136
How do you temporarily rename columns or tables in a SQL statement?
as
137
What are some examples of aggregate functions?
count, avg, sum,min, every,
138
What is the purpose of a group by clause?
to apply aggregate functions to specific categories
139
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.
140
How do you handle the fulfillment of a Promise?
with a promise.then value=>{}
141
How do you handle the rejection of a Promise?
catch (err)=>
142
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.
143
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.
144
What is Array.prototype.reduce useful for?
reduces array to single value
145
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
146
What is the typeof an ES6 class?
function
147
Describe ES6 class syntax.
```
class Person {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
```
148
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.
149
What is Webpack?
modular bundler- compiles js modules
150
How do you add a devDependency to a package?
npm install --save-dev
151
What is an NPM script?
short cut scripts to run commands
152
How do you execute Webpack with npm run?
in package.json you add key value pair to run webpack
153
How are ES Modules different from CommonJS modules?
import/export usage instead of require/module.export
154
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.
```
155
What is React?
JS library for creating user interfaces
| Built with JS
156
What is a React element?
Object that represents a DOM element
157
How do you mount a React element to the DOM?
ReactDom.render(mounting, base)
158
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.
159
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.
160
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
161
How can you make Babel and Webpack work together?
use bable as a plugin for the export in the config
162
What is JSX?
syntax extension to JavaScript.
| allows combination of design and logic
163
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.
164
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
165
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
166
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
Hello, {props.name}
; } ```
167
How do you mount a component to the DOM?
root.render
168
What are props in React?
arguments passed into react components
169
How do you pass props to a component
set prop.property = ""
170
How do you write JavaScript expressions in JSX?
within {}
171
How do you create "class" component in React?
```
class Welcome extends React.Component {
render() {
return
Hello, {this.props.name}
; } } ```
172
How do you access props in a class component?
this.props.wantedproperty
173
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
174
How to you pass an event handler to a React element?
provide a listener when the element is rendered
175
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”.
176
What two props must you pass to an input for it to be "controlled"?
handleChange and handleSubmit
177
What Array method is commonly used to create a list of React elements?
map
178
What is the best value to use as a "key" prop when rendering lists?
id
179
What does express.static() return?
a function
180
What is the local __dirname variable in a Node.js module?
the directory path of where the node file is being run
181
What does the join() method of Node's path module do?
join() method joins the specified path segments into one path.
182
What does fetch() return?
response object as json
183
What is the default request method used by fetch()?
get
184
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:
```
185
When does React call a component's componentDidMount method?
After rendering the component to the dom
186
Name three React.Component lifecycle methods.
componentDidMount
componentWillUnmount
componentDidUpdate
187
How do you pass data to a child component?
into their props
188
What does the acronym LIFO mean?
Last in first out
189
What methods are available on a Stack data structure?
pop, push, peek, print
190
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
191
What does the acronym FIFO mean?
first in first out
192
What methods are available on a Queue data structure?
enqueue, dequeue, peek, print
193
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
