JavaScript Introduction

JavaScript is the most popular programming language in the world.

It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.

This page contains some examples of what JavaScript can do in HTML.

JavaScript Can Change HTML Elements:

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

JavaScript can manipulate the DOM (change HTML contents).

The following example changes the content (innerHTML) of an HTML element identified with id="demo":

Example:
Coding:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>

The method document.getElementById() is one of many methods in the HTML DOM.

You can use JavaScript to:

Change HTML elements
Delete HTML elements
Create new HTML elements
Copy and clone HTML elements
And much more ...

There are several chapters, about the HTML DOM, later in this tutorial.

JavaScript Can Change HTML Attributes:

This example changes the value of the source attribute (src) of an HTML <img> element:

Example:
Coding:

<!DOCTYPE html>
<html>
<body>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
</script>

</body>
</html>

With JavaScript, you can change almost any HTML attribute.

JavaScript Can Change HTML Styles (CSS):

Changing the style of an HTML element, is a variant of changing an HTML attribute.

Example:

Coding:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>
function myFunction() {
    var x = document.getElementById("demo");
    x.style.fontSize = "25px";
    x.style.color = "red";
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

With JavaScript, you can change almost any CSS value.

JavaScript Can Validate Data:

JavaScript is often used to validate input:

Example:

Coding:

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 1 and 10:</p>

<input id="numb" type="number">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // Get the value of input field with id="numb"

    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10

    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Did You Know?

*JavaScript and Java are different languages, both in concept and design.

JavaScript was invented by Brendan Eich, to be used in Netscape (a no longer existing browser) in 1995,
and was adopted by the ECMA standard association in 1997.

ECMA-262 is the official name. ECMAScript 5 (version 1.8.5 - July 2010) is the latest standard.

06/11/2014