JavaScript

Ctrl + Shift + I or F12 to open the Dev Tools

alert("Hello World!")

// is a comment

2**4 is 16

10/2
5

15 % 14
1
6%2
0

clear() - to clear the console //STRINGS "Django is cool"
"Django"+" is super cool"
"Django is super cool"

"django".length
6

"x x".length
3

"hello \n start a new line"
"hello
start a new line"

"hello \t give me a tab"
"hello    give me a tab"

"hello \"quotes\" "
"hello "quotes" "

"hello \" jelly"
"hello " jelly"

"hello"[0]
"h"

Strings

"hello"[4]
"o"

"look at the dog"[12]
"d"

Variables

//VARIABLES

// let varName = value;

let bankAccount = 100;

bankAccount
100

let deposit = 50;

let total = bankAccount + deposit

total
150

let greeting = "Welcome back: ";

let name = "Andrei";

alert(greeting+name);

let myVariable
undefined

let bonus = null;
undefined

Some methods

alert("Hey!")
undefined

console.log("Hey I am in the console");
Hey I am in the console

prompt("Enter something")
"I type some text here"

let age = prompt("Enter your age: ")
undefined

age
"111"

Connecting JavaScript to HTML

<script src="script.js"></script>

Inside the script file:

alert("Welcome to www.aredel.com");

Ibs to kg

Script

let weightInKg; weightInKg = weightInIbs * 0.454; alert("It is "+weightInKg+" kg"); console.log("Conversion completed"); Test it here

Operators

true
true

false
false

3>2
true

2>3
false

2>2
false

2 >= 2
true

1 <= 3
true

2 == 2
true

"www.heihei.ru" == "www.heihei.ru"
true

"2" == 2
true

"2" === 2
false

5 !== "5"
true

5 != "5"
false

true == 1;
true

true === 1;
false

false == 0
true

false === 0
false

null == undefined
true

null === undefined
false

NaN == Nan
false

Logical operators

1 === 1
true

2 === 2
true


//AND
undefined

1 === 1 && 2 === 2
true

1===1 && 2===2 && 1===2
false

//OR
undefined

1 === 2 || 1 === 1
true

//NOT
undefined

(1===1)
true

!(1===1)
false

!!(1===1)
true

!!!!!(1===1)
false

Control Flow

IF statement

if (condition) {     //Execute some Code } else if (condition two) {     //Execute some other Code }     else {     //Execute some backup Code }

Example 1

let id == 100; console.log(id === 100 ? 'CORRECT' : 'INCORRECT')

Example 1

let hot = false
let temp = 60


if (temp>80){
hot=true
}
console.log(hot)

Example 2

let hot = false let temp = 100 if (temp > 80) {     console.log("Hot Outside!"); } else if (temp <= 89 && temp >= 50) {     console.log("Average temp Outside"); } else if (temp < 50 && temp >= 32) {     console.log("Its pretty cold out!"); } else {     console.log("Its very cold out!"); }

While Loop

while (condition){
// Execute some code while
// this condition is true
}

Example 1

let x = 0;

while (x < 5){
console.log("x is currently: "+x);
console.log("x is still less than 5, adding 1 to x");


x = x+1;
}

Example 2

let x = 0;

while (x < 5){
console.log("x is currently: "+x);
if (x===3){console.log("X IS EQUAL TO THREE!");
break;

}
console.log("x is still less than 5, adding 1 to x");

x = x+1;
}

Example 3

// Write a while Loop that prints out
// only the even numbers from 1 to 10

let num = 1;

while (num < 11){

if (num%2 === 0){
console.log(num);

}
num = num+1;
}

For Loops

For Loops allow you to continually execute code a specific number of times.

Javascript has three types of For Loops:

For - loops throught a number of times
For/In - loops through a JS object
For/of - used with arrays

A quick note, previously we used the notation: num = num +1
num += 1
num++
These are all the same

For Loop Syntaxis

for (statement1;statement2;statement3) { // Execute some code } Statement 1 is executed before the loop (the code block) starts. for (let i = 0;statement2;statement3) { // Execute some code } // Statement 2 defines the condition for running the loop for (let i = 0; i<5;statement3) { // Execute some code }

Example 1

for (let i = 0; i < 5; i++) { console.log("Number is "+i); }

Example 2

let word = "ABCDEFGHIJK"

for (let i = 0; i < word.length; i++){
console.log(word[i]);
}

Example 3

let word = "ABABABABAB" for (let i = 0; i < word.length; i=i+2) { console.log(word[i]); }

Spy Test

let LastName=prompt("Hello, please enter our Last Name"); console.log(LastName); let FirstName=prompt("Hello, please enter our First Name"); console.log(FirstName); let Age=prompt("Hello, please enter your Age"); console.log(Age); let Height=prompt("How tall are you?"); console.log(Height); let Pet=prompt("What is your pets name"); console.log(Pet); alert("Thank you so much for the information."); let nameCond = null let ageCond = null let heightCond = null let petCond = null if (LastName[0]===FirstName[0]) {nameCond=true;} else{nameCond=false;} if (Age<30&&Age>20){ageCond=true;} else{ageCond=false;} if (Height>170){heightCond=true;} else{heightCond=false;} if (Pet[Pet.length-1]==="y") {petCond=true;} else{petCond=false;} if (nameCond && ageCond && heightCond && petCond){ // My secret message console.log("Welcome Comrade! Youve passed the Spy Test") }else{ console.log("Sorry, nothing to see here.") }

Errors

Uncaught TypeError: Cannot read property 'textContent' of undefined

Uncaught SyntaxError: Unexpected token '<'l

Article author: Andrei Olegovich