Time to make the webpage interactive! And let’s start from the concept of variables and operators in JavaScript.

🐥 The way to attached JavaScript to HTML is by:

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

Variables

You can view variables as containers of data in the code You can use let keyword to declare a variable The = we use is to assign a variable

**let** user **=** "h80h";
let bday = "1998/5";

**console.log**(user, bday);
// You can simply log variable on console by log() function

And re-assigning is surly doable!

let price = 30;
console.log(`The price now is ${price}`);

price = 35;
console.log(`And it turns into ${price} now`);

// Re-assign make us able to use a variable 
// with different values sequencedly at one time running.

// You can combine variable and text by replace "" into **``**
// and add **${}** outside of variable.

BUT ! Re-assigning isn’t always doable. If we use const to declare a variable, the variable just can’t be re-assigned. Cuz it’s a constant. How can constant ever shows more than one value, right?

const pi = 3.14;
pi = 10;

console.log(pi);

//"Uncaught TypeError: Assignment to constant variable."
//You saw tan error and didn't get any log,
//cuz the script will stop running right away when it catches an error.

And there’s actually another keyword to declare variable, that is var, which is just the original way to declare variable. While we now have let and const which are better to use, so we barely use var any more. But it’s not bad to know its existence.

Operators(common)

Common operators: +(addition), -(subtraction), *(multiplication), /(division), **(exponentiation), %(modulus), ++(increment), --(decrement) ⇒ These two operators can only apply to an existing variable =(assignment), +=, -=, *=, /= (modify-and-assign)

Let’s understand them by examples

let a = 3 + 5; // first numeric operation; a = 8
let b = 6 - 4; // b = 2
let c = a / b; // third numeric operation

console.log(c);  // 4

// 3 & 5 are operands in first numeric operation, and + is the operator
// a & b are operands in third numeric operation, and / is the operator

let a = 3 * 2 // 6;
let b = 3 ** 2 // 9;
let c = 3 % 2 // 1; 
let d = 4 ** (1/2); // 2
let e = 8 ** (1/3); // 2

let a = 3++; // Error! Increment & decrement operator can only apply to variable
let b = 3--; // Error!!

let a = 2;
a += 2; // a = a + 2 => 4

let a =2 ;
a *= 3; // a = a * 3 => 6

let a = 2;
a *= 2 + 3; // 10
// modify-and-assign operator has the same precedence as normal assignment(2)
// So left part will evaluate first, a *= 5

// Cool examples
let a = 2;
let x = 1 + (a *= 2);
// a = 4(multiply by 2), x = 5

"" + 1 + 0; // "10"
**"" - 1 + 0; // -1, - only works with numbers, it convert empty "" into 0.**
**true + false; // 1**
6 / "3"; // 2
"2" * "3"; // 6
4 + 5 + "px"; // "9px"
"$" + 4 + 5; // "$45"
"4" - 2; // 2
**"4px" - 2; // NaN**
" -9 " + 5; // " -9 5"
**" -9 " - 5; // -14, convert " -9 " into -9 (ignoring the spaces around it)**
null + 1; // 1, null becomes 0 after the numeric conversion
**undefined + 1; // NaN, undefined becomes NaN after the numeric conversion, NaN + 1 = NaN**
**" \\t \\n" - 2;** // -2, \\t & \\n are both space character,
              // so **" \\t \\n" means empty string,  becomes 0 after numeric conversion**