ALL Flashcards
7 data types
numbers, strings, boolean, objects, arrays, null, undefined
strings
words
what is interpolation
back ticks ``
interpolation operators
${}
how to combine text
“word” + “word”
Boolean
conditional statement if this do this
what is falsey data
false, null, undefined,null, 0, NaN, empty “ “
Strict Equality operators
===
strict inequality operators
!==
3 logical operators
Not (!), And (&&), Or(||)
tenary expressions
if then statement
tenary structure
value/condition ? return if true : return if false
Variable Declaration
a statement: const cat=”rose”
2 code statements
Selection and Repetition
Selection statement
if, else, else if
if statement structure
if (condition) {
thing to do if true
}
else statement structure
if (condition) {
thing to do if true
} else {
thing to do if false
}
if else
if (condition) {
thing to do if true
} else if (condition 2) {
thing to do if condition 2 is true}
switch statement
alternate for conditional statement with multiple conditions again same value
switch statement structure
switch (expression) {
case value1:
//Statements executed when the
//result of expression matches value1
[break;]
case value2:
//Statements executed when the
//result of expression matches value2
[break;]
…
case valueN:
//Statements executed when the
//result of expression matches valueN
[break;]
[default:
//Statements executed when none of
//the values match the value of the expression
[break;]]
}
Default
set of statements to run after all of the switch statement cases have been checked
Break
stop switch statement from continuing to look at case statements once it finds a match
logging
process of printing information about the program as it runs. example: console.log
Repetition statement
while
while loop structure
while (condition) {
do if condition is true
}
increment/decrement operators
add ++ or +=
subtract – or -=
terminate while loop naturally
let count = 0
while (count <3){
return ${count};
count = count++
}
function structure
function functionName (parameter) {
code to run when function is called
}
parameter
placeholder for argument that will get passed through
return
statement ends function execution and specifies a value to be returned to the function caller
parseInt()
turns number inside “ “ from strings into numbers
2 Data Structures
Array and Objects
Arrays
collections of values in ordered lists
Elements
individual pieces of data inside an array
index
number that identify each element in array
object
list of values using key and value
array structure
const arrayName = [
data, data
]
.length
finds the number of elements in an array
what is the index of the first element in an array
0
how to update an array
arrayName[index] = “no element”
destructive mutability
methods update or mutate the object
nondestructive mutability
doesn’t change the value
Array methods
ways to add, remove and change elements
add elements destructively to array
.push() and .unshift()
add elements to array non destructively
spread operator …
.push ()
add to end of array
.unshift ()
add to beginning of array
spread operator
… creates a copy of the original array to be changed l
structure to use spread to add to beginning of array
const newArray = [“new element”, … oldArray]
structure to spread to add to end of array
const newArray = [ … oldArray, “new element”]
remove elements from aray
.pop(), ,shift(), .slide()
.pop()
removes last element destructively
.shift()
removes first element destructively
.slice ()
makes copy of removed indexes in parameter
.slice () strucutre
array.slice(index to start number after this index will be removed, index to end slice)
.splice structure
array.splice(start index, delete count, element to add)
object structure
const objectName = {
key 1: value 1,
key 2 : value 2,
};
access value in object
dot notation, bracket notation
dot notation
objectName. key
bracket notation
objectName[“key”]
object.keys ()
pulls all of the keys at the top level of object
What does object.values return?
returns the object values
adding property to object with dot notation
object.key = new value
adding property to object with bracket notation
object [“key”] = new value
structure to use spread to add to object
function nondestructive (object, key,value) {
const newObject = {…oldObject};
newObject[“key”] = value;
return newObject;
}
remove a property
delete object.key
debugging in Node
add debugger keyword where you want a breakpoint
for loop structure
for (initialization; condition; iteration) {
loop body
}
initialization
counter values. let age=30
condition
expression evaluated before each pass through. age<40
iteration
what happens at the end of each loop through. age++
loop body
code that runs on each pass through
while loop
while (condition) {
loop body
}
looping
process of executing a set of statements repeatedly until a condition is met
iteration
process of executing a set of statements once for each element
for … of structure
const myArray =[ ];
for (const element of myArray) {
console.log(element);
}
for… of for array or object?
array
for… in for array or object
object
for… in strucutre
for( const key in object) {
console.log(key);
}
function expression
const name = function () {
return “ “;
}
anonymous functions
no assigned identifier (no function name)
Scope
what you can access it and where you can access it
levels of scope
Global- highest level
Functional - in function
block - if then in function
hoisting
call function before a function
what are first class functions
functions as variables
while in a function
function functionName (parameter) {
let i=0(intiatlization);
while(condition){
console.log();
i++ (iteration);
}
iterating methods
find()
filter()
map()
reduce()
.find()
find single element that meets condition
.filter()
find and returning a list that meets a condition
.map()
modifying each element and return modify array
.reduce()
creating summary (adds all of the elements together)
pure function
function when invoked with the same arguments will always return the same results
impure function
functions when invoked with the same arguments will return different results
arrow function structure
const name = (parameter, parameter) => function body
arrow function with 1 parameter
const name = parameter=> function body
callback function
function called into another function
callback function stucture
function main(cb) {
console.log (cb());
}
main(function(){return “Hi”})
.forEach
executes function once for each array element.
When to use .forEach
-iterate through to log values
-directly mutate array we iterate though
structure to destruction of objects
let object = {
key1 = value 1,
key2 = value 2,
}
const{first, second} = object
console.log(first) //value1
structure to destruction of array
const array =[data1, data2,data3]
const [first, second, third] = array
console.log(first,second, third) // data1, data2, data3
structure destruction of strings
const name= “Rachel J Hamby”
const [firstName, middle, lastName] = name.split(“ “)
console.log(firstName) // Rachel
.querySelectorALL()
takes a string containing 1 or more class selectors and returns a collection of all matching elements
.querySelector()
take a string of 1 or more CSS compatible selectors and returns the first element that matches
what is used to describe DOM structure
a tree
Metadata
the class/id attributes that provide information about the node (the words in <></> )
.getElementByClassName(‘class’)
returns an array of all the elements with that class
.getElementByTagName(‘tag’)
returns all the elements with a particular tag
.getElementByID(‘id’)
returns the element with specific id
where should you put
at the end of body or use keyword defer before
child node
node nested inside another node
parent node
outer node with node nested inside it
self closing elements
aka void elements
only have a starting tag but no closing tag < information />
can you nest nodes in self closing elements
no
what does HTML consist of
elements that include HTML tags and their content
What does DOM const of
nodes that include tags
what are nodes
objects in Dom
all elements in DOM are nodes but not all nodes are HTML elements
true
open index.html
when typed in terminal will open browser console to show results of code
how open browser console on Mac
countrol + opt + J
API
Application Programming Interface- methods and properties the DOM provides via objects
DOM stand for
Document Object Model programming
what does DOM use JS to do
- Ask DOM to find an HTML element(s) in the rendered page
- Remove or add to the selected element
- adjust a property of selected element
Flatiron’s 3 pillars of web programming
- recognize events
- manipulate the DOM
- Communicate with the server
structure to assign default parameter
function functionName(parameter1, parameter2= default value){
return “parameter1, parameter2}
Change Text of Dom
element.textContent or element.innerText
what does .textContent and .innerText select
text inside an element
what are some attributes you can change in the DOM
.sre
.id
.className
.style
structure for changing attributes in the DOM
element.attributeToChange
create a DOM element with Javascript
document.createElement(“tag name”)
what are tag names
any HTML tag such as p, div, btn
how to add new element to the existing DOM
.append()
structure for appending element to DOM
document. element to append to. append(“new element”)
what are HTML,JS, and CSS role in application development
HTML- defines structure of website
JS- defines functionality of website
CSS - defines visualization and style of website
how to remove elements from DOM
element.remove() this removes the whole element or element.removeChild(childElement) this removes on the child element listed
what is event handleing
doing work in response to something happening on the webpage
what are events
something the user does (click, scroll, etc)
Common Events
mouse click
key Press
form submit
scroll
focus
blur
.addEventListener
add to element we want to listen and pass it 2 arguments 1. name event to listen for 2. call back function to handle the event
.addEvent Listener structure
element to assign event. addEventListener(event, call back function)
can assign callback directly in .addEventListener or assign outside and call just the name of the callback
true
HTML collections are arrays
false
.target
returns the element that triggered the event
what is the event name for a form
submit
how do you stop default of an event
.preventDefault
DOMContentLoaded
is an event that says to wait to perform until all of DOM has loaded
structure DomContentLoaded
document.addEventListener(“DomContentLoaded”, () => {
what to run after the DOM is fully loaded. Put all of the JS in this section.
}
Load different then DomContentLoaded
Load waits until all of images and CSS load before running the JS
what is AJAX
process used to make requests to the server and update the DOM without reloarding the webpage
what format does sever return data
JSON
what is JSON
Javascript Object Notation.
is a string that JS knows how to make into an object
what is the request response cycle
client (browser) request to Server (code running the website). Server send response back to client
HTTP
language used to communicate between the server and client
HTTP verbs
POST, GET, PATCH/PUT, DELETE,
other ones: HEAD, TRACE, OPTIONS, CONNECTS
CRUD HTTP
Create
Read
Update
Delete
What is REST
REpresentational State Transfer
standardised web communication
what is URL
Uniform Resource Locators
3 parts of URL
- protocol (http://)
- Domain Name (name.com)
- the path (/where/togo)
url protocol
format we use to send our request
url domain name
string of characters that indentifies the unique web location of the web server that host that particular website
path url
the particular part of the website we want to load
GET
most common
retrieves information of a source
POST
create new resource using data in the request
PUT
update an exisiting resource using data in the request
DELETE
delete a particular resource
HEAD
asks for a response (like GET without the body)
TRACE
echos back the received request
OPTIONS
returns the HTTP methods the server supports
CONECTS
convert the request to a TCP/IP tunnel (generally for SSL)
Request Headers
contains the information needs to fulfill the request
Request Headers format
method: HTTP verb
path: the resource
authority: the domain
Responses
2 sections: Headers and Body
response headers
contain metadata about response including status load
response body
what is rendered on the page
status codes
tells status of the request
what are 3 advantages of JSON
- human readable
- easy to convert to JS object
- compatible with other programming languages
Asynchronous JS
delayed functions that don’t follow the general order of line by line in JS
setTimeOut structure
setTimeOut{() => console.log(‘hi’), 3000}
How to start the sever
json-server –watch db.json
fetch()
asynchronous funtion that retrieves data simply by calling fetch() and passing the resource path as the argument
API
application programming interface is a way to expose others to data and/or functionality for public use
Synchronous
do one thing after finishing the first in order from left to right top to bottom
asynchronous
do a little of each task until all the task are complete
how to spot asynchronous
the task being passed a callback function
fetch() structure
function name(object) {
fetch(http://localhost:3000/data/) {
method: “HTTP VERB”,
headers:{
‘content- type’ : ‘application/json’}
body: JSON.stringify(object)})
.then(res => res.json())
.then (example => console.log(object))
}
