A
script is a small, embedded program that can add interactivity to your website. For example, a script could generate a pop-up alert box message, or provide a dropdown menu.
Because HTML doesn't actually have scripting capability, you need to use the
<script> tag to generate a script, using a scripting language.
The
<script> tags tell the browser to expect a script in between them. You specify the language using the
type attribute. The most popular scripting language on the web is JavaScript.
Adding a Script
You can specify whether to make a script run automatically (as soon as the page loads), or after the user has done something (like click on a link).
In either case, a generally accepted convention is to place your scripts between the
<head></head> tags. This ensures that the script is ready to run when it is called.
HTML Code:
<script type="text/javascript">
alert("I am a script. I ran first!")
</script>
Triggering a Script
In many cases, you won't want the script to run automatically. You might only want the script to run if the user does something (like hover over a link), or once the page has finished loading.
These actions are called
intrinsic events (
events for short). There are 18 pre-defined intrinsic events that can trigger a script to run. You use
event handlers to tell the browser which event should trigger which script. These are specified as an attribute within the HTML tag.
Lets say you want a message to display in the status bar whenever the user hovers over a link. The act of hovering over the link is an event which is handled by the
onmouseover event handler. You add the
onmouseover attribute to the HTML tag to tell the browser what to do next.
HTML Code:
Treat yourself to a <a href="http://www.great-workout.com/killer-ab-workout.cfm"onMouseover="window.status='Go on, you know you want to'; return true">Killer Ab Workout</a>
This results in:
Status bar messages aren't supported by all browsers. If you see no change to the status bar, it's likely that your browser doesn't support this piece of JavaScript.
Before we move on, check out the
list of intrinsic events as specified by HTML 4.01
Calling an External Script
You can also place your scripts into their own file, then call that file from your HTML document. This is useful if you want the same scripts available to multiple HTML documents - it saves you from having to "copy and paste" the scripts into each HTML document. This makes it much easier to maintain your website.
HTML Code:
<script type="text/javascript" src="external_scripts.js"></script>
Hide Scripts from Older Browsers
Athough most (if not all) browsers these days support scripts, some older browsers don't. If a browser doesn't support JavaScript, instead of running your script, it would display the code to the user. To prevent this from happening, you can simply place HTML comments around the script. Older browsers will ignore the script, while newer browsers will run it.
HTML Code:
<script type="text/javascript">
<-- Hide from older browsers
alert("I am a script. I ran first!")
Unhide -->
</script>
Alternate Information for Older Browsers
You can also provide alternative info for users whose browsers don't support scripts (and for users who have disabled scripts). You do this using the
<noscript> tag.
HTML Code:
<script type="text/javascript">
<-- Hide from older browsers
alert("I am a script. I ran first!")
Unhide -->
</script>
<noscript>
You need JavaScript enabled to view this page.
</noscript>
Set a Default Scripting Language
You can specify a default scripting language for all your
script tags to use. This saves you from having to specify the language everytime you use a script tag within the page.
HTML Code:
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
Note that you can still override the default by specifying a language within the script tag.
