The most popular language used in web
Created by NTUgEEkserver side
: install node + npm
client side
: open your browser :)var
(Globally scoped, unintuitive) is almost deprecatedlet + const
(ES2015, block-scoped)
// modifiable variable
let a = 100;
// const variable, use CONST_CASE
const FULL_SCORE = 100;
Identifier: alphanumeric strings with "$" and "_".
(Cannot start with number.)
Single type (64-bit floating-point, IEEE 754)
let temperature = -10;
let maxImageWidth = 500;
const PI = 3.14159;
let x = 7.13e19; // 7.13 x 10^19
let thisIsAHexNumber = 0x7c; // 7 * 16 + 12 * 1 = 124
Infinity: larger than what it can store
NaN: Not a Number (0/0)
MDNtrue
or false
Every expression can be truthy or falsy,MDN
Buta
is truthy does not meana == true
Single-quoted or Double-quoted
let string1 = "Double-quoted";
let string2 = 'Single-quoted';
let string3 = '"double-quotes" inside single-quotes is fine';
let string3 = 'escape \'single-quotes\' inside single-quotes';
Use single-quoted 'strings' when possible.MDN
Ordered collection, can be heterogeneous
let array = [1, '2', [3]];
console.log(array[1]); // '2'
console.log(array.length); // 3
array.length = 1;
console.log(array); // [1]
A lot more useful methods:MDNforEach
,filter
,push
,pop
,join
,sort
...
Unordered collection (property, value pair)
let object = {
name: 'ntuee',
students: 800,
};
// two ways to access properties
// one is simple
console.log(object.name); // 'ntuee'
// the other is more dynamic
console.log(object['n' + 'am' + 'e']); // 'ntuee'
Javascript Functions, Arrays... are actually all objects!!MDN
Used to explicitly indicate a variable or object has no value.
let object = {
name: null,
students: null,
};
console.log(object.name); // null
MDN
Returned when:
let object = {
name: null,
students: null,
};
let whatIsThis;
console.log(object.courses); // undefined
console.log(whatIsThis); // undefined
MDN
+ - * / % == != <= >= ++ -- && ||
==
casts both values to the same type and then compare===
must be same type
Read Equality table.
How conditions are evaluated.
undefined
, null
, NaN
, 0
, ''
, false
Read Equality table.
let a = 1;
let b = a; // copies value
console.log(a); // 1
b = 2;
console.log(a); // 1, remains the same
let a = [1];
let b = a; // copies reference
console.log(a); // [1]
b[0] = 2;
console.log(a); // [2], changed by accessing b
Javascript is weird
WATif {...} else if {...} else {...}
switch (...) { case ... default ... }
() ? ... : ...
while (...)
do {...} while (...)
for (let x ; ... ; ...) {}
function f(x, y, z) {
return x + y + z;
}
// function is actually an object
let f = function(x, y, z) {
return x + y + z;
}
// ES6 arrow functions
let f = (x, y, z) => {
return x + y + z;
}
function g(f, x, y) {
return f(x, y);
}
g((x,y) => {
return x + y;
}, 1, 3); // 4
Returns value via calling callback
function getSomeValue(cb) {
let value;
// get value...
cb(value);
}
Common: HTML DOM Events, Pointer Events
Reference: MDN
// with pure javascript
target.addEventListener('click', listener[, options]);
// javascript in HTML
<div onclick="myfunction()">
Reference: MDN
Asynchronous JavaScript and XML