Javascript is a language often used within html documents to trigger interactive features.

It is strongly recommended to use const-declaration if the value doesn't change (this ensure that it will not accidentally change); and let-declaration for local variable (variables shall not live beyond where they are needed). Use var-declaration only for global variable.

Identifiers

Identifiers are names given to identify entities (such as variables and functions). The rules for valid identifiers are:

• An identifier can contain letters (a-z, A-Z), digits (0-9), underscore (_) and dollar sign ($). But it cannot begin with a digit (0-9).
• Identifiers are case-sensitive. A rose is NOT a Rose, and is NOT a ROSE.
• Identifiers cannot be keywords.
• Take note that hyphen (-) and space are NOT allowed. Hence, font-size, roman new, are NOT valid identifiers. You should use underscore (_) instead of hyphen (-).

Literals

A literal is a fixed value, e.g., 5566, 3.14, "Hello", true, that can be assigned to a variable, or form part of an expression.

Types

JavaScript is object-oriented. But, It supports both primitive types and objects.

JavaScript supports these primitive types:

1. string: a sequence of characters. Strings literals are enclosed in a pair of single quotes or double quotes (e.g., "Hello", 'world').
2. number: takes both integer (e.g., 5566) or floating-point (e.g., 3.14159265).
3. boolean: takes boolean literal of either true or false (in lowercase).
4. undefined: takes a special literal value called undefined. Take note that undefined is both a type and a literal value.
5. symbol: new in ECMAScript 6. A data type whose instances are unique and immutable.

JavaScript also supports these object types and value (we shall discuss object later):

1. object: for general objects.
2. function: for function objects. Unlike Java, function is a first class object in JavaScript, e.g., you can assign a function to a variable.
3. null: A special literal value for unallocated (unconstructed) object.

Unlike most of the general programming languages (such as Java/C/C++/C#) which are strongly type, JavaScript is loosely type (similar to most of the scripting languages such as UNIX Shell Script, Perl, Python). You do not have to explicitly declare the type of a variable (such as int and float) during declaration. The type is decided when a value is assigned to that variable. If a number is assigned, the variable takes on the number type and can perform numeric operations such as addition and subtraction. If a string is assigned, the variable takes on the string type and can perform string operations such as string concatenation. In other words, the type is associated with the value, instead of the variable.

Operator typeof

You can use the operator typeof to check the type of the current value assigned to a variable.

The undefined Type and undefined Literal Value

An undeclared variable (via var keyword) takes on a special type called undefined. You cannot refer to its value.

When a variable is declared (via var keyword) without assigning an initial value, it takes on the type undefined and holds a special value called undefined (uninitialized is probably more precise?!), As soon as a value is assigned, the variable takes on the type of that value. The act of putting a value into a variable sets its type. You can change the type of a variable by re-assigning a value of another type. In other words, type is associated with the value, not the variable. Types are converted automatically as needed during execution (known as dynamically-typed).

For examples,

(ES6) Constants const-declaration

You can create a read-only, named constant with the keyword const (in place of var). For example,

The number Type, Literals & Operations

A variable of type number holds a number, either an integer or a floating-point number.

Integer literals can be expressed in:

• Decimal: begins with a digit 1 to 9 (not 0), e.g., 123 or -456,
• Octal: begins with a digit 0, e.g., 0123 or -0456,
• Hexadecimal: begins with 0x (or 0X), e.g., 0xA1B2 or -0XA1B2.
• Binary: begins with 0b (or 0B), e.g., 0b10011100 or -0B11001100. [Binary may not be supported in some browsers.]

Floating-point literals can be expressed in the usual form (e.g., 3.1416) or scientific notation, e.g., -1.23e4, 4.56E-7.

JavaScript also provides some special number literals:

• infinity: e.g., 1/0
• -infinity: e.g., -1/0
• NaN (Not-a-Number): e.g., 0/0, or converting the string 'Hello' to a number.

Arithmetic Operations

Arithmetic operations, as tabulated below, can be applied to numbers. The following results are obtained assuming that x=5, y=2 before the operation.

In JavaScript, arithmetic operations are always performed in double-precision floating-points (NOT integers). That is, 1/2 gives 0.5 (instead of 0 in Java/C/C++). You may use the built-in function parseInt() to truncate a floating-point value to an integer, e.g., parseInt(55.66) and parseInt("55.66") gives 55. You may also use the built-in mathematical functions such as Math.round(), Math.floor(), Math.ceil() for converting a floating-point number to an integer.

Exponent Operator (**)

ECMAScript 2016 (ES7) introduces exponent operator (**), you can write a**n, e.g., 2**5.

Before ES7, you have to use built-in function Math.pow(base, exponent).

Arithmetic cum Assignment Operators

These are short-hand operators to combine two operations.

Some frequently-used Number built-in Functions

• parseInt(str), parseFloat(str): Parse the str until the first non-digit, and return the number; or NaN.
• Math.round(num), Math.floor(num), Math.ceil(num):
• Math.random(): Generate a random number between 0 (inclusive) and 1 (exclusive).
• isNaN(str): return true if the str is not a number. For example, console.log(isNaN('123')); //false console.log(isNaN('1.23')); //false console.log(isNaN('123abc')); //true It is interesting to note that JavaScript does not have counterpart functions like isNumber(), isNumeric().
• Number(str): Return the number represented by str, or NaN. Take that that this function name begins with uppercase, because this is a type casting operation.
• .toFixed(decimalPlaces): Return this number/string to the given number of decimal places. For example, var n = 1.2345; console.log(n.toFixed(2)); //1.23 console.log(n); //1.2345 (No change)

The string Type, Literals & Operations

A string is a sequence of characters enclosed within a pair of single quotes or double quotes (e.g., "Hello", 'world', "5566", '3.1416'). You can use an escape sequence to represent special non-printable characters (such as \n for new-line, \t for tab, and \uhhhh for Unicode character); and to resolve conflict (e.g., \", \', \\).

Unlike Java/C/C++, but like HTML/CSS's attributes, you can use either single quotes or double quotes for string. This is handy as you can use single quotes if the string contains double quotes (e.g., '

JavaScript is dynamically-type, and performs type conversion automatically. When a string value is used in arithmetic operations (such as subtraction or multiplication), JavaScript runtime automatically converts the string to a number if it represents a valid number; or a special number called NaN (not-a-number) otherwise. For example,

The '+' Operator: Addition or Concatenation?

If both the operands to a '+' operator are numbers, it performs the usual numeric addition. However, if one (or both) of the operand is a string, the '+' operator is overloaded to perform string concatenation. The other operand will be converted to a string, if necessary. For example,

string/number conversion: parseInt(), parseFloat() and Number()

To convert a numeric string to a number, you could use the built-in functions parseInt() or parseFloat(), which returns a number if conversion is successful; or NaN otherwise. For example,

Take note that parseInt() works as long as the string begins with digits. It will parse up to the first non-digit. For example,

You can also use the function Number(), which converts the object argument to a number that represents the object's value; or NaN if conversion fails. For example,

String's Properties

• .length: E.g., str.length returns the length of the string.

String's Operations

• .toUpperCase(): returns the uppercase string.
• .toLowerCase(): returns the lowercase string.
• .charAt(idx): returns the character at the idx position. Index begins from 0. Negative index can be used, which counts from the end of the string.
• .substring(beginIdx, endIdx): returns the substring from beginIdx (inclusive) to endIdx (exclusive).
• .substr(beginIdx, length): returns the substring from beginIdx of length.
• .indexOf(searchStr, fromIdx?): Return the beginning index of the first occurrence of searchStr, starting from an optional fromIdx (default of 0); or -1 if not found.
• .lastIndexOf(searchStr, fromIdx?): Return the beginning index of the last occurrence of searchStr, starting from an optional fromIdx (default of string.length); or -1 if not found.
• .slice(beginIdx, endIdx): Return the substring from beginIdx (inclusive) to endIdx (exclusive).
• .split(delimiter): returns an array by splitting the string using delimiter.
• Searching/Modifying Strings using Regular Expression: See "Regular Expression".

(ES6) Multi-line Template String and Substitution

Prior to ES6, You can enclosed a string literal using either single or double quotes (e.g., "Hello", 'world', "5566", '3.1416'). Escape sequences are to be used for special characters (e.g., \n for new-line, \t for tab) and resolving conflict (e.g., \", \', \\). Multi-line strings are not supported.

ES6 introduces template string, delimited by back-quotes, for example,

There is no need to escape single or double quote inside a template string. But you need to use escape sequence for back-quote, i.e., \`.

Template strings support multi-line strings. All whitespaces (blank, tab, newline) within the back-quotes are part of the multi-line string. For example,

Template strings support substitution, which allow you to embed any valid JavaScript expression as part of the string in the form of ${expr}, for example,

Multi-line template string with substitution provides a more convenient way to write out formatted HTML fragment. For example,

The boolean Type, Literals & Operations

A variable of the type boolean holds a value of either true of false. true and false are keywords in JavaScript.

As mentioned, JavaScript performs automatic type conversion if necessary. During the type conversion, the following 6 values are converted to false:

1. number 0
2. number NaN (Not-a-Number),
3. empty string ("", ''),
4. undefined value,
5. boolean false,
6. null (unallocated) object.

All the other values are converted to true.

You need to memorize this: !value return true if value is one of these 6 values: 0, NaN, "", undefined, false, and null.

Comparison (Relational) Operators

The following relational operators, which produce a boolean result, are defined in JavaScript. The results are obtained assuming num=8, str='8'.

=== vs. ==

The strictly equality operator === returns true if both operands have the same type and same value; while == returns true if both operands have the same value, but may or may not be the same type.

JavaScript needs to provide two different equality operators, because it is loosely type and carries out automatic type conversion in many situation. For example,

• When a number is compared with a string, the string is converted to a number (or NaN if it does not contain a valid number). Hence, (8 == "8") returns true. But, (8 === "8") returns false, because the operands are not of the same type.
• ===, !==, ==, != can be applied to boolean (and all the JavaScript types), e.g., ("" == false) gives true (because empty string is converted to false); but ("" === false) gives true.
• It is RECOMMENED to use === (or !==), instead of == (or !=), unless you are certain that type is not important.

String Sorting (Collation) Order

When two strings are compared, the encoding order (ASCII/Unicode table) is used. Hence, string "8" is greater than string "10".

For example,

Logical (Boolean) Operators

The following boolean (or logical) operators are provided in JavaScript:

Notes: ^ in JavaScript is a bitwise XOR operator, not really boolean XOR (which is rarely needed).

Short-Circuit Evaluation for Boolean Expressions

Evaluation of logical operations are always short-circuited. That is, the operation is terminated as soon as the result is certain, e.g., (false && ...) is short-circuited to give false, (true || ...) gives true, the ... will not be evaluated.

Explicit Type Conversion

The JavaScript runtime performs type conversion automatically. However, at times, you may need to convert from one type to another explicitly.

Converting a number to a string: Simply concatenate the number with an empty string "", e.g., "" + 5 gives "5".

Converting a string to a number: Use built-in functions parseInt(str), parseFloat(str) or Number(str) to convert a str which contains a valid number. For example, parseInt("55") gives 55, parseInt(55.66) gives 55, parseInt("55.66") gives 55, parseFloat("55.66") gives 55.66, parseInt("55px") gives 55, but parseInt("Hello") gives NaN.

Converting a float to an integer: Use parseInt() (e.g., parseInt(55.66) gives 55), or built-in mathematical functions such as Math.round(), Math.ceil() or Math.floor().

Flow Control - Decision (Conditional)

JavaScript provides these flow control construct. The syntax is the same as Java/C/C++.

[ES12] Logical Nullish Assignment Operator (??=)

The logical nullish assignmebnt (x ??= y) assigns only if x is null or undefined (i.e. nullish). For example,

Flow Control - Loops (Repetition)

JavaScript provides the following loop constructs. The syntax is the same as Java/C/C++.

break, continue and label

The following loop-control statements are provided (same syntax as Java/C/C++):

• break - exit the innermost loop.
• continue - abort the current iteration, and continue to the next iteration.
• label: - provide an identifier for a statement, which can be used by break label and continue label.

Try to avoid these statements, as they are hard to trace and maintain.

Arrays

An array is an indexed collection. An array can be used to store a list of items (elements) under a single name with an running integer index. You can reference individual element via the integral index in the form of arrayName[idx]. Furthermore, you can conveniently process all the elements of an array collectively via a loop with a varying index.

Creating an Array via "Array Initializer [value1, value2, ...]"

You can create an array by assigning an array literal to a variable, known as Array Initializer, in the form of [value1, value2, ...]. For examples,

Take note that JavaScript's array literal is enclosed in square bracket [...], instead of {...} in Java/C/C++. JavaScript uses {...} for object literal (to be discussed later).

You can also use an Array Initializer to create an array with missing indexes. For example,

Accessing an Item

You can access individual element of an array via an integral index, in the form of arrayName[idx]. The index of the array begins at 0, and shall be a non-negative integer.

Array's length

The length of the array is maintained in a variable called length, which can be accessed via arrayName.length. In fact, the property .length returns the last integral index plus 1, as JavaScript's array index is 0-based. Nonetheless, you are allow to manipulate (write) the .length. For example,

Dynamic Arrays

Unlike Java/C/C++, the JavaScript array is dynamically allocated. You can add more elements to an array. You can also remove the content of an element using keyword delete. For examples,

Accessing All Items using for-loop with index

Array is usually processed collectively using a loop, e.g.,

The JavaScript's for-in loop

JavaScript provides a special for-index-in loop to process all the elements in an array. The syntax is as follows, where idx takes on the each of the index number of element which are not undefined.

For example,

The JavaScript's for-of loop

JavaScript provides a special for-item-of loop to process all the elements in an array. The syntax is as follows, where item takes on the each of the element including the undefined.

Add/Remove item(s)

You can:

• Use index [array.length] to add one item to the end of an array.
• Use delete to remove a particular index (set it to undefined).
• Use .push() to add one or more items to the end of an array. push() returns the resultant length of the array.
• Use .unshift() to add one or more items to the beginning of an array. unshift() returns the resultant length of the array.
• Use .pop() to remove and return the last item of an array.
• Use .shift() to remove and return the first item of an array.

For examples,

Array's Properties (Variables) and Operations (Functions)

The Array object has these commonly-used properties:

• .length: the number of items including undefined items. In fact, .length is set to the last index plus 1.

It has these commonly-used methods:

• array.join([separator]): join the elements of an array together into a single string, separated by the separator (defaulted to ','). For example, var fruits = ["apple", "orange", "banana"]; console.log(fruits.join()); //apple,orange,banana (string) console.log(fruits.join("|")); //apple|orange|banana (string)
• str.split([separator, limit]): Reverse of join(). Take a string and split into an array based on the separator. For example, var str = 'apple,orange,banana'; var fruits = str.split(); console.log(fruits); //[ 'apple,orange,banana' ] console.log(fruits.length); //1 fruits = str.split(','); console.log(fruits); //[ 'apple', 'orange', 'banana' ] console.log(fruits.length); //3 str = 'coffee|*|tea|*|milk'; fruits = str.split('|*|'); console.log(fruits); //[ 'coffee', 'tea', 'milk' ] console.log(fruits.length); //3 fruits = str.split('*'); console.log(fruits); //[ 'coffee|', '|tea|', '|milk' ] console.log(fruits.length); //3
• array.concat(value1, value2, ..., valueN): returns a new array composing of this array and the given arrays or values. For example, var fruits = ['apple', 'orange']; var moreFruits = fruits.concat('banana', 'watermelon'); console.log(moreFruits); //[ 'apple', 'orange', 'banana', 'watermelon' ] console.log(fruits); //[ 'apple', 'orange' ] (No change)
• array.reverse(): reverses the order of elements in the array, the first becomes last. For example, var a = ["1", "2", "3", "4", "5"]; a.reverse(); console.log(a); //[ '5', '4', '3', '2', '1' ]
• array.sort(): sorts the elements in the array. For example, var a = ["8", "10", "a", "b"]; a.sort(); console.log(a); //[ '10', '8', 'a', 'b' ] a = [8, 20, 5, 100]; a.sort(); console.log(a); //[ 100, 20, 5, 8 ] Take note take, by default, number are also sorted based on ASCII/Unicode order. To sort numbers numerically, you can supply a callback comparison function. The function shall take 2 arguments, say a and b, and return a negative number if a < b; a positive number if a > b; and 0 if a == b. For example,var a = [8, 20, 5, 100];/ a.sort( function(a, b) { return a - b; } ); console.log(a); //[ 5, 8, 20, 100 ]
• array.slice(beginIdx, endIdx): extracts and returns a section of an array from beginIdx (inclusive) to endIdx (exclusive). For example, var a = ["a", "b", "c", "d", "e"]; console.log(a.slice(1, 4)); //[ 'b', 'c', 'd' ] (include start index but exclude end index) console.log(a); //[ 'a', 'b', 'c', 'd', 'e' ] (no change)
• array.splice(startIdx, countToRemove, insertItem1, insertItem2, ...): removes elements from an array, and insert elements at its place. For example, var a = ["1", "2", "3", "4", "5"]; a.splice(2, 2, "a", "b", "c", "d"); console.log(a); // ["1", "2", "a", "b", "c", "d", "5"] //[ '1', '2', 'a', 'b', 'c', 'd', '5' ] console.log(a.length); //7
• array.indexOf(searchItem[, startIdx]) and array.lastIndexOf(searchItem[, startIdx]): search for the index of the item forward or backward. It returns -1 if item cannot be found. For example, var a = ['a', 'b', 'c', 'a', 'b', 'c']; var searchItem = 'b'; var idx = a.indexOf(searchItem) console.log(idx); //1 idx = a.indexOf(searchItem, idx + 1) console.log(idx); //4 idx = a.indexOf(searchItem, idx + 1) console.log(idx); //-1 (not found) console.log(a.lastIndexOf('a')); //3 console.log(a.lastIndexOf('a', 2)); //0
• .push(): adds one or more elements to the end of an array and returns the resultant length of the array.
• .pop(): removes and return the last element from an array.
• .shift(): removes and returns the first element from an array.
• .unshift(): adds one or more elements to the front of an array and returns the resultant length of the array.

Functional Programming in Filter-Map-Reduce pattern

Arrays also support these iterative methods that iterate through each item of the array, to support functional programming of filter-map-reduce pattern.

• array.forEach(callback): takes a function with an argument which iterates through all the items in the array. var fruits = ['apple', 'orange', 'banana']; fruits.forEach( function (item) { console.log('processing item: ' + item); }); //processing item: apple //processing item: orange //processing item: banana NOTE: This syntax is meant to support functional programming of filter-map-reduce pattern.
• array.map(callback): return a new array, which contains all the return value from executing callback on each item. For example, var fruits = ['apple', 'orange', 'banana']; var results = fruits.map(function (item) { console.log('processing item: ' + item); return item.toUpperCase(); }); //processing item: apple //processing item: orange //processing item: banana console.log(results); //[ 'APPLE', 'ORANGE', 'BANANA' ]
• .filter(callback): return a new array, containing the items for which callback returned true. For example, var fruits = ['apple', 'orange', 'banana']; var result = fruits.filter( function (item) { console.log('processing item: ' + item); return /.*e$/.test(item); }); //processing item: apple //processing item: orange //processing item: banana console.log(result); //[ 'apple', 'orange' ]
• array.every(callback): return true if callback returns true for ALL items.
• array.some(callback): return true if callback returns true for at least one item in the array.

For detailed specification and examples about a built-in object, check "Core JavaScript References".

Associative Arrays of Key-Value Pairs

An associative array is an array of key-value pair. Instead of using numbers 0, 1, 2,... as keys as in the regular array, you can use anything as key in an associative array. Associative arrays are used extensively in JavaScript and jQuery.

JavaScript does not support native associative array (it actually does not support native array too). In JavaScript, associative arrays (and arrays) are implemented as objects (to be elaborate later).

You can create an associative array via the Object Initializer. For example,

Take note that Array initializer uses square brackets [ ... ]; while object initializer (for associative array) uses curly brackets { ... }.

Functions

Functions are useful:

• when you have to use the same codes several times.
• as the JavaScript event handler.
• make your program easier to read and understood.

A function accepts zero or more arguments from the caller, performs the operations defined in the body, and returns zero or a single result to the caller.

Functions are objects in JavaScript (to be discussed later).

The syntax for user-defined function is:

Functions are declared using the keyword function. Unlike Java/C/C++, you do not have to specify the return-type and the types of the arguments because JavaScript is loosely typed. You can use a return statement to return a single piece of result to the caller anywhere inside the function body. If no return statement is used (or a return with no value), JavaScript returns undefined.

For client-side JavaScript, functions are generally defined in the HEAD section, so that it is always loaded before being invoked.

To invoke a function:

Client-Side JavaScript Function Examples

Function's arguments

Function has access to an additional built-in variable called arguments inside its body, which is an array containing all the arguments. For example,

Pass by Value vs. Pass by Reference

In JavaScript, primitive arguments are passed by value. That is, a copy of the variable is made and passed into the function. On the other hand, objects (including array and associative array) are passed by references. That is, if you modify the content of an object inside the function, the "copy" outside the function is also affected.

The Default Function Arguments

JavaScript lets you invoke a function omitting some trailing arguments. It sets the omitted arguments to the value undefined. For example,

You can use this feature to provide default value to function argument, for example,

In the above example, we allow caller to omit the trailing arguments (a2, a3) or pass a null value (which is a special literal for unallocated object).

The common idiom in practice today is to use the short-circuited OR expression (as in a3) to provide default value if no value (undefined or null) is passed, provided the valid inputs cannot be false, 0, '', and NaN that evaluate to false.

(ES6) Function with Default Parameter Values

ES6 greatly simplify the above by introducing default parameter value in the form of param = defaultValue. For example,

(ES6) Rest/Spread Operator (...) and Arrow-Function Notation

ES6 also introduces rest/spread operator (...) and arrow-function notation. See ES6 article.

Anonymous (Inline) Functions

In JavaScript, you can define an anonymous function (without a function name) using the following syntax:

Anonymous function is often used in event handlers and others.

Function Variables

In JavaScript, a variable can hold a primitive (number, string, boolean) or an object.

In JavaScript, functions are first-class object. Hence, a variable can also hold a function object. For example,

Two Ways in defining a function

As seen in the above example, there are two ways to define a function:

1. Use a function declaration statement in the form of: function functionName ( parameters ) { ...... }
2. Use a function expression by assigning an anonymous function to a variable: var functionVarName = function ( parameters ) { ...... }

Functions as Arguments

Recall that a function takes zero or more arguments from the caller. In JavaScript, arguments can be a primitive or object. Since functions are first-class objects in JavaScript, a function may take another function as its argument.

For example, the following function take a function and an array as its arguments, and apply the function to the array.

Nested Functions

In JavaScript, you can define a function inside a function. For example,

Function as the return value

You can return a function from a function. For example,

Interacting with Users

Client-side JavaScript provides these built-in top-level functions for interacting with the user:

• alert(str): Pop-up a box to alert user for important information. The user will have to click "OK" to proceed. The alert() returns nothing (or undefined).
• prompt(str, defaultValue): Pop-up a box to prompt user for input, with an optional defaultValue. The prompt() returns the user's input as a string. For example, var number1 = prompt('Enter the first integer:'); var number2 = prompt('Enter the second integer:'); alert('The sum is ' + number1 + number2); alert('The sum is ' + (Number(number1) + Number(number2)));
• confirm(str): Pop-up a box and ask user to confirm some information. The user will have to click on "OK" or "Cancel" to proceed. The confirm() which returns a boolean value. For example, var isFriday = confirm("Is it Friday?"); if (isFriday) { alert("Thank God, it's Friday!"); } else { alert('Not a Friday'); }
• document.write(str), document.writeln(str): Write the specified string to the current document. The writeln() (write-line) writes a newline after the string, while write() does not. Take note that browsers ignores extra white spaces, including newlines, in an HTML document, and treat newline as a single blank character. You need to write a
  or

  ...

  tag to ask the browser to display a line break.

The following top-level built-in functions are available to client-side as well as server-side (or standalone):

• console.log(value): write to the system (or error) console, used mainly for debugging.

Other Top-level Built-in Functions

JavaScript also pre-defines the following top-level global functions.

• parseInt(str), parseFloat(str): parses the given str and returns the numeric value or NaN (Not-A-Number). The parseInt(str, radix) accepts an optional radix (or base). For example, var a = parseInt("88"); console.log('type: ' + typeof a + ', value: ' + a); //type: number, value: 88 a = parseInt("88.99"); console.log('type: ' + typeof a + ', value: ' + a); //type: number, value: 88 a = parseInt("14px"); console.log('type: ' + typeof a + ', value: ' + a); //type: number, value: 14 a = parseInt("Hello"); console.log('type: ' + typeof a + ', value: ' + a); //type: number, value: NaN a = parseFloat("88.99"); console.log('type: ' + typeof a + ', value: ' + a); //type: number, value: 88.99 a = parseFloat("0.5%"); console.log('type: ' + typeof a + ', value: ' + a); //type: number, value: 0.5 a = parseFloat('Hi'); console.log('type: ' + typeof a + ', value: ' + a); //type: number, value: NaN
• Number(object): returns the number representation of the object. It works for String object, as well as many objects such as Date.
• isFinite(number): returns true if number is not NaN, Infinity or -Infinity.
• isNaN(number): returns true if number is NaN. Useful for checking the output of parseInt() and parseFloat().
• eval(codes): evaluate the given JavaScript codes, which could be an expression or a sequence of statements. For example: [TODO]
• encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent(): encode or decode name-value pairs for the HTTP request, by replacing special characters with %xx. For example: [TODO]

An Introduction to Events (for Client-side JavaScript)

Client-side JavaScript are often event-driven. That is, a function (called event handler) will be fired in response to a certain user's or browser's action that generates an event.

The commonly-used events are:

• click: generated when the user clicks on an HTML element.
• mouseover, mouseout: generated when the user positions the mouse pointer inside/away from the HTML element.
• load, unload: generated after the browser loaded a document, and before the next document is loaded, respectively.

The event handler, called oneventname (such as onclick, onmousemove, onload), is the function that responses to an event. The event handler is typically attached to the target HTML tag, e.g.,

Hello

Click this paragraph to say Hi...

More about events in the later sections.

Objects

Objects are Everywhere!

JavaScript is object-oriented (OO), and objects are everywhere in JavaScript. Arrays are objects. Functions are also objects. Primitives like string and number are auto-box to objects in many operations. Almost everything in JavaScript can be an object, possibly except the undefined and null (object)!

It is crucial to understanding objects to be proficient in JavaScript, as they are everywhere, and they are used extensively in JavaScript plug-ins like jQuery, AngularJS, React, and etc.

JavaScript, however, does not support all the OO features, so as to keep the language simple.

Properties and Methods

In conventional object-oriented programming languages (like Java/C++/C#), an object is a collection of properties and methods under a common name.

• Properties (also called variables, attributes): contains values associated with the object.
• Methods (also called operations, functions): contains actions that the object can perform.

For example, a Car object has properties such as make, model, price, capacity; and methods such as startEngine(), move(), brake(), stopEngine().

Unlike full-fledged OO languages, JavaScript is designed on a simple OO paradigm. A JavaScript object is simply a collection of properties. A property is an association between a name (or key) and value (i.e., name-value pair or key-value pair). If the value is a function (recall that functions are first-class objects that can be assigned to a variable), the property is known as a method. In other words, JavaScript does not differentiate between properties and methods like conventional OO languages. A method is simply a property holding a function.

Creating Objects via Object Initializer

You can create a new object by directly assign an object literal to a variable, known as Object Initializer. The syntax is as follows:

• A JavaScript object is a collection of properties. Each property is an association of a name (key) and value pair.
• The name and value are separated by a colon ':'.
• The name-value pairs are separated by commas ','. No comma is needed after the last name-value pair.
• The property name could be a string or a number. For string name which is NOT a valid identifier (an valid identifier begins with an alphabet, underscore or dollar sign; and does not containing special characters like blank or '-'), you need to enclose the name with single or double quotes. Otherwise, the quotes are optional. For example, var student = { name: 'Tan Ah Teck', age: 21, 88: 'hello', 'my name': 'Peter', 'font-size': '14px', } Take note that if the property name's string is a proper identifier, you can omit the quotes. This is commonly practiced by the developers.
• The property value could be a literal, a variable or an expression.
• A property's value could take all JavaScript types, including primitives (string, number, boolean), object or function. The property is known as a method, if it holds a function. JavaScript does not differentiate between variables and methods like conventional OO languages (Java/C++/C#). A method is simply a property holding a function.
• Objects created via Object Initializer are instances of class Object.

Trailing Commas

Trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to JavaScript code. If you want to add a new property, you can add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome. JavaScript has allowed trailing commas in array literals since the beginning, and later added them to object literals (ES?), and more recently, to function parameters (ES?) and to named imports and named exports (ES?).

Property Accessors: The Dot and Index (Square Bracket) operator

In JavaScript, you can access an object's properties via either:

1. The dot (.) operator: In the form of objectName.propertyName or objectName.methodName(arguments), just like Java/C++.
2. The index [] operator (or bracket notation): In JavaScript, you can also use the index operator to access the object properties, in the form objectName[propertyName], just like accessing an array item.

The delete operator

You can remove a property (including method) via "delete propertyName".

Operator instanceof

You can use the instanceof operator to check if a particular instance belongs to a particular class of objects, e.g.,

The .hasOwnProperty() method

The obj.hasOwnProperty(propertyName) returns true if obj has the specific propertyName.

Operator in

You can use the in operator to check if a particular property belongs to an object, for example,

Example 1: A Simple Object

Example 2: An object having object properties

An object's property can hold primitives (number, string). It can also hold an object.

Example 3: An object with function

A JavaScript object's property can also hold a function (or method). You can assign to an anonymous function or a named function as shown in the following example.

To quote or not to quote the name in name-value pair?

The name (of the name-value pair) can take a string or a number, e.g., var a = {88:'b', 'c':'d', fontSize:'14px'}.

Many developers do not enquote the string name, if it is a valid identifier (a valid identifier begins with an alphabet, '_' or '$'; and does not contain special characters like blank and '-'). For example, var a = {b:'c', d:'e'} is the same as var a = {'b':'c', 'd':'e'}. However, you need to enquote a string name if it is NOT a valid identifier, e.g., var a = {'1b':'c', 'my name':'peter', 'font-size':'14px'}.

The string value must be enquoted; otherwise, it will be treated as a variable name.

Dot Operator vs. Index (Square Bracket) Operator

You can access an object's property via either dot operator or index operator. Dot operator is commonly used as it is more concise and used in conventional OO languages. But index operator allows access to properties containing special characters and selection of properties using variables, which is not feasible with dot operator. For example,

Iterate through all the properties of an Object

There are three ways to iterate through all properties of an object:

1. for...in: traverses all enumerable properties of an object and its prototype chain.
2. Object.keys(obj): return an array of all enumerable property names.
3. Object.getOwnPropertyNames(obj): return an array of all property names.

For example,

Operator with

Establishes the default object for a set of statements. The syntax is:

The null vs undefined Literal Values

As discussed earlier:

• An undeclared variable has type of undefined, and its value cannot be referenced.
• A declared but uninitialized variable has type of undefined, with a special literal value of undefined too. [undefined is both a type and a literal value!]
• A unallocated object has a special literal value of null. Take note that null is an object!

In boolean expressions, both the null and undefined evaluate to false (together with empty-string "", number 0 and NaN, and boolean false). To check for null value, use value === null, as value == null (or !value) returns true for null, undefined, "", 0, NaN, and false

Built-in JavaScript Objects

JavaScript provides many useful global objects, such as Array, Date, String, and Number.

I shall discuss some commonly used objects here. For detailed specification and examples about a built-in object, check "Core JavaScript References".

Creating an Object via Constructor and the new Operator

All the built-in objects define a so-called constructor, which is a special method having the same name as the object, for creating new instances. To invoke the constructor, you need to use a special new operator.

For example, the Date object has a constructor method called Date(). To construct a new instance of Date object:

The typeof and instanceof Operators

As seen from the above examples, the typeof operator returns the type of a value, which can be a primitive type (such as number, string, boolean) or object (including function).

The instanceof operator check if the value is an instance of a class.

The .toString() and .valueOf() Methods

The following methods are available to all built-in JavaScript objects:

• .toString(): returns a string description about this object.
• .valueOf(): converts this object to a primitive value such as number.

The Array Object and Associative Arrays

For an introduction to arrays, read the "Arrays" section.

Nowadays, we usually create an array via Array Initializer in the form of [value1, value2, ...]. Nonetheless, as arrays are objects of class Array, we could also construct an array by invoking the Array() constructor with the new operator. This is more complex and, hence, less commonly used today (but may show up in old codes and books).

For example,

An Associative Array is a Generic "Object", not an "Array" Object

For an introduction to arrays, read the "Associative Arrays" section.

JavaScript does not really support associative array, but allow you to add properties to an object, using the associative array syntax and index operator. In other words,

Using an Array Object for Associative Array

In JavaScript, we usually create an associative array using a generic object (via the Object Initializer). You can also create an associative array via Array constructor. For examples,

In this case, additional properties are added into an Array object as object's properties. The array has .length of 0, as .length reflects only the numerical indexes! Using an array object for associative array is not recommended. I describe here for completeness.

The String Object vs string Primitive Type

JavaScript provides primitive string type. It also provide a String class as a wrapper class for primitive string. Read "The string Type, Literals and Operations" for primitive string.

A string can be created in two ways:

1. directly assigned a string literal in the form of "..." or '...' to a variable, resulted in a string primitive.
2. invoke the String object constructor to construct a String object.

For examples,

The former is a primitive string, while the latter is a String object.

String object is a wrapper for primitive string, which provides many useful methods for manipulating strings. See "The string Type, Literals, and Operations".

A string primitive is "auto-box" to a String object, when you invoke a String object's methods. For example,

The Number Object vs number Primitive Type

JavaScript provides primitive number type. It also provide a Number class as a wrapper class for primitive number. Read "The number Type, Literals and Operations" for primitive number.

The Number object is a wrapper object for primitive number, which provides many properties and methods. Again, a number primitive is auto-box to a Number object, when you invoke a Number object's operation. See "The number Type, Literals, and Operations".

The Boolean Object vs boolean Primitive Type

JavaScript provides primitive boolean type. It also provide a Boolean class as a wrapper class for primitive boolean. Read "The boolean Type, Literals and Operations" for primitive boolean.

The Boolean object is a wrapper object for primitive boolean, which provides many properties and methods.

The Date Object

Commonly-used constructors:

• new Date(): constructs a Date object with the current date and time.
• new Date(dateTimeStr): constructs a Date object with the given date-time string in an acceptable form (e.g., "Month, day, year, hours:minutes:seconds").
• new Date(year, Month, day): where month is 0-11 for Jan to Dec.
• new Date(year, Month, day, hours, minutes, seconds, milliseconds)

Commonly-used methods:

• getDate(), setDate(), getMonth(), setMonth(), getFullYear(), setFullYear(): get/set the date (1-31), month (0-11 for Jan to Dec), year (4-digit year).
• getDay(): get the day of the week (0-6 for Sunday to Saturday).
• getHours(), setHours(), getMinutes(), setMinutes(), getSeconds(), setSeconds(): get/set the hours/minutes/seconds.
• getTime(), setTime(): get/set the number of milliseconds since January 1, 1970, 00:00:00.

The Math Object

Commonly-used properties:

• E, PI: Euler’s constant and PI.
• LN2, LN10, LOG2E, LOG10E: ln(2), ln(10), log2(e), log10(e).
• SQRT2, SQRT1_2: square root of 2 and one-half.

Commonly-used methods:

• abs(x)
• sin(a), cos(a), tan(a), asin(x), acos(x), atan(x), atan2(x,y)
• cell(x), floor(x), round(x)
• exp(x), log(x), pow(base,exp), sqrt(x)
• max(x,y), min(x,y)
• random(): returns a pseudo-random number between 0 and 1.

The Function Object

For an introduction to functions, read "Function" section.

Every function in JavaScript is actually a Function object!

Function Variable

A variable can be assigned a Function object (called function variable), which takes a special object type called function. [In JavaScript, an object's type is either function (for Function object) or object (for any object not a Function).]

For example,

Anonymous Function

If a function is called only once, you can use an anonymous function, omitting the function name. Anonymous functions are commonly-used as event handler, e.g.,

You can define a inline (anonymous) function and assign it to a variable as follows:

Function Constructor

Besides using function keyword, you can also use the Function constructor (with new operator) to define a Function object. This is not easily understood and, hence, not recommended.

The syntax for Function constructor is:

More on Objects

Prototype-based vs. Class-based

JavaScript's OO is prototype-based, instead of class-based like Java/C++/C#.

A class-based OO language (such as Java/C++/C#) is founded on concepts of class and instance. A class is a blue-print or template of things of the same kind. An instance is a particular realization of a class. For example, "Student" is a class; and "Tan Ah Teck" and "Paul Lee" are instances of the "Student" class. In a class-based OO language, you must first write a class definition, before you can create instances based on the class definition. The instances created have exactly the same properties and methods as the class - no more, and no less.

On the other hand, a prototype-based OO language (such as JavaScript) simply has objects (or instances). A new object can be constructed based on an existing object as prototype. There is no class definition, and hence, they are also called class-less OO languages.

In JavaScript:

• Every JavaScript object has a prototype. The prototype is also an object. A JavaScript object is created from a prototype object and gets its initial properties from the prototype.
• Every JavaScript object has an internal property called __proto__, which holds its prototype object. When you define a new object via "Object Initializer" (or new Object() constructor), its __proto__ is set to a built-in object called Object.prototype. In other words, the new object uses Object.prototype as its prototype, and gets its initial properties from Object.prototype. The __proto__ property is not enumerable, i.e, it would not shown up in the for..in loop.
  For example, var myCircle = { radius: 1.1, getArea: function () { return this.radius * this.radius * Math.PI; } } console.log(myCircle.radius); //1.1 console.log(myCircle.getArea()); //3.8013271108436504 console.log(myCircle.__proto__ === Object.prototype); //true console.log(Object.prototype); //[Object: null prototype] { } console.log(Object.prototype.__proto__); //null console.log(Object.prototype.toString()); //[object Object] console.log(Object.prototype.valueOf()); //[Object: null prototype] { } console.log(Object.prototype.hasOwnProperty('toString')); //true , console.log(myCircle.toString()); //[object Object] console.log(myCircle.hasOwnProperty('toString')); //false (inherited, NOT own property) console.log(myCircle.hasOwnProperty('radius')); //true for (let key in myCircle) { console.log("key: " + key + ", value: " + myCircle[key]); } //key: radius, value: 1.1 //key: getArea, value: function () { ... } var anotherCircle = new Object(); anotherCircle.radius = 2.2; console.log(anotherCircle.__proto__ === Object.prototype); //true
• Any object can be the prototype of new objects. For example, Object is the prototype of Person; Person is the prototype for Student; Student is the prototype for UndergraduateStudent. These objects form a so-called prototype chain, i.e., UndergraduateStudent -> Student -> Person -> Object -> null. Take note that Object is always on top of the prototype chain for every JavaScript object.
• You can add or remove properties for an object at runtime, which is not permitted in conventional OO languages.

Defining Your Own Custom Objects via a Constructor

In JavaScript, you can create your own custom objects by defining a constructor. A constructor is simply a function, which can be invoked via the new operator to create and initialize new objects. Recall that JavaScript is prototype-based and class-less. A new object is created from a prototype object, and gets its initial properties from this prototype object. The constructor function provides the prototype to create and initialize new instances (to be explained later).

By convention, a constructor name begins with an uppercase letter.

Keyword this

"this" refers to the current object. this.aPropertyName refers to the property of this object.

Example

Let us define a constructor for our custom Circle objects, with properties radius, created, getArea() and toString().

How it Works?

1. Properties (including methods) are declared inside the constructor via this.propertyName, which can then be initialized.
2. Methods can be declared inside the constructor via this.methodName. There are a few ways to provide the method's definition:
   1. Define an ordinary function, and assign the functionName (without parentheses, which is a function type) to this.methodName, as in the toString().
   2. Assign this.methodName to an inline function, as in the getArea().
   3. Invoke the Function constructor with new operator (rarely-used): this.getArea = new Function("return this.radius * this.radius * Math.PI");
3. To invoke a method, use anObjectName.aMethodName(arguments).
4. The .toString() is a special method, which returns a string description of this object. The .toString() will be implicitly invoked if an object is passed into the document.write(), document.writeln() or '+' operator (like Java).

__proto__ and .prototype

Revisit the new Operator

In JavaScript, the new constructor(args) call does the followings:

1. Create a new generic object using built-in root Object as prototype.
2. Assign this newly created object to this variable.
3. Run the constructor function, which typically adds properties to this.
4. Set the internal property __proto__ to constructor.prototype (in the above example, Circle.prototype). The __proto__ property is not enumerable (i.e, it would not shown up in the for..in loop). It is used to maintain the so called "prototype chain" of the objects.
5. Return the newly created object.

Take note that you can invoke the constructor function WITHOUT the new operator, e.g., Circle(1.5). In this case, the constructor will be run as per ordinary function. There will not be any association of this and __proto__ properties; and the return value will depend on the function codes.

Try tracing the object created in the above example via Chrome's Developer Tools, which could display the __proto__ internal property.

Another Example

Constructor's .prototype Property

All the JavaScript constructor function objects (in fact, all function objects) have a special property called .prototype. By default, it holds an object that can be used as a prototype for creating new objects.

In the Circle example, the Circle constructor function has a Circle.prototype, which holds a Circle object to be used as a prototyping object. When a new Circle object is constructed via the new operator, the newly constructed object's __proto__ property is set to Circle.prototype.

Adding Shared properties to Constructor's .prototype Property

The constructor's.prototype is used to implement shared properties (typically shared methods) for all the objects it prototyped. In JavaScript, you can add properties dynamically during runtime into .prototype. The added properties/methods will be available to all the objects (new as well as existing objects). For example,

When you reference a property, JavaScript first checks if the property exists locally (or own property); otherwise, it checks the prototype chain through the __proto__ property. Recall that the new constructor() call sets the __proto__ to constructor.prototype. Hence, properties added into constructor.prototype are available to (and shared by) all the objects prototyped by this constructor.

In practice, we defines methods (and static variables) in constructor.prototype to be shared by all objects; while each object maintains its own properties (instance variables).

Looking up the Prototype Chain

Objects in JavaScipt form prototype chains. In the above example, a prototype chain is circle1 -> Circle.prototype -> Object.prototype -> null.

When you reference an object property, JavaScript follow these steps to locate the property:

1. Check if the property exists locally (i.e., own property).
2. Otherwise, check the __proto__ property. This continues recursively up the prototype chain. The process is called "lookup in the prototype chain".

Hence, in the above example, all the properties in Circle.prototype and Object.prototype are inherited by circle1.

instanceof Operator

Every object has a __proto__ object property (except Object); every constructor function has a .prototype property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's __proto__ to the constructor's .prototype. JavaScript provides a shortcut: the instanceof operator tests an object against a function and returns true if the object inherits from the function prototype. For example,

[TODO]

Object.create()

Object.create() lets you create a new object based on the given prototype object. It simply sets the __proto__ to the given prototype object, so that all properties of the prototype are available to the new object. Using Object.create(), You do NOT need to define a constructor function and run new constructor() to create new objects.

Inheritance via Prototype Chain

You can implement inheritance in JavaScript via the prototype chain. For example,

How It Works

[TODO]

Getter and Setter

In languages like Java, you can declare a variable to be private and define public getter/setter to access the private variable. JavaScript does not really support private access?! But you can also define ordinary methods getXxx() or setXxx() as getter/setter like Java.

Moreover, in JavaScript, you can define getter/setter as properties instead of methods in one of the following two ways:

1. via built-in functions Object.defineProperties() or Object.defineProperty();
2. inside the "object initializer" via keywords get and set.

Example 1: Define Getters/Setters via Object.defineProperties() or Object.defineProperty()

Notes:

1. The Objet.defineProperties() allows you to define multiple properties; while Objet.defineProperty() for a single property.
2. You invoke the getters/setters like properties with assignment operator, instead of via function call.

Example 2: Define Getter/Setter inside the Object Initializer

Notes:

1. The getter/setter are defined inside Object Initializer via keywords get and set with a rather strange syntax, as shown in the example.

Object's Properties

Object.constructor()

All JavaScript objects inherited a special property called .constructor, which contains a reference to the function that created the object. For example,

[TODO] more Object's properties

Document Object Model (DOM) API for JavaScript

Document Object Model (DOM), is a standard API that allows programmers to access and manipulate the contents of an HTML/XHTML/XML document dynamically inside their program. It models an HTML/XHTML/XML document as an object-oriented, tree-like structure, known as a DOM-tree, consisting of nodes resembling the tags (elements) and contents. DOM also provides an interface for event handling, allowing you to respond to user's or browser's action.

DOM API is implemented in many languages such as Java, JavaScript, Perl, and ActiveX. DOM API specification is maintained by W3C. DOM has various levels:

• DOM Level 0 (DOM0) (Pre-W3C): obsolete
• DOM Level 1 (DOM1) (W3C Oct 1998): obsolete
• DOM Level 2 (DOM2) (W3C Nov 2000) and DOM Level 2 HTML (HTML DOM2) (W3C Jan 2003)
• DOM Level 3 (DOM3) (W3C Apr 2004): yet to be fully supported by browsers.

jQuery is much better in selecting and manipulating DOM element. You should use jQuery in production. I keep these sections here for completeness.

Finding and Selecting Elements

In JavaScript, we often use DOM API to select elements within the current document, so as to access or manipulate their contents. The most commonly-used functions are:

You can use wildcard * in document.getElementsByTagName("*") to select all the elements, e.g.,

The above functions select element(s) based on the unique id, name attribue and tag-name. HTML 5 further defines two function that can select elements based on class attribute (which is used extensively by CSS in the class-selector):

Beside the above selection functions, there are many other selection functions available. However, I strongly recommend that you stick to the above functions. I listed below the other function below for completeness.

1. document.images returns an array of all
   

   Load the web page onto Firefox, and use the firebug to inspect the DOM tree.

   A DOM-tree comprises the following types of nodes:

   1. Document Node: the root node representing the entire HMTL document.
   2. Element node: represents an HTML element (or tag). An element node may have child nodes, which can be either element or text node. Element node may also have attributes.
   3. Text Node: contains the text content of an element.
   4. Others: such as comment, attribute.

   A DOM node has these properties:

   • nodeName: contain the name of the node, which is read-only. The nodeName for an Element node is the tag-name; nodeName for the Document node is #document; nodeName for Text nodes is #text.
   • nodeValue: contain the value of the node. nodeValue for Text node is the text contained; nodeValue for Element node is undefined.
   • nodeType: an integer indicating the type of the node, e.g., Element (1), Attribute (2), Text (3), Comment (8), Document (9).
   • parentNode: reference to parent node. There is only one parent node in a tree structure.
   • childNodes: array (or node-list) of child nodes.
   • firstChild, lastChild: reference to the first and last child node.
   • prevSibling, nextSibling: reference to the previous and next sibling in the same level.

   Take note of the difference between singular and plural terms. For example, parentNode refer to the parent node (each node except root has one and only one parent node), childNodes holds an array of all the children nodes.

   The root node of the DOM tree is called document. The root node document has only one child, called document.documentElement, representing the tag, and it acts as the parent for two child nodes representing and tags, which in turn will have other child nodes. You can also use a special property called document.body to access the tag directly.

   For example, you can use the following node property to access the Text node "Welcome to " in the above example:

   document.documentElement.lastChild.childNodes[1].firstChild.nodeValue; document.body.lastChild.firstChild.nodeValue;

   Example

   The following JavaScript lists all the nodes in the section, in a depth-first search manner, via a recursive function.

   onload="printNode(document.body)">

   Testing

   welcome to JavaScript...

   Node name=BODY, value=null, type=1 Node name=H2, value=null, type=1 Node name=#text, value=Testing, type=3 Node name=P, value=null, type=1 Node name=#text, value=welcome to , type=3 Node name=I, value=null, type=1 Node name=#text, value=JavaScript, type=3 Node name=#text, value=..., type=3

   Accessing the HTML element via Node interface may not be too useful nor practical for JavaScript applications, as you need to know the actual topological structure of the DOM-tree. Furthermore, some browsers (e.g., firefox) may create extra Text nodes to contain the white spaces between tags.

   Text Node

   DOM models the texts enclosed by HTML tags as a separate text node. It cannot have child node. To retrieve the text content, you could the property nodeValue. For example,

   Hello

   ...... console.log(document.getElementById("magic").firstChild.nodeValue); document.getElementById("magic").firstChild.nodeValue = "Hi";

   Attribute Properties

   To access an attribute of an Element node called elementName, you could either use:

   • property elementName.attributeName, where attributeName is the name of the attribute, or
   • methods elementName.getAttribute(name) and elementName.setAttribute(name, value).

   For example,

   Hello

   Hello, again.

   Attribute style (for CSS)

   Element has a property called style, which models CSS style with CSS properties such as color and textAlign. For example,

   Hello

   ...... document.getElementById("magic1").style.color="green"; document.getElementById("magic1").style.textAlign="right";

   Manipulating Nodes

   A Node object has these functions:

   • aNode.hasChildNodes(): returns true if this node has at least one child node.
   • Manipulating child node:
     • aParentNode.insertBefore(newChildNode, existingChildNode): insert a node before an existing child node.
     • aParentNode.replaceChild(newChildNode, existingChildNode): replace an existing child node.
     • aParentNode.removeChild(childNodeToRemove): remove the specified child node.
     • aParentNode.appendChild(nodeToAppend): append the given node as the last child.
   • aNode.cloneNode():

   Creating a New Element (createElement()) and Text Node (createTextNode()), Appending a Node (appendChild())

   To create new text node, you can use document.createTextNode(text) to create a standalone text-node, followed by an anElementNode.appendChid(aTextNode) to append the text node to an element.

   Similarly, you can use document.createElement(tagName) to create a stand-alone element, followed by an anElementNode.appendChild(elementToAppend) to append the created element into an existing element.

   For example, we shall create a new text node, as a child of a new

   element. We shall then append the new

   element as the last child of .

   Hello

   Inserting a new Node (insertBefore())

   Hello

   Replacing a Node (replaceChild())

   Change the last line to document.body.replaceChild(newElm, magicElm).

   Deleting a Node (removeChild())

   You can remove a child node from a parent node via aParentNode.removeChild(aChildNode).

   For example, let remove the last

   from .

   Hello 1

   Hello 2

   Hello 3

   The document object

   The document object is the root node of the DOM-tree. It can be used to access all the elements in an HTML page.

   It contains these properties:

   • documentElement, body, title: references the , and