JavaScript

JavaScript script code must be placed inside the <script></script> tags, or you can create a separate .js file and import it via <script src="SomeFile.js"></script>.

Like Java, JS uses semicolons to separate statements.

Basics

Fundamentals

Use the var keyword to define a variable: var a = 0;, var a, b;; a variable defined without the var keyword defaults to a global variable, which can be accessed from anywhere.

You can also declare a variable with let, which is only valid within the code block {} where the let statement is located.

The constant declarator const works the same as in C++.

Function definition: function myFunction(a, b) { return a * b; }, very simple, but note the function keyword in front.

Note: There is a special self-invoking function form, (function () {})(); — function closures solve the counter problem, etc. You can search for it yourself; anyway, I probably won’t use it.

Defining data types isn’t much different from Python — both have dynamic typing (the same variable can be used as different types). The difference is that numbers aren’t distinguished as int or float, but use just number. You can check a variable’s type with the typeof keyword, e.g., typeof a to see the type of variable a.

Note: var myFunction = function (a, b) {return a * b}; var x = myFunction(4, 3); — just like in Python, functions can be assigned directly to a variable and called through the variable.

JS object definitions are also very simple: var person = { name: "Muxiao", hobby: "playing games" };, similar to a dictionary in Python or a HashMap in Java. You can also add object methods inside, defined as: methodName : function() { // code }. For more details, refer to the “Classes” section below.

JS can be called when an HTML event is triggered, but there are many HTML events, with a wide variety of categories. Common ones include mouse events onclick, onmouseover, onmouseout; page events onload, onunload, onchange, onresize, onpagehide, onpageshow; keyboard events onkeydown, onkeyup; form events onsubmit, onreset, onselect.

There are also many string methods, but most have the same syntax as Python.

Various basic statements such as if (condition) { // code } else { // code }, switch (expression) { case value1: // code break; default: // logic code }, for (initialization; condition; increment) { // code }, while (condition) { // code }, do { // code } while (), try { // code } catch (error) { // error handling code } finally { // code }, and so on, will not be elaborated further.

void() is also quite common in other languages; likewise, in JS it simply means it returns no value, but the expression inside the parentheses is still evaluated. The syntax is: void func() and javascript:void func(), or void(func()) and javascript:void(func()).

Therefore, there is a very common statement javascript:void(0), which does nothing and is typically used in a link’s href, e.g., <a href="javascript:void(0)"">Click me</a> means nothing is executed.

Output

JS output can be done via:

Using window.alert() to pop up an alert box.
~~Use the document.write() method to write content into the HTML document.~~(deprecated)
Use innerHTML to write into an HTML element.To get an element, you can use the document.getElementById() method.
Use console.log() to write to the browser’s console.

1
<button onclick="showAlert()">window.alert() popup alert box</button>
2
<button onclick="writeToElement()">innerHTML write to element</button>
3
<button onclick="writeToConsole()">console.log() write to console</button>
4

5
<div id="outputElement" class="output-container">
6
    This is the target element for innerHTML output
7
</div>
8
<div id="consoleOutput" class="output-container">
9
    Console output; please check the browser developer tools
10
</div>
11

12
<script>
13
    function showAlert() {
14
        window.alert("This is a message shown via window.alert()!");
15
    }
16

17
    function writeToElement() {
18
        const element = document.getElementById('outputElement');
19
        element.innerHTML = "<strong>This is content written via innerHTML - " + new Date().toLocaleTimeString() + "</strong>";
20
    }
21

22
    function writeToConsole() {
23
        console.log("This is content output via console.log() - " + new Date().toLocaleTimeString());
24
        document.getElementById('consoleOutput').innerHTML = "<strong>Message sent to the console; open the developer tools (right-click and inspect) to view it</strong>";
25
    }
26
</script>

document.getElementById('consoleOutput').innerHTML = "xxx" finds the element whose id is consoleOutput in the page, and then writes content into it.

This is the target element for innerHTML output

Console output; please check the browser developer tools

Classes

A class, i.e., class, is defined as class ClassName { constructor() { // constructor } funcName(){ // normal method } }. Note that methods inside a class are constructed directly with funcName, without the function keyword required outside a class.

Likewise, classes support inheritance:

1
class ChildClass extends ParentClass {
2
    constructor(/* parameters */) {
3
        super(/* parent class constructor parameters */);
4
        // child class initialization code
5
    }
6
}

getter and setter:

1
class MyClass {
2
    constructor(value) {
3
        this._value = value;
4
    }
5

6
    get value() {
7
        return this._value;
8
    }
9

10
    set value(newValue) {
11
        this._value = newValue;
12
    }
13
}
14

15
let myClass = new MyClass(42);
16
// using getter
17
console.log(myClass.value);
18
// using setter
19
myClass.value = 99;

Note: Even though a getter/setter is a method, do not use parentheses when you want to get the property value. The name of a getter/setter method cannot be the same as the property name, and any return inside it is ineffective.

Private: Use # to define private properties and private methods.

1
class MyClass {
2
    #privateField = 'private field';
3

4
    getPrivateField() {
5
        return this.#privateField; // only accessible inside the class
6
    }
7
}

Static methods & properties: Use the static keyword to define static methods or properties. Like Java, static methods or properties cannot access instance properties or instance methods, and must be accessed through the class name.

1
class MyClass {
2
    static staticMethod() {
3
        // static method
4
    }
5

6
    static staticProperty = 'static property';
7
}

Prototype

Every JavaScript object has an internal property [[Prototype]] (usually accessed via __proto__), which points to another object — that object is the prototype. Simply put, the prototype is how objects inherit.

Like Java, all JS objects inherit by default from Object.prototype, which is the prototype of all objects.

We can use the prototype to add methods that weren’t originally in the object:

1
// add a custom method to all arrays
2
Array.prototype.customPush = function (element) {
3
    this[this.length] = element;
4
    return this.length;
5
};
6

7
const numbers = [1, 2, 3];
8
numbers.customPush(4);
9
console.log(numbers); // [1, 2, 3, 4]
10

11
// add a method to all strings
12
String.prototype.reverse = function () {
13
    return this.split('').reverse().join('');
14
};
15

16
console.log('hello'.reverse()); // 'olleh'

Prototype chain inheritance:

1
// parent class constructor (non-class form)
2
function Animal(name) {
3
    this.name = name;
4
}
5

6
Animal.prototype.speak = function () {
7
    return `${this.name} made a sound`;
8
};
9

10
// child class constructor
11
function Dog(name, breed) {
12
    // call parent class constructor
13
    Animal.call(this, name);
14
    this.breed = breed;
15
}
16

17
// set up prototype chain inheritance: Dog's prototype is Animal
18
Dog.prototype = Object.create(Animal.prototype);
19
Dog.prototype.constructor = Dog;
20

21
// add child-specific method
22
Dog.prototype.bark = function () {
23
    return `${this.name} is barking`;
24
};
25

26
// override parent class method
27
Dog.prototype.speak = function () {
28
    return `${this.name} is speaking`;
29
};
30

31
const dog = new Dog('Wangcai', 'Golden Retriever');
32
console.log(dog.speak()); // Wangcai is speaking
33
console.log(dog.bark());  // Wangcai is barking
34
const animal = new Animal('Animal');
35
console.log(animal.speak()); // Animal made a sound
36
//console.log(animal.bark())  // undefined

Above we used the Object.create(proto, propertiesObject) method, which creates an object and sets its prototype to the specified object. proto: the prototype object of the new object (required); propertiesObject: optional parameter, used to add property descriptors to the new object.

1
// create a prototype object
2
const person = {
3
    name: 'Zhang San',
4
    age: 25,
5
    introduce: function () {
6
        return `I am ${this.name}, ${this.age} years old`;
7
    }
8
};
9

10
// use Object.create() to create a new object and set the person object as its prototype
11
const student = Object.create(person);
12
student.grade = 'Junior';
13
student.school = 'Tsinghua University';
14

15
console.log(student.name); // 'Zhang San' (inherited from prototype)
16
console.log(student.introduce()); // 'I am Zhang San, 25 years old' (inherited from prototype)
17
console.log(student.grade); // 'Junior' (own property)

DOM

DOM, the Document Object Model, is the API of the HTML document, used to manipulate the HTML document — that is, it can modify the HTML document.

We already introduced a bit of this in the “Output” section above; here it’s covered in more detail.

You can manipulate HTML elements via JS through the following methods:

id: document.getElementById('id')
class: document.getElementsByClassName('class')
tagName: document.getElementsByTagName('tagName')
select all of an element: document.querySelectorAll('element type name')

Note 1: The element obtained with document.getElementsByTagName('tagName') is an HTMLCollection object, so use [0] to get the first element.

Note 2: The element obtained with document.querySelectorAll('element type name') is a NodeList object, so you also need to use [0] to get the first element.

Above we wrote content via innerHTML. JS can also modify attributes: document.getElementById(id).attribute = new attribute value, e.g.: document.getElementById("image").src = "NEW.jpg"; changes the image’s src attribute to NEW.jpg.

Moreover, JS can modify styles: document.getElementById(id).style.property = new property value, e.g.: document.getElementById("ID").style.color = "blue"; changes the text color to blue.

Similarly, in “Fundamentals” we already saw a series of HTML events. Besides calling them directly via events, we can add event listeners to some elements, e.g.: document.getElementById("ID").addEventListener("click", function);Note that here the event listener has no on prefix, and the function has no parentheses.

Having added an event listener, there is naturally also a way to remove it: document.getElementById("ID").removeEventListener("click", function);

You can also use .appendChild(newElement) to add an element: below we add a paragraph.

1
var para = document.createElement("p");
2
var node = document.createTextNode("This is a new paragraph.");
3
para.appendChild(node);
4

5
var element = document.getElementById("id");
6
element.appendChild(para);

Note: There is also .insertBefore(newElement, oldElement) to insert before a certain element; this is omitted here.

Removing an element: To remove an element, you must know its parent element. Below we remove an element:

1
var parent = document.getElementById("div1");
2
var child = document.getElementById("p1");
3
parent.removeChild(child);

Replacing an element: Use .replaceChild(newElement, oldElement). Likewise, to replace an element, you also need to know its parent element.

1
var para = document.createElement("p");
2
var node = document.createTextNode("This is a new paragraph.");
3
para.appendChild(node);
4

5
var parent = document.getElementById("div1");
6
var child = document.getElementById("p1");
7
parent.replaceChild(para, child);

BOM

BOM, the Browser Object Model, is the browser’s API, used to manipulate the browser, for example:

Window: window
URL: location
Screen: screen
Browser: navigator
History: history

For window, commonly used properties and methods:

window.innerHeight - the inner height of the browser window (including the scrollbar)
window.innerWidth - the inner width of the browser window (including the scrollbar)
window.open() - open a new window
window.close() - close the current window Unfortunately, most browsers seem to have restricted this operation
window.moveTo() - move the current window Unfortunately, most browsers seem to have restricted this operation
window.resizeTo() - resize the current window Unfortunately, most browsers seem to have restricted this operation

location:

location.hostname returns the domain name of the web host
location.pathname returns the path and filename of the current page
location.port returns the port of the web host (80 or 443)
location.protocol returns the web protocol used (http: or https:)
location.href returns the URL of the current page
location.assign(url) loads a new document
location.replace(url) replaces the current document

Note: Both location.assign() and location.replace() load a new document, but they differ: location.assign() creates a new window that can be navigated back from, while location.replace() replaces the current window with no back navigation.

screen:

screen.availWidth - the available screen width
screen.availHeight - the available screen height

navigator:

navigator.appName - the browser name
navigator.appVersion - the browser version
navigator.userAgent - browser information
navigator.platform - the operating system running the browser
navigator.language - the browser language
navigator.cookieEnabled - returns whether the browser has cookies enabled
navigator.appCodeName - the browser code name

Note: A navigator’s properties may be changed by the user, so it’s best not to rely on these properties.

history:

history.back() - the same as clicking the back button in the browser
history.forward() - the same as clicking the forward button in the browser
history.go() - when the argument is positive, it goes forward the specified number of pages; when negative, it goes back the specified number of pages; when 0, it refreshes the current page.

Use with caution

There are also various popup dialogs:

1
// alert box
2
alert("Warning!");
3
// confirm box
4
confirm("Are you sure?");
5
// prompt box
6
var x = prompt("Enter your name:", "Harry Potter");

The operation result will be displayed here.

Timing events: setInterval(function, milliseconds) repeatedly executes the specified code at the specified millisecond interval; setTimeout(function, milliseconds) executes the specified code after waiting the specified number of milliseconds. Their counterparts are clearInterval(var) and clearTimeout(var), but what they stop must be a global variable.

1
// A feature that displays real-time time
2
const week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
3
    dom = document.getElementById("dateTxt"),
4
    checkTime = i => (i < 10) ? `0${i}` : i; // add a '0' before numbers less than 10
5
let today;
6

7
function startTime() {
8
    today = new Date();
9
    dom.innerHTML = `Weekday ${week[today.getDay()]}: ${checkTime(today.getHours())}:${checkTime(today.getMinutes())}:${checkTime(today.getSeconds())}`;
10
}
11

12
setInterval(startTime, 500); // loop timing, execute every 500 milliseconds
13

14

15
// A timer feature
16
const start = new Date();
17

18
function timer(start) {
19
    const now = new Date();
20
    const det = now - start;
21
    now.setTime(det);
22
    now.setHours(0);
23
    document.getElementById("id").innerHTML = now.toLocaleTimeString();
24
}
25

26
setInterval(function () {
27
    timer(start)
28
}, 1000);

You can also create/read Cookies via JS:

1
// create Cookie; can add expires to set the expiration time
2
document.cookie = "username=MuxiaoWF";
3

4
// read Cookie; returns all cookies as a string
5
var x = document.cookie;

Since cookies can only be appended at the end, to delete one you can use the expires mentioned above and set a deletion time expires=Thu, 01 Jan 1970 00:00:00 GMT.

Asynchronous

Asynchronous means multi-threading. JS is single-threaded, but can achieve asynchrony through callback functions or Promises.

Callback Functions

Callback functions are further divided into:

Synchronous callback: When the function executes, the synchronous code runs first, then the callback function.
Asynchronous callback: When the function executes, the asynchronous code runs first, then the callback function.

1
// Array's forEach method uses a synchronous callback
2
const numbers = [1, 2, 3, 4, 5];
3
numbers.forEach(function (num) {
4
    console.log(num * 2);
5
});
6
console.log('This line is output after the callback finishes executing');
7

8
// setTimeout is a typical use case for async callbacks
9
console.log('Start');
10
setTimeout(function () {
11
    console.log('Executed after 3 seconds');
12
}, 3000);
13
console.log('This line executes first');

Synchronous callback

Asynchronous callback

Promise

A Promise is an object in JavaScript used to handle asynchronous operations; it represents a result that will be returned at some point in the future (which may be a success result, or a failure reason).

A Promise has three states:

pending: the initial state, neither success nor failure
fulfilled: the operation completed successfully
rejected: the operation failed

A Promise has several methods:

.then(): the function called when the Promise succeeds.
.catch(): the function called when the Promise fails.
.finally(): the function called when the Promise completes, regardless of success or failure.

Basic usage is as follows:

1
// create a Promise
2
const myPromise = new Promise((resolve, reject) => {
3
    // async operation
4
    setTimeout(() => {
5
        const success = true;
6
        if (success) {
7
            resolve('Operation completed successfully');
8
        } else {
9
            reject('Operation failed');
10
        }
11
    }, 1000);
12
});
13

14
// use the Promise
15
myPromise.then(result => {
16
    console.log(result); // output: operation succeeded
17
}).catch(error => {
18
    console.log(error); // output: operation failed
19
}).finally(() => {
20
    console.log('cleanup work');
21
});

A Promise has several static methods:

.resolve() creates a Promise and resolves it immediately:

1
const resolvedPromise = Promise.resolve('Success');
2
resolvedPromise.then(value => {
3
    console.log(value); // output: success
4
});

.reject() creates a Promise and rejects it immediately:

1
const rejectedPromise = Promise.reject('Failure');
2
rejectedPromise.catch(error => {
3
    console.log(error); // output: failure
4
});

.all() waits for all Promises to resolve or reject:

1
const promise1 = Promise.resolve(3);
2
const promise2 = 42;
3
const promise3 = new Promise((resolve, reject) => {
4
    setTimeout(resolve, 100, 'foo');
5
});
6

7
// wait for all Promises to resolve
8
Promise.all([promise1, promise2, promise3]).then(values => {
9
    console.log(values); // output: [3, 42, "foo"]
10
});

.race() waits for all Promises to resolve or reject, and returns the result of the first one to resolve or reject:

1
const promise1 = new Promise((resolve, reject) => {
2
    setTimeout(resolve, 500, 'one');
3
});
4

5
const promise2 = new Promise((resolve, reject) => {
6
    setTimeout(resolve, 100, 'two');
7
});
8

9
// return the Promise that finishes first
10
Promise.race([promise1, promise2]).then(value => {
11
    console.log(value); // output: "two"
12
});

Promise’s error handling & chained calls: the return value in a chained call is passed to the next chain.

1
Promise.resolve()
2
    .then(() => {
3
        throw new Error('An error occurred');
4
    })
5
    .catch(error => {
6
        console.log(error.message); // output: error occurred
7
        return 'Recovery value';
8
    })
9
    .then(value => {
10
        console.log(value); // output: recovery value
11
    });

Promises also have limitations:

Cannot be canceled: Once created, a Promise cannot be canceled.
Memory usage: Unhandled Promises may cause memory leaks.
Complex error handling: In complex chained calls, error handling can become complicated.

Example:

1
// Example 1: Basic Promise
2
document.getElementById('basicPromise').addEventListener('click', () => {
3
    const resultDiv = document.getElementById('basicResult');
4
    resultDiv.innerHTML = '<div class="loading">Running...</div>';
5
    delay(2000, 'Basic Promise executed successfully!')
6
        .then(result => {
7
            resultDiv.innerHTML = `<div class="success">${result}</div>`;
8
        })
9
        .catch(error => {
10
            resultDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
11
        });
12
});
13
// Example 2: Chained calls
14
document.getElementById('chainPromise').addEventListener('click', () => {
15
    const resultDiv = document.getElementById('chainResult');
16
    resultDiv.innerHTML = '<div class="loading">Running chained calls...</div>';
17
    delay(500, 'Step 1 completed')
18
        .then(result => {
19
            resultDiv.innerHTML = `<div>${result}</div>`;
20
            return delay(500, 'Step 2 completed');
21
        })
22
        .then(result => {
23
            resultDiv.innerHTML = `<div>${result}</div>`;
24
            return delay(500, 'Step 3 completed');
25
        })
26
        .then(result => {
27
            resultDiv.innerHTML = `<div>${result}</div>`;
28
            resultDiv.innerHTML += '<div class="success">All chained calls completed!</div>';
29
        })
30
        .catch(error => {
31
            resultDiv.innerHTML += `<div class="error">Error: ${error.message}</div>`;
32
        });
33
});
34
// Example 3: Error handling
35
document.getElementById('successPromise').addEventListener('click', () => {
36
    const resultDiv = document.getElementById('errorResult');
37
    resultDiv.innerHTML = '<div class="loading">Running success operation...</div>';
38
    delay(1000, 'Operation succeeded!', false)
39
        .then(result => {
40
            resultDiv.innerHTML = `<div class="success">${result}</div>`;
41
        })
42
        .catch(error => {
43
            resultDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
44
        });
45
});
46
document.getElementById('errorPromise').addEventListener('click', () => {
47
    const resultDiv = document.getElementById('errorResult');
48
    resultDiv.innerHTML = '<div class="loading">Running failure operation...</div>';
49
    delay(1000, 'Operation failed!', true)
50
        .then(result => {
51
            resultDiv.innerHTML = `<div class="success">${result}</div>`;
52
        })
53
        .catch(error => {
54
            resultDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
55
        });
56
});
57
// Example 4: Parallel processing
58
document.getElementById('parallelPromise').addEventListener('click', () => {
59
    const resultDiv = document.getElementById('parallelResult');
60
    resultDiv.innerHTML = '<div class="loading">Running multiple operations in parallel...</div>';
61
    const promises = [
62
        delay(1000, 'Task A completed'),
63
        delay(2000, 'Task B completed'),
64
        delay(1500, 'Task C completed'),
65
        delay(800, 'Task D completed')
66
    ];
67
    Promise.all(promises)
68
        .then(results => {
69
            resultDiv.innerHTML = '<div class="success">All tasks completed:</div>';
70
            results.forEach((result, index) => {
71
                resultDiv.innerHTML += `<div>-${result}</div>`;
72
            });
73
        })
74
        .catch(error => {
75
            resultDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
76
        });
77
});
78
// Example 5: Race
79
document.getElementById('racePromise').addEventListener('click', () => {
80
    const resultDiv = document.getElementById('raceResult');
81
    resultDiv.innerHTML = '<div class="loading">Running race operation...</div>';
82
    const promises = [
83
        delay(2000, 'Slow operation'),
84
        delay(1000, 'Fast operation'),
85
        delay(3000, 'Very slow operation')
86
    ];
87
    Promise.race(promises)
88
        .then(result => {
89
            resultDiv.innerHTML = `<div class="success">Finished first: ${result}</div>`;
90
        })
91
        .catch(error => {
92
            resultDiv.innerHTML = `<div class="error">Error: ${error.message}</div>`;
93
        });
94
});

async/await

async/await is built on top of Promises, making asynchronous code look like synchronous code.

Add the async keyword before a function declaration to indicate the function is asynchronous: async function fetchData() { // function body }.

An async function always returns a Promise: if the return value is not a Promise, it is automatically wrapped into a resolved Promise; if it throws an exception, it returns a rejected Promise.

await can only be used inside an async function: const result = await somePromise; means pausing the execution of the async function to wait for the Promise to complete: if the Promise is resolved, it returns the resolved value; if the Promise is rejected, it throws an error (which can be caught with try/catch).

Example: As we said at the beginning, async/await is built on top of Promises, so anything that can be done with a Promise can also be done with async/await.

1
// Basic example
2
document.getElementById('asyncAwaitBasic').addEventListener('click', async () => {
3
    const resultDiv = document.getElementById('asyncAwaitResult');
4
    resultDiv.innerHTML = '<div class="loading">Running async/await operation...</div>';
5
    try {
6
        // use async/await instead of .then()
7
        const step1 = await delay(500, 'Step 1 completed (async/await)');
8
        resultDiv.innerHTML = `<div>${step1}</div>`;
9
        const step2 = await delay(500, 'Step 2 completed (async/await)');
10
        resultDiv.innerHTML += `<div>${step2}</div>`;
11
        const step3 = await delay(500, 'Step 3 completed (async/await)');
12
        resultDiv.innerHTML += `<div>${step3}</div>`;
13
        resultDiv.innerHTML += '<div class="success">async/await all completed!</div>';
14
    } catch (error) {
15
        resultDiv.innerHTML += `<div class="error">Error: ${error.message}</div>`;
16
    }
17
});