Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Development c0820 > Web Development > Flashcards

Web Development Flashcards

1
Q

What three HTML elements do you use to build a description list?

A

description list
description term
description definition

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

How do you indicate the parent folder in a path?

A

Use ../ to indicate the folder above the current one, then the file name

Example: ../index.html

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

How do you indicate the child folder in a path?

A

Use the name of child folder, then the file name

Example: music/listings.html

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

How do you indicate the grand parent folder in a path?

A

Repeat the ../ to go up two folders, then follow with the file name.

Example: ../../index.html

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

How do you indicate the current folder in a path?

A

Use the file name

Example: index.html

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

What purpose do the thead and tbody elements serve?

A

thead: separate chunks in your table
tbody: the body (information) of table

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

Give two examples of data that would lend itself well to being displayed in a table.

A

Numbers, finances, anything you can put in an excel sheet

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

What is an absolute URL?

What is a relative URL?

A

Absolute URL: When you link to a different website, the value of the href attribute will be the full web address for the site

Relative URL: When you are linking to other pages within the same site, you do not need to specificy the domain name in the URL (example: <a>Home</a>)

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

What attribute do you have to match between a label and an input?

A

for and id

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

What attribute do you have to match between a label and an input?

A

for and id

Example:
Name:

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

What type of input allows you to select multiple items in a dropdown?

A

select

select needs to work with the element

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

What is the action of a form?

A

uses the action attribute to indicate the page that the data is being sent to

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

Give five examples of form control elements.

A 
input
option
text area
select
button
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Give three examples of type attributes for HTML input elements.

A 
password
email
radio
checkbox
text
calendar
phone number
button
color
date
time
file
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Why would we choose specific element types when we have elements such as div and span which can be used for anything?

A

Provide elements that provide content

SEO (search englines)

Accessibility

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

What factors contribute to a well-designed HTML document?

A

Proper formatting (indenting)

Using the correct functions

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

What are the names of the individual pieces of a CSS rule?

A

property, value, selector, declaration

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

How are key/value pairs related to CSS?

A

properties and values

name that correlates to a value

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

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

A

RBG Values
HEX
Color Names

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

Why must you have backup fonts assigned when selecting custom fonts?

A

In case the user does not have that font installed

If the fall back doesn’t work, it will default to New Times Roman

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

What CSS properties make up the box model?

A

padding, border, margin

content is not a CSS property

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

Which CSS property pushes boxes away from each other?

A

margin

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

Which CSS property pushes box content away from its border?

A

padding

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

What are three important considerations for choosing fonts?

A

Readability, cross browsers reading, theme, target market

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

In what situations might you need to apply styling to a single element multiple times in one stylesheet?

A

Mobile responsiveness

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

What is source order?

A

order that CSS rule is written

Styling provided for an element LAST in stylesheet

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

What is inheritance?

A

If the child element does not have a value, it would look to the parent element for a value

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

Why might CSS include the inheritance feature?

A

To set font related properties instead of setting it individually

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

Is inheritance a good tool to use for styling? If so, on what occasions?

A

Yes, because you can simplify setting properties

although its on the weaker side - any direct styling will override it

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

When is ! important a good tool to use?

A

NEVER. It’s used to override a template that you have no control over or for people writing libraries for CSS

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

What is specificity?

A

A browser decide which CSS property values are the most relevant to an element.. then apply it

The more unique, the stronger it’ll be

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

How is specificity calculated?

A

determined by the number of each selector type in the matching selector

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

Why might CSS include this feature?

A

To make things more precise to an element and not worrying about it getting overwritten

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

What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?

A

id
class
element
universal selector

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

What is the CSS Cascade?

A

All the factors to determine what style is applied

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

What are CSS pseudo-classes useful for?

A

adds a specific selector to an element

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

What does the transform property do?

A

allows you to visually manipulate an element by skewing, rotating, translating, or scaling:

(adjust how the element represents itself visually on the page)

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

What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?

A

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

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

What are 3 examples of what can be done with CSS transitions?

A

scale(grow or shrink), rotate, transition delay

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

Are all properties able to be transitioned?

A

no

List of properties that are transition-able: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

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

Why is CSS transition a useful tool?

A

create elements to be more visually pleasing

another way to make website more comfortable for users

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

How do block-level elements affect the document flow?

A

start on a new line in the browser window

examples: h1, p, ul, li

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

How do inline elements affect the document flow?

A

some elements will continue on the same line as neighboring elements

examples: a, b, em, img

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

What are the default width and height of a block-level element?

A

100% (takes up any space available)

height: auto (same as content)
width: 100%

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

What are the default width and height of an inline element?

A

takes up space to accommodate its contents

height: auto (same as content)
width: auto (same as content)

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

What accessibility considerations must be considered when choosing HTML elements?

A

when you want emphasize through a spoken word (such as strong, em, del)

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

What is the difference between display: none and visibility: hidden?

A

display: none = hides an element on a page.. element will not be on the page at all (no spaces, no gaps)
visbility: hidden = hides an element.. all the other elements moves over it (shows a space for the hidden element)

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

What is the difference between the block, inline block, and inline display properties?

A

block: takes up full width
inline: takes up minimum space

inline block: takes up minimum space but with a set height and width

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

What is the initial display property of div s?

A

block

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

What is the difference between the block, inline block, and inline display properties?

A

block: takes up full width
inline: takes up minimum space

inline block: takes up minimum space but with a set height and width (you can resize height and width)

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

Why are CSS resets helpful for cross browser compatibility?

A

its good to be consistent across multiple browsers

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

Why is it important to be mindful of what you reset with your CSS resets?

A

you don’t want to reset everything as it’ll give us a starting point. you just want to get rid of things that will cause problems between different browsers

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

What is an argument against using CSS resets?

A

a lot of the styles are eventually overridden by our main stylesheet, which means that the reset styles unnecessarily add to page load time

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

What is an argument against using CSS resets?

A

a lot of the styles are eventually overridden by our main stylesheet, which means that the reset styles unnecessarily add to page load time (more work for browser)

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

What is the default value for the position property of HTML elements?

A

static

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

How does setting position relative on an element affect document flow and where the element appears on the page?

A

moves an element in relation to where it would have been in a normal flow

shift where it would normally be

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

How does setting position absolute on an element affect document flow and where the element appears on the page?

A

removed from document flow entirely and looks for the first non-static parent it can find to position itself against

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

What are the box offset properties?

A

top, bottom, left, and right

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

What were floats originally designed for?

A

to allow developers to float text around image elements similar to the way newspapers and magazines would display text. For example:

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

What are clears for with floats?

A

allows you to say that no element should touch the left or right hand sides of a box

can see floated elements

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

What are some of the downsides for using floats in layout design?

A

element is removed from the document flow

You need to make sure that every element is aware of the float (there is a lot of overhead to check in CSS)

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

What are the three core parts of a grid system?

A

container, row, column

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

Why should flexbox not be used for building complete web page layouts?

A

Flexbox is best for arranging elements in either a single row, or a single column.

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

Why is it important to use a grid system for CSS layouts?

A

Easier to edit in teams

individual: you can use the same tools that you’ve been using

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

Why is it a good idea to use percentages for grid column widths?

A

responsiveness (if you’re viewing it on different screen sizes, you do not have to write more codes to adjust to different screen sizes)

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

How do you think building this layout would be different without a grid system?

A

IT WOULD NOT BE FUN

It would be very tough…

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

What advantages do you see with using a grid system?

A

organized (easier to work with),

user friendly (easier for them to use and read)

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

Why are media queries crucial to responsive grid designs?

A

automatically adjust the set width of the container class depending on the size of the current browser window

without it, building responsive designs is almost impossible (it is important for the content of the website to adapt to the screen it is displayed on)

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

What is a variable?

A

to temporarily store the bits of information it needs to do its job

container that we can store data in and reference by data to be used later on

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

Why are variables useful?

A

ability to have something you can reference and use later

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

What two special characters can a variable begin with?

A

$ or underscore (_)

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

How do you declare a variable?

A

using the VAR keyword

ex. var quantity

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

Which words cannot be used as variable names?

A

JavaScript keywords

if, while, var, const

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

What is a string?

A

data type that consists of letters and other characters in a pair of quotes

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

What is the string concatenation operator?

A

joining two or more strings to create a single value using the string operator (+)

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

What is the difference when it comes to using single quotes or double quotes ( ‘ ‘ or “ “ )?

A

nothing

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

How do you escape quotation characters?

A

backwards slash before any type of quotation mark

example: a href="sale.html"

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

What is type coercion?

A

one data type has been converted from one data type to another

ex. concatenation
var phrase = 'I am'
var age = 29
var phrase2 = ' years old'
phrase + age + phrase2
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
79
Q

What is a number in JavaScript?

A

data type that contains a number

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

What is an arithmetic operator?

A

mathematical operator

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

Name four of the arithmetic operators?

A

multiplication, division, addition, subtraction

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

What is the order of execution?

A

PEMDAS

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

What is a boolean?

A

data type with the values of true or false

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

What is a comparison operator?

A

used to compare values to test for true or false comparisons

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

What is the difference between undefined and null?

A

null: empty or non-existent, must be assigned (ex. vacant lot in a city - i want to put something here but not right now)
undefined: value is not assigned; not on purpose (ex. a vacant lot in a city - could be empty for a variety of reasons)

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

What is the difference between undefined and null?

A

null: empty or non-existent, a value that has been set by someone (ex. vacant lot in a city - i want to put something here but not right now)
undefined: value is not assigned; not on purpose (ex. a vacant lot in a city - could be empty for a variety of reasons)

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

What is the difference between a parameter and an argument?

A

parameters: variables
arguments: values

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

What is a function?

A

performs a specific task

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

Define a function named addTwoNumbers with two parameters

A

function addTwoNumbers(a, b) { }

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

How do you call a function?

A

using the statements in between the parenthesis

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

What are the parts of a function definition?

A 
functionKeyword functionName() {
return statement
}

name function
parameter list
return code block

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

CODE READING: var firstName = “Michael”;

A

The string, Michael, is being assigned as the value for the variable first name

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

CODE READING: var address = number + street

A

the value of the variable number is being concatenation (+) with the variable of the value street. The result of this expression is the variable address

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

CODE READING: var area = height * width

A

the variable stored for height is multiplied by the variable stored for width. The result of this expression is the variable address

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

CODE READING: var inStock = true

A

the Boolean true is being assigned to the variable inStock

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

CODE READING: var nullVariable = null

A

the value null is being assigned to the variable nullVariable

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

CODE READING:

function multiplyTwoNumbers(a,b) {
return a*b
}
A

Function definition named multiplyTwoNumbers with the parameters a and b with an opening curly brace for the code block. The value for variable a is being multiplied with the value for the variable b and the result of the expression is being returned to the function. there is a closing curly bracket for the code block.

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

Why are functions useful?

A

writing little code as possible with a pattern of work that needs to be accomplished

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

Why is it important to understand truthy and falsy values?

A

important for doing comparisons and conditionals

do not want to convert things to a boolean to determine if its truthy or falsy, we want to check the values.

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

Why is the typeof null object?

A

it’s a bug

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

Why do you always use === for comparisons?

A

to execute a true equality test

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

Why do you always use === for comparisons?

A

to execute a true equality test

convert values to similar data type to check for comparison

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

Do all if statements require an else statement?

A

no

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

Do all if statements require an else statement?

A

no

if there is an “else”, that means something has to happen

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

What is the proper syntax for using the or operator?

A

dual pipes/double pipes

x == 5 || y == 5 is false

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

CODE READING: if (value1 < value2) {

A

if statement with a condition checking if the value of the variable value1 is less than the value of the variable 2 with an opening curly brace for a code block.

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

What is the primary use case for switches?

A

used to perform different actions based on different conditions.

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

What is the primary use case for switches?

A

knowing what the user is looking for and goes directly to it without checking a list

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

Does the default case have to be at the bottom of the switch statement?

A

no (but for good practice, it is on the bottom)

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

What happens if there is no break statement between cases?

A

the next case will be executed even if the evaluation does not match the case

it will start doing the work of the next case (fall through)
–ex: case using *, x, X for multiplication

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

CODE READING: switch (operator)

A

Switch statement checking the EXPRESSION of operator

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

Difference between if and switch statement

A

ex. friend ask for a banana

if statements (checks one at a time)
- you take one fruit out at a time until you get to the banana
switch statements (sees the full landscape and goes directly to the value you're looking for)
- you have the banana on a stand
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
113
Q

What is an object in JavaScript?

A

collection of related/reference data (contains memory type)

primitive data(contains actual value)

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

How do you create an object literal?

A

var object = { };

var object2 = new Object( )
^ shorten syntax for creating a new object (not mainly used)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
115
Q

What is a property in relation to JavaScript objects?

A

a place where we can store data inside of an object

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

What is an array in JavaScript?

A

list (or set of values)

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

How do you create an array literal?

A

square brackets

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

Arrays have a property named length. Because arrays have a properties, what other data structure are they similar to?

A

(length is usually tied to an array = array.length)

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

CODE READING: colors[1]

A

value at the one index in the color array

DO NOT SAY FIRST…

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

What are the keys for the values inside an array?

A

numbers counting up from zero

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

Arrays have a property named length. Because arrays have a properties, what other data structure are they similar to?

A

(length is usually tied to an array = array.length)

objects

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

What are some good use cases for using objects inside arrays?

A

student data (name, age, grade)

insurance policy (name, plan, cost)

user info (email, password, full name)

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

CODE READING: var library = [ ]

A

there is an empty array literal being assigned as the variable for library

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

CODE READING: library[0].title

A

the value of the title property of the object at the zero index of the library array

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

CODE READING: console.log(library[1].author)

A

the log method is being called to an argument to the value o the author property of the object at the one index of the library array

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

What is the primary advantage to storing your selected elements in a variable?

A

we can reuse it later

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

Why might you need JavaScript to modify the DOM after the page loads?

A

gives interactivity (gives update for interaction quickly)

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

How can you better prepare when writing HTML for DOM manipulation in your JavaScript code?

A

put more information in elements (like setting attributes)

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

CODE READING: box1.classList.remove(“blue”)

A

the remove method of the object within the class list property of the box1 object is being called with the string argument blue

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

CODE READING: box2.style.height = “150px”

A

the string 150 px is being assigned as the value for the height property which is the property of the style object on the box1 object

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

What are the differences between innertext and textContent?

A

textContent:

  • gets all elements (including script) render text of the page
  • returns every element in a node

innerText: (you don’t normally use innerText)

  • gets all “human-readable” elements
  • aware of styling and won’t return hidden elements
  • has to interpret the text/DOM
  • takes a longer time to read
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
132
Q

What datatype are the values you remove from a text input?

A

string

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

Why is it so important to be able to dynamically update text?

A

interaction for the user (like updating text box, etc.)

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

What are some of the drawbacks of HTML Event Handler Attributes?

A

better to separate the JS from HTML

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

Why is the Window.event property to be avoided in new code?

A

This property is not universally supported and even when supported introduces potential fragility to your code

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

Why is the Window.event property to be avoided in new code?

A

This property is not universally supported and even when supported introduces potential fragility to your code

changes with every single event and can easily go to a different event than you’re trying to work with
–ex. document.addEventListener(“mouseover”, console.log)

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

What is the difference between the getElementById() method and the querySelector() method?

A

The querySelector() method returns the first element that matches the specified css selectors. For example: document.querySelector(“div.target > span”);

The getElementById() method returns the first element that matches the given id in the DOM. For example: document.getElementById(“idOfSpan”);

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

Who passes in the event object into the handleClick callback function?

A

JavaScript language with automatically do it

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

Does a callback function require a name?

A

no (but you should name your functions)

this would be called an anonymous function

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

CODE READING: alert(“it works”)

A

alert function with the argument string it works

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

console log the event object which is passed in by the event handler when it calls the handleClick function

A 
function handleClick(event) {
      console.log(event);
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
142
Q

What is the purpose of a loop?

A

to repeat the same, or similar, code a number of times

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

currentTarget

A

targets the element that the event is dealing with

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

CODE READING: current++

A

there is the variable current followed by the ++ operator

DO YOUR INCREMENTATION AFTER YOUR WORK IS DONE

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

Why might there be different kinds of loops?

A

different situations

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

What is the purpose of a conditional expression as it relates to loops?

A

when you can stop

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

Could a loop potentially go on forever?

A

yes

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

Could a loop never start?

A

yes

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

How does a for loop differ from a while loop?

A

while: don’t know how many times you need to do something but do know where you’ll stop (Ex. walking to leasing office.. don’t know how many steps but i do know where to stop)
- -need a stopping place

for: know the number of items (aka arrays) we’re dealing with (ex. checking off boxes on a stack of cards – set number in a deck of cards)
- -need an initialization, condition, and final expression

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

What potential use cases are there for for loops?

A

arrays (example: search engine)

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

Which pieces of information provided in the parentheses for a for loop are mandatory?

A

none are mandatory

example: for(;;) –> but you could use while loop instead

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

What is a for in loop?

A

using a loop when you don’t know how many things there are in an object

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

How do you target the value of a property in an object.

A

put the variable of the property in a bracket notation

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

When should you use a for in loop?

A

loop over an object

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

When should you use a for in loop?

A

loop over an object [and do the same action for each property]

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

When should you use a for in loop?

A

loop over an object [and do the same action for each property]

least use type of loop

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

What is node

A

a piece in your document

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

What is the difference between the parentNode and parentElement properties?

A

parentNode: document of the parent element

parentElement: parent element of the current node (always an element)

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

Why is it important to be able to traverse the DOM?

A

whitespace nodes and allows us to find information on elements around us

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

What kind of information is useful to store in custom attributes?

A

use data attributes to store information

example USING DATA SET

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

What are two ways to target elements on the DOM?

A

querySelector (selects first element it finds) or getElementbyID or

querySelectorAll (looks for every single element that may have that class or attribute - but will always return a node list)

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

What is another way to add a text node to an element other than using textContent.

A

inner text (use when you want to avoid whitespace node)

document.createTextNode

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

How do you create a HTML element using vanilla Javascript?

A

create element method of the doc element object

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

Why is using loops and arrays for creating multiple dom elements preferable to creating them one at a time?

A

DRY (do not repeat yourself)

saves you time!!

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

Why are arrays preferred over objects for the functionality referenced in question 1?

(Q1: Why is using loops and arrays for creating multiple dom elements preferable to creating them one at a time?)

A

arrays have order and have index

objects do not have order

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

How would you alter the game to make the choice from 1 - 500?

A

var randomNumber = Math.floor(Math.random() * 500) + 1

math. random() = function that gives you a decimal between 0 and 1 but not actually 1… gives opportunity for random percentage.
math. floor() method chops off the decimal point; it’ll round it off to an integer.

+1 = if i get 99.999 repeating, after math.floor it’ll be 99 instead of 100. Which is why you add 1.

example: range between 25 - 50
math.floor(math.random() * (50 - 25 + 1)) + 25
[THAT SHOWS MAXIMUM MINUS MINIMUM AND ADDING 1 TO INCLUDE 25]

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

What are the disadvantages of inline styling via JavaScript?

A

you do not want to mix up languages

major problems with inline styling

if you have to do it, it would be where you need to make a math calculation

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

What things do you have to consider when building a reset game function?

A

generating a new number to guess if replaying

setting everything back to its initial value

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

CODE READING: header.appendChild(headingH1)

A

appendchild method of the header object is being called with the argument headingH1

170
Q

CODE READING: var navbar = document.createElement(‘ul’)

A

createelement method of the document object with the argument ul is being returned to the variable navbar

171
Q

CODE READING: todoSubmitButton.setAttribute(“id”, “todoSubmit”)

A

the setattribute method is being called on the todoInput object with an argument of string id and todoSubmit

172
Q

Why is it important to be able to retrieve and use data from inputs?

A

get information from the user and choose what to do with that data

communicating with the user

173
Q

Why is it dangerous to assume you have the correct data when creating elements?

A

you should never assume the user is using the correct information

174
Q

What is jQuery?

A

jquery is a library added to javascript to perform css

purpose is to make it easier to interact with html and css with javascript

introduce ability to chain (Setting multiple things on one line)

lets you find elements using CSS-style selectors and then do something with the elements using jquery methods

175
Q

What is the jQuery selector function?

A

$()

176
Q

What does the jQuery selector function return?

A

return the list of elements that was asked

177
Q

Why would someone use jQuery over vanilla Javascript?

A

easier to select elements, chain actions, trim syntax (shorter codes), works across all browsers

178
Q

What are some downsides from using jQuery over vanilla Javascript?

A

hides the complexity, develop a skill set that’s not permanent

you have to pull in a code from a network

179
Q

Why do we use the tag at the bottom of the body, instead of putting it inside the <head> tag?

A

want the page to load first before we add/remove/etc the classes and elements

javascript runs after all the elements exist

180
Q

How do you get the text out of an HTML element?

using jQuery

A

using .text()

everything is a method

181
Q

How do you get the value out of an HTML input field?

using jQuery

A

.val()

.value

182
Q

What’s the difference between .text() and .html()?

using jQuery

A

.text() = (similar to .textContent)

.html() = give full DOM tree

183
Q

What does .on() do?

using jQuery

A

handles all events

184
Q

What is event bubbling?

A

starts at the most specific node and flows outwards to the least specific one (Default type of event flow)

185
Q

CODE READING: function handleContainerClick (event) { }

A

there is a function definition with handleContainerClick calling on a parameter (event)

186
Q

What is the first argument the function setTimeout takes?

A

function definition

function callback (can be invoked later)

187
Q

If the second argument is not passed into the setTimeout function, what is the default value?

A

zero (executed immediately)

188
Q

What are some scenarios where setTimeout can be useful?

A

interacting with the user (seeing if the user is still there)

chat box on website

189
Q

Difference between setInterval and setTimeout

A

setInterval (function that gets called everytime you set)

setTimeout (function gets executed once)

190
Q

What does the setInterval function return?

A

returns an interval ID which uniquely identifies the interval

ID for that interval (their interval starts at 1)

191
Q

What argument does the clearInterval function take?

A

identifier of repeated action that you want to cancel NOT THE FUNCTION

192
Q

What are some scenarios where setInterval can be useful?

A

stop watch, keeping track of time, banner moving

193
Q

What is the event loop?

A

which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks

194
Q

What does the term blocking mean?

A

waiting for something to continue running

nothing else can happen until a code is done running

195
Q

What is the call stack?

A

list of actions running in your javascript

data structure with a lifo (last in first out)

196
Q

asynchronous

A

when you order a pizza, it takes 20 minutes, would you stand by the phone and wait? no you move on until the pizza came

(not happening in that moment)

197
Q

CODE READING: startButton.addEventListener(‘click’, function (event) { })

A

the addeventlistener method of the startbutton object is being called with 2 arguments, string click and function event

198
Q

Which element in a website are used to create dynamically?

A

instagram search, shopping carts

199
Q

Why should you not create all elements dynamically?

A

make it in an HTML document

its made dynamically because it responds to user input

200
Q

What is a modal?

A

a mode that disables the main window but keeps it visible, with a modal window as a child window in front of it (users MUST interact with modal window before running to parent application)

a modal box is a scripted effect that allows you to overlay a small element over a website (they avoid the need to use window pop-ups or page reloads)

swiftly show information to users on the same page they’er working on

201
Q

What are some use cases for modals?

A

discounts, subscription, login or signup forms, contact/comment forms

  • Error: to alert users of an error
  • Warning: to warn users of potentially harmful situations
  • Data: to collect data from users
  • Confirm or Prompt: to remind users to do something before moving on
  • Helper: to inform users of important information
202
Q

Why does a modal usually need to occupy the entire height and width of the viewport?

A

To force user interaction so that they’re not clicking on the parent window

203
Q

Modeless Design Elements

A

(non-modal) will permit users to access the parent window, even after they are invoked

examples: toolbars, accordian menus, social media docks, advance search menus

204
Q

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

A

height, pointer

205
Q

Which HTML meta tag is used in mobile-responsive web pages?

A

meta name=”viewport” content=”width=device-width, initial-scale=1.0”

206
Q

Why do we need a single source of truth?

A

everything else is easily manipulated (DOM, other pieces of data, etc.) keep data model up to date without checking it in 4 different places

anytime the DOM needs to be updated, you update data model then the DOM

207
Q

what is scope

A

execution contents

where is the code being executed

208
Q

What is a method?

A

function attached to an object

209
Q

What does a method do?

A

takes what you ask and gives a response

210
Q

multiply: function (num1, num2)

A

there is an anonymous function definition with two parameters (num 1 and num2) being assigned to the property of multiply

211
Q

return num1 * num2

A

the variable num1 is being multiplied by variable num2 and the result of that expression is being returned to the function

212
Q

var sum = this.add(num1, num2)

A

the add method of this object is being called with 2 arguments variable num1 and variable num2 and the return of that call is being assigned to the variable sum

213
Q

What is ‘this’ keyword?

A

refers to one object (usually the object in which the function operates)

214
Q

What does bind do?

A

creates a new function that has ‘this’ keyword set to a provided value

215
Q

What is the difference between a function and an object literal?

A

object literal: contains properties with values

functions: performs a task

216
Q

ada.describe()

A

the describe method of the ada object is being called

217
Q

describe()

A

function describe is being called

218
Q

What is Prototypal Inheritance?

A

objects inherit properties from another object

219
Q

What is the Prototypal Chain?

A

object.create()

it will create a new

220
Q

In the custom objects we created, I noticed that our prototype object has another __proto__ property, where did that come from?

A

when we created carInfoPrototype type using curly braces, it will inherit the __proto__ property

221
Q

Why does JavaScript have Prototypal Inheritance?

A

to save memory

222
Q

What does the new keyword do?

A

creates a new object

new is adding things onto an object for you

new keyword does this:

  • makes an empty object
  • sets the constructor of the object to another object
  • passed the newly created object as the this keyword context
  • returns this keyword if the function doesn’t return an object
223
Q

I could’ve added a method to the constructor function by assigning a method to a property on the this object. Why do we have to add it to the prototype property?

A

instead of car.prototype.overview(), i could’ve used car.overview()… why use prototype?

inheritance! using memory efficiency.

224
Q

car.prototype.overview = function() {

A

there is an anonymous function definition being assigned for the value of the overview property of the object within the prototype object of the car object

225
Q 
var fiat = new Car(
'fiat',
'500',
'500kg',
200,
'white',
4
)
A

the car function is being called using the new keyword and the return of that function call is being returned to the variable fiat

226
Q

What is the first thing that happens in a class when it is instantiated with the new keyword?

A

calls the constructor function

227
Q

Since classes are technically functions as well. Can you name a difference between classes and functions?

A

classes do not hoist (they have to be declared first)

functions can hoist

228
Q

What is the basic idea of OOP?

A

we use objects to model real world things that we want to represent inside our programs, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of

229
Q

class parent { }

A

class definition name parent

230
Q

What is the benefit of instantiating Classes within other classes?

A

making a class inside another class, you save the class on the parent class

231
Q

Why are parent - child relationships important in OOP?

A

avoid spaghetti code (keep everything in it’s own space)

easier to build on

232
Q

askForFood() { }

A

askForFood method being defined with no parameters

233
Q

Why did you have to bind this for the feedChild method in the Parent class?

A

you would not be able to get the data from the other source

if you do not bind this, then there is no tie to the child class

234
Q

Why is it important to assign callback methods to properties in the constructor?

A

functions are destroyed after constructor is done; save it as a property so that we can reference it in the future

235
Q

Why did the Maker class require all of the Parent class info?

A

if the maker is responsible for creating the parent class, the data has to be there so that the maker can pass it onto the next source

236
Q

Why did you have to bind this for the replenishFood method.

A

it would work when we pass it to the parent class, if we didn’t bind it, the replenishFood would run only as it exists in that class… therefore, you would get an error

(bind it so that it gets used as if it’s within that space)

237
Q

What decides the order in which JS files must be loaded?

A

if you want to use a tool, it needs to exist already before calling the document that uses that tool

238
Q

What is JSON?

A

JavaScript Object Notation: data format that looks like a JS object but it gets stored as a string so that the data is serialize

text-based data format following JavaScript object syntax

239
Q

What are serialization and deserialization and why are they useful?

A

DESERIALIZATION:

  • Converting a string to a native object
  • turning a stream of bytes into an object in memory

SERIALIZATION:

  • Converting a native object to a string so it can be transmitted across the network
  • turning an object into memory

Useful for when you’re transmitting data and trying to receive it

240
Q

How do you serialize data into a JSON string using JavaScript?

A

JSON.stringify()

storing value

241
Q

How do you deserialize a JSON string using JavaScript?

A

JSON.parse()

creates value

242
Q

What is a client?

A

a machine that can send a request to a server

(example: a browser - html index file, a terminal, phones, video games with multiplayer, netflix on apple tv, command line client – HTTPie)

243
Q

What is a server?

A

computer or machine that provides the resource (data) or response

sending responses to request

EVERY server was created by a human being! O.o

244
Q

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

A

get

245
Q

What are the formats of HTTP requests and responses?

A

request and responses have the same format

  • both are at the start-line
  • -(request: destination and protocall.. next line is the request .. next is an empty line.. next is a body)
246
Q

status code

look @ http.cat for visual of codes :D

A

100+: informational
200+: it’s accepted/success
300+: the thing you need is somewhere else/redirect
400+: client error (like a browser)/client did something wrong
–400: you’re not asking correctly, bad request
–401: not signed in
–402: need payment
–429: a thousand request in a for loop
500+: something is wrong on the server end (accidently)
–500: internal server error, back-end crash
–504: sending a request and the server does not respond fast enough (gateway timeout)

247
Q

How does ajax work?

A

insert content from database or server without refreshing the page

248
Q

Why did we need the jQuery CDN (content directory network)?

A

file that’s hosted by other companies?

jquery has functions loaded into it so we need an external file for the user

249
Q

How do you specify the request method (GET, POST, etc.) when calling ajax?

A

method property and the argument you pass

250
Q

Variables defined with the var keyword are function scoped. const and let are _____ scoped.

A
  • BLOCK

The variables declared via const and let are called block-scoped because their scopes are always the innermost surrounding blocks.

251
Q

Name some characteristics of a variable declared using const.

A
  • the binding (association between variable name and variable value) is immutable (immutable binding)
  • —the value itself may be mutable
  • must always initialize immediately
  • variable never changes its value
252
Q

Name some characteristics of a variable declared using let.

A
  • variables declared are mutable
  • indicates value of the variable changes
  • can change in value
253
Q

What does block scope mean?

A

the scopes are always the innermost surrounding blocks

  • block scope has less room for error
  • curly braces indicate block scope
254
Q

In the file we can push a new value to an array defined using the const variable. How does that work?

A

a fresh binding is created for each iteration (in a for-of loop)

(in for loops, you must use let)

  • we are changing the property in the variable (you’re expanding what’s inside of it)
  • constant is what object or array you’re dealing with
255
Q

Name some things that var can do that const and let can’t.

A
  • globally scoped for function scope while let and const are block scope
  • can be updated and re-declared within its scope (let can be updated but not re-declared)
256
Q

If var can be used virtually anywhere, why would we switch?

A
  • older way of declaring
  • scope of var is the innermost surrounding function and not the innermost surrounding BLOCK
  • know where values need to exist and when to have it stop exisiting

Declaration var x: The scope of a var-declared variable is the innermost surrounding function and not the innermost surrounding block, as for most other declarations. Such a variable is already active at the beginning of its scope and initialized with undefined.

257
Q

What is the syntax in writing a template literal?

A
  • enclosed by the backtick ( ) (grave accent) character instead of double or single quotes.
  • inject javascript with $ { }
258
Q

What is string interpolation?

A

When you dynamically compute a value inside a dollar sign and curly braces ${}, it is converted to a string and inserted into the string returned by the literal

259
Q

let greeting = greetings[randomNumber]

A

the value at the value of the randomnumber index array on greetings array is being assigned to the let variable greeting

260
Q

const address = ${number} ${street}

A

a template literal with javascript expression for the number variable and the street variable being assigned to the const variable address

261
Q

When was destructuring introduced?

A

ES6 (year 2015)

262
Q

Why could the running commas technique of destructuring an array be a bad idea?

A
  • miscount the placeholders

- if someone adds something to the front of the array, it’ll ruin the code

263
Q

How can you easily tell the difference between destructuring and creating array/object literals.

A

Destructuring: you have the name of the array/object on the right hand side of the equal sign

Creating: you have the values on the right hand side of the equal sign

264
Q

How does an ES6 arrow function differ from an ES5 function?

A

Lack of it’s own personal scope and lack of it’s own personal value

Arrow functions provide a simplified structure, allowing for a more concise way to write function expressions.

265
Q

When an arrow function’s code block is left without curly braces, what (if anything) changes in its functionality?

A

you do not need to add a return as it would return the function for you

-implicit return

266
Q

In what situations would you possibly use an arrow function?

A

Arrow functions are best for callbacks or methods like map, reduce, or forEach

267
Q

In what situations would you not want to use an arrow function?

A
  • when you’re using the this keyword because the arrow function is not bound to it
  • constructor functions and no arrow function methods
  • arrow functions are simply incapable of binding a value of this different from the value of this in their scope
268
Q

Can you name an arrow function?

A

No, they are all anonymous

269
Q

What is a CLI?

A

command-line interfaces (process commands to a computer program)

270
Q

What is a GUI?

A

graphical user interface (allows users to interact with electronic devices through graphical icons and audio indicator)

271
Q 
Give at least one use case for each of the commands listed in this exercise.
man
cat
ls
pwd
echo
touch
mkdir
mv
rm
cp
A
  • man: manual
  • cat: concatenate files (-A –> show all)
  • ls: list directory contents (-a –> all)
  • pwd: print name of current/working directory (-L –> use PWD from environment, even if it contains symlinks)
  • echo: display a line of text (-e –> enable interpretation of backslash escapes)
  • touch: change file timestamps (-a –> change only the access time)
  • mkdir: make directories (-p –> no error if existing, make parent directories as needed)
  • mv: move (rename) files (-f –> force. do not prompt before overwriting)
  • rm: remove files or directories (-f –> ignore nonexistent files and arguments)
  • cp: copy files and directories (-r –> copy directories recursively)
272
Q

What is Node.js?

A

program that allows Javascript to be run outside of a web browser

back end program for running JavaScript

273
Q

What can Node.js be used for?

A

commonly used to build back ends for web applications, command-line programs, or any kind of automation that developers with to perform

make command line programming using node

powered by V8 (same JavaScript engine in the Google Chrome browser)

274
Q

What is a REPL?

A

read-eval-print-loop (REPL) then wait to read again

interactive computer programming environment

275
Q

When was Node.js created?

A

2009 by Ryan Dahl

276
Q

What back end languages have you heard of?

A

PHP, python, ruby, java, rust

277
Q

Why should a full stack Web developer know that computer processes exist?

A

its based on making multiple processes work together to form one application

extremely important when learning about applications made of multiple components, such as clients, servers, and databases

278
Q

What is a computer process?

A

an instance of a computer program that is being executed by one or many threads

279
Q

Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?

A

100?

280
Q

What is the process object in a Node.js program?

A

it’s like the window object on the console

281
Q

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

A

it’s in the global scope

282
Q

What is the data type of process.argv in Node.js?

A

an array of strings

283
Q

What is modular code?

A

It is is how you separate your code out

  • -define separate classes, functions
  • -student grade table: had separate files

Defining classes and separating behavior into multiple functions are forms of modular programming. The whole idea behind modular programming is to decompose a solution to a large problem into many smaller solutions to sub-problems.

284
Q

What is a JavaScript module?

A

a single JS file

285
Q

What values are passed into a Node.js module’s local scope?

A

exports, require, module, __dirname, __filename

module wrapper: automatically puts your code in a function

286
Q

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

A

global && process && console.log

setInterval and setTimeout

287
Q

array.filter is useful for…

A

return true or false.. if it’s true, it’ll create a new array that has all true returns

288
Q

array.map is useful for…

A

when you want an object and just have a their properties… values… etc

289
Q

array.find is useful for…

A

to find a single object in an array

return an item for the first thing that is true

290
Q

array forEach is useful for…

A

similar to a for loop

items.forEach((item) => {
console.log(item.name)
})

—the above code will log all the names in the item array (loop through each property to find the name)

291
Q

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

A

where you stick something that you want to make available to other modules so they can require it

292
Q

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

A

use the require function

require()

293
Q

setTimeout()

A

calls the function when timer is met

console.log(‘Hello, just a moment…’);

setTimeout(function () {
console.log(‘Thanks for waiting!’);
}, 2000);

294
Q

What is the JavaScript Event Loop?

A

the process of what’s going on behind the scenes in the back-end

the part of the JS runtime that checks for asynchronous callbacks and puts them back on the stack when they are ready

295
Q

What is different between “blocking” and “non-blocking” with respect to how code is executed?

A

The blocking statements is executed sequentially one after other, while a non blocking executes parallely.

  • -blocking - code that is currently executing on the stack
  • -non-blocking - code that is not currently executing.. it is waiting to be cleared
296
Q

What is a directory?

A

folder

a file whose job is to point to other files

297
Q

What is a relative file path?

A

a location that is relative to the current directory or folder.

For example, the relative path to a file named “document.txt” located in the current directory is simply the filename, or “document.txt”.

298
Q

What is an absolute file path?

A

the full listing of the location of a file or a folder/directory on a computer. It is sometimes known as the “full path.” The absolute path includes the complete location of the file or folder, including which drive it is on.

For example, on a Windows computer, the absolute path for a file might be:

C:\Windows\Users\Billy\docs\blogpost1.txt

299
Q

What module does Node.js include for manipulating the file system?

A

fs

300
Q

node. js:

process. exit()

A

node.js: terminate the process synchronously with an exit status of code

throw err

is similar to

console. error(err)
process. exit(#)

process.exit(1) is default behavior

301
Q

buffer array

A

only holds raw data/bits/binary data

var text = ‘example data’
var buffer = Buffer.from(text)
buffer.length //12
console.log(buffer) //

302
Q

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

A

writeFile()

303
Q

Are file operations using the fs module synchronous or asynchronous?

A

asynchronous

304
Q

node.js

asynchronous vs synchronous

A

asynchronous: used for busy processes (app doing multiple things)
synchronous: block each other one until the first to-do is done

305
Q

node.js

\n

A

note + ‘\n’

^ this will move the process.argv to a new line instead of next to it

306
Q

What is JSON?

A

common data interchange format used to send and store information in computer systems (before JSON, XML was an extremely popular data interchange format but JSON has a more simple and readable format)

global data format – many different applications can read and understand

JavaScript Object Notation: data format that looks like a JS object but it gets stored as a string so that the data is serialize

text-based data format following JavaScript object syntax

307
Q

What are serialization and deserialization?

A

DESERIALIZATION:

  • Converting a string to a native object
  • turning a stream of bytes into an object in memory

SERIALIZATION:

  • Converting a native object to a string so it can be transmitted across the network
  • turning an object into memory
308
Q

Why are serialization and deserialization useful?

A

Useful for when you’re transmitting data and trying to receive it

–to be able to store/save it to a hard drive

309
Q

How do you serialize a data structure into a JSON string using JavaScript?

A

JSON.stringify()

storing value

310
Q

How do you deserialize a JSON string into a data structure using JavaScript?

A

JSON.parse()

creates value

311
Q

What are HTTP messages?

A

How data is exchanged between a server and a client

2 types of messages:

  • -requests: sent by the client to trigger an action on the server
  • -responses: the answer from the server
312
Q

HTTP –verbose

A

By default, HTTPie only outputs the final response and the whole response message is printed

–verbose can often be useful for debugging the request and generating documentation examples

313
Q

What is on the first line of an HTTP request message?

A

start line (method, request target, protocol)

example:
POST /users HTTP/1.1

314
Q

What is on the first line of an HTTP response message?

A

start line (protocol, status code, status text)

example:
HTTP/1.1 201 Created

315
Q

What are HTTP headers?

A

set of key/value pairs

–accept: client telling server this is what i want included in response (example: application/json, /

316
Q

What is NPM?

A
  • world’s largest software registry used to share and borrow packages, and manage private development
317
Q

What is NPM?

A
  • Node Package Manager:
  • –>online platform: everyone can publish and share tools (browser -aka front end, server -aka back end, or command line) written in javascript
  • –>command tool: interact with online platform, install and uninstall package
  • world’s largest software registry used to share and borrow packages, and manage private development
  • makes it easier for developers to share code they’ve created to solve problems and for other developers to use the code

consists of 3 distinct components: website, command line interface (CLI), and the registry

318
Q

What is a package?

A

a tool someone created and uploaded to the npm online platform (building block for your application)

directory with one or more files
–with a file name package.JSON (With meta data about package)

our solutions repo is a package (aka modules)

319
Q

How can you create a package.json with npm?

A

npm init

320
Q

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

A

Dependencies are packages that are needed for another package to work properly

with one npm command, you can install a package along with all of its dependencies

to add one…………?

321
Q

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

A

npm creates a directory that comes with json, license, readme, etc

322
Q

How do you add express to your package dependencies?

A

npm install express –save

**npm install will add current version, it will update dependencies in json file and will create a node-modules directory. To check if a folder exists, type ls on the command line to list the directories or refresh vs code. NPM INSTALL will download all the other packages that the package needs (express has a lot of packages in the nodes module folder)

323
Q

What Express application method starts the server and binds it to a network PORT?

A

app.listen([port,[host[,backlog]]][, callback]) ==== this boots up the server

(bind means occupy)

324
Q

How do you mount a middleware with an Express application?

A

the use method()

When using the use method, put the path in a string if it’s there but it’s optional

Middleware is how we teach express to do something (example below)

app.use((req, res) => {
res.send(‘Hello world’)
})

res.send is a method on one of the object

325
Q

Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?

A

req and res

these 2 parameters control the lifecycle

326
Q

What is network port?

A

network port is like the windows in a house

port is a specific hole in adapter that programs on the computer can communicate to

different programs cant bind on the same port. only one machine can be running that’ll occupy that system

327
Q

What is next()?

A

lets us tell express that the function is done doing it’s job, go to the next one

328
Q

What is the purpose of the Content-Type header in HTTP request and response messages?

A

a Content-Type header tells the client what the content type (media type) of the returned content (aka the body) actually is

329
Q

What does express.static() return?

A

a path

330
Q

What is the local __dirname variable in a Node.js module?

A

absolute path from the root to the current directory

example: index.js –> users/name/lfz/curriculumn/exercises/express-static/index.js

331
Q

What does the join() method of Node’s path module do?

A

it joins path segments to make a full path

platform-specific separator == forward slash (/) is for mac and backward slash is for window () —> example: C:\Users

332
Q

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

A

application/json (server telling the client this)

this is important because you want to know what you’re getting

333
Q

What does the express.json() middleware do and when would you need it?

A

It parses incoming requests with JSON payloads

returns middleware that only parses JSON and only looks at requests where the Content-type header matches the type option

parses incoming messages

334
Q

Why should we use json middleware?

A

by default, the req.body is undefined; therefore, using app.use(jsonMiddleware) would give information to it

335
Q

What is Webpack?

A
  • module bundler to bundlel front end module for the front end project
  • webpack did the job to bundle everything for us
  • runs on node.js (which is a JS runtime that can be used in computers and servers outside a browser environment) was introduced to allow you to load and use a module in the current file (solved scope issues out of the box by importing each module as needed)
336
Q

How do you add a devDependency to a package?

A

–save-dev (lets npm know that it should be in the devDependencies instead of dependencies

337
Q

What is an NPM script?

A
  • scripts used to automate repetitive tasks
  • bundle common shell commands for your project
  • stored in package.json file (means they’re shared amongst everyone using the codebase)
(Example)
"scripts": {
     "build": "webpack",
     "sup": "how are you?"
}

cmdr –> npm run sup (this will run “how are you?”

338
Q

How do you execute Webpack with npm run?

A

npm run build

it is whatever you name the npm script

–webpack is in the node_modules/.bin folder

(Example)
"scripts": {
     "build": "webpack",
     "sup": "how are you?"
}

cmdr –> npm run sup (this will run “how are you?”

339
Q

How do you execute Webpack with npm run?

A

npm run build

340
Q

How can we run JavaScript in a browser?

A
  • include script for each functionality (hard to scale because loading too many scripts can cause a network bottleneck)
  • use a big .js file containing all your project code (leads to problems in scope, size, readability, and maintainability)
341
Q

What is IIFE?

A

(immediately invoked function expressions)

  • solve scoping issues for large projects (when wrapped by an IIFE, you can safely concatenate or safely combine files without worrying about scope collision)
  • The use of IIFEs led to tools like Make, Gulp, Grunt, Broccoli or Brunch. These tools are known as task runners, and they concatenate all your project files together.
342
Q

Dependency vs. devDependencies

A
  • dependency (direct dependency): my code doesn’t work if i don’t have the packages (you’ll know if this is a dependency if you have to IMPORT it in your code)
  • devDependency: you need it in order to build your project (but does not end up in final bundle)
343
Q

How are ES Modules different from CommonJS modules?

A
  • using export and import
344
Q

What kind of modules can Webpack support?

A

typescript, css files, etc.

many different module types

sass/less (css preprocessor)

345
Q

ES6 Modules

A

modules allow you to import and export different sections of code into other files

-there are classes, functions, variables, and objects (to make this available in another file, we use export and import)

346
Q

What is React?

A

JavaScript library for building user interfaces

347
Q

What is a React element?

A

What gets returned from components (object that virtually describes the DOM nodes that a component represents)

  • plain object that describes the DOM
  • not a DOM element (we do not create DOM elements in react)
    react. createelement(type aka tagName, attributes with key value pairs, and children)
348
Q

How do you mount a React element to the DOM?

A

ReactDOM.render()

349
Q

Framework vs. Library

A

who is in control?

framework is in control of you

you are in control of library

350
Q

What is Babel?

A

JavaScript compiler (used to convert ECMAScript 2015+ into a backwards compatible version of JS in current and older browsers or environments)

  • transform syntax
  • polufill features that are missing in your target environment
  • source code transformations
351
Q

What is a Plug-in?

A

software component that adds a specific feature to an existing computer program (when a program supports plug-ins, it enables customization)

352
Q

What is a Webpack loader?

A

preprocess data that’s not JS (intercept the data)

producing the final JS

loading module contents to be put into main.js

–loader is a specific type of plug in

353
Q

How can you make Babel and Webpack work together?

A

By using the babel loader (they are 2 separate programs that do 2 separate things)
–babel loader is the bridge between the two things

354
Q

webpack.config.js

A

when it sees a module, here’s a list of rules to apply (if this file ends in .js, use the babel loader)

module.exports = {
resolve: {
extensions: [‘.js’, ‘.jsx’]
},
module: {
rules: [
{
test: /.jsx?$/,
use: {
loader: ‘babel-loader’,
options: {
plugins: [
‘@babel/plugin-transform-react-jsx’
]
}
}
}
]
}
};

355
Q

What is JSX?

A

syntax extension to JS

–its JS plus other stuff

356
Q

Why must the React object be imported when authoring JSX in a module?

A

JSX provides the syntax React.createElement(component, props, …children) function

357
Q

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

A

you need to incorporate the plugin-transform-react-jsx

358
Q

What is a React component?

A

like functions that return HTML elements

like JS functions, they accept arbitrary inputs (called “props”)

359
Q

How do you define a function component in React?

A

like a normal JS function

–needs to be capitalize (i.e. CustomButton) if you leave a lowercase letter, the JSX will think it’s an HTML element

360
Q

How do you mount a component to the DOM?

A

ReactDOM.render()

  • to pass it correctly, you need to have the ankle brackets to create the element
    i. e.
361
Q

What are props in React?

A

act like parameters in a function in JS

362
Q

How do you pass props to a component?

A

by surrounding it with { }

363
Q

What are props in React?

A

act like parameters in a function in JS

datatype is an object

i.e.
{ props.text }

364
Q

How do you pass props to a component?

A

specify the key name equal sign and the value you want to pass (aka key value pairs)
i.e.
text = “I”

by surrounding it with { /component definition/ }
^ — this is how to pass a prop — ^

365
Q

How do you write JavaScript expressions in JSX?

A

ankle brackets === JSX

you would write the expressions in curly braces

366
Q

Key in React

A

a string attribute that identifies items in lists of elements

help react identify which items have changed, added or removed

367
Q

What is a callback?

A

callback is a function that is invoked or called after something else happens (the function running depends on something happening not when the program is running) this is achieved by passing a function into another function

–possible with higher-order function

368
Q

What are closures?

A

combination of a function and the environment within which the function was declared. the environment consists of any local variables that were in scope at the time the closure was created

in JS, all functions form closure.

*** they’re a mechanism in JS for handling variable scope.

when a function is defined inside of another function, that inner function has access to the variables and scope of the outer function even if the other function finishes executing and those variables are no longer accessible outside that function

examples: eventlisteners

369
Q

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

A

map method

370
Q

What does { } mean when writing JSX?

A

{ } == writing plain JS and not JSX

371
Q

What does { } mean when writing JSX?

A

{ } == writing plain JS and not JSX

IT MEANS JAVASCRIPT EXPRESSION

372
Q

CODE READING

key = { pokemon.number }

A

prop key set to a JS expression that is the number property of the pokemon object

373
Q

What is the best value to use as a “key” prop when rendering lists?

A

a value that’s unique to the object

(telling react how to tell them apart)

– needs to be a primitive data type, not an object

374
Q

In React, is render ( ) a method or a function?

A

render( ) — this is a class method

class Custombutton extends React.component {
render ( ) {
}

—– example

class Person {
    sayHi( ) {
        console.log('hi')
    }
somebody.sayHi( )
375
Q

CODE READING IN REACT

/div>

A

closing div tag for the react element

376
Q

ReactDOM.render(
element,
someFunction()

A

return value of someFunction()

377
Q

How do you create “class” component in React?

A

we extend the component property of the react object

378
Q

How do you access props in a class component?

A

using the this keyword

379
Q

In React, what is the difference between render( ) and ReactDOM.render( )

A

render () //returns React element(s)
–never call this

ReactDOM.render() //mounts a React element to the DOM
– you call this

380
Q

What is the purpose of state in React?

A

store property values that belongs to the component, when the state object changes, the component re-renders

one place where the component keep track of data that changes

event changes the state, always assign value of the state as an object

setState = render gets called again (THIS IS DEFINED IN COMPONENT)

381
Q

How to you pass an event handler to a React element?

A

pass it as a prop

example onClick={this.handleClick}

382
Q

What is super?

A

super is a JS

constructor method of what you’re inheriting from (the parent class)

383
Q

BIND METHOD

A 
function example() {
   console.log(this)
}

^^^ this is a definition, not a call. we do not know what THIS is

NOW…

var person = { name: 'luigi' }
example( )
384
Q

What are controlled components?

A

Having JS use a function to handle the how information is processed and access the data

385
Q

What two props must you pass to an input for it to be “controlled”?

A

value and onChange (takes callback function to keep looking for changes on input box)

386
Q

What are some advantages of learning a relational database?

A
  • use organized data by table

- join table by data type

387
Q

What is one way to see if PostgreSQL is running?

A

using the top command in your terminal

388
Q

What is a database schema?

A

a collection of tables is called a schema (defines how the data in a relational database should be organized)

389
Q

What is a table?

A
  • a table is a list of rows each having the same set of attributes (ie. all students in “students” table could have “firstName”, “lastName”, and “dateOfBirth” attributes — these attributes are referred to as columns)
390
Q

What is a row?

A

set of attributes

391
Q

What is pgweb?

A

this is not postgresql!

pgweb is a custom web app that has a server, front end, etc.

app that lets you look inside a database BUT NOT THE actual database

392
Q

What is SQL and how is it different from languages like JavaScript?

A

Structured Query Language (SQL): primary way of getting, creating, and changing data in a relational database (you describe the results you want)

different from JavaScript because you do not need to tell SQL how to do something

393
Q

How do you retrieve specific columns from a database table?

A

using the select keyword

394
Q

How do you filter rows based on some specific criteria?

A

using the where keyword and a comparison operator

395
Q

What are the benefits of formatting your SQL?

A

for consistent style which gives you readability

396
Q

What are four comparison operators that can be used in a where clause?

A

equal sign (=)
greater than
less than
!= (not equal)

397
Q

How do you limit the number of rows returned in a result set?

A

using the limit keyword

398
Q

How do you retrieve all columns from a database table?

A

using asterisk (*) NOT in quotes

399
Q

How do you control the sort order of a result set?

A

order by

default sort order of the results is ascending order

400
Q

How do you add a row to a SQL table?

A
  1. begin with the insert into keyword
  2. the table it’s being inserted into with double quotes
  3. list of columns being inserted wrapped in parenthesis ()
  4. using the values keyword, insert the values in the same order as the columns they belong to, wrapped in parenthesis
401
Q

What is a tuple?

A

collection of objects and sequences that is immutable

an insert into has a tuple (“”, “”, “”, “”)

402
Q

How do you add multiple rows to a SQL table at once?

A

separate the rows in its own parenthesis ()

403
Q

How do you update rows in a database table?

A
  1. begin with the update clause
  2. the table it’s being updated with double quotes
  3. use the set clause to give the name of the category (in double quotes), the equal operator, and what you want the value to change to
  4. use the where clause to select a specific column with the value that needs to be changed
404
Q

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

A

if the where clause is not being used, it will set everything equal to the value you specified

405
Q

How do you delete rows from a database table?

A
  1. delete keyword with the table in double quotes

2. specify using the where clause, the column and value of where the row is located

406
Q

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

A

use returning *

407
Q

PostgreSQL

keyword vs. statement vs. clause

A

keyword: word that means something special (not a value) it’s a signal to the environment that you’re doing something
statement: what you end with a semi-colon (a whole command)

clause: sub-section/piece of a statement
- -returning
- -from
- -set

408
Q

What is a foreign key?

A

column(s) in a relational database that provides a link between data in two tables (acts as a cross-reference between tables)

409
Q

What is a foreign key?

A

column(s) in a relational database that provides a link between data in two tables (acts as a cross-reference between tables)

value in a column that you can use to join another column in a table

410
Q

How do you join two SQL tables?

A
  1. use the select statement
  2. from clause
  3. join clause with the name wrapped in double quotes, the using clause, and the column wrapped in double quotes and parenthesis
411
Q

How do you temporarily rename columns or tables in a SQL statement?

A

using the as keyword

412
Q

What are some examples of aggregate functions?

A

sum, count, every, max, min

413
Q

What are the three states a Promise can be in?

A
  • pending: initial state, neither fulfilled nor rejected.
  • fulfilled: meaning that the operation was completed successfully.
  • rejected: meaning that the operation failed.
414
Q

How do you handle the fulfillment of a Promise?

A

then method

415
Q

How do you handle the rejection of a Promise?

A

catch method

416
Q

What does fetch() return?

A

returns a promise which is fulfilled once the response is available

417
Q

What is the default request method used by fetch()?

A

GET

418
Q

How do you specify the request method (GET, POST, etc.) when calling fetch?

A

using a method property in the fetch() method

419
Q

When does React call a component’s componentDidMount method?

A

This method is called after the component gets mounted on the DOM

420
Q

Name three React.Component lifecycle methods.

A
  • mounting: constructor(), static getDerivedStateFromProps(), render(), componentDidMount()
  • updating: static getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate()
  • unmounting: componentWillUnmount()
421
Q

How do you pass data to a child component?

A

When you need to pass data from a parent to child class component, you do this by using props.

the parent component passes props to the child component and the child can then access the data from the parent via this.props.

Web Development c0820 (1 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions