Contents
The Basics
HTML and JavaScript
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 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.
Example
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 Scripting</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 embedded 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.
Events
JavaScript can execute a statement when a specified event takes place - for example a window could popup when you click a link. Here, the click is the event. Some examples...
| Code | Example |
| <a onClick="alert('JS Statement')">Click Me</a> | Click Me |
| <a href="javascript:alert('JS Statement');">Click Me</a> | Click Me |
NOTE : This are the traditional or old event handler. There are more event handlers specified in W3C's recommendations - more of that later.
All the above methods will wait for the user to do something - like clicking the link or the button or whatever. If you want to execute a statement when the page is loaded, use the following command.
<body onLoad="alert('JS Statement')">
<script>alert('JS Statement')</script>
There are many more methods 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 |