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 EngineJavaScript 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.jsJavaScript 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 VersionsJavaScript, 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: LoopTesting Loop
0), block-scoping of variables and functions, JavaScript Example: LoopTesting Loop
1 and JavaScript Example: LoopTesting 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: LoopTesting 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: LoopTesting Loop
7, changes JavaScript Example: LoopTesting Loop
8 and JavaScript Example: LoopTesting 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,)
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 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 IDEsYou 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 title Event Handler
Example on event and user-defined function
0 is NOT a JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
1 and is NOT a JavaScript Example: User-defined function and title Event HandlerExample 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 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 HandlerExample on event and user-defined function
4" or " JavaScript Example: User-defined function and title Event HandlerExample 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 HandlerExample on event and user-defined function
7 to the JavaScript Example: User-defined function and title Event HandlerExample 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 HandlerExample 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!!!
5. - 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 andMy 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 asMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
10. But sineceMy 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 (likeMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
13 in Java, orMy 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.
16This 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 theMy 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 calledMy 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 parameterMy 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 trailingMy 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 putsMy 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 returnsMy 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; orMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
27 otherwise.
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 keywordMy 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 operatorMy 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 variableMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
28. The functionMy 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 eitherMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
26 orMy 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 printsMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
39. Otherwise, Line 13 printsMy 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 ObjectThe 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 aMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
43 object (via theMy 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 toMy 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 functionMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
51 on objectMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
45, in the form ofMy 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 objectMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
45, and assign it to variableMy 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 aMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
59 orMy 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.
- 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 andMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
65 of aMy 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: LoopTesting 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. IfMy 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 ofMy 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 ofMy 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).
- 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 ofMy 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 HandlerBesides 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, andMy 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 HandlerExample 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 keywordMy 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 functionMy 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 andMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
96JavaScript 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 andMy 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.
"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 theMy 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 andMy 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.
0My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
1My 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 HandlerExample 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 HandlerExample 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 HandlerExample 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 HandlerExample on event and user-defined function
7 in the JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
6My 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, twoelements, 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 HandlerExample 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. - 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 theelements 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. - 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 theelements. 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 theMy 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 assignsMy 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.
4My 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 anMy 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. IfMy 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 ToolsIn 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).
hello world, again
') console.log('hello world, again and again')53Instead 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.
6JavaScript 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.
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 HandlerExample 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 HandlerExample 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]- This HTML document contains a element with an unique alert('hello, world')
document.write('
- 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 commentMy 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 andMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
49, like Java/C/C++/C#. - 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 HandlerExample on event and user-defined function
2, and is NOT a JavaScript Example: User-defined function and title Event HandlerExample 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). - 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!
- 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 orMy 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.
- 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 thatMy 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. - 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.] - 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. - 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,
- .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
54
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 "".
- .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.,.
- number
JavaScript Example: Variables and functions prompt() and confirm()
Welcome to JavaScript!
49 - 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.- 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 returnsMy 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 returnsMy 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 toMy 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 givesMy 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.
- 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.
- 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: LoopTesting 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: LoopTesting 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. - .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. - 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: LoopTesting 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: LoopTesting 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: LoopTesting Loop
28, and return a negative number if JavaScript Example: LoopTesting Loop
29; a positive number if JavaScript Example: LoopTesting Loop
30; and 0 if JavaScript Example: LoopTesting 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.
- 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 returnedMy 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: LoopTesting Loop
34 returnsMy 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: LoopTesting Loop
34 returnsMy 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. - when you have to use the same codes several times.
- as the JavaScript event handler.
- make your program easier to read and understood.
- Use a function declaration statement in the form of:
JavaScript Example: Variables and functions prompt() and confirm()
Welcome to JavaScript!
5 - Use a function expression by assigning an anonymous function to a variable:
JavaScript Example: Variables and functions prompt() and confirm()
Welcome to JavaScript!
6 - 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. TheMy 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, whileMy 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 aMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
60 orMy 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. - console.log(value): write to the system (or error) console, used mainly for debugging.
- 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: LoopTesting Loop
79 accepts an optional JavaScript Example: LoopTesting 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 asMy 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 ifMy 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: LoopTesting Loop
86 or JavaScript Example: LoopTesting 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] -
JavaScript Example: Loop
Testing Loop
93: generated when the user clicks on an HTML element. -
JavaScript Example: Loop
Testing Loop
94, JavaScript Example: LoopTesting 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: LoopTesting Loop
97: generated after the browser loaded a document, and before the next document is loaded, respectively. - Properties (also called variables, attributes): contains values associated with the object.
- Methods (also called operations, functions): contains actions that the object can perform.
- 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.
- 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++.
- 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.
- for...in: traverses all enumerable properties of an object and its prototype chain.
- Object.keys(obj): return an array of all enumerable property names.
- Object.getOwnPropertyNames(obj): return an array of all property names.
- 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 thatMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
21 is an object! - .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. - directly assigned a string literal in the form of
JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
03 or JavaScript Example: User-defined function and title Event HandlerExample 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. - invoke the
JavaScript Example: Loop
Testing Loop
81 object constructor to construct a JavaScript Example: LoopTesting Loop
81 object. - 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)
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 title 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.
- E, PI: Euler’s constant and
JavaScript Example: User-defined function and title 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.
- 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.
- console.error():
- console.warn():
- console.log():
- console.info():
- console.debug():
- 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.
- 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.
- 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 title 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 title Event HandlerExample on event and user-defined function
62 is set to a built-in object called JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
64. In other words, the new object uses JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
64 as its prototype, and gets its initial properties from JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
64. The JavaScript Example: User-defined function and title Event HandlerExample 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. - Prototype Chain: In the above example,
JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
69's prototype is JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
64, whose prototype isMy 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 title Event HandlerExample on event and user-defined function
72. JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
69 defines two own properties: JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
74 and JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
75. When you invoke JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
76, which cannot be found in JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
69, but found in its prototype. - Object.getPrototypeOf(obj): Instead of using
JavaScript Example: User-defined function and title 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 title Event HandlerExample on event and user-defined function
79 method to get the prototype of an object. - Properties (including methods) are declared inside the constructor via
JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
83, which can then be initialized. - Methods can be declared inside the constructor via
JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
90. There are a few ways to provide the method's definition:- 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 title Event HandlerExample on event and user-defined function
92 (without parentheses, which is aMy 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 title Event HandlerExample on event and user-defined function
90, as in the JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
88. - Assign
JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
90 to an inline function, as in the JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
87. - Invoke the
JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
40 constructor withMy 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
- Define an ordinary
- 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. - 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 orMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
00 operator (like Java). - Create a new generic object using built-in root for ( initialization ; test ; post-processing ) { body ; }16 as prototype.
- Assign this newly created object to alert('hello, world')
document.write('
hello world, again
') console.log('hello world, again and again')09 variable. - 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. - Set the internal property
JavaScript Example: User-defined function and title 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 title Event HandlerExample 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. - Return the newly created object.
- Check if the property exists locally (i.e., own property).
- Otherwise, check the
JavaScript Example: User-defined function and title 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". - 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; - 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. - 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. - You invoke the getters/setters like properties with assignment operator, instead of via function call.
- 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. - 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.
-
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. -
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. -
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 title Event HandlerExample on event and user-defined function
6and anchors JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
6elements. [To confirm!] - Document Node: the root node representing the entire HMTL document.
- 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.
- Text Node: contains the text content of an element.
- Others: such as comment, attribute.
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. TheMy 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 isMy 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 isMy 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.- property
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
030, whereMy 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 andMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
033. My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
037: returnsMy 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.
043My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
044:
[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:
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,IdentifiersIdentifiers are names given to identify entities (such as variables and functions). The rules for valid identifiers are:
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.TypesJavaScript 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:
JavaScript also supports these object types and value (we shall discuss object later):
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 theMy 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!
31You 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 ValueAn 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-declarationYou 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.
7The
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
74 Type, Literals & OperationsA 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:
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: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 ** xIn 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: LoopTesting 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 OperatorsThese 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 FunctionsThe JavaScript Example: Variables and functions prompt() and confirm()
Welcome to JavaScript!
30 Type, Literals & OperationsA 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 asMy 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 aMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
74 if it represents a validMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
74; or a specialMy 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,TheMy 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, theMy 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 toMy 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 30To convert a numeric JavaScript Example: Variables and functions prompt() and confirm()
Welcome to JavaScript!
30 to aMy 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 aMy 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 43You 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 PropertiesJavaScript 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:
(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 76Template 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.
8The 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 ofMy 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 andMy 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: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, andMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
21.Comparison (Relational) OperatorsThe 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.
9alert('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')1alert('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<Less Than<=Less Than or Equal Toif ( 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 ; }08The 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) returnsMy 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 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) OperatorsThe 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 ExpressionsEvaluation 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) givesMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
26, the JavaScript Example: LoopTesting 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 theMy 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 aMy 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 validMy 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++.
SyntaxExamplealert('hello, world') document.write('hello world, again
') console.log('hello world, again and again')3alert('hello, world') document.write('hello world, again
') console.log('hello world, again and again')4alert('hello, world') document.write('hello world, again
') console.log('hello world, again and again')5alert('hello, world') document.write('hello world, again
') console.log('hello world, again and again')6alert('hello, world') document.write('hello world, again
') console.log('hello world, again and again')7Notes: 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 LabelThe following loop-control statements are provided (same syntax as Java/C/C++):
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 ItemYou 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 ; }90The 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 ArraysUnlike 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 indexArray 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 loopJavaScript 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.hello world, again
') console.log('hello world, again and again')8For example,
The JavaScript's alert('hello, world') document.write('hello world, again
') console.log('hello world, again and again')29 loopJavaScript 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: LoopTesting 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')9Add/Remove item(s)You can:
For examples,
PurposeExampleAdd one item to the end of an array using index JavaScript Example: LoopTesting Loop
13Add one or items to the end of an array using JavaScript Example: LoopTesting Loop
07.
JavaScript Example: LoopTesting Loop
08 returns the resultant length of the array.Add one or items to the beginning of an array using JavaScript Example: LoopTesting Loop
09.
JavaScript Example: LoopTesting Loop
10 returns the resultant length of the array.Remove and return the last item from an array using JavaScript Example: LoopTesting Loop
11Remove and return the first item of an array using JavaScript Example: LoopTesting Loop
12Array's Properties (Variables) and Operations (Functions)The JavaScript Example: Loop
Testing Loop
20 object has these commonly-used properties:It has these commonly-used methods:
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.
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: LoopTesting Loop
44.Functions
Functions are useful:
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!
1Functions 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: LoopTesting Loop
46 statement to return a single piece of result to the caller anywhere inside the function body. If no JavaScript Example: LoopTesting Loop
46 statement is used (or a JavaScript Example: LoopTesting 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 title 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!
2Client-Side JavaScript Function Examples JavaScript Example: Variables and functions prompt() and confirm()Welcome to JavaScript!
3Function's JavaScript Example: LoopTesting Loop
51Function 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 ReferenceIn 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 ArgumentsJavaScript 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: LoopTesting Loop
55) or pass aMy 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 orMy 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 beMy 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 toMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
27.(ES6) Function with Default Parameter ValuesES6 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: LoopTesting Loop
5) and Arrow-Function NotationES6 also introduces rest/spread operator ( JavaScript Example: Loop
Testing Loop
5) and arrow-function notation. See ES6 article.Anonymous (Inline) FunctionsIn 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!
4Anonymous function is often used in event handlers and others.
Function VariablesIn 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 functionAs seen in the above example, there are two ways to define a function:
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 FunctionsIn JavaScript, you can define a function inside a function. For example,
Function as the return valueYou 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:
The following top-level built-in functions are available to client-side as well as server-side (or standalone):
Other Top-level Built-in Functions
JavaScript also pre-defines the following top-level global functions.
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:
The event handler, called JavaScript Example: Loop
Testing Loop
98 (such asMy 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!
7More 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 andMy 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.
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!
8Trailing 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) operatorIn JavaScript, you can access an object's properties via either:
You can remove a property (including method) via "for ( initialization ; test ; post-processing ) { body ; }23".
Operator for ( initialization ; test ; post-processing ) { body ; }24You 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 methodThe 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 ; }31You 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 PropertiesUnlike Java/C++, you can delete or add new properties to an existing JavaScript object.
Example 2: An Object having Object PropertiesAn object's property can hold primitives (number, string). It can also hold an object.
Example 3: An object with functionA 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) OperatorYou 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 ObjectThere are three ways to iterate through all properties of an object:
For example,
Operator for ( initialization ; test ; post-processing ) { body ; }45Establishes the default object for a set of statements. The syntax is:
JavaScript Example: Variables and functions prompt() and confirm()Welcome to JavaScript!
9TheMy 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 ValuesAs discussed earlier:
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 toMy 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 booleanMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
27). To check forMy 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) returnsMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
26 forMy 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, andMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
27Built-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: LoopTesting 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 OperatorAll 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 ofMy 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 OperatorsAs 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 MethodsThe following methods are available to all built-in JavaScript objects:
The JavaScript Example: Loop
Testing Loop
20 Object and Associative ArraysFor 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 theMy 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" ObjectFor 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 ArrayIn 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 TypeJavaScript provides primitive JavaScript Example: Variables and functions prompt() and confirm()
Welcome to JavaScript!
30 type. It also provide a JavaScript Example: LoopTesting 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:
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: LoopTesting 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: LoopTesting Loop
81 object, when you invoke a JavaScript Example: LoopTesting Loop
81 object's methods. For example,The JavaScript Example: Variables and functions prompt() and confirm()
Welcome to JavaScript!
89 Object vsMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
74 Primitive TypeJavaScript 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 primitiveMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
74. Read "" for primitiveMy 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 primitiveMy 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, aMy 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 title Event Handler
Example on event and user-defined function
25 Object vs boolean JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
26 TypeJavaScript provides primitive JavaScript Example: The Date object 78 type. It also provide a JavaScript Example: User-defined function and title 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 title 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 ObjectCommonly-used constructors:
Commonly-used methods:
The JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
38 ObjectCommonly-used properties:
Commonly-used methods:
The JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
40 ObjectFor an introduction to functions, read "" section.
Every function in JavaScript is actually a JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
40 object!Function VariableA variable can be assigned a JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
40 object (called function variable), which takes a special object type calledMy 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 eitherMy 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 title Event HandlerExample 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 title Event HandlerExample on event and user-defined function
40).]For example,
Anonymous FunctionIf 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 ConstructorBesides 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 title Event HandlerExample on event and user-defined function
40 constructor (withMy 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 title Event HandlerExample 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 title Event Handler
Example on event and user-defined function
40 constructor is: JavaScript Example: The Date object 0The JavaScript Example: User-defined function and title Event Handler
Formatting Console OutputExample on event and user-defined function
53 objectconsole.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 title Event HandlerExample on event and user-defined function
55, JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
56, JavaScript Example: User-defined function and title Event HandlerExample 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 1Logging MethodsJavaScript supprots 5 levels of logging, in the order of severity:
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 title Event Handler
Example on event and user-defined function
58" is a class; and " JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
59" and " JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
60" are instances of the " JavaScript Example: User-defined function and title Event HandlerExample 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:
Notes:
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 title Event HandlerExample on event and user-defined function
83 refers to the property of this object.Example: Object Constructor FunctionLet us define a constructor for our custom JavaScript Example: User-defined function and title Event Handler
Example on event and user-defined function
84 objects, with properties JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
74, JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
86, JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
87 and JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
88.How it Works?JavaScript Example: User-defined function and title 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!!!
07Revisit theMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
In JavaScript, the new constructor(args) call does the followings:
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 title Event HandlerExample 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 title Event Handler
Example on event and user-defined function
62 internal property.Another ExampleConstructor's JavaScript Example: Events onload, onmouseover and onmouseout"Hello" alert Box appears after the page is loaded.
Point your mouse pointer here!!!
07 PropertyAll 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 title Event Handler
Example on event and user-defined function
84 example, the JavaScript Example: User-defined function and title Event HandlerExample 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 title Event HandlerExample on event and user-defined function
84 object to be used as a prototyping object. When a new JavaScript Example: User-defined function and title Event HandlerExample on event and user-defined function
84 object is constructed via theMy 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 title Event HandlerExample 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 PropertyThe 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 title 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 title Event HandlerExample 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 ChainObjects 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:
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 title Event HandlerExample 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 OperatorEvery object has a JavaScript Example: User-defined function and title 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 title Event HandlerExample 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 returnsMy 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!!!
54JavaScript 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 title Event HandlerExample 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:
"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!!!
66Notes:
Notes:
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!!!
76All 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:
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 6You 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 7The 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 8Beside 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.
Manipulating Element's Content through the alert('hello, world') document.write('
hello world, again
') console.log('hello world, again and again')42 PropertyYou 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 ; }0Load the web page onto Firefox, and use the firebug to inspect the DOM tree.
A DOM-tree comprises the following types of nodes:
A DOM node has these properties:
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, calledMy 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 calledMy 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:ExampleThe 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 ; }1if ( condition-1 ) { block-1 ; } else if ( condition-2 ) { block-2 ; } else if ( condition-3 ) { block-3 ; ...... ...... } else { block-n ; }2Accessing 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: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 andMy 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 ; }3Manipulating 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.
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 anMy First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
049My 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 anMy 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 ; }4Inserting 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 ; }4Replacing 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 ; }6The JavaScript Example: Events onload, onmouseover and onmouseout
"Hello" alert Box appears after the page is loaded.
Point your mouse pointer here!!!
6 objectThe 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.