HTML Flashcards

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Where do you put visible content about the HTML document?

A

In the body.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Give an example of Five HTML tags.

A

h2, img, b, i, u

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Is an HTML list a block element or an inline element

A

An HTML list is a block element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What HTML tag is used to link to another website?

A

the Anchor tag.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How many types of relative links are there?

A

There are 5 types of relative links.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What is the purpose of an HTML form element?

A

It is meant to receive data from the user. It receives this data in different shapes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Give five examples of form control elements.

A

Text input, Password Input, Text Area, Radio Buttons, Checkboxes, Dropdown Boxes.

144-164 in Duckett

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Give three examples of ‘type’ attributes for input elements.

A

size, type and name.

an additional one is ‘max length”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Is an HTML input element a block element or an inline element?

A

It is a block element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What purpose does thead serve?

A

thead sits inside of the table element. The purpose it serves is it serves as a parent element for the headings of the document.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

What purpose does tbody serve?

A

The body of the table should sit inside of the tbody element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

What are two types of data that ideally suited for being displayed in a table?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Name three different types of values you can use to specify colors in CSS

A

RGB Values, HEX Codes, and Color Names

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

What is the default flex-direction of a flex container?

A

row

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

What is the default flex-wrap of a flex container

A

By default, they will all try to fit on a single line.

What is intended by this question I believe, is row.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

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.,

A

pixels, percentages and EMS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

What CSS property controls the font used for the text inside of an element

A

font-family

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

What is a psuedo-class

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

What are CSS pseudo-classes useful for?

A

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)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

What is the syntax of a psuedo class?

A

They are named after the element they are applied to with a colon.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

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.

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

Which CSS property pushes boxes away from eachother?

A

The margin property causes boxes to ‘push away’ from eachother, or to respect each others space.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

Which CSS property adds space between a box’s content and its’ border?

A

the padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

When would you use flex basis over width

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

What is the default position property of HTML elements

A

It is static (as opposed to relative)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

How does setting the position: relative on an element affeect document flow?

A

It does not, since that is already the dfefault setting from a document flow;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

How does setting position: relative on an element affect where it affects where it appears on the page

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

How does setting position: absolute on an element affect document flow?

A

The document acts like it does not exist, it no longer affects the position of other documnets.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

How large is an element?

A

It is only as large as it’s content, unless you say otherwise.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

What is the purpose of a variable?

A

Javascript variables are for container data values. It also allows us to have persistent variables throughout time.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

How do you declare a variable in javascript

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

How do you initialize a variable in Javascript

A

Var, let or const.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

What characters are allowed in a variable name?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

What does it mean to say that a variable name is case sensitive?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

What does the = operator mean in javascript?

A

It is the assignment operator.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

How do you update the value of a variable?

A

You use the assignment operator, and assign it a different value.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

The difference between null and undefined is

A

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.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q

What is a label?

A

a CONSOLE.LOG label is simply a short string that describes the variable or value that is being logged,.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
58
Q

Why are console.log labels helpful?

A

They help the developer understand what value is currently being printed.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
59
Q

Give five examples of JavaScript Primitives

A

Strings, Numbers, Null, Undefined, Booleans

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

What is the purpose of a string

A

To store and manipulate text.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
61
Q

What is the purpose of a number

A

To store a number, or a value that corresponds to what the number indicates.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
62
Q

What makes a simple data type a simple data type?

A

Something called ‘prototypal inheritance.’

We’ll return to this later.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
63
Q

When do you want to use undefined?

A

Never. You never want to use undefined. It is good when you encounter it becuase you know you haver a typo.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
64
Q

What is string concatentation?

A

Is the process of combining strings.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
65
Q

What purpose does the (+ plus) serve in JavaScript?

A

It allows us to add two numbers together, or combine two strings.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
66
Q

What data type is returned by comparing two values?

A

true or false.

a boolean.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
67
Q

What does the += value do?

A

It adds the variable to the original value.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
68
Q

(JavaScript) What is a statement?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
69
Q

What are the two ways to get or update the value of a property?

That is to say, within an object.

A

There are two ways to do this, through either dot notation, or bracket notation.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
70
Q

how do you remove a property from an object?

A

The delete keyword.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
71
Q

What are arrays used for?

A

Storing data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
72
Q

Describe array literal notations

A

Square brackets, the values separated by commas.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
73
Q

what is the length property of an arrray

A

It is the number of items in an array.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
74
Q

How do you calculate the last index of an array

A

array.length - 1

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
75
Q

What is a function?

A

It is a repeatable block of code that is designed to perform a specific set of actions or tasks on data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
76
Q

Describe the parts of a function call

A

function name, parenthesis, and then any arguments that the function calls for.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
77
Q

When comparing them side by side, what is the difference between the call and the definition?

A

Function call, you make use of the code. IN the definition, you are articulating how the function call should behave when it is called/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
78
Q

What is the difference between a parameter and an arguement?

A

A parameter is part of a function definition, and a argument is used in a function call.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
79
Q

Why are function parameters useful?

A

They allow us to transform data, and give the function information that we want it to recieve.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
80
Q

What two effects does a return statement have on the behavior of a function?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
81
Q

Why do we log things to the console?

A

So we can learn what is going on and make sure wha twe thihnk is going on is actually happening.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
82
Q

What is a method?

A

It is a function stored within an object.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
83
Q

How is a method different from a function?

A

A method is attached to an object, whereas a function is independent.

With a method you have to say where it is coming from.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
84
Q

Is the return value of a function or method useful in every sitatuion?

A

No.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
85
Q

How many array methods are there?

A

There are a lot. Over twenty that I saw.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
86
Q

What is the purpose of an if statement?

A

Making decisions and telling the code what to do for us.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
87
Q

Is else required in order to use an if statement.

A

No it is not required.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
88
Q

Describe the syntax of an if statement.

A

if declaration - declaration of condition.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
89
Q

Three logical operators

A

Logical and, logical or, and logical not.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
90
Q

How do you compare two different expressions in the same statement?

A

Use the logical operators.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
91
Q

What is the purpose of a loop?

A

A loop instructs the code to run a specific number of times.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
92
Q

What is the purpose of a condition in a loop?

A

The condition lets you know when it is time for the loop to stop running.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
93
Q

What does ‘iteration’ mean in the context of a loop?

A

It is a single rotation of the loop.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
94
Q

When does the condition expression of a while loop get evaluted?

A

It executes before it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
95
Q

When does the final expression of a for loop get evaluated?

A

After each rotation of the loop. It thereafter happens first each time each time the loop evaluates.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
96
Q

Besides a return statement, which statement will cause a function to stop running?

A

break.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
97
Q

What does the increment operator do?

A

It increments a variable by 1.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
98
Q

How do you iterate through the keys of an object?

A

a for in loop.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
99
Q

What are the four components of cascade?

A

They are “last Rule”, “Specificity”, Important” and “inheritance”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
100
Q

What does the term “source order” mean with respect to CSS?

A

“the order that your CSS rules are written in your stylesheet”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
101
Q

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
102
Q

Why is using !important considered bad practice?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
103
Q

When is inheritance generally used?

A

It is generally a text related phenomenon.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
104
Q

What is a ‘model’

A

A model is a saved representation of the DOM that is stored in the computers memory.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
105
Q

Which “document” is being referred to in the phrase document object model?

A

They are the individual elements, classes and id’s that makje up

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
106
Q

What does object refer to?

A

It refers to the nodes in the dom tree.

It is a group of objects, methods and data. They are a datatype.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
107
Q

What is the DOM tree?

A

It is the entire tree, each node, and all of its attributes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
108
Q

What is a dom tree?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
109
Q

Give two examples of document objects that select individual elements from the dom.

A

querySelector(), getElementsByID()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
110
Q

Give example of an exmaple

A

querySelectorAll(), GetElementsByClass()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
111
Q

What is a node list?

A

It is merely a list of nodes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
112
Q

What is the purpose of events and event handling?

A

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./

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
113
Q

What do square brackets ( [] ) mean in function and method syntax documentation?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
114
Q

What is a callback function?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
115
Q

What object is passed into an event listener callback when the event fires?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
116
Q

What is the event.target?

A

The event.target is the html ‘element’ that is targeted in order to trigger the object that triggers the event.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
117
Q

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

A

In one case the function is being invoked, in the second it is not.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
118
Q

Should anything you do as a developer be done on faith?

A

No

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
119
Q

What method of element objects lets you set up a function to be called when a specific type of event occurs?

A

Add event listener.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
120
Q

Do you want to call the function in the case of callback functions with event handlers?

A

No leave it to the browser to do so.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
121
Q

How do you update the CSS class attribute of an element using JavaScript?

A

You use the ‘className’ function - usually on a variable.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
122
Q

What is the className property of element objects?

A

A string value.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
123
Q

Is the event parameter of an event handler always useful

A

No it is not useful,

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
124
Q

Why is storing information about a program in variables better than only storing it in the DOM?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
125
Q

What does the transform property do? (CSS)

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
126
Q

Can image elements have children?

A

No, they cannot.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
127
Q

the transition property is shorthand for which four CSS properties?

A

‘transition-property’, ‘transition-duration’, ‘transition-timing-function’ and ‘transition-delay’

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
128
Q

What event is fired when a user places their cursor in a form control.

A

It is the ‘focus’ function.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
129
Q

What event is fired when a user’s cursor leaves a form control?

A

the ‘blur’ function.

130
Q

What event is fired when a user clicks the “submit” button within a forM?

A

it submits

131
Q

What does the prevent default do?

A

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
Q

What does submitting a form without prevent default do?

A

It submits it through a URL.

133
Q

What property of a form element object contains all the forms controls?

A

it is handleded in the ‘element’ property of the variable that it is selected in in the query Selector.

134
Q

What proprety of a form control object gets and sets its value?

A

the value property.

135
Q

What is one risk of writing a lot of code without checking to see if it works so far?

A

writing hair balls.

136
Q

What is an advantage of having your console open when writing java script?

A

So you get real time feedback regarding the functionality of your applicaiton.

137
Q

Give two examples of media features that you can query in an @media rule.

A

min-width and min-height

138
Q

Which HTML tag is used in to enable responsiveness for mobile devices?

A

or ‘viewport”

139
Q

Does the document.CreateElement() method insert a new element into the page.

A

No

140
Q

How do you add a new elemment as a child to another element?

A

You use the append child method on the parent you want to attach it to.

appendChild() method.

141
Q

What do we pass as the arguements aas the element.setAttributes() method

A

name and value.

142
Q

What steps do you need to take in order to insert a new element into the page?

A

Create Element.
Sets its Atttribute, (Add on any additional info)
Append it to the parent.

143
Q

What is the text content property of an element object for?

A

It is to set or get the text content.

144
Q

What are two advantages of defining a functino to do/create something?

A

It is more efficient, and we can re-use it later.

145
Q

What is event.target? (JavaScript)

A

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
Q

Why is it possible to listen for events on one element that actually happens to the descendant that is being listened to?

A

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
Q

What does the element.closest() method take as its argument and what does it return?

A

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
Q

How can you remove an element from the dom?

A

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
Q

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?

A

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
Q

What is the effect of setting an element to ‘display: none”

A

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
Q

What does the element.matches() method take as an argument and what does it return?

A

It takes the class selector. It brings back a true or false statement.

152
Q

How can we retrieve the value of an elements attribute?

A

Get attribute/

153
Q

What is JSON

A

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
Q

What is serialization in Object Oriented Programming?

A

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
Q

CSS Media Query Basic Syntax

A

@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
Q

How many media types can you specify for CSS and what are they?

A

ALL, PRINT SCREEN and SPEECH

157
Q

How do you specify width and height in CSS media rules?

A

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
Q

What is a breakpoint in responsive web design?

A

A breakpoint is a rule that specifies a threshold between a point at which one point ends and another begins

159
Q

What is the advantage of using a percentage width instead of a fixed width (like pixels) for a column class in a responsive layout

A

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
Q

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?

A

Because the smaller width is for a more specific circumstance than is the general rule.

161
Q

What is JSON?

A

JSON is an extremely common data interchange format used to send and store information in computer systems.

162
Q

What are serialization and deserialization?

A

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
Q

Window.localStorage

A

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
Q

Storage.setItem()

A

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
Q

What does the Window: beforeunload event do?

A

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
Q

How do you store data in local storage?

A

localstorage.setItem()

167
Q

How do you get items in local Storage?

A

localStorage.getItem()

168
Q

What is an MVP

A

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
Q

What does software significance mean?

A

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
Q

Soft skills

A

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
Q

Mob programming

A

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
Q

What is object oriented programming?

A

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
Q

What should you remember about OOP?

A

Objects can contain both data - as properties and behvaior - as methods.

174
Q

What are the four concepts that underly object oriented programming?

A

Abstraction, Encapsulation, Inheritance and Polymorphism

175
Q

What is abstraction?

A

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
Q

What is encapsulation

A

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
Q

What is inheritance

A

Is the mechanism of basing an object or a class upon another object or class

178
Q

Polymorphism

A

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
Q

What is the definition of a method?

A

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
Q

What is the defining characteristic of object oriented programming?

A

Objects can contain both data and behavior.

181
Q

What does API stand for?

A

Application programming interface

182
Q

What is the purpose of an API?

A

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
Q

What is procedural programming?

A

It is a programming paradigm where programs are constructed by applying and composing functions.

184
Q

What does scoping prevent?

A

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
Q

What is this?

A

This is a reference to the same object that is being referenced WHERE it is being referenced.

186
Q

WHEN is this?

A

The value of this is determined when the function is called.

187
Q

What is this in JavaScript?

A

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
Q

What does it mean to say that this is an ‘implicit parameter’

A

What it means is that it is implied without being expressedly stated in the function definition.

189
Q

When is the value of this determined?

A

The value of this is determined when the function is called.

190
Q

How can you tell what the value of this will be for a particular function or method defintion?

A

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
Q

HOw is it possible to call methods on strings, objects and arrays even though we don’t see those methods defined on the objects?

A

We use the prototype method attached to that datat type.

192
Q

If an object does not have it’s own property or method by a given key, where does JavaScript Look for it?

A

It looks to its prototyhpe.

193
Q

What kind of inheritance does the JavaScript programming language have?

A

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
Q

What does the new operator do?

A

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
Q

What property of JavaScript functions can store shared behavior for instances created with new?

A

the prototype property.

196
Q

What does the instanceof operator do?

A

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
Q

Element.innerHTML property. What does it do?

A

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
Q

What is a call back function?

A

A call back function is a function that is passed to another function as an argument.

199
Q

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?

A

Set timeout function on a document or window object.

200
Q

How can you call a function repeatedly without setting a loop?

A

the setInterval function

201
Q

What is the default time delay if you omit the delay parameter from the setTimeout or setInterval()

A

It sets to zero.

202
Q

What do set timeout and setinterval() return?

A

a timerID

203
Q

What is a client?

A

It is a ‘service-requester’ of anykind. Usually a computer, labtop or a pc. Usually it makes requests through an application.

204
Q

What is a server?

A

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
Q

Which HTTP method does a browser issue to a web server when you visit a URL?

A

A get

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET

206
Q

What is a request target?

A

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
Q

What three things are on the start line of an HTTP request message?

A

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
Q

What three things are on the start-line of an HTTP response-method?

A

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
Q

What are HTTP headers?

A

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
Q

Where would you go if you wanted to learn more about a sopecific HTTP header?

A

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
Q

Is a body required for a valid HTTP request or response message?

A

No, it does not appear to me that a body is contained in a delete request.

212
Q

What are the three things in a response message?

A

Version, status code, status explanatory trext.

213
Q

What is Ajax?

A

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
Q

What does the AJAX acronym stand for?

A

It stood for Asynchronous JavaScript and XML.

215
Q

What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?

A

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
Q

Which object is built into the browser for making HTTP requests in JavaScript?

A

the XMLHTTPRequest object.

217
Q

An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?

A

It is inheritance.

218
Q

What is a code block? What are some examples of a code block?

A

In JavaScript, codeblocks are denoted by curly braces. {}.

It is a unit of code designed to perform some operation.

219
Q

What does block scope mean?

A

It means a particular unit of code in which a said object, array or variable is ‘active’ or accessible.

220
Q

What is the scope of a cariable declared with CONST or let?

A

The are operative within the immediate code block within which they are declared.

221
Q

What is the difference between ‘const’ and ‘let’

A

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
Q

What is it possible to .Push() a new value into a const variable that points to an array?

A

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
Q

How should you decide on which declaration to use?

A

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
Q

What is destructuring, conceptually

A

It is the successful reassignment of objects to a more local scope variable so that syntactically the code is not as large.

225
Q

What is the syntax for array destructuring

A

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
Q

How can you tell what the difference between desctrructuring and creating object/array literals?

A

Look at the type of brackets that are around the newly created variables.

227
Q

What is the syntax for defining an arrow function?

A

the MINIMAL syntax for an arrow function seems to be () =>

228
Q

When an arrow functions body is left without curly braces, what changes in its functionality?

A

If you leave out the curly braces, it must be a single expression. When it returns, it MUST result it an value.

229
Q

How is the value of this determined within an arrow function?

A

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
Q

What is the CLI?

A

It is the command line interface

231
Q

What is a GUI?

A

A graphical user interface

232
Q

What does pwd do?

A

It tells the user what directory they are in.

233
Q

what does touch do?

A

makes a file

234
Q

what does mkdir do?

A

make a directory

235
Q

how do you see hidden files?

A

ls -a

That is “LS -a”

236
Q

What does rm do?

A

It removes the folder. You must type in ‘rm’ and then the name of the folder.

237
Q

what does git remote -v do?

A

It allows us to know what repository we’re hooked into.

238
Q

What is node.js?

A

Its a program that allows javascript to be run outside of the browser

239
Q

What is a REPL?

A

Is a simple, interactive computer programming environment that takes single user inputs, executes them and returns the result to the user.

240
Q

When was node.js created?

A

2009

241
Q

What is a computer process?

A

a process is the instance of a computer program that is being executed by one or many threads.

242
Q

Why should a full stack web developer know that a ccomputer process exists?

A

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
Q

What is preemption?

A

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
Q

What is the process object?

A

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
Q

what is process.argv

A

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
Q

How do you access the process object in Node.js?

A

You just type it in. It is global.

247
Q

What is the data ty pe of process.argv

A

It is an array of strings.

248
Q

What is a JavaScript Module?

A

It is a file. It can load other js.files

249
Q

What values are passed into a Node.js Modules local scope?

A

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
Q

Give two examples of truly global variables in a node.js program

A

Process and Console.

251
Q

What is the purpose of module.exports in a Node.js module?

A

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
Q

How do you import functionality into a Node.js module from another node.js module?

A

Using the require function, and then specifying the name of the module that you are going to import.

253
Q

What is the event loop in javascript?

A

It is the system that manages the catalogue of tasks to be run, and pushes the next task to

254
Q

What is a directory?

A

It is a location that contains files.

255
Q

What is a relative relative file path?

A

It is a location to a certain location in the computer based off of where you are currently.

256
Q

What is an absolute file path?

A

An absolute file path is a complete address of where the directory is.

257
Q

What module does node require in order to manipulate directories?

A

The fs module. Or the file system module.

258
Q

What method is available in the Node.js fs module for writing data to a file?

A

the Writefile method.

259
Q

Are file operations using the fs module synchronous or asychronous?

A

They are asychronous.

260
Q

What is a server

A

It takes a request, and sends it back to a client.

261
Q

Which HTTP method does a browser issue to a web server when you visit a URL

A

It sends a GET request.

262
Q

What is on the first line of an HTTP request

A

the HTTP protocal

263
Q

What is on the first line of an HTTP response message

A

protocal version, status code, status text

264
Q

What are HTTP headers?

A

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
Q

What is NPM?

A

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
Q

How can you create a package.json

A

npm init –yes

267
Q

What is a dependency and how do you add one to a package?

A

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
Q

What happens when you add a dependency to a package with NPM?

A

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
Q

How do you mount a middle ware with an express application?

A

You use the ‘use’ method. so it would be app.use()

270
Q

Which object does an express application pass to your middleware to manage the request

A

request and response.

271
Q

What is a package?

A

It is a directory. That contains other peoples code.

272
Q

What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?

A

application.json

273
Q

What is PostgreSQL

A

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
Q

What are some other Relational Database Management Systems?

A

MongoDB, Neo4j.

275
Q

What are some advantages of learning a relational database?

A

They are easy to use, easy to understand, and there is little to no data curroption.

276
Q

Architectural Fundamentals

A

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
Q

What is a database schema?

A

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
Q

How do you create a database in postgresql

A

‘createdb mydb’

279
Q

How do you add a row to a SQL utable?

A

insert into “products” (“name”, “description”, “price”, “category”)
values (‘Ostrich Pillow’, ‘Feel comfy and cozy!’, 99, ‘self care’);

280
Q

What is a tuple?

A

a list of values is referred to as a tuple.

281
Q

How do you add multiple rows?

A

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
Q

How do you get back the row being inserted into a table without a separate select statement?

A

By adding a ‘returning *’ to the end of the query.

283
Q

How do you update rows in a database?

A

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
Q

Why is it important to include a where clause in your update statements?

A

So you don’t update every row in the table.

285
Q

What are examples of some aggregate functions?

A

count, sum

286
Q

What is the purpose of the group by clause?

A

it is used to combine aggregate information together.

287
Q

What are the three states a promises can be in?

A

Pending, fulfilled or rejected.

288
Q

How do you handle a fulfilled promise?

A

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
Q

How do you handle a rejected promise?

A

You chain a ‘catch’ function and then follow through with any appropriate consequences of it.

290
Q

What is array.prototype.map useful for?

A

It is useful for altering an array and then returning it after having performed some action on it.

291
Q

What is array.prototype.reduce useful for?

A

It is useful for constraining large amounts of information down to a single, workable element.

292
Q

What is webpack?

A

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
Q

How do you add a devDependency to a package?

A

npm install ______ –save-dev (although this arg is a default and is not required.)

294
Q

What is an NPM script

A

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
Q

How do you execute webpack with NPM run?

A

npm run ____ name of file.

296
Q

How are ES Modules different from CommonJS modules?

A

ES modules are more compact.

297
Q

What kind of modules can Webpack support

A

common modules and AMD

(started off as common JS.

298
Q

What is react?

A

React is an open source, front end, javascript library for building user interfaces or UI components.

299
Q

What is a react element?

A

A react element is any individual visual feature that is visually represented within the DOM.

An object that describes an HTML element.

300
Q

How do you mount a react element to the DOM?

A

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
Q

What is babel?

A

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
Q

What is JSX and why is it used?

A

iTS AN EXTENSION OF JAVASCRIPT. IT PROCESSES THINGS THAT ARE NOT NORMALLY A PART OF JAVASCRIPT.

303
Q

Why must the

A

It needs to be imported because it is an extension o f react.

304
Q

How can you make webpack and babel work together?

A

By adding the jsx plugin into babel.

305
Q

What are React Components?

A

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
Q

How do you define a function component in react

A

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
Q

How do you mount a component to the DOM?

A

Render method.

first arg, put the type. second arg, query selector.

308
Q

What are props in react?

A

Props are data that are consumed as HTML attributes?

309
Q

How do you pass props to a component?

A

Props are passed as an object.

310
Q

How do you write JavaScript expressions in JSX?

A

You write them within squiggely brackets so they can be properly evaluated.

311
Q

What is the purpose of state in react?

A

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
Q

What array method is commonly used to create a list of React elements?

A

The map method.

313
Q

What is the best value to use as a key prop when rending lists?

A

A scopically unique numerical value. This way, react can see when the value has been changed.

314
Q

What are controlled components?

A

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
Q

What two props must yolu hand two a component in order for it to be a controlled component?

A

on change, value.

316
Q

what does express.static return?

A

it returns a middleware function that is passed to app.use

317
Q

what is the local __dirName variable?

A

Directory name of the current module

318
Q

what does the join method do?

A

It joins all the differentt path segments together as one file path.

319
Q

What is the fetch method?

A

The fetch method provides an API interface for fetching resources.

320
Q

What does the fetch method do?

A

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
Q

Discuss Fetch

A

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
Q

What is a JSX filetype?

A

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.