JavaScript Introduction

JavaScript is the most popular scripting language on the internet. This language can be used for HTML and the web, and can be widely used on devices such as servers, PCs, laptops, tablets, and smartphones.

JavaScript is a scripting language

JavaScript is a lightweight programming language.

JavaScript is programming code that can be inserted into HTML pages.

After JavaScript is inserted into an HTML page, it can be executed by all modern browsers.

JavaScript is very easy to learn.

What you will learn

The following is the main content you will learn in this tutorial.

JavaScript: Directly Writing to HTML Output Stream

	You can only use document.write in HTML output. If you use this method after the document has loaded, it will overwrite the entire document.

JavaScript: Reacting to Events

The alert() function is not commonly used in JavaScript, but it is very convenient for testing code.

The onclick event is just one of the many events you are about to learn in this tutorial.

JavaScript: Changing HTML Content

Using JavaScript to handle HTML content is a very powerful feature.

You will often seedocument.getElementById("some id"). This method is defined in the HTML DOM.

DOM (Document Object MDOM (Document Object Model) is the official W3C standard for accessing HTML elements.

You will learn about HTML DOM in several chapters of this tutorial.

JavaScript: Changing HTML Images

This example dynamically changes the source (src) of an HTML <image> element:

Light the bulb

<script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.gif"; } else { element.src="/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

Click the bulb below to see the effect:

Click the bulb to turn the light on or off

Try it yourself »

In the above example, the codeelement.src.match("bulbon")means to retrieve<img id="myimage" onclick="changeImage()" src="../images/pic_bulboff.gif" width="100" height="180">whether the value of the src attribute in it containsbulbonthis string. If the string exists,bulbonthe imagesrcis updated tobulboff.gifif it does not matchbulbonthe string,srcit is updated tobulbon.gif

JavaScript can change most attributes of any HTML element, not just images.

JavaScript: Changing HTML Styles

Changing the style of an HTML element is a variation of changing HTML attributes.

JavaScript: Validating Input

JavaScript is commonly used to validate user input.

The above example is just a simple validation. If you want to use it in a production environment, you need strict checking. If the input is a space or consecutive spaces, isNaN cannot detect it. You can add a regular expression to judge (explained in later chapters):

Did you know?

	JavaScript and Java are two completely different languages, both conceptually and in design. Java (invented by Sun) is a more complex programming language. ECMA-262 is the official name of the JavaScript standard. JavaScript was invented by Brendan Eich. It appeared in Netscape in 1995 (that browser has stopped updating) and was adopted by ECMA (a standards association) in 1997.

ECMAScript Versions

JavaScript has been standardized by ECMA (European Computer Manufacturers Association) through ECMAScript.

ECMAScript 6 is also known as ECMAScript 2015.

ECMAScript 7 is also known as ECMAScript 2016.