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>
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.
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**