JavaScript and HTML

As I said earlier, if you don't know the basics of HTML, you'd better learn it before studying JavaScript. HTML stands for HyperText Markup Language and is a document-layout and hyperlink-specification language. It defines the syntax and placement of special, embedded directions that aren't displayed by the browser, but tell it how to display the contents of the document, including text, images, and other support media. The language also tells you how to make a document interactive through special hypertext links, which connect your document with other documents-on either your computer or someone else's, as well as with other Internet resources, like FTP. In short, HTML is the publishing language of the World Wide Web.

JavaScript is embedded directly in HTML pages and is interpreted by the browser completely at runtime. JavaScript statements embedded in an HTML page can respond to user events such as mouse clicks, form input, and page navigation. For example, you can write a JavaScript function to verify that users enter valid information into a form requesting a telephone number or zip code. All major browsers like Microsoft Internet Explorer, Netscape, Opera, Mozilla, FireFox etc. support JavaScript and is capable of interpreting it. But a major pain while programming in JavaScript is that different browsers interpret javascript in different ways. So what executes without any problem in IE may show a couple of errors in Netscape.

Now lets see how to include a script in HTML. Create a file called "Javascript.html" and copy the following code into that file.

<html>
<head>
<title>JavaScript Scriping</title>
<script language="Javascript">
<!--
alert("Hello World")
//-->
</script>
</head>
<body>

</body>
</html>

Now view this file in any modern browser to execute the script. This script will show a Message box showing the text "Hello World".

This is a HTML file but from JavaScript is emebedded into it using the <script> tag. Let us look more closely at this tag. The 'language' attribute tells the browser which scripting language is used. In our case it is JavaScript. Inside this tag, there is a comment '<!--'. This is not a must but many javascript programmers use it. If the browser is incapable of executing the javascript, this comment tag will make sure that the javascript code will not be displayed in the document.

One can also store the script in another file. In such a case the script tag will be the following

<script language="Javascript" src="file.js"></script>

where 'file.js' is the file in which the script is stored in.

One can call JavaScript statments from within the body in many different ways. The most used methords are given below...

Code	Example
<a onClick="alert('JS Statement')">Click Me</a>	Click Me
<a href="javascript:alert('JS Statement');">Click Me</a>	Click Me
<input type="button" value="Click Me" onClick="alert('JS Statement')">

All the above methord will wait for the user to do something - like clicking the link or the button or whatever. If that is not nesserary, the following methords are preferable.

<body onLoad="alert('JS Statement')">

<script>alert('JS Statement')</script>

There are many more methords and 'on' statements, as I like to call them, to do this task. The major 'on' statements are given below. These should be given in the place of 'onClick' in the above examples.

To be used with links, images, etc.
onBlur
onFocus
onDblClick
onClick
onMouseDown
onMouseMove
onMouseOut
onMouseOver
onMouseUp
Anywhere inside the body
onKeyDown
onKeyPress
To Be Used with Body Tag
onUnLoad
onLoad

Example

Code Example

<a href="#" onMouseOver="alert('Hello World')">Move the mouse over this link</a> Move the mouse over this link

Previous
Contents

Contents

Next
The Basics

Code	Example
<a href="#" onMouseOver="alert('Hello World')">Move the mouse over this link</a>	Move the mouse over this link