Since its release in December 4, 1995 (six months after Java, which was released in May 23, 1995), JavaScript has gone through many changes. JavaScript began as a client-side programming language (which runs inside a web browser via a built-in JavaScript engine) for adding interactive contents to the web pages. It became more robust with DHTML (1997) and Ajax (1999). With Node.js (released in May 27, 2009), JavaScript can be used to program server-side and build full-stack web applications, as well as standalone utility scripts. In 2015, the ECMAScript 6 (ES6 or ES2015) introduces major update to the language, such as classes and modules, and make JavaScript a general-purpose programming language capable of complex software tasks.

Introduction

It began as a Client-side Programming Language run inside a web browser via a Built-in JavaScript Engine

JavaScript is the most widely used client-side programming language that lets you supercharge your HTML with interactivity, animation and dynamic visual effect for better User Interface and User Experience (UI/UX). It is:

• a small, lightweight, object-oriented, cross-platform, special-purpose scripting language meant to be run under a host environment (typically a web browser).
• a client-side scripting language to enrich web user-interfaces and create dynamic web pages (e.g., for...input validation, and immediate response to user's actions).
• the engine that supports AJAX (Asynchronous JavaScript and XML - that can be used to update one part of the web page asynchronously), which generate renew interest in JavaScript.

JavaScript works together with HTML/CSS. HTML provides the contents; CSS specifies the presentation; and JavaScript programs the behavior. Together, they enrich the UI/UX of the web users.

JavaScript is Now Everywhere with Node.js

JavaScript has grown beyond the client-side programming. With the introduction of Node.js in 2009 (an open-source, cross-platform JavaScript run-time environment), you can run your JavaScript standalone or inside the server (instead of a browser). This allows you to use one single language for both the server-side and client-side programming.

History and Versions

JavaScript, originally called LiveScript, was created by Brendan Eich at Netscape in 1995. Soon after, Microsoft launched its own version of JavaScript called JScript. Subsequently, Netscape submitted it to ECMA (formerly "European Computer Manufacturers Association", now "Ecma International - European association for standardizing information and communication systems") for standardization, together with Microsoft's JScript.

The ECMA Specification is called "ECMA-262 ECMAScript Language Specification" @ http://www.ecma-international.org/publications/standards/Ecma-262.htm (also approved as "ISO/IEC 16262"):

• ECMA-262 version 1 (June 1997): First edition
• ECMA-262 version 2 (August 1998)
• ECMA-262 version 3 (December 1999): Added regular expressions, try/catch, switch, do-while, etc.
• ECMA-262 version 4 - Abandon due to political differences. In 2007, the TC-39 (the committee responsible for ECMAScript) put up a draft specification for ECMAScript 4, which was massive in scope and introduced many new syntax and features. But a group of developers from Yahoo, Google and Microsoft felt that was too much and created an alternate proposal called ECMAScript 3.1. ECMAScript 4 was never finalized.
• ECMA-262 version 5 and 5.1 (June 2011): ECMAScript 3.1 was eventually standardized as ECMAScript 5. Added "strict mode", JSON, Array iteration methods, etc.
• ECMA-262 2015: most popularly known as ECMAScript 6 or ES6.
  This version added significant new syntax for writing complex application, including class declaration,

  if ( condition-1 ) {
     block-1 ;
  } else if ( condition-2 ) {
     block-2 ;
  } else if ( condition-3 ) {
     block-3 ;
  ......
  ......
  } else {
     block-n ;
  }

  7 for local declarations,

  if ( condition-1 ) {
     block-1 ;
  } else if ( condition-2 ) {
     block-2 ;
  } else if ( condition-3 ) {
     block-3 ;
  ......
  ......
  } else {
     block-n ;
  }

  8 for constant local declaration, default parameter values, iterators and for...of loops, Python-style generators, arrow function expression (

  if ( condition-1 ) {
     block-1 ;
  } else if ( condition-2 ) {
     block-2 ;
  } else if ( condition-3 ) {
     block-3 ;
  ......
  ......
  } else {
     block-n ;
  }

  9), binary data, typed arrays, new collections (maps, sets and WeakMap), promises, reflection, proxies, template literals for strings, and many more.
• ECMAScript 2016 (ES7): Since ES6, ECMAScript standards are on yearly release cycles in June.
  This version added exponential operator (

  
  
  
  
    
    JavaScript Example: Loop
  
  
    
  Testing Loop
    
  
  

  0), block-scoping of variables and functions,

  
  
  
  
    
    JavaScript Example: Loop
  
  
    
  Testing Loop
    
  
  

  1 and

  
  
  
  
    
    JavaScript Example: Loop
  
  
    
  Testing Loop
    
  
  

  2 keywords for asynchronous programming, etc.
• ECMAScript 2017 (ES8): Added string padding, async functions which use generators and promises,

  
  
  
  
    
    JavaScript Example: Loop
  
  
    
  Testing Loop
    
  
  

  3,

  
  
  
  
    
    JavaScript Example: Loop
  
  
    
  Testing Loop
    
  
  

  4 for easy object manipulation, etc.
• ECMAScript 2018 (ES9): Added rest parameters (

  
  
  
  
    
    JavaScript Example: Loop
  
  
    
  Testing Loop
    
  
  

  5), spread operator, asynchronous iteration, additions to regular expression.
• ECMAScript 2019 (ES10): Added

  
  
  
  
    
    JavaScript Example: Loop
  
  
    
  Testing Loop
    
  
  

  6,

  
  
  
  
    
    JavaScript Example: Loop
  
  
    
  Testing Loop
    
  
  

  7, changes

  
  
  
  
    
    JavaScript Example: Loop
  
  
    
  Testing Loop
    
  
  

  8 and

  
  
  
  
    
    JavaScript Example: Loop
  
  
    
  Testing Loop
    
  
  

  9, catch binding becomes optional, etc.
• ECMAScript 2020 (ES11): introduces a

  for ( initialization ; test ; post-processing ) {
     body ;
  }

  0 primitive type for arbitrary-size integers, the nullish coalescing operator (

  for ( initialization ; test ; post-processing ) {
     body ;
  }

  1) and the

  for ( initialization ; test ; post-processing ) {
     body ;
  }

  2 object.
• ECMAScript 2021 (ES12): Added enhancement to strings (

  for ( initialization ; test ; post-processing ) {
     body ;
  }

  3), promises (

  for ( initialization ; test ; post-processing ) {
     body ;
  }

  4), and object references. Logical assignment operators (

  for ( initialization ; test ; post-processing ) {
     body ;
  }

  5,

  for ( initialization ; test ; post-processing ) {
     body ;
  }

  6,

  for ( initialization ; test ; post-processing ) {
     body ;
  }

  7,)

JavaScript vs. Java

Java is a full-fledged general-purpose programming language. It was created by James Gosling at Sun Microsystems (now part of Oracle) and released in August 1995.

JavaScript was created by Brendan Eich at Netscape, also in 1995. Originally called LiveScript, it was a small and lightweight special-purpose language for writing client-side program running inside a browser to create active user-interface and generate dynamic web pages. It was renamed to JavaScript in an ill-fated marketing decision to try to capitalize on the popularity of Java language, when Netscape released its Navigator 2 in 1996.

Java and JavaScript are totally different languages for different programming purposes. However, in the early days, some efforts were made to adopt Java syntax and convention into JavaScript, such that JavaScript seems to be a subset of Java. In reality, they have very little in common.

What Client-side JavaScript CANNOT Do?

Remember that JavaScript is a client-side program that you downloaded from a server, and run inside the browser of your (client) machine. What to stop someone from writing a JavaScript that wipes out your hard disk, or triggers a denial-of-service attack to another server? As a result, for security purpose,

1. It cannot read file from the client's machine.
2. It can only connect to the server that it come from. It can read file from the server that it come from. It cannot write file into the server machine.
3. It cannot connect to another server.
4. It cannot close a window that it does not open.

jQuery

jQuery is a popular cross-browser JavaScript Library. jQuery is JavaScript (but having its own extension syntax), hence, you need to understand JavaScript. I suggest you read through the JavaScript syntax (and pay particular attention to objects), and then switch into jQuery for your production. Read "jQuery Basics".

Standalone and Server-side JavaScripts with Node.js JavaScript Engine

[TODO]

JavaScript Source-Code Editors and IDEs

You need a text editor to write your JavaScript. You could use a plain-text editor such as Windows' NotePad or macOS's TextEdit (strictly NOT recommended as they can't do syntax highlighting). To improve your productivity, a good source-code editor (which provides syntax highlighting, auto-code-complete, snippets, documentation, symbol navigation, refactoring, etc.) is essential. There are many freeware/shareware available, such as Visual Studio Code (VS Code), Sublime Text, Atom, Brackets, Komodo Edit, Emacs, Vim, BBEdit, TextMate, NotePad++ (Windows), etc. You can also use a full-scale IDE such as Eclipse, NetBeans, IntelliJ IDEA. There are also many "online" editors and compilers available (e.g., Programiz, JSFiddle, Playcode), but I think that you should install your own.

Client-Side JavaScript by Examples

I shall assume that you know HTML and CSS (read my HTML/CSS articles otherwise). I shall also assume that you understanding some programming basics (computational thinking) such as variables, if-else and for-loop constructs.

Client-side JavaScripts run inside a browser via a built-in JavaScript engine. There are standards on JavaScript. But the Big-5 (Chrome, Firefox, IE/Edge, Safari and Opera), in particular the IE, does not adhere to all the standards strictly. Furthermore, they create their own extensions. Hence, the behavior of JavaScript could be different in different browsers. You may need to test your JavaScripts on more than one browsers.

JavaScript also run standalone (and in the server). To run JavaScript standalone, you need to install Node.js, which is a JavaScript engine. I will present the examples in the next section.

Client-side JS EG 1: Functions

for ( initialization ; test ; post-processing ) {
   body ;
}

8 and

for ( initialization ; test ; post-processing ) {
   body ;
}

9

Let us write our first client-side JavaScript to print the message "Hello, world".

Start with a new file and enter the following codes. Do not enter the line numbers, which is used to aid in explanation. Take note that:

• JavaScript is case sensitive. A

  
  
  
  
    
    JavaScript Example: User-defined function and onclick Event Handler
    
  
  
    
  Example on event and user-defined function
    
  
  

  0 is NOT a

  
  
  
  
    
    JavaScript Example: User-defined function and onclick Event Handler
    
  
  
    
  Example on event and user-defined function
    
  
  

  1 and is NOT a

  
  
  
  
    
    JavaScript Example: User-defined function and onclick Event Handler
    
  
  
    
  Example on event and user-defined function
    
  
  

  2.
• "Extra" white spaces (blanks, tabs and newlines) are ignored. That is, multiple white spaces is treated as a single blank character. You could use them liberally to make your program easier to read.

Save the file as "

  
  JavaScript Example: User-defined function and onclick Event Handler
  


  
Example on event and user-defined function
  

3" (or any filename that you prefer, with file extension of "

  
  JavaScript Example: User-defined function and onclick Event Handler
  


  
Example on event and user-defined function
  

4" or "

  
  JavaScript Example: User-defined function and onclick Event Handler
  


  
Example on event and user-defined function
  

5"). Run the script by loading the HTML file into a JavaScript-capable browser (e.g., One of the BIG FIVE - Chrome, Firefox, Internet Explorer/Edge, Safari or Opera).

  
  JavaScript Example: Functions alert() and document.write()
  


  
My first JavaScript says:
  

How it Works?

1. JavaScripts are programming codes that are embedded inside an HTML document. The codes are contained between a pair of

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   6 tags, as follows: NOTE: In HTML4/XHTML, you need to include attribute

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   7 to the

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   6 elements. Lines 7-9 and Line 13-17 are two pieces of JavaScripts, placed in the

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   9 and

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   0 sections, respectively.
2. JavaScript statements are terminated by a semicolon

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   1 (like Java/C/C++/C#).
3. The

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   2 function (Line 8) pops out a dialog box displaying the

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   3 and a OK button. Strings are enclosed by a pair of double quotes or single quotes, e.g.,

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   4 or

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   5.
4. The current web page is represented by the so-called

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   6 object in the JavaScript. The

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   7 (Line 16) property stores the last modified date of the current document. The

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   8 function (Line 14 to 16) can be used to write the specified

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   3 to the current document, as part of the current HTML document.
5. The

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   00 operator (Line 16) can be used to concatenates two strings (like Java).
6. As a result of the

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   9, the

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   0 section of this document contains:

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

7. The

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   2 and

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   8 are some of the commonly-used built-in functions provided in JavaScript.

TRY: Print the document's title and the URL location. (Hints: use

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

05 and

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

06 properties.)

Don't Get Caught by the Cache - Do Control-Refresh (or Control-F5)

If you modify the codes and reload the web page, the new codes may not get executed because the browser caches the previously loaded version. You could use Control-F5 (Control-Refresh) to ask the browser to discard the cache, and fetch a new page.

Don't Use

for ( initialization ; test ; post-processing ) {
   body ;
}

8

Because nobody like it.

"The use of alerts is usually discouraged in favour of other methods that do not block users from interacting with the page - in order to create a better user experience. Nevertheless, it can be useful for debugging."

for ( initialization ; test ; post-processing ) {
   body ;
}

8 is technically a

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

09 object's property, and shall be referenced as

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

10. But sinece

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

09 is a global object, all its varaibles are global variables, and can be referenced without the object name.

Browsers' F12 Web Development Tools and Debugger

Before we proceed to the next example, you should try out the Web Development Tools, which is available in most of the browsers for debugging HTML/CSS/JavaScript/webapps.

1. Launch your browser and push F12 to activate the Web Development Tools (I have tried on Firefox, Chrome, Edge).
2. Select the "Console" pane. You can enter JavaScript statements in the console. For example, enter the following JavaScript statements one-by-one and observe the results.

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

Notes:

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

12 writes the msg to the console, which is often used for debugging (like

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

13 in Java, or

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

14 in C)

Where are the error messages?

If you make any syntax errors in the previous example, you will not see any error messages appear on the browser, but the script simply doesn't run. It is impossible to debug a program without the error messages! Thankfully, you can actually find the error messages in the console. Make some errors and refresh the browser.

Client-Side JS EG 2: Variables and Functions

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

15,

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

16

This script prompts the user for his/her name, confirms the name, and prints a greeting message.

There are three kinds of pop-up dialog boxes for interacting with the users:

1. The

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   2 function puts the

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   3 on a pop-up box with a OK button. User needs to click the OK button to continue.
2. The

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   19 function puts up an input pop-up box with the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   20 with an OK and Cancel buttons. It returns the input entered by the user as a string; or a special value called

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21 if the user hits the Cancel button. The optional parameter

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   22 specifies the initial string to be shown. In this article, I shall indicate optional function parameters with a trailing

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   23 for compactness.
3. The

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   24 function puts

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   25 on a pop-up box with OK and Cancel buttons. It returns

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26 if user hits the OK button; or

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27 otherwise.

  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  
Welcome to JavaScript!

How it Works?

1. Line 8 declares a global variable called

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   28, via the keyword

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   29. A variable is a named storage location that holds a value. Once the variable is declared, you can assign (and re-assign) a value to that variable, via the assignment operator

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   30 (Line 9).
2. Line 9 invokes the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   19 function to pop out a dialog box, and reads in the string entered by the user. The string read is assigned to the variable

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   28. The function

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   15 is similar to the

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   8, but it accepts a user's input.
3. In Line 10, the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   24 function puts up the message and returns either

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26 or

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27, depending on whether the user hits the OK or Cancel button.
4. If the result is

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26, Line 11 prints

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   39. Otherwise, Line 13 prints

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   40.

TRY: Instead of printing the greeting message using

for ( initialization ; test ; post-processing ) {
   body ;
}

9, do it via an

for ( initialization ; test ; post-processing ) {
   body ;
}

8.

Client-Side JS EG 3: The

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

43 Object

The following script creates a

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

43 object representing the current date-time, and prints the current time.

  
  JavaScript Example: The Date object
  

How it Works?

• Line 8 declares a variable called

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  45. It also creates a

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  43 object (via the

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  47 operator), which contains the current date-time stamp, and assign it to

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  45.
• "

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  49" begins an end-of-line comment (Lines 8 and 9). Comments are ignored by the JavaScript engine but important in explaining your codes to others (and to yourself three days later).
• Line 9 declares a variable called

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  50. It also invokes the function

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  51 on object

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  45, in the form of

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  53, to retrieve the hour part of object

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  45, and assign it to variable

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  50. Lines 9 and 10, similarly, handle the minutes and seconds.
• Line 12 to 14 use

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  56 to write to the current document.

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  57 (write-line) writes a newline (

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  58) after the given string. Take note that browser ignores extra white space (newlines, blanks, tabs) in an HTML document; you need to write a

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  59 or

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  60 tag to ask the browser to display a line break.
• Lines 16-20 contains a conditional if-then-else statement. Depending on the value of

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  50, one of the messages will be displayed.

TRY:

1. Modify the above script to print the current date, month, year and day of the week. (Hints: Use functions

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   62,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   63,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   64 and

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   65 of a

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   43 object.

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   62 returns 1-31.

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   63 returns 0 to 11 for January to December.

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   64 returns a 4-digit year.

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   65 returns 0 to 6 for Sunday to Saturday).
2. Use a conditional statement to print the day of the week in word (i.e., 0 for Sunday, 1 for Monday and etc.). (Hints: Use the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   71 construct as follow.)

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

Client-Side JS EG 4: Loops

The following script prompts the user for a multiplier, and prints the multiples of 1 to 100 using a for-loop.

  
  JavaScript Example: Loop


  
Testing Loop
  

How it Works?

• Line 11 prompts the user for a number, and assigns it to the variable

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  72.
• Lines 12-14 contain a for-loop. A for-loop takes the following syntax:

  for ( initialization ; test ; post-processing ) {
     body ;
  }

  There are four parts in a for-loop. Three of them, initialization, test and post-processing, are enclosed in brackets

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  73 and separated by 2 semicolons. The body contains the repetitive task to be performed. The initialization statement is first executed. The test is then evaluated. If the test returns true, the body is executed; followed by the post-processing statement. The test is evaluated again and the process repeats until the test returns false. When the test is false, the for-loop completes and program execution continues to the next statement after the for-loop. The following flow chart illustrates the for-loop process:

  In this example, the variable

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  74 is initialized to 1. If

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  74 is less than or equal to 100, the body of the loop executes, followed by the post-processing statement, which increment the value of

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  74 by 1. The loop repeats until the value of

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  74 is NOT less than or equal to 100 (i.e., more than 100).

TRY:

1. Modify the above script to prompt the user for the multiplier as well as the number of multiples to be printed (in two

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   15 statements).
2. Modify the above script to print only multiples that are odd number. (Hint: The modulo operator "

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   79" can be used to compute the remainder, e.g.,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   80 computes the remainder of

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   81 divides by 2, which results in either 0 or 1.)

Client-Side JS EG 5: User-defined Functions and

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

82 Event Handler

Besides the JavaScript built-in functions such as

for ( initialization ; test ; post-processing ) {
   body ;
}

8,

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

15,

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

85, and

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

57, you can define your own functions. A function has a name and a body consisting of a set of JavaScript statements that collectively performs a certain task. It may take zero or more argument(s) from the caller and return zero or one value back to the caller.

  
  JavaScript Example: User-defined function and onclick Event Handler
  


  
Example on event and user-defined function
  

How it Works?

• Lines 8-10 define a function called

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  87, via the keyword

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  88. The function invokes the built-in function

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  89, which opens a new browser window (or tab) and loads the page "

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  90".
• Lines 15-16 create an HTML button. Clicking the button triggers the

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  82 event handler, i.e.,

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  87 defined earlier.

TRY: Include another button, which opens "

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

93".

Client-Side JS EG 6: More Event Handlers:

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

94,

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

95 and

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

96

JavaScript can be used to handle many types of events, in response to a user's action or browser's action. For example,

• My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  94: fires after browser loaded the page.

• My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  95 and

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  96: fires when the user points the mouse pointer at/away from the HTML element.

  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  
"Hello" alert Box appears after the page is loaded.
  
Point your mouse pointer here!!!

Dissecting the Program

• Line 8 defines a variable

  alert('hello, world')
  document.write('
  hello world, again
  ')
  console.log('hello world, again and again')

  00, which holds the strings to be displayed in the

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  94 event handlers.
• In the opening tag (Line 12), we define the

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  94 event handler for the

  alert('hello, world')
  document.write('
  hello world, again
  ')
  console.log('hello world, again and again')

  03 event. It invokes

  for ( initialization ; test ; post-processing ) {
     body ;
  }

  8 with the message defined earlier.
• Line 13 and 14 defines the event handlers

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  95 and

  My First JavaScript says
  Hello world, again!
  This document was last modified on mm/dd/yyyy hh:mm:ss.

  96 for the HTML element

  . The text's color will be changed to red when the user points the mouse pointer at the element (by setting the CSS style property

  alert('hello, world')
  document.write('
  hello world, again
  ')
  console.log('hello world, again and again')

  07 to red), and revert back to its original color when the mouse pointer is moved away (by resetting the CSS style property

  alert('hello, world')
  document.write('
  hello world, again
  ')
  console.log('hello world, again and again')

  07 to an empty string). The special keyword

  alert('hello, world')
  document.write('
  hello world, again
  ')
  console.log('hello world, again and again')

  09 refer to this object.

Client-Side JS EG 7: Separating HTML, CSS and JavaScript

The previous example works fine. You will find many such example in textbooks, especially the older textbooks. However, it has a big problem. All the HTML contents, CSS presentation styles and JavaScript programming codes are placed in a single file. For a small toy program, the problem is not serious. But when your program grows and if the HTML, CSS and JavaScript are written by different people, you will have a real challenge in maintaining the program. Remember that HTML is for the contents, CSS for presentation and JavaScript for the behavior.

Let's rewrite the example to place the HTML, CSS and JavaScript in three different files.

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

0

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

1

My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.

2

How it Works?

1. Placing the scripting codes inside the HTML page is not a good software engineering practice. Instead, the now-preferred approach is to place the scripts, as well as CSS styles, in external files, which can then uniformly applied to all pages in your website.
2. Let's begin with the HTML file. Now, the HTML file keeps only the contents, no presentation style and nor programming logic.
   1. 
      The CSS style sheet is kept in an external file, referenced via the above

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      6 tag.
      Note: In HTML4/XHTML1.0 you need to include attribute

      alert('hello, world')
      document.write('
      hello world, again
      ')
      console.log('hello world, again and again')

      11 in the

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      6 opening tag.
   2. 
      Also, the JavaScript programming code is kept in an external file, referenced via the above

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      6 is needed, although there is no content.
      Note: In HTML4/XHTML1.0, you need to include attribute

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      7 in the

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      6

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      3

      How it works?

      1. This HTML document contains a element with an unique

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         16, two

         elements, three

         elements with

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         17, and three

         
         
         
         
           
           JavaScript Example: User-defined function and onclick Event Handler
           
         
         
           
         Example on event and user-defined function
           
         
         

         6 with unique

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         19.

      2. In the user-defined function

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         20, we use

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         21 to select the element, and then modify its

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         22 property.
      3. In

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         23 function, we use

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         24 to select all the

         elements in an array alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')25. We then use a for-loop to iterate through all the elements in the array. The alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')26 property keeps the length of the array.

      4. In

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         27 function, we use

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         28 to select all the

         elements. We use JavaScript's

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         29 loop to iterate through all the elements. We use the safest

         if ( condition-1 ) {
            block-1 ;
         } else if ( condition-2 ) {
            block-2 ;
         } else if ( condition-3 ) {
            block-3 ;
         ......
         ......
         } else {
            block-n ;
         }

         8-variable, as

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         29 loop create a new block-scope variable for each iteration; but the traditional

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         32 does not.

      5. The page contains three buttons to trigger the functions defined.
      6. in order to manipulate elements in the DOM using JavaScript, the JavaScript code must be run after the relevant element has been created in the document. This can be done by putting the JavaScript just before the ending tag.
      7. The script contains a function

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         33, which is assigned as the

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         94 handler via

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         35. That is,

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         33 will be triggered after the page is loaded. The

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         33 function assigns

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         82 event handlers to the buttons, selected via

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         39 using the unique buttons'

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         19.
      8. Instead of

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         22 property, older versions of JavaScript use

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         42 (which includes both texts and markups) to modify the content of the selected element. According to MDN: "

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         22 should be used instead. Because the text is not parsed as HTML, it's likely to have better performance. Moreover, this avoids an XSS (Cross-Site Scripting) attack vector."

      Client-Side JS EG 9: Intercepting a Hyperlink

      This example uses a script to intercept a hyperlink to put up a warning message, then proceed to the link.

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      4

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      5

      How it works?

      1. The HTML page has an hyperlink

         
         
         
         
           
           JavaScript Example: User-defined function and onclick Event Handler
           
         
         
           
         Example on event and user-defined function
           
         
         

         6with an unique

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         19.
      2. The

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         33 function assigns an

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         82 handler to the hyperlink, selected via

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         39.
      3. When the hyperlink is clicked, the

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         82 handler

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         50 triggered. If

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         16 returns true, the new page will be loaded; otherwise, the current page remains.

      More Advanced JavaScript Examples

      More "Advanced JavaScript Examples".

      Debugging JavaScripts

      A graphic debugger is a MUST in programming. Programming in JavaScript, in particular, requires a good debugger. It is because JavaScripts are interpreted and does not need to be compiled. Hence, there is no compiler to show you the syntax errors. A simple and trivial syntax error (e.g., missing bracket, mis-spelling) will render the entire script not workable. Worst still, you would not see any error message when the script did not work. Can you debug without any error message or clue?

      Without a graphic debugging, the only mean to debug JavaScript is to insert

      for ( initialization ; test ; post-processing ) {
         body ;
      }

      8 at strategic locations to print out selected data.

      After modifying a JavaScript, I recommend that you use Ctrl-F5 to refresh the page, which shall load a fresh copy instead of loading from the cache. You might need to clear the browser's cache or re-start the browser, if you modification does not take effect.

      F12 Web Developer Tools

      In Chrome and Firefox, you can press F12 to activate the developer Tools (hence called F12 Developer Tools).

      It provides these features:

      1. Console: View the JavaScript error messages. Start the firebug and switch to the "Console" panel.
      2. Script: View and debug JavaScript. Start the firebug. Switch to the "Script" panel. "Enable" or "Reload" if necessary. You can set a breakpoint by clicking on the statement number, single step through the JavaScript statements, watch the expression, and etc.
      3. DOM: View the HTML DOM of the current document.
      4. HTML and CSS.

      To debug JavaScript:

      1. Launch Firebug ⇒ Choose the "Script" panel to view your JavaScript, shown with green-bold line numbers.
      2. Refresh (Ctrl-F5) the page, and check the error console (Under "Console" ⇒ "Errors") for syntax errors! Correct all the syntax errors.
      3. To trace the program, set breakpoints at selected JavaScript statements, by clicking on the right margin (to the left of line number). A red circle shows up denoting a breakpoint. Take note that you can only set breakpoint on statements with a green-bold line number. [If your JavaScript statements do not have a green-bold line number, there are syntax errors on these statements. You need to correct the syntax errors and reload the page.]
      4. Trigger the script (via clicking button/link, or reloading the page). The execution stops at the first breakpoint. You can then step-over the statement (or step-into function), and inspect the variables by positioning the mouse pointer on the variable; or add the variable to "watch".
      5. You can resume the execution (via the continue button).

      The

      alert('hello, world')
      document.write('
      hello world, again
      ')
      console.log('hello world, again and again')

      53

      Instead of using

      for ( initialization ; test ; post-processing ) {
         body ;
      }

      8 and

      for ( initialization ; test ; post-processing ) {
         body ;
      }

      9 to show the intermediate results, you can also use

      alert('hello, world')
      document.write('
      hello world, again
      ')
      console.log('hello world, again and again')

      56, which writes the

      alert('hello, world')
      document.write('
      hello world, again
      ')
      console.log('hello world, again and again')

      57 and the value of the

      alert('hello, world')
      document.write('
      hello world, again
      ')
      console.log('hello world, again and again')

      58 to the error console. It does not interfere the appearance you web page nor your normal operations.

      For example, modify the JavaScript in Example 8 to print the values of innerHTML before modification. You need to turn on the console (press F12) to see the output.

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      6

      JavaScript and HTML

      As seen from the previous examples, JavaScripts are embedded inside an HTML document, and executed by the browser. There are two occasions on which browser executes JavaScript instructions:

      1. JavaScripts enclosed in

         
         
         
         
           
           JavaScript Example: User-defined function and onclick Event Handler
           
         
         
           
         Example on event and user-defined function
           
         
         

         6 runs during loading of the page.
      2. Some JavaScripts, called event handlers, run as a result of the user's or browser's action (or event). For example, clicking a button (

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         82) or loaded a page (

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         94).

      There are, therefore, two places to put your JavaScript:

      1. between

         
         
         
         
           
           JavaScript Example: User-defined function and onclick Event Handler
           
         
         
           
         Example on event and user-defined function
           
         
         

         6 container tags; and
      2. inside the HTML tags as the event handlers (such as

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         82,

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         95,

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         94), e.g.,

         alert('hello, world')
         document.write('
         hello world, again
         ')
         console.log('hello world, again and again')

         66.

      The

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      6 element contains the JavaScript programming statements. For example,

      In HTML4/XHTML1.0, you need to include the attribute

      alert('hello, world')
      document.write('
      hello world, again
      ')
      console.log('hello world, again and again')

      68 in the

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      6 is needed although there is no content!?

      In HTML4/XHTML1.0, you need to include

      alert('hello, world')
      document.write('
      hello world, again
      ')
      console.log('hello world, again and again')

      68 in the

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      6 tags, and run it under a web browser, you will need to activate the debugger (Web Developer Tools) to see the outputs. See the above section on client-side examples.

   Standalone JS Eg 2: [TODO]

   [TODO] Check Limitations such as File IO, Networking etc. Compare with Shell Script and Python script for automation.

   Server-Side JavaScript by Examples

   You can also use JavaScript to program a server-side webapp, just like Java Servlet/JSP, Microsoft ASP, PHP, Python, etc. The appeal is that you can use one single language to program both the client-side and the server-side in a webapp.

   See Node.js article.

   JavaScript Basic Syntax

   Comments

   Comments are ignored by the JavaScript runtime but greatly useful in explaining your codes to others (and also to yourself three days later). You should use comments liberally to explain or document your codes.

   An end-of-line comment begins with

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   49 and lasts till the end of the current line. A multi-line comment begins with

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   73 and lasts till

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   74.

   Take note that:

   • HTML comments are enclosed inside .
   • CSS supports multi-line comment

     alert('hello, world')
     document.write('
     hello world, again
     ')
     console.log('hello world, again and again')

     75, but NOT end-of-line comment

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     49.
   • JavaScript supports both

     alert('hello, world')
     document.write('
     hello world, again
     ')
     console.log('hello world, again and again')

     75 and

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     49, like Java/C/C++/C#.

   Whitespaces (blank, tab, newline)

   Like C/C++/Java, JavaScript ignores additional whitespaces (blanks, tabs, and newlines). I strongly recommend that you use additional whitespaces to format your program to make your code easier to read and understand.

   Expressions

   An expression is a combination of variables, literals, operators, and sub-expressions that can be evaluated to produce a single value.

   Statements, Semicolon and Blocks

   A statement is a single programming instruction. Unlike C/C++/Java, where you need to end a statement with a semicolon (

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   79), in JavaScript the semicolon is optional. However, if semicolon is missing, you need to end the statement with a newline (and JavaScript engine will insert a semicolon for you).

   Semicolons in JavaScript divide the community. Some prefer to use them always, no matter what. Others like to avoid them for brevity. I shall leave it to you.

   A block consists of zero or more statements enclosed in a pair of curly braces

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   80. No semicolon is needed after the closing brace.

   Variables, Literals & Types

   Variable declarations (

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   29,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   7,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   8) and Assignment Operator (

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   84)

   A variable is a named storage location that holds a value. Prior to ES6, you can only use

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   29 to declare global variables. ES6 introduces two new keywords:

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   7 to declare a local block-scope variable, and

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   8 to declare a local block-scope constant.

   You should try

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   8 (safest), followed by

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   7, and avoid

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   29.

   You can assign (and re-assign) a value to a variable using the assignment (

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   84) operator. For example,

   Identifiers

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

   • An identifier can contain letters (

     alert('hello, world')
     document.write('
     hello world, again
     ')
     console.log('hello world, again and again')

     92,

     alert('hello, world')
     document.write('
     hello world, again
     ')
     console.log('hello world, again and again')

     93), digits (

     alert('hello, world')
     document.write('
     hello world, again
     ')
     console.log('hello world, again and again')

     94), underscore (

     alert('hello, world')
     document.write('
     hello world, again
     ')
     console.log('hello world, again and again')

     95) and dollar sign (

     alert('hello, world')
     document.write('
     hello world, again
     ')
     console.log('hello world, again and again')

     96). But it cannot begin with a digit (

     alert('hello, world')
     document.write('
     hello world, again
     ')
     console.log('hello world, again and again')

     94).
   • Identifiers are case-sensitive. A

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     0 is NOT a

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     2, and is NOT a

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     1.
   • Identifiers cannot be keywords.
   • Take note that hyphen (

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     01) and space are NOT allowed. Hence,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     02,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     03, are NOT valid identifiers. You should use underscore (

     alert('hello, world')
     document.write('
     hello world, again
     ')
     console.log('hello world, again and again')

     95) instead of hyphen (

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     01).

   Literals

   A literal is a fixed value, e.g.,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   06,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   07,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   08,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   09,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21, 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.

   Primitives are not objects and do not possess properties and methods. 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.,

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      08,

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      13).
   2. number: takes both integer (e.g.,

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      06) or floating-point (e.g.,

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      15).
   3. boolean: takes boolean literal of either

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      26 or

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      27 (in lowercase).
   4. undefined: takes a special literal value called

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      18. Take note that

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      18 is both a type and a literal value.
   5. symbol (ES6): A data type whose instances are unique and immutable.
   6. bigint (ES2020/ES11): integers with arbitrary precision.

   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)

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      20. Take note that

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      21 is NOT

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      22. The

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      23 is

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      20.

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      21 is meant to represent an absence of a constructed object.

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      21 is actually considered to be a primitive as it has no properties and methods.

   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

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   27 and

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   28) during declaration. The type is decided when a value is assigned to that variable. If a number is assigned, the variable takes on the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 type and can perform numeric operations such as addition and subtraction. If a string is assigned, the variable takes on the

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 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

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   31

   You can use the operator

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   31 to check the type of the current value assigned to a variable.

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   31 returns a string.

   For example,

   The

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18 Type and

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18 Literal Value

   An undeclared variable (via

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   29 keyword) takes on a special type called

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18. You cannot refer to its value.

   When a variable is declared (via

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   29 keyword) without assigning an initial value, it takes on the type

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18 and holds a special value called

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18 (

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   41 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

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   8-declaration

   You can create a read-only, named constant with the keyword

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   8 (in place of

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   29). For example,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   7

   The

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 Type, Literals & Operations

   A variable of type

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 holds a number, either an integer or a floating-point number.

   Integer literals can be expressed in:

   • Decimal: begins with a digit

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     47 to

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     48 (not

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     49), e.g.,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     50 or

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     51,
   • Octal: begins with a digit

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     49, e.g.,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     53 or

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     54,
   • Hexadecimal: begins with

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     55 (or

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     56), e.g.,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     57 or

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     58.
   • Binary: begins with

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     59 (or

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     60), e.g.,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     61 or

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     62. [Binary may not be supported in some browsers.]

   Floating-point literals can be expressed in the usual form (e.g.,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   63) or scientific notation, e.g.,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   64,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   65.

   JavaScript also provides some special

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 literals:
   • infinity: e.g.,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     67
   • -infinity: e.g.,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     68
   • NaN (Not-a-Number): e.g.,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     69, or converting the string

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     70 to a number.

   Arithmetic Operations

   Arithmetic operations, as tabulated below, can be applied to numbers. The following results are obtained assuming that

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   71,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   72 before the operation.
   OperatorDescriptionExampleResult (

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   71,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   72)+Additionz = x + y;z is 7-Subtraction (or Unary Negation)z = x - y;z is 3*Multiplicationz = x * y;z is 10/Divisionz = x / y;z is 2.5%Modulus (Division Remainder)z = x % y;z is 1++Unary Pre- or Post-Incrementy = x++; z = ++x;
   Same as: y = x; x = x+1; x = x+1; z = x;y is 5; z is 7; x is 7--Unary Pre- or Post-Decrementy = --x; z = x--;
   Same as: x = x-1; y = x; z = x; x = x-1;y is 4; z is 4; x is 3**Exponent
   (ES7)y ** x

   In JavaScript, arithmetic operations are always performed in double-precision floating-points (NOT integers). That is,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   75 gives

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   76 (instead of 0 in Java/C/C++). You may use the built-in function

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   77 to truncate a floating-point value to an integer, e.g.,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   78 and

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   79 gives

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   80. You may also use the built-in mathematical functions such as

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   81,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   82,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   83 for converting a floating-point number to an integer.

   Exponent Operator (

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   0)

   ECMAScript 2016 (ES7) introduces exponent operator (

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   0), you can write

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   86, e.g.,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   87.

   Before ES7, you have to use built-in function

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   88.

   Arithmetic cum Assignment Operators

   These are short-hand operators to combine two operations.

   OperatorDescriptionExampleResult+=Addition cum Assignmentx += y;Same as: x = x + y;-=Subtraction cum Assignmentx -= y;Same as: x = x - y;*=Multiplication cum Assignmentx *= y;Same as: x = x * y;/=Division cum Assignmentx /= y;Same as: x = x / y;%=Modulus cum Assignmentx %= y;Same as: x = x % y;

   Some frequently-used

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   89 built-in Functions

   • parseInt(str), parseFloat(str): Parse the

     
     
     
     
       
       JavaScript Example: Events onload, onmouseover and onmouseout
       
     
     
       
     "Hello" alert Box appears after the page is loaded.
       
     Point your mouse pointer here!!!
     
     

     3 until the first non-digit, and return the number; or

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     91.
   • 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

     
     
     
     
       
       JavaScript Example: Events onload, onmouseover and onmouseout
       
     
     
       
     "Hello" alert Box appears after the page is loaded.
       
     Point your mouse pointer here!!!
     
     

     3 is not a number. For example, It is interesting to note that JavaScript does not have counterpart functions like

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     93,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     94.
   • Number(str): Return the number represented by

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     25, or

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     91. 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,

   The

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 Type, Literals & Operations

   A

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 is a sequence of characters enclosed within a pair of single quotes or double quotes (e.g.,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   08,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   13,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   01,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   02). ES6 introduces multi-line template strings delimited by back quotes (in the next section). You can use an escape sequence to represent special non-printable characters (such as

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   58 for new-line,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   04 for tab, and

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   05 for Unicode character); and to resolve conflict (e.g.,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   06,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   07,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   08).

   Unlike Java/C/C++, but like HTML/CSS's attributes, you can use either single quotes or double quotes for

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30. This is handy as you can use single quotes if the

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 contains double quotes (e.g.,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   11

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   11), without using the clumsy escape sequences (e.g.,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   13).

   JavaScript is dynamically-type, and performs type conversion automatically. When a

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 value is used in arithmetic operations (such as subtraction or multiplication), JavaScript runtime automatically converts the

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 to a

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 if it represents a valid

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74; or a special

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 called

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   91 (not-a-number) otherwise. For example,

   The

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   00 Operator: Addition or Concatenation?

   If both the operands to a

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   00 operator are

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   22, it performs the usual numeric addition. However, if one (or both) of the operand is a

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30, the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   00 operator is overloaded to perform string concatenation. The other operand will be converted to a

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30, if necessary. For example,

   Converting a numeric

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 to

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74:

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   77,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   29 and

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   30

   To convert a numeric

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 to a

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74, you could use the built-in functions

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   77 or

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   29, which returns a

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 if conversion is successful; or

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   91 otherwise. For example,

   Take note that

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   77 works as long as the

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 begins with digits. It will parse up to the first non-digit. For example,

   You can also use the function

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   30, which converts the object argument to a number that represents the object's value; or

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   91 if conversion fails. For example,

   Constructing/Converting to

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30:

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   42 and

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   43

   You can construct a

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 from another type via

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   42 function, e.g.,

   You can use

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   43 to obtain a

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 representation of an object, e.g.,

   You can also convert a number to string by concatenating with an empty string, e.g.,

   String's Properties

   • .length: E.g.,

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     48 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

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     49 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

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     50 (inclusive) to

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     51 (exclusive).
   • .substr(beginIdx, length): returns the substring from

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     50 of

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     53.
   • .indexOf(searchStr, fromIdx?): Return the beginning index of the first occurrence of

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     54, starting from an optional

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     55 (default of 0); or

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     56 if not found.
   • .lastIndexOf(searchStr, fromIdx?): Return the beginning index of the last occurrence of

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     54

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     6, starting from an optional

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     55 (default of

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     60); or

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     56 if not found.
   • .slice(beginIdx, endIdx): Return the substring from

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     62 (inclusive) to

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     63 (exclusive).
   • .repeat(count) (ES6): repeat the string.
   • .split(delimiter), array.join(delimiter): returns an array by splitting the string using

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     64, e.g.,
   • Searching/Modifying Strings using Regular Expression: See "".

   Character Type?

   JavaScript does not have a dedicated character type, but treats it as a one-character single. To get an individual character from a string, you can use:

   • .charAt(idx): For example,
   • Array Bracket Operator []: You can treat a string as a character array, and access individual character via array bracket operator

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     65, e.g.,.

   (ES6) Multi-line Back-Quoted Template String and Substitution

   Prior to ES6, You can enclosed a string literal using either single or double quotes (e.g.,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   08,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   13,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   01,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   02). Escape sequences are to be used for special characters (e.g.,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   58 for new-line,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   04 for tab) and resolving conflict (e.g.,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   06,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   07,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   08). 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 (because there is no conflicts). But you need to use escape sequence for back-quote, i.e.,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   75.

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

   Substitution

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   76

   Template strings support substitution, which allow you to embed any valid JavaScript expression as part of the string in the form of

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   76, for example,

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

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   8

   The

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   78 Type, Literals & Operations

   A variable of the type

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   78 holds a value of either

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26 of

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27.

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26 and

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27 are keywords in JavaScript.

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

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27:
   1. number

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      49
   2. number

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      91 (Not-a-Number),
   3. empty string (

      
      
      
      
        
        JavaScript Example: The Date object
        
      
      
      

      13,

      
      
      
      
        
        JavaScript Example: The Date object
        
      
      
      

      88),

   4. 
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      18 value,
   5. boolean

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      27,

   6. My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      21 (unallocated) object.

   All the other values are converted to

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26.

   You need to memorize this:

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   93 return

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26 if

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   95 is one of these 6 values:

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   49,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   91,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   13,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27, and

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21.

   Comparison (Relational) Operators

   The following relational operators, which produce a

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   78 result, are defined in JavaScript. The results are obtained assuming

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   03,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   04.
   OperatorDescriptionExampleResult
   (

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   03,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   04)==Abstract Equal To
   (in Value)

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   9

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   0!=Abstract Not Equal To===Strictly Equal To
   (in Type and Value)

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   1

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   2!==Strictly Not Equal To>Greater Than>=Greater Than or Equal To

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   07 vs.

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   08

   The strictly equality operator (

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   07) returns

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26 if both operands have the same type and same value; while abstract equality operator (

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   08) returns

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26 if both operands have the same value, but may or may not be the same type, i.e., == converts its operands if the operand types do not match.

   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

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     91 if it does not contain a valid number). Hence,

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     14 returns

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26. But,

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     16 returns

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     27, because the operands are not of the same type.

   • if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     07,

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     19,

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     08,

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     21 can be applied to boolean (and all the JavaScript types), e.g.,

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     22 gives

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26 (because empty string is converted to

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     27); but

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     25 gives

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26.
   • It is RECOMMENED to use

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     07 (or

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     19), instead of

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     08 (or

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     21), 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

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   31 is greater than string

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   32.

   For example,

   To compare two strings alphabetically, use

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   33, e.g., [TODO]

   Logical (Boolean) Operators

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

   OperatorDescriptionExampleResult&&Logical AND||Logical OR!Logical NOT&&=Logical AND cum assignment (ES12)||=Logical OR cum assignment (ES12)

   Notes:

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   34 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., (

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   35) is short-circuited to give

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27, (

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   37) gives

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26, the

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   5 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

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 to a

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30: Simply concatenate the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 with an empty

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   43, e.g.,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   44 gives

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   45.

   Converting a

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 to a

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74: Use built-in functions

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   48,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   49 or

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   50 to convert a

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   3 which contains a valid

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74. For example,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   53 gives

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   80,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   78 gives

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   80,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   79 gives

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   80,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   59 gives

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   60,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   61 gives

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   80, but

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   63 gives

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   91.

   Converting a float to an integer: Use

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   77 (e.g.,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   78 gives

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   80), or built-in mathematical functions such as

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   81,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   83 or

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   82.

   Flow Control - Decision (Conditional)

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

   SyntaxExample

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   3

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   4

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   5

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   6

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   7

   Notes: JavaScript, like C/Java, does not support native

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   71, but nested

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   72.

   [ES12] Logical nullish Assignment Operator (

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   5)

   The logical nullish assignmebnt

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   74 assigns only if x is

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21 (unallocated object) or

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18 (uninitialized variable) i.e., nullish. For example,

   Flow Control - Loops (Repetition)

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

   JavaScript also introduces

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   77 and

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   29 loops (to be discussed later).

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   79,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   80 and Statement Label

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

   • break: exits the innermost loop.
   • continue: aborts the current iteration, and continues to the next iteration.
   • label: provides an identifier for a statement, which can be used by

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     81 and

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     82.

   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

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

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

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   84"

   You can create an array by assigning an array literal to a variable, known as Array Initializer, in the form of

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   84. For examples,

   Take note that JavaScript's array literal is enclosed in square bracket

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   86, instead of

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   87 in Java/C/C++. JavaScript uses

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   87 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

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   83. The index of the array begins at 0, and shall be a non-negative integer.

   Array's Property

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   90

   The length of the array is maintained in a variable (property) called

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   90, which can be accessed via

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   92. In fact, the property

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   93 returns the last integral index plus 1, as JavaScript's array index is 0-based. Nonetheless, you are allow to manipulate (write) the

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

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

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   95. For examples,

   Accessing All Items using for-loop with index

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

   The JavaScript's

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   77 loop

   JavaScript provides a special

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   97 loop to process all the elements in an array. The syntax is as follows, where

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   98 takes on the each of the index number of element which are not

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18.

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   8

   For example,

   The JavaScript's

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   29 loop

   JavaScript provides a special

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   01 loop to process all the elements in an array. The syntax is as follows, where

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   02 takes on the each of the element including the

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18.

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   9

   Add/Remove item(s)

   You can:

   • Use index

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     04 to add one item to the end of an array.
   • Use

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     95 to remove a particular index (set it to

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     18).
   • Use

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     07 to add one or more items to the end of an array.

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     08 returns the resultant length of the array.
   • Use

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     09 to add one or more items to the beginning of an array.

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     10 returns the resultant length of the array.
   • Use

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     11 to remove and return the last item of an array.
   • Use

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     12 to remove and return the first item of an array.

   For examples,

   PurposeExampleAdd one item to the end of an array using index

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   13Add one or items to the end of an array using

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   07.
   

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   08 returns the resultant length of the array.Add one or items to the beginning of an array using

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   09.
   

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   10 returns the resultant length of the array.Remove and return the last item from an array using

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   11Remove and return the first item of an array using

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   12

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

   The

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   20 object has these commonly-used properties:
   • .length: the number of items including

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     18 items. In fact,

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     93 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

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     23 (defaulted to

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     24). For example,
   • str.split([separator, limit]): Reverse of

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     25. Take a string and split into an array based on the

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     26. For example,
   • array.concat(value1, value2, ..., valueN): returns a new array composing of this array and the given arrays or values. For example,
   • array.reverse(): reverses the order of elements in the array, the first becomes last. For example,

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     0
   • array.sort(): sorts the elements in the array. For example, 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

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     27 and

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     28, and return a negative number if

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     29; a positive number if

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     30; and 0 if

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     31
   • array.slice(beginIdx, endIdx): extracts and returns a section of an array from

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     62 (inclusive) to

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     63 (exclusive). For example,
   • array.splice(startIdx, countToRemove, insertItem1, insertItem2, ...): removes elements from an array, and insert elements at its place. For example,
   • 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,
   • .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. 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

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     34 on each item. For example,
   • .filter(callback): return a new array, containing the items for which

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     34 returned

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26. For example,
   • array.every(callback): return

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26 if

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     34 returns

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26 for ALL items.
   • array.some(callback): return

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26 if

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     34 returns

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26 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

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   43; while object initializer (for associative array) uses curly brackets

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   44.

   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:

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   1

   Functions are declared using the keyword

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

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

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   46 statement to return a single piece of result to the caller anywhere inside the function body. If no

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   46 statement is used (or a

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   46 with no value), JavaScript returns

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18.

   For client-side JavaScript, functions are generally defined in the

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   9 section, so that it is always loaded before being invoked.

   To invoke a function:

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   2

   Client-Side JavaScript Function Examples

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   3

   Function's

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   51

   Function has access to an additional built-in variable called

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   51 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

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18. 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 (

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   54,

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   55) or pass a

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21 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

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   55) to provide default value if no value (

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18 or

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21) is passed, provided the valid inputs cannot be

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   49,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   88, and

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   91 that evaluate to

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27.

   (ES6) Function with Default Parameter Values

   ES6 greatly simplify the above by introducing default parameter value in the form of

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   65. For example,

   (ES6) Rest/Spread Operator (

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   5) and Arrow-Function Notation

   ES6 also introduces rest/spread operator (

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   5) 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:

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   4

   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:

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      5
   2. Use a function expression by assigning an anonymous function to a variable:

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      6

   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

     for ( initialization ; test ; post-processing ) {
        body ;
     }

     8 returns nothing (or

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     18).
   • prompt(str, defaultValue): Pop-up a box to prompt user for input, with an optional

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     70. The

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     15 returns the user's input as a string. For example,
   • 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

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     16 which returns a boolean value. For example,
   • document.write(str), document.writeln(str): Write the specified string to the current document. The

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     57 (write-line) writes a newline after the string, while

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     85 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

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     60 or

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     59 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

     
     
     
     
       
       JavaScript Example: Events onload, onmouseover and onmouseout
       
     
     
       
     "Hello" alert Box appears after the page is loaded.
       
     Point your mouse pointer here!!!
     
     

     3 and returns the numeric value or

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     91 (Not-A-Number). The

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     79 accepts an optional

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     80 (or base). For example,
   • Number(object): returns the number representation of the object. It works for

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     81 object, as well as many objects such as

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     43.
   • isFinite(number): returns

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26 if

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     74 is not

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     91,

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     86 or

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     87.
   • isNaN(number): returns

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26 if number is

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     91. Useful for checking the output of

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     77 and

     
     
     
     
       
       JavaScript Example: The Date object
       
     
     
     

     29.
   • 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

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     92. 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:

   • 
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     93: generated when the user clicks on an HTML element.

   • 
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     94,

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     95: generated when the user positions the mouse pointer inside/away from the HTML element.

   • alert('hello, world')
     document.write('
     hello world, again
     ')
     console.log('hello world, again and again')

     03,

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

     97: generated after the browser loaded a document, and before the next document is loaded, respectively.

   The event handler, called

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   98 (such as

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   82,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   00,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   94), is the function that responses to an event. The event handler is typically attached to the target HTML tag, e.g.,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   7

   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

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18 and

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21 (unallocated 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

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   04 object has properties such as

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   05,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   06,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   07,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   08; and methods such as

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   09,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   10,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   11,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   12.

   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 key (or name) and value (i.e., key-value pair or name-value pair). If the value is a function (recall that JavaScript functions are first-class objects that can be assigned to variables), 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 with Object Literal

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

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   8
   • 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

     for ( initialization ; test ; post-processing ) {
        body ;
     }

     13.
   • The name-value pairs are separated by commas

     
     
     
     
       
       JavaScript Example: Loop
     
     
       
     Testing Loop
       
     
     

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

     for ( initialization ; test ; post-processing ) {
        body ;
     }

     15), you need to enclose the name with single or double quotes. Otherwise, the quotes are optional. For example, 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

     for ( initialization ; test ; post-processing ) {
        body ;
     }

     16.

   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 (

      for ( initialization ; test ; post-processing ) {
         body ;
      }

      17) operator: in the form of

      for ( initialization ; test ; post-processing ) {
         body ;
      }

      18 or

      for ( initialization ; test ; post-processing ) {
         body ;
      }

      19, just like Java/C++.
   2. The index

      
      
      
      
        
        JavaScript Example: The Date object
        
      
      
      

      65 operator (or bracket notation): In JavaScript, you can also use the index operator to access the object properties, in the form

      for ( initialization ; test ; post-processing ) {
         body ;
      }

      21, just like accessing an array item.

   The

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   95 operator

   You can remove a property (including method) via "

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   23".

   Operator

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   24

   You can use the

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   24 operator to check if a particular instance belongs to a particular class of objects, e.g.,

   The

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   26 method

   The

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   27 returns

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26 if

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   29 has the specific

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   30.

   Operator

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   31

   You can use the

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   31 operator to check if a particular property belongs to an object, for example,

   Example 1: A Simple Object, Deleting and Adding Properties

   Unlike Java/C++, you can delete or add new properties to an existing JavaScript 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

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   33 (of the

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   34 pair) can take a string or a number, e.g.,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   35.

   Many developers do not enquote the string

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   33, if it is a valid identifier (a valid identifier begins with an alphabet,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   37 or

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   38; and does not contain special characters like blank and

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   15). For example,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   40 is the same as

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   41. However, you need to enquote a string

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   33 if it is NOT a valid identifier, e.g.,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   43.

   The string

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   95 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

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   45

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

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   9

   The

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21 vs

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18 Literal Values

   As discussed earlier:

   • An undeclared variable has type of

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     18, and its value cannot be referenced.
   • A declared but uninitialized variable has type of

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     18, with a special literal value of

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     18 too. [

     
     
     
     
       
       JavaScript Example: Variables and functions prompt() and confirm()
       
     
     
       
     Welcome to JavaScript!
     
     

     18 is both a type and a literal value!]
   • A unallocated object has a special literal value of

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     21. Take note that

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     21 is an object!

   In boolean expressions, both the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21 and

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18 evaluate to

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27 (together with empty-string

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   13, number

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   49 and

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   91, and boolean

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27). To check for

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21 value, use

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   62, as

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   63 (or

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   93) returns

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26 for

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   21,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   18,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   13,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   49,

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   91, and

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   27

   Built-in JavaScript Objects

   JavaScript provides many useful global objects, such as

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   20,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   43,

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   81, and

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   89.

   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

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   47 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

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   47 operator.

   For example, the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   43 object has a constructor method called

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   79. To construct a new instance of

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   43 object:

   The

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   31 and

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   24 Operators

   As seen from the above examples, the

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   31 operator returns the type of a value, which can be a primitive type (such as number, string, boolean) or object (including function).

   The

   for ( initialization ; test ; post-processing ) {
      body ;
   }

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

   The

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   43 and

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   86 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

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     74.

   The

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   20 Object and Associative Arrays

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

   Nowadays, we usually create an array via Array Initializer in the form of

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   84. Nonetheless, as arrays are objects of class

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   20, we could also construct an array by invoking the

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   91 constructor with the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   47 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 "" 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

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   20 constructor. For examples,

   In this case, additional properties are added into an

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   20 object as object's properties. The array has

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   93 of 0, as

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   93 reflects only the numerical indexes! Using an array object for associative array is not recommended. I describe here for completeness.

   The

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   81 Object vs

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 Primitive Type

   JavaScript provides primitive

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 type. It also provide a

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   81 class as a wrapper class for primitive

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30. Read "" for primitive

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30.

   A string can be created in two ways:

   1. directly assigned a string literal in the form of

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      03 or

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      04 to a variable, resulted in a

      
      
      
      
        
        JavaScript Example: Variables and functions prompt() and confirm()
        
      
      
        
      Welcome to JavaScript!
      
      

      30 primitive.
   2. invoke the

      
      
      
      
        
        JavaScript Example: Loop
      
      
        
      Testing Loop
        
      
      

      81 object constructor to construct a

      
      
      
      
        
        JavaScript Example: Loop
      
      
        
      Testing Loop
        
      
      

      81 object.

   For examples,

   The former is a primitive

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30, while the latter is a

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   81 object.

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   81 object is a wrapper for primitive string, which provides many useful methods for manipulating strings. See "".

   A

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   30 primitive is "auto-box" to a

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   81 object, when you invoke a

   
   
   
   
     
     JavaScript Example: Loop
   
   
     
   Testing Loop
     
   
   

   81 object's methods. For example,

   The

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   89 Object vs

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 Primitive Type

   JavaScript provides primitive

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 type. It also provide a

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   89 class as a wrapper class for primitive

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74. Read "" for primitive

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74.

   The

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   89 object is a wrapper object for primitive

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74, which provides many properties and methods. Again, a

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   74 primitive is auto-box to a

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   89 object, when you invoke a

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   89 object's operation. See "".

   The

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   25 Object vs boolean

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   26 Type

   JavaScript provides primitive

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   78 type. It also provide a

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   25 class as a wrapper class for primitive

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   78. Read "" for primitive

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   78.

   The

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   25 object is a wrapper object for primitive

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   78, which provides many properties and methods.

   The

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   43 Object

   Commonly-used constructors:

   • new Date(): constructs a

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     43 object with the current date and time.
   • new Date(dateTimeStr): constructs a

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     43 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:

   • My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     62, 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(),

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     37: get/set the hours/minutes/seconds.
   • getTime(), setTime(): get/set the number of milliseconds since January 1, 1970, 00:00:00.

   The

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   38 Object

   Commonly-used properties:

   • E, PI: Euler’s constant and

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     39.
   • 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

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   40 Object

   For an introduction to functions, read "" section.

   Every function in JavaScript is actually a

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   40 object!

   Function Variable

   A variable can be assigned a

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   40 object (called function variable), which takes a special object type called

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   88. [In JavaScript, an object's type is either

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   88 (for

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   40 object) or

   
   
   
   
     
     JavaScript Example: Variables and functions prompt() and confirm()
     
   
   
     
   Welcome to JavaScript!
   
   

   20 (for any object not a

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   40).]

   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

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   88 keyword, you can also use the

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   40 constructor (with

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   47 operator) to define a

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   40 object. This is not easily understood and, hence, not recommended.

   The syntax for

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   40 constructor is:

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   0

   The

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   53 object

   Formatting Console Output

   console.log('formattingStr', arg1, arg2, ...): You can use C's

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   14-like syntax with format specifiers (such as

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   55,

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   56,

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   57) to format the output string.

   You can use %c to apply CSS rules, e.g.,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   1

   Logging Methods

   JavaScript supprots 5 levels of logging, in the order of severity:

   1. console.error():
   2. console.warn():
   3. console.log():
   4. console.info():
   5. console.debug():

   More Debugging Methods

   • console.trace(): print the current stack trace.
   • console.dir(): displays an interactive list of the properties of the specified JavaScript object.
   • console.dirxml(): displays in XML the properties of the specified JavaScript object.
   • console.assert(): writes an error message to the console if the assertion is false; otherwise do nothing.

   Time Measurements

   • console.time([label]): starts a new timer.
   • console.timeEnd([label]): ends the timer and returns the time in milliseconds since the timer starts.
   • console.timeLog([label]): returns the elapsed time since the timer started.

   More on Objects

   Prototype-based vs. Class-based OO

   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, "

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   58" is a class; and "

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   59" and "

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   60" are instances of the "

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   58" 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

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     62, which holds its prototype object. When you define a new object, its

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     62 is set to a built-in object called

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     64. In other words, the new object uses

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     64 as its prototype, and gets its initial properties from

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     64. The

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     62 property is not enumerable, i.e., it would not shown up in the

     if ( condition-1 ) {
        block-1 ;
     } else if ( condition-2 ) {
        block-2 ;
     } else if ( condition-3 ) {
        block-3 ;
     ......
     ......
     } else {
        block-n ;
     }

     77 loop.

   Example: Object Prototype

   Notes:

   • Prototype Chain: In the above example,

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     69's prototype is

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     64, whose prototype is

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     21. This form a prototype chain of

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     72.

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     69 defines two own properties:

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     74 and

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     75. When you invoke

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     76, which cannot be found in

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     69, but found in its prototype.
   • Object.getPrototypeOf(obj): Instead of using

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     78 property used in above example, which is NOT in the official JavaScript specification, you should use

     
     
     
     
       
       JavaScript Example: User-defined function and onclick Event Handler
       
     
     
       
     Example on event and user-defined function
       
     
     

     79 method to get the prototype of an object.

   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

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   47 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

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   09

   "

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   09" refers to the current object.

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   83 refers to the property of this object.

   Example: Object Constructor Function

   Let us define a constructor for our custom

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   84 objects, with properties

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   74,

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   86,

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   87 and

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   88.

   How it Works?

   1. Properties (including methods) are declared inside the constructor via

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      83, which can then be initialized.
   2. Methods can be declared inside the constructor via

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      90. There are a few ways to provide the method's definition:
      1. Define an ordinary

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         88, and assign the

         
         
         
         
           
           JavaScript Example: User-defined function and onclick Event Handler
           
         
         
           
         Example on event and user-defined function
           
         
         

         92 (without parentheses, which is a

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         88 type) to

         
         
         
         
           
           JavaScript Example: User-defined function and onclick Event Handler
           
         
         
           
         Example on event and user-defined function
           
         
         

         90, as in the

         
         
         
         
           
           JavaScript Example: User-defined function and onclick Event Handler
           
         
         
           
         Example on event and user-defined function
           
         
         

         88.
      2. Assign

         
         
         
         
           
           JavaScript Example: User-defined function and onclick Event Handler
           
         
         
           
         Example on event and user-defined function
           
         
         

         90 to an inline function, as in the

         
         
         
         
           
           JavaScript Example: User-defined function and onclick Event Handler
           
         
         
           
         Example on event and user-defined function
           
         
         

         87.
      3. Invoke the

         
         
         
         
           
           JavaScript Example: User-defined function and onclick Event Handler
           
         
         
           
         Example on event and user-defined function
           
         
         

         40 constructor with

         My First JavaScript says
         Hello world, again!
         This document was last modified on mm/dd/yyyy hh:mm:ss.

         47 operator (rarely-used):

         
         
         
         
           
           JavaScript Example: The Date object
           
         
         
         

         2
   3. To invoke a method, use

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      00.
   4. The

      
      
      
      
        
        JavaScript Example: The Date object
        
      
      
      

      43 is a special method, which returns a string description of this object. The

      
      
      
      
        
        JavaScript Example: The Date object
        
      
      
      

      43 will be implicitly invoked if an object is passed into the

      for ( initialization ; test ; post-processing ) {
         body ;
      }

      9,

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      56 or

      My First JavaScript says
      Hello world, again!
      This document was last modified on mm/dd/yyyy hh:mm:ss.

      00 operator (like Java).

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   62 and

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   07

   Revisit the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.
   

   47 Operator

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

   1. Create a new generic object using built-in root

      for ( initialization ; test ; post-processing ) {
         body ;
      }

      16 as prototype.
   2. Assign this newly created object to

      alert('hello, world')
      document.write('
      hello world, again
      ')
      console.log('hello world, again and again')

      09 variable.
   3. Run the constructor function, which typically adds properties to

      alert('hello, world')
      document.write('
      hello world, again
      ')
      console.log('hello world, again and again')

      09.
   4. Set the internal property

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      62 to

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      13 (in the above example,

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      14). The

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      62 property is not enumerable (i.e., it would not shown up in the

      if ( condition-1 ) {
         block-1 ;
      } else if ( condition-2 ) {
         block-2 ;
      } else if ( condition-3 ) {
         block-3 ;
      ......
      ......
      } else {
         block-n ;
      }

      77 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

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   47 operator, e.g.,

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   18. In this case, the constructor will be run as per ordinary function. There will not be any association of

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   09 and

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   62 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

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   62 internal property.

   Another Example

   Constructor's

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   07 Property

   All the JavaScript constructor function objects (in fact, all function objects) have a special property called

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   07. By default, it holds an object that can be used as a prototype for creating new objects.

   In the

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   84 example, the

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   84 constructor function has a

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   14, which holds a

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   84 object to be used as a prototyping object. When a new

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   84 object is constructed via the

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   47 operator, the newly constructed object's

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   62 property is set to

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   14.

   Adding Shared properties to Constructor's

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   07 Property

   The constructor's

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   07 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

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

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

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   62 property. Recall that the

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   36 call sets the

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   62 to

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   13. Hence, properties added into

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   13 are available to (and shared by) all the objects prototyped by this constructor.

   In practice, we defines methods (and static variables) in

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   13 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

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   41.

   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

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      62 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

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   14 and

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   64 are inherited by

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   45.

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   24 Operator

   Every object has a

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   62 object property (except

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   16); every constructor function has a

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   07 property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   62 to the constructor's

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   07. JavaScript provides a shortcut: the

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   24 operator tests an object against a function and returns

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   26 if the object inherits from the function prototype. For example,

   [TODO]

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   54

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   54 lets you create a new object based on the given prototype object. It simply sets the

   
   
   
   
     
     JavaScript Example: User-defined function and onclick Event Handler
     
   
   
     
   Example on event and user-defined function
     
   
   

   62 to the given prototype object, so that all properties of the prototype are available to the new object. Using

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   54, You do NOT need to define a constructor function and run

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   58 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

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   59 and define

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   60 getter/setter to access the

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   59 variable. JavaScript does not really support

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   59 access?! But you can also define ordinary methods

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   63 or

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   64 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

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      65 or

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      66;
   2. inside the "object initializer" via keywords

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      67 and

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      68.

   Example 1: Define Getters/Setters via

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   65 or

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   66

   Notes:

   1. The

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      71 allows you to define multiple properties; while

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      72 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

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      67 and

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      68 with a rather strange syntax, as shown in the example.

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   16's Properties

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   76

   All JavaScript objects inherited a special property called

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   77, 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:

   FunctionDescriptionExample

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   78Returns the element with the given unique

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   19.

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   3

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   80Returns an array of elements with the given tag name.

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   4

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   81Returns an array of elements with the given

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   82 attribute name.

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   5

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   83Returns an array of elements with the given

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   33 attribute.

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   6

   You can use wildcard

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   85 in

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   86 to select all the elements, e.g.,

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   7

   The above functions select element(s) based on the unique

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   19,

   for ( initialization ; test ; post-processing ) {
      body ;
   }

   33 attribue and tag-name. HTML 5 further defines two function that can select elements based on

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   82 attribute (which is used extensively by CSS in the class-selector):
   FunctionDescriptionExample

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   90Returns the first element with the given

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   82 attribute.

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   8

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   92Returns an array of elements with the given

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   82 attribute.

   
   
   
   
     
     JavaScript Example: The Date object
     
   
   
   

   8

   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. 
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      94 returns an array of all

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      95 elements, same as

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      96.

   2. 
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      97: return an array of allelements.

   3. 
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      98 and

      
      
      
      
        
        JavaScript Example: Events onload, onmouseover and onmouseout
        
      
      
        
      "Hello" alert Box appears after the page is loaded.
        
      Point your mouse pointer here!!!
      
      

      99: return all the hyperlinks

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      6and anchors

      
      
      
      
        
        JavaScript Example: User-defined function and onclick Event Handler
        
      
      
        
      Example on event and user-defined function
        
      
      

      6elements. [To confirm!]

   Manipulating Element's Content through the

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   42 Property

   You can access and modify the content of an element via the "

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   42" property, which contains all the texts (includes nested tags) within this element.

   For example,

   "

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   42" is the most convenient way to access and manipulate an element's content. However, it is not a W3C standard, but it is supported by most of the browsers.

   DOM Tree & Nodes

   W3C recommends that you access and manipulate HTML elements via the DOM tree and nodes. However, it is really an overkill for writing simple JavaScripts. I present them here again for completeness.

   When a browser loads an HTML page, it builds DOM models a web page in a hierarchical tree-like structure composing of nodes, resembling its HTML structure.

   An example of an HTML document with the corresponding DOM-tree is given follow. Take note that the text content of an element is stored in a separate Text node.

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   0

   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:

   • My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     005: contain the name of the node, which is read-only. The

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     005 for an Element node is the tag-name;

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     005 for the Document node is

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     008;

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     005 for Text nodes is

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     010.

   • My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     011: contain the value of the node.

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     011 for Text node is the text contained;

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     011 for Element node is undefined.

   • My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     014: an integer indicating the type of the node, e.g., Element (1), Attribute (2), Text (3), Comment (8), Document (9).

   • My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     015: reference to parent node. There is only one parent node in a tree structure.

   • My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     016: array (or node-list) of child nodes.

   • My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     017,

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     018: reference to the first and last child node.

   • My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     019,

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     020: reference to the previous and next sibling in the same level.

   Take note of the difference between singular and plural terms. For example,

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   015 refer to the parent node (each node except root has one and only one parent node),

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   016 holds an array of all the children nodes.

   The root node of the DOM tree is called

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   6. The root node

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   6 has only one child, called

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   025, 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

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   026 to access the tag directly.

   For example, you can use the following node property to access the Text node

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   027 in the above example:

   Example

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

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   1

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   2

   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

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   011. For example,

   Attribute Properties

   To access an attribute of an Element node called

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   029, you could either use:
   • property

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     030, where

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     031 is the name of the attribute, or
   • methods

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     032 and

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     033.

   For example,

   Attribute

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   034 (for CSS)

   Element has a property called style, which models CSS style with CSS properties such as

   alert('hello, world')
   document.write('
   hello world, again
   ')
   console.log('hello world, again and again')

   07 and

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   036. For example,

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   3

   Manipulating Nodes

   A Node object has these functions:

   • My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     037: returns

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     26 if this node has at least one child node.
   • Manipulating child node:

     • My First JavaScript says
       Hello world, again!
       This document was last modified on mm/dd/yyyy hh:mm:ss.

       039: insert a node before an existing child node.

     • My First JavaScript says
       Hello world, again!
       This document was last modified on mm/dd/yyyy hh:mm:ss.

       040: replace an existing child node.

     • My First JavaScript says
       Hello world, again!
       This document was last modified on mm/dd/yyyy hh:mm:ss.

       041: remove the specified child node.

     • My First JavaScript says
       Hello world, again!
       This document was last modified on mm/dd/yyyy hh:mm:ss.

       042: append the given node as the last child.

   • My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     043

     My First JavaScript says
     Hello world, again!
     This document was last modified on mm/dd/yyyy hh:mm:ss.

     044:

   Creating a New Element (

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   045) and Text Node (

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   046), Appending a Node (

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   047)

   To create new text node, you can use

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   048 to create a standalone text-node, followed by an

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   049

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   050 to append the text node to an element.

   Similarly, you can use

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   051 to create a stand-alone element, followed by an

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

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

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   4

   Inserting a new Node (

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   053)

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   4

   Replacing a Node (

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   054)

   Change the last line to

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   055.

   Deleting a Node (

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   056)

   You can remove a child node from a parent node via

   My First JavaScript says
   Hello world, again!
   This document was last modified on mm/dd/yyyy hh:mm:ss.

   057.

   For example, let remove the last

   from .

   if ( condition-1 ) {
      block-1 ;
   } else if ( condition-2 ) {
      block-2 ;
   } else if ( condition-3 ) {
      block-3 ;
   ......
   ......
   } else {
      block-n ;
   }

   6

   The

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

   6 object

   The

   
   
   
   
     
     JavaScript Example: Events onload, onmouseover and onmouseout
     
   
   
     
   "Hello" alert Box appears after the page is loaded.
     
   Point your mouse pointer here!!!
   
   

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

   Bagaimana JavaScript dijalankan?

   Javascript cenderung sangat cepat karena dijalankan langsung di dalam browser. Selain itu, browser utama sebagian besar mendukung kompilasi JIT (Just In Time), yang berarti tidak perlu mengkompilasi code sebelum menjalankannya.

   JavaScript pakai aplikasi apa?

   Namun, sebelumnya Anda membutuhkan beberapa aplikasi berikut untuk mendukung Anda belajar Javascript: Web browser (Google Chrome, Firefox, atau lainnya). Teks editor (Atom, Notepad, atau lainnya). Web server, untuk menjalankan kode pemrograman.

   Bagaimana cara penggunaan JavaScript dalam HTML?

   Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag di antara

   Apakah JavaScript cocok untuk pemula?

   JavaScript adalah salah satu bahasa pemrograman populer saat ini. Javascript ini punya banyak keunggulan yang membuatnya cocok untuk pemula. Untuk itu, belajar JavaScript sangat disarankan jika Anda ingin membuat website.