kode javascript

Cara menggunakan javascript only

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" @ //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





  
  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





  
  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 ;
}

for [ initialization ; test ; post-processing ] {
   body ;
}

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,

It cannot read file from the client's machine.
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.
It cannot connect to another server.
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 ;
}

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  title Event Handler
  


  Example on event and user-defined function

0 is NOT a





  
  JavaScript Example: User-defined function and  title Event Handler
  


  Example on event and user-defined function

1 and is NOT a





  
  JavaScript Example: User-defined function and  title Event Handler
  


  Example on event and user-defined function

"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  title 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  title Event Handler
  


  Example on event and user-defined function

4" or "





  
  JavaScript Example: User-defined function and  title 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?

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  title 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  title Event Handler
  


  Example on event and user-defined function

7 to the





  
  JavaScript Example: User-defined function and  title 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  title 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.

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#].

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

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.

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

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.

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 ;
}

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.

Launch your browser and push F12 to activate the Web Development Tools [I have tried on Firefox, Chrome, Edge].
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.

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:

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.

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.

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?

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

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.

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.

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 ;
}

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:

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

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:

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

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 ;
}

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

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.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

2How it Works?

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.

Let's begin with the HTML file. Now, the HTML file keeps only the contents, no presentation style and nor programming logic.

The CSS style sheet is kept in an external file, referenced via the above





  
  JavaScript Example: User-defined function and  title 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  title Event Handler
  


  Example on event and user-defined function

6 opening tag.

Also, the JavaScript programming code is kept in an external file, referenced via the above





  
  JavaScript Example: User-defined function and  title 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  title Event Handler
  


  Example on event and user-defined function

7 in the





  
  JavaScript Example: User-defined function and  title Event Handler
  


  Example on event and user-defined function

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

3How it works?

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

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.

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.

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.

The page contains three buttons to trigger the functions defined.
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.

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.

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.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

5How it works?

The HTML page has an hyperlink





  
  JavaScript Example: User-defined function and  title 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.

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.

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:

Console: View the JavaScript error messages. Start the firebug and switch to the "Console" panel.
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.
DOM: View the HTML DOM of the current document.
HTML and CSS.

To debug JavaScript:

Launch Firebug ⇒ Choose the "Script" panel to view your JavaScript, shown with green-bold line numbers.
Refresh [Ctrl-F5] the page, and check the error console [Under "Console" ⇒ "Errors"] for syntax errors! Correct all the syntax errors.
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.]
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".
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']

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.

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:

JavaScripts enclosed in





  
  JavaScript Example: User-defined function and  title Event Handler
  


  Example on event and user-defined function

6 runs during loading of the page.

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:

between





  
  JavaScript Example: User-defined function and  title Event Handler
  


  Example on event and user-defined function

6 container tags; and

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

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

alert['hello, world']
document.write['hello world, again']
console.log['hello world, again and again']

alert['hello, world']
document.write['hello world, again']
console.log['hello world, again and again']

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']

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']

Variables, Literals & Types

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

alert['hello, world']
document.write['hello world, again']
console.log['hello world, again and again']

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.

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

You should try

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

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']

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  title Event Handler
  


  Example on event and user-defined function

0 is NOT a





  
  JavaScript Example: User-defined function and  title Event Handler
  


  Example on event and user-defined function

2, and is NOT a





  
  JavaScript Example: User-defined function and  title Event Handler
  


  Example on event and user-defined function

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

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





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

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:

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

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

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

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.

symbol [ES6]: A data type whose instances are unique and immutable.
bigint [ES2020/ES11]: integers with arbitrary precision.

JavaScript also supports these object types and value [we shall discuss object later]:

object: for general objects.
function: for function objects. Unlike Java, function is a first class object in JavaScript, e.g., you can assign a function to a variable.

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!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

You can use the operator





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

For example,





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

An undeclared variable [via

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

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.





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

For examples,

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

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 ;
}

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

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.

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!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

JavaScript also provides some special

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

infinity: e.g.,





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

-infinity: e.g.,





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

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





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

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!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Loop


  Testing Loop

ECMAScript 2016 [ES7] introduces exponent operator [





  
  JavaScript Example: Loop


  Testing Loop





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

Before ES7, you have to use built-in function





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

These are short-hand operators to combine two operations.





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

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





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

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!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

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





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

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.





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

To convert a numeric





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

Take note that





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

You can also use the function





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

You can construct a





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object

You can use





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

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

.length: E.g.,





  
  JavaScript Example: The Date object

48 returns the length of the string.

.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





  
  JavaScript Example: User-defined function and  title 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 "".

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!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

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

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





  
  JavaScript Example: The Date object

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

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.

The





  
  JavaScript Example: The Date object

78 Type, Literals & Operations

A variable of the type





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

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.

number





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

number





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

91 [Not-a-Number],

empty string [





  
  JavaScript Example: The Date object

13,





  
  JavaScript Example: The Date object

88],





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

18 value,

boolean

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.

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.

You need to memorize this:





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt[] and confirm[]
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

The following relational operators, which produce a





  
  JavaScript Example: The Date object

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

if [ condition-1 ] {
   block-1 ;
} else if [ condition-2 ] {
   block-2 ;
} else if [ condition-3 ] {
   block-3 ;
......
......
} else {
   block-n ;
}

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

alert['hello, world']
document.write['hello world, again']
console.log['hello world, again and again']

alert['hello, world']
document.write['hello world, again']
console.log['hello world, again and again']

alert['hello, world']
document.write['hello world, again']
console.log['hello world, again and again']

Introduction

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Client-Side JavaScript by Examples

Client-side JS EG 1: Functions for [ initialization ; test ; post-processing ] { body ; }8 and for [ initialization ; test ; post-processing ] { body ; }9

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

My first JavaScript says:

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

Browsers' F12 Web Development Tools and Debugger

hello world, again

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

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

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Hello world, again!

My First JavaScript says

Client-side JS EG 1: Functions
for [ initialization ; test ; post-processing ] { body ; }
8 and
for [ initialization ; test ; post-processing ] { body ; }
9

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

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