Fundamentals Flashcards
Adds items to the end of an array
Item.push
Removes items from the end of an array
Item.pop
Adds items to the beginning of an array
Item.unshift
Removes the first item from an array if you don’t specify
Item.shift
How do you get today’s date information?
new Date()
This returns DOW, M, D, Y, Time, Time Zone (Time Zone Name)
How to return the numeric value of the current day of the week?
today.getDay()
It will return a 0-6, with the week starting on Sunday at 0.
How to find the current hour of the day?
today.getHours()
Returns the numeric value of a 12-hour clock
How to find the current minute?
today.getMinutes()
Returns the current minute(s) of the current hour from 1-59.
How to get the current second(s) of the day.
today.getSeconds()
Returns the current second(s) from 1-59 of the current minute.
How to find the current date of the day in a month?
today.getDate()
Returns a value between 1-31
How to find the current month of the year?
today.getMonth();
Returns a value between 0-11 for months January through December.
*Will need to add a + 1 to the end to have it equal 1-12
How to find the current year?
today.getFullYear();
Returns the full year in a 4-digit numeric
How to get a random number?
Math.random() will give you a random number from 0 to 1. This includes decimals. If you want it to go higher, multiply it by a number (like “random()*20”) however it will only go from 0-19 in that case, so you should add a +1 at the end.
How to get a random number between 1-20?
Math.trunc(Math.random()*20)+1)
Math.trunc will remove the decimals (it will truncate the number).
The global object of JavaScript in the browser?
Type “window” in the console
Should we ever use “var”?
No. Always use “const” or “let”
Where should variables and functions be defined?
Variables should always be defined at the top of your code.
Functions should be declared next.
What is a “boolean”?
A boolean is a true or false statement (or truthy and falsey)
How do we multiply something by itself multiple times?
**
Multiply multiply take the original item and multiplies it by itself but only when a number is added to the end (like squared or cubed). For example if we wanted 2 to the power of 4, it would be:
2 ** 4 = 16
How can we round a value to the nearest integer?
Math.round()
If we wanted to take a number with multiple decimal points and round it (up or down; whatever is closest) we simply add this bit to the front and put the value in the parenthesis.
Math.round(7.6432456) will simply round to 7.
If it’s a string with a value, it’ll do the same:
const markBMI = 7.6432456
Math.round(markBMI)
markBMI = 7
T/F: an “else if” statement needs to end with an else?
False
T/F: ‘18’ = = = 18
False.
Strict equality has no type coercion.
T/F: ‘18’ = = 18
True
Loose equality has type coercion.
T/F: ‘18’ = 18
False.
“Invalid left-hand side in assignment”
The Ternary Operator
If/Else statement without If/Else
Item 1 >= Item 2 ? True : False
How do we create an Arrow function?
1) What do we want to calculate? (birthYear)
2) Draw an Arrow (=>)
3) What do we want to return? (2037 - birthYear)
4) Store it in a variable (const calcAge)
5) Put it together
const calcAge = birthYear => 2037 - birthYear
How do we create an object?
Objects are created like arrays with {} instead of []. Each item is named with parameters too.
Example:
const john = {
name: ‘John Smith’,
weight: 92,
height: 1.95,
};
REMEMBER: every line gets a comma
How do we create a method?
A method is essentially a function ran inside of an object. Instead of defining full parameters though, we use “this” and the parameters from inside of the object. Example:
const john = {
name: “John smith”,
weight: 92, height: 1.95,
calcBMI: function ()
{return this weight / this.height ** 2;},
};
Note: methods will not call themselves. You have to later call them to get a property out of them if you create a property within them.
How do we create a new property within an object?
One of two ways:
1) use the object name.new property
ex: mike.dog = ‘Taco’ would add “dog: ‘Taco’ to the mike object.
2) create it as part of a method.
Ex:
calcAge: function() {
this.age = 2037 - birthYear;
return this.age;
}
In this case, “age” is being added to the object this method belongs to.
How to create a function?
function functionName(parameter) {
return what we want the function
to do;
}
The Ternary Function
const functionName = function (parameter) {
item 1 >= item 2 ? True : False;
}
Can’t be used for every function but for true/false or “If this then that” statements, it works.
What are the components of a “for” loop?
for (let i = 0; i < item.length; i++) {
Return what we want it to do during the loop
}
How do we combine an array?
Using the Spread Operator
const data1 = [17, 21, 23];
const data2 = [12, 5, -5, 0, 4]
const data = […data1, …data2]
How to transform an array into a string
1) Add all of the values of the array into an accumulator variable (starting at ‘ ‘ because the string is empty; literally called empty string)
let string = ‘ ‘
2) In each iteration, we will add the current value of the array
string = current value of string + array at the current position
(str += ‘${array[i]}’)
What is it called when you include JavaScript code inside of an HTML file?
In-line JavaScript
What goes at the top of every HTML page?
<!DOCTYPE HTML>
What is the first/last line in the hierarchy of an HTML document?
<html>
</html>
After <html> what is the next layer in the HTML hierarchy?
<body>
</body>
What are Statements?
Statements are the list of instructions to be executed by the computer that make up a program.
How do we add text to an HTML file?
<script> document.write(“Look at this monkey!”); </script>
How do we add a pop-up to an HTML file?
<script> alert(“Look at this monkey!”); </script>
How do we add an image to an HTML file?
<img src=“Image.location.fileextension”></img>
What is a Variable?
A value that can be altered, depending on conditions or data passed to the program.
What is “Escaping the character” and how is it used?
Adding a backslash () tells the computer that the character that follows has a special meaning.
Example: \’ or \” means that the quotations after the slash is not meant to end the string but to be printed.
In HTML, what does <br></br> do?
“br” stands for “break” as in “line break”. It means the same as hitting “enter” only in the code.
How would we replace the first instance of the word “grey” with the word “gray”?
Element.replace(‘grey’,’gray’)
How would we replace all instances of the word “grey” with the word “gray”?
Element.replaceAll(‘grey’,’gray’)
What are callback functions?
Functions we previously created that we “call back” during higher order functions.
How do you do a global replacement?
.replace(/_/g, ‘ ’)
The “g” stands for “Global”. In this example, every underscore is replaced with a space in that parameter.
How do we create a new prompt?
prompt()
prompt(message)
prompt(message, defaultValue)
This instructs the browser to display a dialog box with an optional message prompting the user to input some text and either confirm or cancel the dialog.
How do I add the ability to click a button?
First part of the line is the location we want to click (in this case we’ll call it “btnSort”).
btnSort.addEventListener(‘click’, what we want to happen when we click).
What does “join” do?
Joins a string back together (opposite of “split”)
What does “split” do?
Splits a string into multiple parts based on a divider
Can do the same thing with the “slice” method but that is for very short phrases and is a bit more complicated to implement.
What does “bind” do?
manually set “this” keyword but don’t immediately call; creates a new function where “this” is bound
Const bookEW = book.bind(eurowings)
Lesson: we defined an object (lufthansa) and within the object created a function (lufthansa.book). Later, we invoked that function using the call method under a different object (eurowings). Now, instead of using the call method where we have to specify where the “this” points to we simply bind that property to the new variable.
What does “call” do?
Tells the function that the next parameter is where “this” should point to.
function greet() {
console.log(this.animal, “typically sleep between”, this.sleepDuration);
}
const obj = {
animal: “cats”,
sleepDuration: “12 and 16 hours”,
};
greet.call(obj); // cats typically sleep between 12 and 16 hours
What does “apply” do?
Tells the array that the next parameter is where “this” should point to.
const array = [“a”, “b”];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // [“a”, “b”, 0, 1, 2]
How do we add padding to the beginning of a string?
Element.padStart
How do we add padding to the end of a string?
Element.padEnd
How do we change elements to lower case?
Element.toLowerCase()
How do we change elements to upper case?
Element.toUpperCase()
What does “Element.startsWith” do?
Element.startsWith() is a true/false statement regarding what boolean an element starts with
Does monkey start with an m? Yes
So element.startswith(m) would be true
What does “Element.endsWith do”?
Element.endsWith() is a true/false statement regarding what boolean an element ends with
Does monkey end with a y? Yes
So element.endswith(y) would be true
What does “indexOf” do?
indexOf is used to simply find something within something else.
const airline = ‘TAP Air Portugal’;
console.log(airline.slice(0, airline.indexOf(‘ ‘)));
It returns “TAP” as the parameter is basically a wild-card search to return whatever is at position 0, in this case it is TAP.
What does “lastIndexOf” do?
lastIndexOf() finds the last occurrence of something inside a particular parameter. CASE SENSITIVE
const airline = ‘TAP Air Portugal’;
console.log(airline.slice(airline.lastIndexOf(‘ ‘) + 1));
Returns “Portugal”
What does “slice()” do?
Creates a shallow copy of an array into a new array at particular points
const fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];
const citrus = fruits.slice(1, 3);
// fruits contains [‘Banana’, ‘Orange’, ‘Lemon’, ‘Apple’, ‘Mango’]
// citrus contains [‘Orange’,’Lemon’]
(Remember, the “end” number is the item before the end. So 1, 3 means item one (orange) and the item BEFORE 3 (lemon).)
How do we turn a normal function into an arrow function?
(function (a) {
return a + 100
});
1) Remove the word “function”.
2) Place an arrow between the argument and the opening body bracket.
3) Remove the body braces and “return”.
4) Remove the parameter parenthesis.
a => a + 100
What is the “Map” method?
Map creates a brand new array copy of the original array (it “maps” the values of the original). Can be used to loop over arrays; more useful than for/each method.
const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
const eurToUsd = 1.1;
const movementsUSD = movements.map(mov => mov * eurToUsd);
Will now return a new array with the “movements” converted from Euros to US dollars.
What is the “Filter” method?
filter() creates a shallow copy of a portion of a given array, filtered down to the elements that pass the test we created within the function
const words = [‘spray’, ‘limit’, ‘elite’, ‘exuberant’, ‘destruction’, ‘present’];
const result = words.filter(word => word.length > 6);
console.log(result);
// Expected output: Array [“exuberant”, “destruction”, “present”]
What is = ?
It’s an assignment operator that sets the variable to the left to the value of the expression to the right.
a = 10 works
10 = 10 / ‘a’ = 10 / ‘a’ = ‘a’ doesn’t.
What is ==?
A comparison operator which transforms the operants to the same type before comparison.
10 == ‘10’ works
What is ===?
Strict equality comparison operator which compares one for one. They need to match exactly.
‘2’ === 2 is false
2 === 2 is true
What is the “includes” method?
includes() method determines whether an array includes a certain value among its entries, returning “true” or “false”.
const pets = [‘cat’, ‘dog’, ‘bat’];
console.log(pets.includes(‘cat’)); true
console.log(pets.includes(‘at’)); false
