HTML scripts

HTML is great, but what about things like form validation, alert messages, and calculations? These things CANNOT be done with HTML, but can be done with scripting languages such as Javascript and VBscript. A set of code written in a scripting language is called a script, and while these scripts are not HTML, HTML provides the tags to make them collaborate with and execute on webpages.

This tutorial focuses on:

The <script> tag
When browsers cannot execute scripts
Executing a script

The <script> tag

The <script> tag is used to place scripts on a webpage. When using the <script> tag, you have to use its type attribute to specify the language the script is written in.

Example:

This script specifies that the language it will be written in is Javascript. For Javascript code, the type attribute should be set to "text/javascript".

The output of this script:

This is a Javascript script.

Specifying that the script will be written in VBScript

The output of this script:

This is a VBscript script.

Where to place a script?

You can place a script in three different places:

Head section of an HTML document:

<html> <head> <title>Script in head section</title> <script type="text/javascript> document.write("This script is in the head section of the HTML document"); </script> </head> <body> Scripts make webpages dynamic! </body> </html>

Body section of an HTML document:

<html> <head> <title>Script in body section</title> </head> <body> <script type="text/javascript> document.write("This script is in the body section of the HTML document"); </script> <br /><br /> Scripts make webpages dynamic! </body> </html>

External file:

<html> <head> <title>Script in external file </title> <script type="text/javascript" src="script1.js"> document.write("This script is loaded from an external file"); </script> </head> <body> <script type="text/javascript" src="script2.js"> document.write("This one too"); </script> <br /><br /> Scripts make webpages dynamic! </body> </html>

As shown in the example above, loading scripts from an external file can be done in both the body and head sections. This is achieved by using the src attribute which calls the script by its location.

Working with scripts and the different commands in scripting languages is outside the scope of this lesson (and actually, outside the scope of HTML). To learn more about scripting, visit our Javascript tutorials or VBscript tutorials sections.

When browsers cannot execute scripts

There are older browsers still in use that do not recognize the <script> tag and consequently will not be able to execute scripts. In such a case, the content inside the <script> tag will be displayed on the page as regular text. To prevent this from happening, the content of a script can be placed within comment tags. In such a case, older browsers that do not recognize the <script> tag will ignore the script and the content inside the <script> tag will not be displayed on the page. Browsers that can execute scripts will ignore the comments and execute the script anyway.

NOTE: This method also works for browsers that do recognize the <script> tag, but their settings have the scripting language you are using disabled.

Example:

<html> <head> <title>Script in external file </title> </head> <body> <script type="text/javascript">  </script> <br /> Scripts make webpages dynamic. </body> </html>

Output if the browser recognizes the <script> tag:

Here is some text. Scripts make webpages dynamic.

Output if the browser does not recognize the <script> tag:

Scripts make webpages dynamic.

Another way to deal with browsers that do not support scripts is by using the <noscript> tag. This tag provides alternative text and/or content to be displayed if a browser supports the <script> tag, but not the script inside it (more specifically, the language the script is written in such as Javascript or VBscript). If a browser does support the script inside a <script> tag then the content provided by the <noscript> tag will be ignored.

Example:

<html> <head> <title>Script in external file </title> </head> <body> <script type="text/javascript">  </script> <noscript> You are using a browser that does not support Javascript!! A great browser that does support Javascript is Mozilla Firefox. You can download it <a href="http://www.mozilla.com/en-US/firefox/" target="_blank">here</a> </noscript> </body> </html>

In the above example, we are telling the script (in this case written in Javascript) to print the text "Here is some text", and if the browser does not support Javascript, we provide an alternative message with the <noscript> tag.

Output if browser supports Javascript:

Here is some text.

Output if browser does not support Javascript:

You are using a browser that does not support Javascript!! A great browser that does support Javascript is Mozilla Firefox. You can download it here

Executing a script

Once you create a script, how do you execute that script? A script can be executed either automatically (if it issues some simple statements like writing text as in the above examples), or it can be triggered by some action such as when a page finishes completely loading, a form gets submitted, the mouse is clicked, and more.

To learn about scripting in detail, visit our Javascript tutorials or VBscript tutorials sections.