JS

set up VS Code

1. install node
2. terminal: “node —version” “npm —version”
3. install on VS code: “javascript ES6” “code runner”
4. change to run code on terminal by searching in the setting of VS code
5. write on VS code terminal: “npm install prompt-sync”

```javascript

Hello World

```

add every time

//yay

comment

/\* yay \*/

multi line comment

console.log(“yay”);

“to print stuff”, no quotation marks for numbers

to embed JS to html

let name;

creates variable

name = ‘james’;

give value to variable

let x = 8;

let y = 54;

console.log(x+y);

print math equations

let x = (6+3)/5;

create variables from math equations

const color = ‘red’;

consonant. unlike variables, consonants usually dont change value. usually make uppercase to emphasize it shouldnt change.

const temperature = 30+2;

number consonant. can use either in "" to make string number or just regular number to add later to it.

document.write(x);

unlike console.log, write in document puts it in html

number = 3;

count++;

adds 1 to number

number = 3;

count += 2

adds 2 to number and outputs result

var course = {name: "JS", lessons: 41}; document.write(course.name.length);

writes number of letters in the course name

var cuboid = {

length: 25,

width: 50,

height: 200 };

console.log(cuboid.length\*cuboid.width\*cuboid.height)

calculate volume

&&

and

||

or

var integerString = "24";

var num = Number(integerString);

convert string to number

var floatingNumString = "24.9876";

var num = Number(floatingNumString);

convert string to float

var numberAsNumber = 1234;

var numberAsString = numberAsNumber.toString();

convert answer to string

var total = price + (price \* taxRate);

var prettyTotal = total.toFixed(2);

var currencyTotal = "$" + pretty Total;

round decimals. rounds 9.5564 to 9.60 and makes total price with $ sign. good for shopping sites

var prettyTotal = total.toFixed();

no decimals. just leave parentheses empty.

var month = readLine()

if (month == "August") {

console.log("vacation");

} else if ( month == "September") {

console.log("september");

} else {

console.log("not vacation"); }

if, else with words

var score = parseInt(readLine(), 10)

if (score>87) {

console.log("excellent");

} else if (score > 40 && score < 88) {

console.log("good");

} else {

console.log("fail"); }

if, else with numbers

if (dayOfWeek === "Sat" || dayOfWeek === "Sun") {

alert("Whoopee!");

} else if (dayOfWeek === "Fri") {

alert("TGIF!");

} else {

alert("Shoot me now"); }

if, else with alert

let answer = "Picasso";

if (answer === "Picasso") {

console.log (answer + " is correct!"); }

trivia

switch(dayOfWk){

case "Sat": alert("Whoopee");

break;

case "Sun": alert("Whoopee");

break;

case "Fri": alert("TGIF!");

break;

default: alert("Shoot me now!");

switch statement (similar to else if) with words and alert

var day = 2;

switch (day) {

case 1: console.log("Monday");

break;

case 2: console.log("Tuesday");

break;

case 3: console.log("Wednesday");

break;

default: console.log("Another day"); }

switch statement (similar to else if) with numbers and console.log

const subscribed = true

console.log("auto update")

console.log(false)

\

boolean. yes subscribed but not auto update

console.log(!true)

boolean opposite ! turns into opposite

const votes = 4

console.log(votes === 5);

console.log(votes !== 5); //unequal

compare if 2 are equal, get boolean result

var newText = text.replace("yay", "oh no");

replace new

var text = text.replace("yay", "oh no");

replace original

var newText = text.replace(/yay/g, "oh no");

global replace (replace all in the text)

const prompt = require('prompt-sync')();

var expression = prompt("write here: ");

var lowerCaseText = expression.toLowerCase();

console.log(lowerCaseText);

get user input and turn into lower case on vs code (readLine doesn’t work on web)

website: get user input and turn into lower case (readLine doesn’t work on web)

var person = { name: "John", age: 31, favColor: "green", height: 183 };

object with list of variables

var x = person.age; //method 1

var x = person\['age'\]; //method 2

document.write(x);

access variable from object

function person(name, age, color) {

this.name = name;

this.age = age;

this.favColor = color; }

object constructer (more complicated object)

var p1 = new person("John", 42, "green");

var p2 = new person("Amy", 21, "red");

document.write(p1.age);

document.write(p2.name);

once you have an object constructor, you can use the new keyword to create new objects of the same type. "this" means that we're referring to sth in this object

function person(name, age) {

this.name = name;

this.age = age;

this.lastName = last name;

method - function inside object. "this" means that we're referring to sth in this object

function person(name, age) { 

this.changeName = function (name) {

this.name = name; } //changes the name

change name of object name

function person(name, age) { 

fullName: function () {

document.write(this.name + " " + this.lastName); //way 1

return this.name + " " + this.lastName; } }; //way 2

write full name from person function with name

var user = {

firstName = "first",

lastName = "last",

role: "Admin",

loginCount = 32,

facebookSignedIn = true,

courseList: \[\],

buyCourse: function(courseName) {

this.courseList.push(courseName); },

getCourseCount: function () {

return '${this.firstName} is enrolled in ${this.courseList.length} courses'; }, };

user.buyCourse("course 1");

console.log(user.getCourseCount());

count courses enrolled. 2 last lines to add another course

for (initializer; condition; final-expression) {

if (i==3) {

break; } //break loop prematurely

if (i==4) {

continue; } //skips only this one and continues to next

console.log(i) }

for loop.

The initializer is a variable, which increments the number of times the loop has run.

The condition is used to stop the loop.

The final-expression is run each time, after the loop's code has run. It is usually used to increment the variable used in the condition. 

for (let i=1; i

for loop. ++ increases value by 1

for (let i=0; i

for loop. outputs only even numbers

var expression = readLine () ;

for (var i = 0; i < 3; i++) {

console.log (expression) }; 

log input expression 3 times. i++ to increase value each loop

var x = 0;

for (var x=0; x

print even values from 0 to 20

function main() {

var depth = parseInt(readLine(), 10);

for(dis = 7, day = 1; dis < depth; dis += 7, day++) {

dis -= 2 }

console.log(day); }

snail in the well - climbs 7 goes back 2, how many days will it take to climb “depth”

while (condition) {

run code

//example:

let i=0;

while(i

while loop

while (true) {

document.log(true); }

boolean condition while loop

var x=2

do {

console.log(x + "
");

x++; }

while (x

do while loop

let count = 0; count++; // or count += 1

console.log(count);

game. when need to repeatedly add 1 like attempts at a game

let score = 0;

score—;

game. subtracts repeatedly

if (health < 1) {

console.log(“game over”); }

else if (health >= 1 && health

game. health status in game

let colors = \[‘red’, ‘pink’, ‘blue’\]

//or

var new colors = \[‘red’, ‘pink’, ‘blue’\]

array. make new array

console.log(colors\[2\]);

array. access variable from array. 3rd one in this example

color\[2\] = ‘green’;

array. change 3rd variable to green

colors.pop(1);

array. remove 2nd variable from array

colors.push("yellow");

array. adds variable to end

colors.shift();

removes 1st variable

colors.unshift("black");

array. adds variable to beginning

var colorArrays = colors.concat(colors2);

array. connects arrays. adds colors2 to colors array

var courses = new Array(3);

courses\[0\] = "HTML";

courses\[1\] = "CSS";

courses\[2\] = "JS";

console.log(courses\[2\]);

array. declare an array, tell it the number of variables it will have and add to it

cityToCheck = cityToCheck.toLowerCase();

array. going through an array. check from input. problem is user might enter in lower or uppercase. we code in lowercase and convert input to lowercase

function name_of_function() {

//code }

name_of_function();

function. 2 first lines to make function, last line to call it later

function login (user) {

console.log(“hi” + user); }

login(“James”);

function. make a login function and call it

function add(x, y) {

return x+y; }

add (1, 2);

return statement

function main() {

var eventExample = readLine();

// function call

setReminder(eventExample)

console.log("You set a reminder about " + eventExample) }

function setReminder() { };

function. set reminder

functionName(param1, param2, param3) {

// some code }

function parameters

function sayHello(name, age) {

document.write( name + " is " + age + " years old."); }

function. make sentence

function tellTime() {

var now = new Date();

var theHour = now.getHours();

var theMin = now.getMinutes();

alert("Current time: " + theHr + theMin); }

function. tell time

function greetUser(greeting) {

alert(greeting); }

function. greet user, can add any greeting we want

function main() {

var goalsTeam1 = parseInt(readLine(), 10);

var goalsTeam2 = parseInt(readLine(), 10);

// function call

finalResult(goalsTeam1, goalsTeam2)

if(goalsTeam1>goalsTeam2) {

console.log("Team 1 won"); }

if(goalsTeam2>goalsTeam1) {

console.log("Team 2 won"); }

if(goalsTeam2==goalsTeam1) {

console.log("Draw"); } } function finalResult() { };

function. find winner

function main() {

var num1 = parseInt(readLine(),10);

var num2 = parseInt(readLine(),10);

var num3 = parseInt(readLine(),10);

var average = avg(num1,num2,num3);

console.log(average) }

function avg(x,y,z){

return (x+y+z)/3 }

function. find average

function main() {

var amount = parseFloat(readLine(), 10);

var rate = parseFloat(readLine(), 10);

function convert (a,b){

var c = a \* b;

return c }

console.log(convert(amount, rate)); }

function. currency converter

function main() {

//take flight number and its status

var flightNumber = readLine();

var flightStatus = readLine();

var flight1 = new Flight(flightNumber, flightStatus)

//assign a flight object to flight1 variable

//output

console.log('The flight ' + flight1.number + ' is ' + flight1.status) }

function Flight(flightNumber, status) {

//fix the constructor

this.number = flightNumber;

this.status = status; };

function. flight status

function main() {

var prodID = readLine();

var price = parseInt(readLine(),10);

var discount = parseInt(readLine(),10);

var prod1= new Product(prodID, price);

console.log(prod1.prodID + " price: " + prod1.price);

prod1.changePrice(discount);

console.log(prod1.prodID + " new price: " + prod1.price); }

function Product(prodID, price) {

this.prodID = prodID;

this.price = price;

this.changePrice = function(discount) {

this.price = price - ((discount/100) \* price); } }

function. calculate discount

function person(name, age) {

this.name= name;

this.age = age;

this.yearOfBirth = bornYear; }

function bornYear() {

return 2016 - this.age; }

function. find birth year

function Contact(name, number) {

this.name = name;

this.number = number;

this.print = function () {

var x = this.name

var y = this.number

console.log(x+": "+y) } }

var a = new Contact("David", 12345);

var b = new Contact("Amy", 987654321)

a.print();

b.print();

function. a contact manager

Celcius:

Fahrenheit:

window.onload = function() { let c = document.getElementById("celsius”); let f = document.getElementById("fahr"); c.oninput = function() { f.value = (c.value \* 9/5) + 32: }; f.oninput = function() { c.value = (f. value 32)\* 5/9; };

function. temperature converter

var rightNow = new Date();

built in function. date

Math

built in function. all math functions begin with the word “Math.” begins with capital M and rounds up 0.5 to 1

scoreAvg = Math.round(scoreAvg);

//or

scoreAvg = Math.round(0.678);

built in function. math function to round up

scoreAvg = Math.ceil(1.03); //rounds to 2

built in function. math function to round up to closest round number

scoreAvg = Math.floor(1.03); //rounds to 1

built in function. math function to round down to closest round number

alert("Do you really want to leave this page?");

alert.

1 parameter: the text diplayed

var user = prompt("Please enter your name");

alert(user);

prompt.

user needs to enter value then click ok

var result = confirm("Do you really want to leave this page?");

if (result == true) {

alert("Thanks for visiting");

} else {

alert("Thanks for staying with us"); }

confirm.

verify with ok or cancel

navigator.geolocation.getCurrentPosition();

web. get user location

sessionStorage() //destroyed once user exits page localStorage() //stores data no expiration

web. choose what to do with data

log JS onto browser like html

Login window.onload = function() { let button = document.getElementById(“login”); btn.onClick = hello; };

give html buttons function. say hello on login

give html buttons function. give toggle function to button like on website

getElementById

getElementByTagName

target certain html. good for things like changing background color or size on click

let counter1 = 0;

while (counter1 < 5) {

console.log("\*\*\*\*\*\*\*\*\*\*---------");

counter1++; }

let counter2 = 0;

while (counter2 < 4) {

console.log ("-------------------");

counter2++; }

while loop example. flag while

for (let i = 0; i < 5; i++) {

console.log ("\*\*\*\*\*\*\*\*\*\*---------");

for (let i = 0; i < 4; i++) {

console.log ("-----------------");

for loop example. flag for