Home of Computer Education

Java

° JAVA SCRIPT TUTORIAL
TUTORIAL------------------------------------------------------------------------------

Introduction to JAVASCRIPT,

JavaScript is the programming language of the Web! you will learn how to write JavaScript's and insert them into your HTML documents, and how to make your pages more dynamic and interactive.

What is JavaScript?

JavaScript is a scripting language
A scripting language is a lightweight programming language
A JavaScript is lines of executable computer code
A JavaScript can be inserted into an HTML page
JavaScript is an open scripting language that anyone can use without purchasing a license
JavaScript is supported by all major browsers like Netscape and Internet Explorer

How Does it Work?

When a JavaScript is inserted into an HTML document, the Internet browser will read the HTML and interpret the JavaScript. The JavaScript can be executed immediately, or at a later event.

What can a JavaScript Do?

JavaScript gives HTML designers a programming tool

HTML authors are normally not programmers, but since JavaScript is a very light programming language with a very simple syntax, almost anyone can start putting small "snippets" of code into their HTML documents.

JavaScript can put dynamic text into an HTML page

A JavaScript statement like this: document. write("<h1>" + name + "</h1>") can write a variable text into the display of an HTML page, just like the static HTML text: <h1>Bill Gates</h1> does.

JavaScript can react to events

A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element.

JavaScript can read and write HTML elements

A JavaScript can read an HTML element and change the content of an HTML element.

JavaScript can be used to validate data

JavaScript's can be used to validate data in a form before it is submitted to a server. This function is particularly well suited to save the server from extra processing.

Use the <script> tag to insert a JavaScript in an HTML document.

How to Put a JavaScript Into an HTML Document

<html>
<head>
</head>
<body>
<script type="text/JavaScript">
document.write("Hello World!")
</script>
</body>
</html>

And it produces this output:

Hello World!

To insert a script in an HTML document, use the <script> tag. Use the type attribute to define the scripting language.

<script type="text/JavaScript">

Then comes the JavaScript: In JavaScript the command for writing some text on a page is document. write:

document.write("Hello World!")

The script ends:

</script>

Ending Statements with a Semicolon?

With the traditional programming languages C++ and Java, each code statement has to end with a semicolon.

Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional and are required only if you want to put more than one statement on a single line.

How to Handle Older Browsers

Older browsers that do not support scripts will display the script as page content. To prevent them from doing this, you can use the HTML comment tag:

<script type="text/JavaScript">
<!--
    some statements
//-->
</script>

The two forward slashes in front of the end of comment line (//) are a JavaScript comment symbol, and prevent the JavaScript from trying to compile the line.

Note that you can't put // in front of the first comment line (like //<!--), because older browser will display it. Funny? Yes ! But that's the way it is.

JavaScript Where To ...

Scripts in a page will be executed immediately when the page loads. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.

Examples

Head section
Scripts that contain functions go in the head section of the document. Then we can be sure that the script is loaded before the function is called.

Body section
Execute a script that is placed in the body section.

External script
How to access an external script.

Where to Put the JavaScript

Scripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.

Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it.

<html>
<head>
<script type="text/JavaScript">
     some statements
</script>
</head>

Scripts in the body section: Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.

<html>
<head>
</head>
<body>
<script type="text/JavaScript">
     some statements
</script>
</body>

Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.

<html>
<head>
<script type="text/JavaScript">
     some statements
</script>
</head>
<body>
<script type="text/JavaScript">
     some statements
</script>
</body>

How to Run an External JavaScript

Sometimes you might want to run the same script on several pages, without writing the script on each and every page.

To simplify this you can write a script in an external file, and save it with a .js file extension, like this:

document.write("This script is external")

Save the external file as xxx.js.

Note: The external script cannot contain the <script> tag

Now you can call this script, using the "src" attribute, from any of your pages:

<html>
<head>
</head>
<body>
<script src="xxx.js"></script>
</body>
</html>

NEXT Lesson»