HTML Flashcards
(322 cards)
1
Q
Where do you put non-visible content about the HTML document?
A
In the ‘head’ element.
The head element is commonly used to articulate functionality or visual attributes of the document.
2
Q
Where do you put visible content about the HTML document?
A
In the body.
3
Q
Where do the & elements go in valid HTML documents?
A
They both go inside of the tag, and the tag is opened and closed before the body element begins.
Check this one
4
Q
What is the purpose of an html document type declaration?
A
It allows the browser to know what type of document it is reading.
5
Q
Give an example of Five HTML tags.
A
h2, img, b, i, u
6
Q
What is the purpose of HTML attributes?
A
Attributes provide additional information about the contents of an element. They appear on the opening tag of the element. They have two parts, a name and a value.
https://trello.com/c/OnZ4vkfD/49-attributes
7
Q
What is an HTML entity?
A
These are ‘reserved’ characters in HTML. They are a sequence of characters that are substituted with an actual character in their place.
8
Q
How do block-level elements affect the document flow?
A
Some elements will always appear to start on a new line with the DOM renders. These are known as ‘block’ level elements.
The following are examples of ‘block-level’ elements.
h1,p,ul and li
So they affect the document flow by ‘breaking’ a line and starting a new one.
9
Q
How do inline elements affect the document flow?
A
Some elements will be rendered on the same line that they are rendered on. Inline elements are an example of these.
<i> and <b> are an example of these. <del> also.</del></b></i>
i and b are examples of these. del, b are also examples.
10
Q
What are the default width and height of a block-level element?
A
By default, a block-level element expands to a width of 100% of its parent container, whether it be the entire “body” element, a container element such as a div or something else.
11
Q
What are the default width and height of an inline element?
A
They inherit from their parent the default width and height they are allowed to have (?)
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
12
Q
What is the difference between an ordered list an an unordered list in HTML
A
The way they are articulated within the HTML itself. One of them is started as ul and the other is started as ul
13
Q
Is an HTML list a block element or an inline element
A
An HTML list is a block element.
14
Q
What HTML tag is used to link to another website?
A
the Anchor tag.
15
Q
What is an absolute URL?
A
An absolute URL is a link to a ‘foreign’ address, or a different website.
If the URL route is routed to a similar address within the website, then it is a ‘relative’ reference, and the file route to that address is provided.
16
Q
What is a relative URL?
A
A relative URL is a ‘local’ address, or the location of a file within the program.
The technical terminology for this would be, an address to a local ‘directory’ within the program.
If the URL is ‘Aboslute’, than it is a foreign address. That means it leads to a different set of files, or a directory that is not in the local repository.
17
Q
Is the img element an inline element or a block level element?
A
The img tag is an inline element, that means it must be put within a parent block level element. Usually a div or a p.
18
Q
How many types of relative links are there?
A
There are 5 types of relative links.
19
Q
How do you link to a file that is in the same folder as the file you are currently working with?
A
you name the file. Without any sort of directory declaration.
20
Q
How do you link to a file that is in a child folder?
A
for a child folder, use the name of the folder, followed by a forward slash with the name of the file.
21
Q
How do you link to a grand child folder?
A
Use the name of the child folder, followed by a forward slash, and then use another forward slash with the name of the grand child folder.
22
Q
How do you link to a file that is in a parent folder?
A
You link to a file that is in a parent folder by using a pair of dots “..” then follow those dots with a forward slash, plus the name of the file.
23
Q
How do you link to a file that is in a grand parent folder?
A
You use a pair of dots followed by a forward slash, and then you use another pair of dots followed by a forward slash, and then you name the file in question that you wish to access.
24
Q
What are the six primary HTML elements for creating tables?
A
(table creator). row creator. column creator (td stands for ‘table tada’, is used to represent the heading of either a column or a row, , tbody> and
https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics
pgs 126-132 and 135-136 Duckett
25
What is the purpose of an HTML form element?
It is meant to receive data from the user. It receives this data in different shapes.
26
Give five examples of form control elements.
Text input, Password Input, Text Area, Radio Buttons, Checkboxes, Dropdown Boxes.
144-164 in Duckett
27
Give three examples of 'type' attributes for input elements.
size, type and name.
an additional one is 'max length"
28
Is an HTML input element a block element or an inline element?
It is a block element.
29
What purpose does thead serve?
thead sits inside of the table element. The purpose it serves is it serves as a parent element for the headings of the document.
30
What purpose does tbody serve?
The body of the table should sit inside of the tbody element.
31
What are two types of data that ideally suited for being displayed in a table?
Calls that have taken place over different types of hardware in a call center, Census data for the population of the United States throughout its' history.
32
Name three different types of values you can use to specify colors in CSS
RGB Values, HEX Codes, and Color Names
33
What is the default flex-direction of a flex container?
row
34
What is the default flex-wrap of a flex container
By default, they will all try to fit on a single line.
What is intended by this question I believe, is row.
35
Name at least two unites of type size in CSS
This is not for font alone, but a measurement of units generally and can include fonts. It is a general unit of measurement for computer screens.,
pixels, percentages and EMS
36
What CSS property controls the font used for the text inside of an element
font-family
37
What is a psuedo-class
A CSS pseudo class is a keyword added to a selector that specifies a special state of the selected elements.
For example, :hover can be used to change a button's color when the user's pointer overs over it.
https: //trello.com/c/c3IuWQG4/70-psuedoclasses
https: //developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
38
What are CSS pseudo-classes useful for?
Psuedoclasses let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited - for example) the status of its content (:checked) or the position of the mouse (like we used in the exercise (:hover)
39
What is the syntax of a psuedo class?
They are named after the element they are applied to with a colon.
40
What CSS properties make up the box model?
What we mean by this, is the spacial relationship between the box, and the contents within it and around it.
There are three main ones: Border, Margin and Padding.
Border is the visual aid that allows the user to see and comprehend the box.
Margin is the 'white-space' that the programmer can program the computer to respect, so that the box in question is respected in relation to other objects so that the website is visually appealing and clear
Padding is the relationship between the contents within the box and the border.
41
Which CSS property pushes boxes away from eachother?
The margin property causes boxes to 'push away' from eachother, or to respect each others space.
42
Which CSS property adds space between a box's content and its' border?
the padding
43
When would you use flex basis over width
My understanding is, you would use this when you need to dynamically control the width of each inline item within a row.
"flex-basis doesn't always apply to width. When flex-direction is row, flex-basis controls width. But when flex-direction is column, flex-basis controls height."
Key Differences
Here are some important differences between flex-basis and width/height
flex-basis applies only to flex-items - flex containers (that aren't also flex itmes) will ignore flex-basis but can use width and height.
- flex-basis works only on the PRIMARY AXIS of the flex container. For example, if you8're in flex-=direction: column, the width property would be needed for sizing flex-items horizontally.
flex-basis has no effect on absolutely-positioned items. Width/height properties would be necessary to arrange their respective width and height.
https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width
44
What is the default position property of HTML elements
It is static (as opposed to relative)
45
How does setting the position: relative on an element affeect document flow?
It does not, since that is already the dfefault setting from a document flow;
46
How does setting position: relative on an element affect where it affects where it appears on the page
Relative positioning:
This moves an element from the position it would be in normal flow. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow.
"Relative positioning moves an element in relation to where it would have been in normal flow." - that is to say, you are affecting its position in relation to its DEFAULT position. So if it is a paragraph element, and it is the second paragagrpah in a sequence of three paragraphs, you are moving the SECOND paragraph from it's normal position within its' block.
47
How does setting position: absolute on an element affect document flow?
The document acts like it does not exist, it no longer affects the position of other documnets.
48
How large is an element?
It is only as large as it's content, unless you say otherwise.
49
What is the purpose of a variable?
Javascript variables are for container data values. It also allows us to have persistent variables throughout time.
50
How do you declare a variable in javascript
var, let, const then the name of the variable, followed by an equal sign than the value of the variable.
var is the one I should plan on using throughout the course.
51
How do you initialize a variable in Javascript
Var, let or const.
52
What characters are allowed in a variable name?
The first character can be a dollar sign or an underscore, and any valid letter of the alphabet or an numeric character.
They are not allowed to start with a number.
53
What does it mean to say that a variable name is case sensitive?
A variable that starts with a capital and a variable that starts with a lower case will be different variables, and will store different values.
54
What does the = operator mean in javascript?
It is the assignment operator.
55
How do you update the value of a variable?
You use the assignment operator, and assign it a different value.
56
The difference between null and undefined is
In computer science, null is intentional, it represents an non-existent object or address.
Wheras Undefined is the default value of all explicitly declared variables where there is no value assigned to them.
"This is to say, the intention behind it."
57
What is a label?
a CONSOLE.LOG label is simply a short string that describes the variable or value that is being logged,.
58
Why are console.log labels helpful?
They help the developer understand what value is currently being printed.
59
Give five examples of JavaScript Primitives
Strings, Numbers, Null, Undefined, Booleans
60
What is the purpose of a string
To store and manipulate text.
61
What is the purpose of a number
To store a number, or a value that corresponds to what the number indicates.
62
What makes a simple data type a simple data type?
Something called 'prototypal inheritance.'
We'll return to this later.
63
When do you want to use undefined?
Never. You never want to use undefined. It is good when you encounter it becuase you know you haver a typo.
64
What is string concatentation?
Is the process of combining strings.
65
What purpose does the (+ plus) serve in JavaScript?
It allows us to add two numbers together, or combine two strings.
66
What data type is returned by comparing two values?
true or false.
a boolean.
67
What does the += value do?
It adds the variable to the original value.
68
(JavaScript) What is a statement?
It is a body of work that has an outcome. It can be multiple lines of code, or it can be a single line of code.
69
What are the two ways to get or update the value of a property?
That is to say, within an object.
There are two ways to do this, through either dot notation, or bracket notation.
70
how do you remove a property from an object?
The delete keyword.
71
What are arrays used for?
Storing data.
72
Describe array literal notations
Square brackets, the values separated by commas.
73
what is the length property of an arrray
It is the number of items in an array.
74
How do you calculate the last index of an array
array.length - 1
75
What is a function?
It is a repeatable block of code that is designed to perform a specific set of actions or tasks on data.
76
Describe the parts of a function call
function name, parenthesis, and then any arguments that the function calls for.
77
When comparing them side by side, what is the difference between the call and the definition?
Function call, you make use of the code. IN the definition, you are articulating how the function call should behave when it is called/
78
What is the difference between a parameter and an arguement?
A parameter is part of a function definition, and a argument is used in a function call.
79
Why are function parameters useful?
They allow us to transform data, and give the function information that we want it to recieve.
80
What two effects does a return statement have on the behavior of a function?
It causes the function to 'return' something to the section of code that it was called in, and it causes the function to stop running.
81
Why do we log things to the console?
So we can learn what is going on and make sure wha twe thihnk is going on is actually happening.
82
What is a method?
It is a function stored within an object.
83
How is a method different from a function?
A method is attached to an object, whereas a function is independent.
With a method you have to say where it is coming from.
84
Is the return value of a function or method useful in every sitatuion?
No.
85
How many array methods are there?
There are a lot. Over twenty that I saw.
86
What is the purpose of an if statement?
Making decisions and telling the code what to do for us.
87
Is else required in order to use an if statement.
No it is not required.
88
Describe the syntax of an if statement.
if declaration - declaration of condition.
89
Three logical operators
Logical and, logical or, and logical not.
90
How do you compare two different expressions in the same statement?
Use the logical operators.
91
What is the purpose of a loop?
A loop instructs the code to run a specific number of times.
92
What is the purpose of a condition in a loop?
The condition lets you know when it is time for the loop to stop running.
93
What does 'iteration' mean in the context of a loop?
It is a single rotation of the loop.
94
When does the condition expression of a while loop get evaluted?
It executes before it.
95
When does the final expression of a for loop get evaluated?
After each rotation of the loop. It thereafter happens first each time each time the loop evaluates.
96
Besides a return statement, which statement will cause a function to stop running?
break.
97
What does the increment operator do?
It increments a variable by 1.
98
How do you iterate through the keys of an object?
a for in loop.
99
What are the four components of cascade?
They are "last Rule", "Specificity", Important" and "inheritance"
100
What does the term "source order" mean with respect to CSS?
"the order that your CSS rules are written in your stylesheet"
101
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
This is done through inheritance. You can force a lot of properties to inherit values from their parent elements by using 'inherit' for values of the properties.
102
Why is using !important considered bad practice?
This is because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the important rule are applied to the same element, the declaration with a greater specificity will be applied.
103
When is inheritance generally used?
It is generally a text related phenomenon.
104
What is a 'model'
A model is a saved representation of the DOM that is stored in the computers memory.
105
Which "document" is being referred to in the phrase document object model?
They are the individual elements, classes and id's that makje up
106
What does object refer to?
It refers to the nodes in the dom tree.
It is a group of objects, methods and data. They are a datatype.
107
What is the DOM tree?
It is the entire tree, each node, and all of its attributes.
108
What is a dom tree?
The backbone of an HTML document is tags.
According to the Document Object Model, every HTML tag is an object. Nested tags are "children" of the enclosing one. The text inside a tag is an object as well.
All these objects are accessible using Javascript, and we can use them to modify the page.
For example, document.body is the object representing the tag.
109
Give two examples of document objects that select individual elements from the dom.
querySelector(), getElementsByID()
110
Give example of an exmaple
querySelectorAll(), GetElementsByClass()
111
What is a node list?
It is merely a list of nodes.
112
What is the purpose of events and event handling?
The purpose of an event is to say to the browser, 'this just happened'. The script can then respond to these events.
-to make the website more dynamic and help users understand what is happening./
113
What do square brackets ( [] ) mean in function and method syntax documentation?
They allow us to understand the ordering of different arguments within the context of a particular method, and whether or not it is a sine qua non of the function, or whether it is an optional arguement.
114
What is a callback function?
A "Callback" function is any function that is called by another function which takes the first function as a parameter.
A lot of times, a 'callback' function is called when something happens.
they are functions being passed around as data.
https://stackoverflow.com/questions/9596276/how-to-explain-callbacks-in-plain-english-how-are-they-different-from-calling-o/9652434#9652434
115
What object is passed into an event listener callback when the event fires?
A callback function. This is what causes the 'event' or action to be performed as a consequences of the actual occurence of a behavior within the browser. It is the 'second' event domino in the chain, not the first.
116
What is the event.target?
The event.target is the html 'element' that is targeted in order to trigger the object that triggers the event.
117
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
In one case the function is being invoked, in the second it is not.
118
Should anything you do as a developer be done on faith?
No
119
What method of element objects lets you set up a function to be called when a specific type of event occurs?
Add event listener.
120
Do you want to call the function in the case of callback functions with event handlers?
No leave it to the browser to do so.
121
How do you update the CSS class attribute of an element using JavaScript?
You use the 'className' function - usually on a variable.
122
What is the className property of element objects?
A string value.
123
Is the event parameter of an event handler always useful
No it is not useful,
124
Why is storing information about a program in variables better than only storing it in the DOM?
Because the code is clearer when it is stored within the javascript itself, rather than accessing it within the dom.
also it is more efficient.
125
What does the transform property do? (CSS)
It allows you to transform or translate an element. CSS elements are rendered on a cartesian plane. This allows us to affect how it is rendered within the context of that cartesian plane.
126
Can image elements have children?
No, they cannot.
127
the transition property is shorthand for which four CSS properties?
'transition-property', 'transition-duration', 'transition-timing-function' and 'transition-delay'
128
What event is fired when a user places their cursor in a form control.
It is the 'focus' function.
129
What event is fired when a user's cursor leaves a form control?
the 'blur' function.
130
What event is fired when a user clicks the "submit" button within a forM?
it submits
131
What does the prevent default do?
The event default method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would.
132
What does submitting a form without prevent default do?
It submits it through a URL.
133
What property of a form element object contains all the forms controls?
it is handleded in the 'element' property of the variable that it is selected in in the query Selector.
134
What proprety of a form control object gets and sets its value?
the value property.
135
What is one risk of writing a lot of code without checking to see if it works so far?
writing hair balls.
136
What is an advantage of having your console open when writing java script?
So you get real time feedback regarding the functionality of your applicaiton.
137
Give two examples of media features that you can query in an @media rule.
min-width and min-height
138
Which HTML tag is used in to enable responsiveness for mobile devices?
or 'viewport"
139
Does the document.CreateElement() method insert a new element into the page.
No
140
How do you add a new elemment as a child to another element?
You use the append child method on the parent you want to attach it to.
appendChild() method.
141
What do we pass as the arguements aas the element.setAttributes() method
name and value.
142
What steps do you need to take in order to insert a new element into the page?
Create Element.
Sets its Atttribute, (Add on any additional info)
Append it to the parent.
143
What is the text content property of an element object for?
It is to set or get the text content.
144
What are two advantages of defining a functino to do/create something?
It is more efficient, and we can re-use it later.
145
What is event.target? (JavaScript)
The target property of the event interface is a reference to the object onto which the event was dispatched.
the target property can be used in order to implement event delegation.
It is the most directly interacted with element.
146
Why is it possible to listen for events on one element that actually happens to the descendant that is being listened to?
This is because of the order in which the events fire is known as 'event-flow'. And events flow in two directions.
The event starts at the LEAST specific node and flows inward to the MOST specific. So by listening for a user generated event on a parent element, you can ride the event down to the child element.
147
What does the element.closest() method take as its argument and what does it return?
the 'element.Closest' method traverses the element (that the method is being invoked on. So for example $row.closest()) and its parents until it finds a node that matches the provided selector string. It will return either itself or the matching ancestor. If no such element exists - it returns null.
It takes in a string classname - (selector).
var closestElement = targetElement.closest(selectors);
Event Delegation Exercise
https://github.com/Steve-A-Dore/c0321-code-solutions/pull/50
148
How can you remove an element from the dom?
You use the 'remove()' method on a parent, to remove a child. so for example, in the 'dom-event-delegation' exercise we were required to remove the button and span item contained in the '.task-list-item' class. This was stored in a variable and then the method was invoked on the variable.
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
149
If you wanted to insert a new clickable DOM element into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
You could add an event listener to the parent element, which would then ride the event down the DOM all the way to the child element. From there, you would have to perform the following actions.
1. Create the element that you desire to attach to a parent.
2. Then you must set the attributes of the element that you have just created. (using the element.setAttribute() method)
3. Then you must use the element.appendChild() method to append the desired content to the element that you have set up, so that your element is one complete element - so that if you were to console.log it, it would look like a complete 'unit' of HTML work.
4. ) This element which you have created, then must be appended to the actual HTML work as it exists, so that it can then populate the HTML.
150
What is the effect of setting an element to 'display: none"
It conceals the element.
Not only does it do this, but it removes the element from the 'flow' of the document, so that it does not affect other documents in the flow.-
151
What does the element.matches() method take as an argument and what does it return?
It takes the class selector. It brings back a true or false statement.
152
How can we retrieve the value of an elements attribute?
Get attribute/
153
What is JSON
JSON is an extremely common data intercahnge format used to send and store information in computer systems.
It is a text-based data format following JavaScript object syntax. Although it resembles the Javascript Object literal paradigm, many programming languages contain within them the tools to parse out and take apart the data type.
154
What is serialization in Object Oriented Programming?
It is the term of art used to discuss converting binary object into an XML repressentation so that it can then be stored in a database/file or sent across a netwrok in a web service call.
155
CSS Media Query Basic Syntax
@media-type and (media-feture-rule) {
CSS rules go here
}
The simplest medai qquery syntax looks like this.
- A Media type, which tells the browser wwhat kind of media this code is for. (print/screen)
- A media expression, which is a rule, or test, that muust be passed for the contained CSS to be applied.
- a set of CSS rules that will be applied if the test passes and the media type is correc.t
156
How many media types can you specify for CSS and what are they?
ALL, PRINT SCREEN and SPEECH
157
How do you specify width and height in CSS media rules?
The feature that is most often specified in media query rules is viewport width. We can apply CSS if the viewport is ABOVE or BELOW a certain width.
We can also use an exact width - using the MIN-WIDTH, MAX-WIDTH, and WIDTH media features.
These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600PX, you would use the following media query
```
@media screen and (width: 600px) {
body {
color: red;
}
}
```
158
What is a breakpoint in responsive web design?
A breakpoint is a rule that specifies a threshold between a point at which one point ends and another begins
159
What is the advantage of using a percentage width instead of a fixed width (like pixels) for a column class in a responsive layout
in percentage, it is in part a calculation. As a result of which, regardless of the size of its parent, the size of the class can respond to the parent and thereby be flexible.
160
If you introduce a CSS rule 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 this?
Because the smaller width is for a more specific circumstance than is the general rule.
161
What is JSON?
JSON is an extremely common data interchange format used to send and store information in computer systems.
162
What are serialization and deserialization?
Serialization is a term of art. It is the process of translating a data structure or object state into a format that can be stored or transmitted and reconstructed later - usually in a different computer environment. When the resulting series of bits is reread according to the serialization format, it can be used to create a semantically identical clone of the original object.
163
Window.localStorage
The read-only local storage property allows you to access a storage object for the documents origin. The stored data is saved across the browser sessionsj.
It is different from sessionStorage in that the data gets destroyed when the page session ends.
164
Storage.setItem()
The setItem method of the storage object (interface) when passed. It takes two args, a key name and a value. It will add that keys to the given storage object, or update that keys value if it already exists.
storage.setItem(keyName, keyValue);
165
What does the Window: beforeunload event do?
The beforeunload event is fired when the window, the document and its resources are about to unload. The document is still visible and the event is still cancelable at this point.
This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page. If the user confirms, the browser navigates to the new page, otherwise it cancels the navigation.
According to the specification, to show the confirmation dialog an event handler should call, 'preventDefault()' on the event.
166
How do you store data in local storage?
localstorage.setItem()
167
How do you get items in local Storage?
localStorage.getItem()
168
What is an MVP
it is a minimum viable produdct. It is a version of a product with just enough features to be usuable early by customers who can then provide feedback for future product development.
169
What does software significance mean?
The software is willingly used by a lot of people
the software improves steadily over the long term,.
the software helps one or more businesses make a lot of money.
170
Soft skills
Desirable qualities for certain forms of employment that do not depend on acquired knoowledge: theyu include common sense, the ability to deal with people, and a positive flexible attitude.'
171
Mob programming
is a software development approach where a whole team of developers works on the same thing, at the same time, in the same space, and at the same computer.
172
What is object oriented programming?
is a programming paradigm based on the concept of "objects'", which can contain data and code. Data in the form of fields (often known as attributes or properties) and code, in the form of procedures (often known as methods.)
173
What should you remember about OOP?
Objects can contain both data - as properties and behvaior - as methods.
174
What are the four concepts that underly object oriented programming?
Abstraction, Encapsulation, Inheritance and Polymorphism
175
What is abstraction?
It is the process of removing, physical, spatial or temporal details or attributes in the study of objects or systems to focus attention on details of greater importance - it is similar in natuhre to the process of generalization
- the creation of abstract concepts-objects by mirroring common features or attributes of various non-abstract objects or systems of study - the results of the process of abstraction.
"Abstraction in general, is a fundamental concept in computer science and software development. The process of abstraction can also be referred to as modeling and is closely related to the concepts of theroy and design. Models can also be considered types of abstractions per their generalization of aspects of reality."
What is important about abstraction is that we be able to work with concept products and ideas in simple ways.
176
What is encapsulation
Encapsulation refers to the bundling of data with the methods that operate on that data, or the restricting of direct access to some of an objects components. Encapsulation is used to hide the values or state of a structured data object inside a class, preventing direct access to them by clients in a way that could expose hidden implementation details or violate state invariance maintained by the methods.
177
What is inheritance
Is the mechanism of basing an object or a class upon another object or class
178
Polymorphism
is the provision of a single interface of entities of different types or the use of a single symbole to represent multiple different ypes.
179
What is the definition of a method?
A method is a function which is a property of an object. There are two kinds of methods: Instance method which are built in taks performed by an object instance, or a Static Methods which are tasks that are directly called on an object constructor.
180
What is the defining characteristic of object oriented programming?
Objects can contain both data and behavior.
181
What does API stand for?
Application programming interface
182
What is the purpose of an API?
The purpose of every software API is to give programmers a way to interact with a system in a simplified, consistent fashion. It is an abstraction of the softwares vector points - i.e. its methods, and data entry points, so that a programmer may successfully automate the process by which their application enters data and interacts with another application.
183
What is procedural programming?
It is a programming paradigm where programs are constructed by applying and composing functions.
184
What does scoping prevent?
It prevents a procedure from accessing the variables of other provedures.
Inversely, it also prevents other provedures from accessing the variables of a given procedure.
185
What is this?
This is a reference to the same object that is being referenced WHERE it is being referenced.
186
WHEN is this?
The value of this is determined when the function is called.
187
What is this in JavaScript?
In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. In the global execution, this refers to the the set of properties and values that are within the scope that this is referred to in.
188
What does it mean to say that this is an 'implicit parameter'
What it means is that it is implied without being expressedly stated in the function definition.
189
When is the value of this determined?
The value of this is determined when the function is called.
190
How can you tell what the value of this will be for a particular function or method defintion?
You can look within the current scope, and understand what the largest scope is, and understand what this refers to.
Find where the function is called, and look for an object to the elft of the dot. If you can't see where the function (or method) is called, then you cannot say for sure what the value of this is.
191
HOw is it possible to call methods on strings, objects and arrays even though we don't see those methods defined on the objects?
We use the prototype method attached to that datat type.
192
If an object does not have it's own property or method by a given key, where does JavaScript Look for it?
It looks to its prototyhpe.
193
What kind of inheritance does the JavaScript programming language have?
Prototypal inheritance is the reuse of existing objects and programming paradigms with extended functionality and data types for new purposes.
It is a style of object-oriented programming in which behvaior reuse - known as inheritance, is performed via a process of reusing existing objects that serve as prototypes.
Prototype based programming uses generalized objects, which can then be cloned and extended. Using fruit as an example, a fruit object would represent the properties and functionality of fruit in general. A "Banana" object would be cloned from the "fruit" object and general properties specific to bananas would be appended to it.
194
What does the new operator do?
The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
It does the following things:
- Create a blank, plain JavaScript Object.
- Adds a property to the new object __proto__ that links to the constructor function's prototype object.
- Binds the newly created object instance as the this context
- Returns this if the function doesn't return an object.
195
What property of JavaScript functions can store shared behavior for instances created with new?
the prototype property.
196
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. It returns a boolean value.
This allows us to understand whether the object being tested fits into the chain of objects being tested.
197
Element.innerHTML property. What does it do?
The element property innerHTML gets or sets the HTML markup contained within the element.
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
198
What is a call back function?
A call back function is a function that is passed to another function as an argument.
199
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?
Set timeout function on a document or window object.
200
How can you call a function repeatedly without setting a loop?
the setInterval function
201
What is the default time delay if you omit the delay parameter from the setTimeout or setInterval()
It sets to zero.
202
What do set timeout and setinterval() return?
a timerID
203
What is a client?
It is a 'service-requester' of anykind. Usually a computer, labtop or a pc. Usually it makes requests through an application.
204
What is a server?
It is a provider of a resource or server - usually called a 'server' or database of some kind.
A server host runs one or more server programs, which share their resources with clients. There are different types of servers which perform a variety of functions.
In a nutshell it serves things.
205
Which HTTP method does a browser issue to a web server when you visit a URL?
A get
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET
206
What is a request target?
The request target, usually a URL. It is the place that a request is being made of. It can be a get' post, head or options.
207
What three things are on the start line of an HTTP request message?
Their start line contains three elements:
- an HTTP Method (a verb like, GET, POST, PUT) that describes the action to be performed on the target (usually a URL)
- The Request Target (Usually a URL)
- THE HTTP version, which defines the structure of the reminaing message, acting as an indicator of the expected version to use for the response.
208
What three things are on the start-line of an HTTP response-method?
The start line of an HTTP response, called the status line, contains the following information:
- the protocal version
- A status code (200, 404, 302)
- A status text: a brief, purely informational textual description of the status code to help a human understand the message,.
209
What are HTTP headers?
HTTP headers let the client and the server pass additional information with an HTTP request or response. An HTTP header consists of case-insensitive name following by a colon then by its value. Whitespace before the value is ignored.
proprietary headers have historically been used with an X-prefix.
They are a place to store additional informatoin about the request responnse.
210
Where would you go if you wanted to learn more about a sopecific HTTP header?
It seems there are four types of headers:
- General Headers: Apply to both requests and responses, but with no relation to the data transmitted in the body.
https: //developer.mozilla.org/en-US/docs/Glossary/General_header
- Request Headers: Contain more information about he resource to be fetched, or about the client requesting the resource.
https: //developer.mozilla.org/en-US/docs/Glossary/Request_header
- Response Headers: Hold additional information about the response, like its location or about the server providing it.
https: //developer.mozilla.org/en-US/docs/Glossary/Response_header
- Entity Headers: These contain information about the body of the resource, like its content length or MIME type.
https: //developer.mozilla.org/en-US/docs/Glossary/Entity_header
211
Is a body required for a valid HTTP request or response message?
No, it does not appear to me that a body is contained in a delete request.
212
What are the three things in a response message?
Version, status code, status explanatory trext.
213
What is Ajax?
Ajax is a technique for loading data into part of a page without having to refresh the entire page. The data is often sent in a format called JSON.
214
What does the AJAX acronym stand for?
It stood for Asynchronous JavaScript and XML.
215
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
I'm not sure. I think it is - the browser responds to the request by firing an event which in turn is responded to by the browser.
It is the response.
load events are fired.
216
Which object is built into the browser for making HTTP requests in JavaScript?
the XMLHTTPRequest object.
217
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
It is inheritance.
218
What is a code block? What are some examples of a code block?
In JavaScript, codeblocks are denoted by curly braces. {}.
It is a unit of code designed to perform some operation.
219
What does block scope mean?
It means a particular unit of code in which a said object, array or variable is 'active' or accessible.
220
What is the scope of a cariable declared with CONST or let?
The are operative within the immediate code block within which they are declared.
221
What is the difference between 'const' and 'let'
You can redeclare the value of let and you cannot with const. Additionally, you can initialize let without declaring it. With const this is impossible.
222
What is it possible to .Push() a new value into a const variable that points to an array?
Because the rules and laws that apply to reassignment only apply to the first layer of the const variable, and not to the subsequent values WITHIN it. These can be reassigned like regular variables.
223
How should you decide on which declaration to use?
If something is going to be CONST, that means you will not be reassigning it.
If you plan on changing the value, then assign it to let
224
What is destructuring, conceptually
It is the successful reassignment of objects to a more local scope variable so that syntactically the code is not as large.
225
What is the syntax for array destructuring
the declaration of the object, with the keys assigned as variables, and then the assignment operator being used to assign the object BACK to the original object, so that the values of the new variables correspond to the original keys.
Here is the documentation on destructering in MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
226
How can you tell what the difference between desctrructuring and creating object/array literals?
Look at the type of brackets that are around the newly created variables.
227
What is the syntax for defining an arrow function?
the MINIMAL syntax for an arrow function seems to be () =>
228
When an arrow functions body is left without curly braces, what changes in its functionality?
If you leave out the curly braces, it must be a single expression. When it returns, it MUST result it an value.
229
How is the value of this determined within an arrow function?
In an arrow function, the this argument is lexical, which means use the value of THIS from the proceeding object. So effectively THIS has no value within the context of the arrow function.
An arrow doesn't have it's own this value.
This within an arrow function is determined at the call time of the function. Or within the lexical scope @ call time.
230
What is the CLI?
It is the command line interface
231
What is a GUI?
A graphical user interface
232
What does pwd do?
It tells the user what directory they are in.
233
what does touch do?
makes a file
234
what does mkdir do?
make a directory
235
how do you see hidden files?
ls -a
That is "LS -a"
236
What does rm do?
It removes the folder. You must type in 'rm' and then the name of the folder.
237
what does git remote -v do?
It allows us to know what repository we're hooked into.
238
What is node.js?
Its a program that allows javascript to be run outside of the browser
239
What is a REPL?
Is a simple, interactive computer programming environment that takes single user inputs, executes them and returns the result to the user.
240
When was node.js created?
2009
241
What is a computer process?
a process is the instance of a computer program that is being executed by one or many threads.
242
Why should a full stack web developer know that a ccomputer process exists?
A developer should know that a program runs linearally. It's possible to change that - if for example a process takes too long. A developer should be aware of how the processes strain the hard drive of a consuming machine, so that he can devote the proper CPU power to the proper task at the proper time and to ensure that other tasks are not being run concurrently.
A developer should know about processes so they know how best to manage and run their application.
243
What is preemption?
preemption is the process that allows a computer to switch between tasks that are being executed without having to wait for each task to finish.
The front end and back end of an application are two different processes.
244
What is the process object?
The process object is a global that provides information about, and control over, the current node.js process. As a global, it is always available to node.js applications without using require()
245
what is process.argv
The process.argv property returns an array containing the command line arguments passed whne node.js process was launched. The first element will be process.execPath.
246
How do you access the process object in Node.js?
You just type it in. It is global.
247
What is the data ty pe of process.argv
It is an array of strings.
248
What is a JavaScript Module?
It is a file. It can load other js.files
249
What values are passed into a Node.js Modules local scope?
exports, require, module, __filename, __dirname.
Some of these can come through with particular variations it looks like as well.
There are some values that have been depracated like:
require.extensions.
250
Give two examples of truly global variables in a node.js program
Process and Console.
251
What is the purpose of module.exports in a Node.js module?
It allows us to transfer the functionality of one javascript module to another.
It allows us to transfer variables from one file to another.
252
How do you import functionality into a Node.js module from another node.js module?
Using the require function, and then specifying the name of the module that you are going to import.
253
What is the event loop in javascript?
It is the system that manages the catalogue of tasks to be run, and pushes the next task to
254
What is a directory?
It is a location that contains files.
255
What is a relative relative file path?
It is a location to a certain location in the computer based off of where you are currently.
256
What is an absolute file path?
An absolute file path is a complete address of where the directory is.
257
What module does node require in order to manipulate directories?
The fs module. Or the file system module.
258
What method is available in the Node.js fs module for writing data to a file?
the Writefile method.
259
Are file operations using the fs module synchronous or asychronous?
They are asychronous.
260
What is a server
It takes a request, and sends it back to a client.
261
Which HTTP method does a browser issue to a web server when you visit a URL
It sends a GET request.
262
What is on the first line of an HTTP request
the HTTP protocal
263
What is on the first line of an HTTP response message
protocal version, status code, status text
264
What are HTTP headers?
HTTP headers let the client and the server pass additional information with an HTTP request or response. An HTTP header consists of its case-insensitive name followed by a colon (:), then by its value. Whitespace before the value is ignored.
265
What is NPM?
NPM is three things:
- NPM is the NPM website. It is how to set up a profile, manage other aspect of NPM experiences.
- It is the CLI interface, which allows users to ADD, UPDATE and remove individual packages from the NPM code database to their individual softrware programs.
- it is a registry. Which is just a large database of JavaScript software and 'meta-information' surrounding that software. My understanding of meta information is that those are just files that articulate the purpose of what those files do.
266
How can you create a package.json
npm init --yes
267
What is a dependency and how do you add one to a package?
a dependency is a file that contains functions or classes that are required by another piece of software in order to function. The Bank software we wrote was an example of that.
If you have to install a package into another package, it looks like you just say, "NPM install" or NPM ADD ____ to BLANK" or NPM ADD ___ : _____
268
What happens when you add a dependency to a package with NPM?
The following things happen:
- Your directory within node modules is changed to reflect the additional files that were added as a consequence of the dependency you added.
- There is additional functionality within your program as a result of those files that was added.
- The 'package.json' file will be updated to reflect the change within the context of the dependencies object.
269
How do you mount a middle ware with an express application?
You use the 'use' method. so it would be app.use()
270
Which object does an express application pass to your middleware to manage the request
request and response.
271
What is a package?
It is a directory. That contains other peoples code.
272
What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?
application.json
273
What is PostgreSQL
It is a 'powerful, free, open source relational database management system. It is often cited as the most advanced open source database of its kind and is well liked by the developer community.' For its robust feature set, standards, compliance and reliablity.
274
What are some other Relational Database Management Systems?
MongoDB, Neo4j.
275
What are some advantages of learning a relational database?
They are easy to use, easy to understand, and there is little to no data curroption.
276
Architectural Fundamentals
The following processes existing a cooperate to allow a program to successfully store data from an application.
- A server process, which manages the database files, accepts connections to the database from client applications, and performs database actions on behalf of the clients. The database server program is called POSTGRES
- The user's client, (a front end application) that wants to perform database operations. Client applications can be very diverse in nature: a client can be very diverse in nature. A client could be a text-oriented tool, a GUI, a web server that accesses the database to display web pages, or a specialized database maintenance tool. Some client applications are supplied with the PosteGreSQL distribution; most are developed by users.
277
What is a database schema?
Is an abstract design that represents the storage in a database. It describes both the organization of data and the relationship between tables in a given database.
It is an abstraction that articulates the entirety of all the relationships that can possibly exist, or that don't exist, between data in a database framework. As long as they are remotely connected.
278
How do you create a database in postgresql
'createdb mydb'
279
How do you add a row to a SQL utable?
insert into "products" ("name", "description", "price", "category")
values ('Ostrich Pillow', 'Feel comfy and cozy!', 99, 'self care');
280
What is a tuple?
a list of values is referred to as a tuple.
281
How do you add multiple rows?
In the values statement, you enclose any insert statement (tuple) in quotes. To add more than one insert statement at a time, all you do is add a comma after the parenthesis around the tuple, and then you insert a comma, and then you add another parenthetical tuple.
282
How do you get back the row being inserted into a table without a separate select statement?
By adding a 'returning *' to the end of the query.
283
How do you update rows in a database?
By starting the query with an 'update' statement, and then specifying at least what sort of information you want to add, and into what column. If not more information.
284
Why is it important to include a where clause in your update statements?
So you don't update every row in the table.
285
What are examples of some aggregate functions?
count, sum
286
What is the purpose of the group by clause?
it is used to combine aggregate information together.
287
What are the three states a promises can be in?
Pending, fulfilled or rejected.
288
How do you handle a fulfilled promise?
You chain it into a 'then' function and then follow through on the consequences or it. Whatever they may be.
You handle it with the 'then' method.
289
How do you handle a rejected promise?
You chain a 'catch' function and then follow through with any appropriate consequences of it.
290
What is array.prototype.map useful for?
It is useful for altering an array and then returning it after having performed some action on it.
291
What is array.prototype.reduce useful for?
It is useful for constraining large amounts of information down to a single, workable element.
292
What is webpack?
Webpack is an opensource javascript modeule bundler. It is made primarily for Javasciprt, but it can transform front-end assets such as HTML, CSS and images if the corresponding loaders are included.
Webpack takes modules with dependencies and generates static assets representing these modules.
Its a way to bundle files for javascript.
293
How do you add a devDependency to a package?
npm install ______ --save-dev (although this arg is a default and is not required.)
294
What is an NPM script
NPM scripts are scripts. Scripts are used to automate repetitive tasks. For example, building projects,
Scripts are used in deleting temporary files and folders, etc..
They are written as JSOn key value pairs where the key is the name of the script and the value contains the the script you want to execute.
Its a way to bundle shell commands and automate tasks.
295
How do you execute webpack with NPM run?
npm run ____ name of file.
296
How are ES Modules different from CommonJS modules?
ES modules are more compact.
297
What kind of modules can Webpack support
common modules and AMD
(started off as common JS.
298
What is react?
React is an open source, front end, javascript library for building user interfaces or UI components.
299
What is a react element?
A react element is any individual visual feature that is visually represented within the DOM.
An object that describes an HTML element.
300
How do you mount a react element to the DOM?
you must first hook your initial element to an element on the real dom.
You must then create the element. You must then render the element by using the render function with the created element argument.
301
What is babel?
Babel is a toolchain that is mainly used to convert EXMA script 2015+ code into backwards compatible version of javascript.
- It changes syntax.
- It will polyfill features that are missing in your target environment.
- Source code transofmrs.
and more.
302
What is JSX and why is it used?
iTS AN EXTENSION OF JAVASCRIPT. IT PROCESSES THINGS THAT ARE NOT NORMALLY A PART OF JAVASCRIPT.
303
Why must the
It needs to be imported because it is an extension o f react.
304
How can you make webpack and babel work together?
By adding the jsx plugin into babel.
305
What are React Components?
Components let you split the UI into independent, reusable pieces, and think of and use each piece in isolation.
Conceptually, components are like Javascript functions, they accept arbitrary inputs, called props, and return React elements describing what should appear on the screen.
306
How do you define a function component in react
You define it like a regular javascript function
You need to pass it props.
It must start with a capital letter in the definition.
307
How do you mount a component to the DOM?
Render method.
first arg, put the type. second arg, query selector.
308
What are props in react?
Props are data that are consumed as HTML attributes?
309
How do you pass props to a component?
Props are passed as an object.
310
How do you write JavaScript expressions in JSX?
You write them within squiggely brackets so they can be properly evaluated.
311
What is the purpose of state in react?
It is to keep track of its own props (or state) so that it can be dynamically managed based off of what is contained within state.
312
What array method is commonly used to create a list of React elements?
The map method.
313
What is the best value to use as a key prop when rending lists?
A scopically unique numerical value. This way, react can see when the value has been changed.
314
What are controlled components?
Controlled components typically maintain their own state and update based on user input. In reac,t 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 the single source of truth.
315
What two props must yolu hand two a component in order for it to be a controlled component?
on change, value.
316
what does express.static return?
it returns a middleware function that is passed to app.use
317
what is the local __dirName variable?
Directory name of the current module
318
what does the join method do?
It joins all the differentt path segments together as one file path.
319
What is the fetch method?
The fetch method provides an API interface for fetching resources.
320
What does the fetch method do?
Fetch provides a generic definition of request and response, This will allow developers to use them whenever they are needed in the future, whether its for service requests, cache APIs, and other similar things that handle or modify requests and responses.
321
Discuss Fetch
Fetch takes one mandatory argument - the path to the resource which contains the information you want to fetch.
It returns a promise that will resolve into a response to that request.
It can also be passed an init option object as a squen argument. This can contain information like
the method of the request (GET, POST etc.., HEADERS, BODY and etc..)
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters
322
What is a JSX filetype?
JSX is an XML/HTML like syntax used by React that extends EXMAScript so that XML/HTML like text can co-exist with JavaScript/React code. The sytax is intended to be used by preprocessors (transpilers like babel) to transform HTML like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.
Basically, by using JSX you can write a concise HTML/XML- like structure in the same file as you write javascript code. Then babel will transform these expressions into actual JavaScript code. unlike the past, instead of putting JavaScript into HTML, JSX allows you to put HTML into JavaScript.
