Javascript

What is Javascript?

JavaScript history

• Initially developed at Netscape in 10 days under the name LiveScript.
• In 1995 renamed to JavaScript, for marketing reasons.
• In 1997 ECMAScript became the name of the standardized version.
• Now we have ECMAScript 6(or ES2015)

...but what is JavaScript?

• curly-bracket language (like C++ & Java)
• interpreted, not compiled (like Perl & Lua)
• dynamic typed (like PHP & Python)
• prototype-based inheritance (like Self & MOO)

A general-purpose language

• Most commonly used in web browsers: client-side JavaScript
• Also server-side JavaScript, e.g. In web servers: Node.js

Basics

Variables

// modifiable variable
let a = 100;

// const variable, use CONST_CASE
const FULL_SCORE = 100;
            

Identifier: alphanumeric strings with "$" and "_".
(Cannot start with number.)

Datatypes

• Number, NaN, Infinity
• Boolean
• String
• Array
• Object
• Function
• null
• undefined

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)

Boolean

Every expression can be truthy or falsy,
But a is truthy does not mean a == true

String

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.

Array

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:
forEach , filter , push , pop , join , sort ...

Object

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!!

null

Used to explicitly indicate a variable or object has no value.

let object = {
  name: null,
  students: null,
};
console.log(object.name); // null
            

undefined

Returned when:

• a variable was declared but never assigned a value
• when accessing an object property that does not exist

let object = {
  name: null,
  students: null,
};
let whatIsThis;
console.log(object.courses); // undefined
console.log(whatIsThis); // undefined
            

Operators

+ - * / % == != <= >= ++ -- && ||

Equal vs Strict Equal

• == casts both values to the same type and then compare
• === must be same type

Read Equality table.

Truthy vs Falsey

How conditions are evaluated.

• Falsey: undefined , null , NaN , 0 , '' , false
• Truthy: The rest are truthy

Read Equality table.

Primitive vs Reference Types

Primitive Types

• Number, Boolean
• Fixed size in memory.
• Variable stores value.

Primitive Types

let a = 1;
let b = a; // copies value
console.log(a); // 1
b = 2;
console.log(a); // 1, remains the same
            

Reference Types

• Array, Object
• Dynamic size in memory.
• Variable stores reference.

Reference Types

let a = [1];
let b = a; // copies reference
console.log(a); // [1]
b[0] = 2;
console.log(a); // [2], changed by accessing b
            

Fun Stuff

Javascript is weird

Control Statements

Mostly what you know

• if {...} else if {...} else {...}
• switch (...) { case ... default ... }
• () ? ... : ...
• while (...)
• do {...} while (...)
• for (let x ; ... ; ...) {}

What you may not know

• for (let x in y) {} MDN
• for (let x of y) {} (ES2015) MDN

Function

Syntax

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 as argument

function g(f, x, y) {
  return f(x, y);
}

g((x,y) => {
  return x + y;
}, 1, 3); // 4
            

Callback Function

Returns value via calling callback

function getSomeValue(cb) {
  let value;
  // get value...
  cb(value);
}
            

Why Callback Function?

• Things can be asynchronos
• Javascript never blocks

Events

Event Loop

Web Events

Common: HTML DOM Events, Pointer Events

Reference: MDN

Register Event Listener

// with pure javascript
target.addEventListener('click', listener[, options]);

// javascript in HTML
<div onclick="myfunction()">
            

Event Propagation

Reference: MDN

AJAX

Asynchronous JavaScript and XML

You Don't need Jquery