HTML: Script Tag

Author: Ronald S. Holland
at
Total Application Works

HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
<html> <head> <title>Example of a link </title> </head> <body> <a href="http://sumtotalz.com/TotalAppsWorks/HTML/Script.html"> Script Tag </a> This is a link to a 2006 Corolla for sale 2006 Corolla for sale - 13,490 miles" </table> </body> </html>

Introduction
How to use a script in a HTML page
Example 2: How to use a script in a HTML page
Example 3: How to use a Button
Example 4: How to use a script in a HTML page

Introduction

The purpose of this tutorial is to show you how to write a HTML page, using scripts. What is HTML (HyperText Markup Language)? HTML is a layout/tag language that is used to organize text and/or images on a web page. Scripts offer authors a means to extend HTML documents in highly dynamic ways. For example, scripts may:

Be evaluated as a document loads to modify the contents of the document dynamically.
Accompany a form to process input as it is entered. Designers may dynamically fill out parts of a form based on the values of other fields. They may also ensure that input data conforms to predetermined ranges of values, that fields are mutually consistent, etc.
Be triggered by events that affect the document, such as loading, unloading, element focus, mouse movement, etc.
Be linked to form controls (e.g., buttons) to produce graphical user interface elements.

There are two types of scripts authors may attach to an HTML document: Those that are executed one time when the document is loaded by the user agent. Scripts that appear within a SCRIPT element are executed when the document is loaded. For user agents that cannot or will not handle scripts, authors may include alternate content via the NOSCRIPT element. Those that are executed every time a specific event occurs. These scripts may be assigned to a number of elements via the intrinsic event attributes. In the following example, we will show you the code for our HTML page, using scripts.

How to use a script in a HTML page

The <script> tag is used to define a client-side script, such as a JavaScript. A client-side script is a program that may accompany an HTML document or be embedded directly in it. The program executes on the client's machine when the document loads, or at some other time such as when a link is activated. HTML's support for scripts is independent of the scripting language. The script element either contains scripting statements or it points to an external script file through the src attribute. The required type attribute specifies the MIME type of the script. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. See Figure 1 for an example.

Figure 1: Example of a Hello world script
<html> <body> <script type="text/javascript"> document.write("Hello World!<br><br>from <br><br>") document.write("Ronald Holland <br><br>@ <br><br>Total Application Works") </script> </body> </html>

<html> - indicates the beginning of the HTML page
<body> - indicates the beginning of what will be displayed on the user's screen
<script> - defines the start of a client-side script, such as a JavaScript.
document.write - prints the specified text to the page.
</script> - indicates the end of a client-side script.
</body> - indicates the end of what will be displayed on the user's screen
</html> - indicates the end of the HTML page

Example 2: How to use a script in a HTML page

An example of a more robust web page, with a client side script, looks like:

Figure 2: HTML Example of a more robust web page
<html> <head> <title> This an example of a more robust web page </title> <script type="text/javascript"> function sendMsg() { alert("Page is loaded\n\nFrom\n\nRonald Holland\n\n@\n\nTotal Applications Works"); } </script> </head> <body> </body onload="sendMsg()"> <h1>Hello World!</h1> </html>	This an example of a more robust web page Hello World!

<html> - indicates the beginning of the HTML page
<head> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.
<title> - he TITLE of your page. This will be visible in the title bar of the viewersÆ browser.
</title> - Ends the HTML <TITLE> tag.
</head> - Ends the HTML <head> tag.
<body> - indicates the beginning of what will be displayed on the user's screen
</body> - indicates the end of what will be displayed on the user's screen
</html> - indicates the end of the HTML page

Example 3: How to use a Button

An example of a more robust web page, with a client side script, looks like:

<html>

<head>
<title>Car for sale</title>
</head>
<body>
<form>
<input type=button onClick="location.href='http://www.cargurus.com/Cars/inventorylisting/viewDetailsFilterViewInventoryListing.action?sourceContext=carGurusHomePage_false_0&newSearchFromOverviewPage=true&embedType=NONE&entitySelectingHelper.selectedEntity=c3950&entitySelectingHelper.selectedEntity2=c3950&ign-makerId-entitySelectingHelper.selectedEntity=m7&ign-modelId-entitySelectingHelper.selectedEntity=d295&ign-carId-entitySelectingHelper.selectedEntity=c3950&ign-car2Id-entitySelectingHelper.selectedEntity=c3950&zip=27511&distance=MILES_75#listing=29588803'" value='Car for sale'> </form>
</body>
</html>
Car for sale

Figure 3: How to use a Button

Required Attributes

Attribute	Value	Description
type	MIME-type	Specifies the MIME type of a script

Optional Attributes

Attribute	Value	Description
charset	charset	Specifies the character encoding used in an external script file
defer	defer	Specifies that the execution of a script should be deferred (delayed) until after the page has been loaded
src	URL	Specifies the URL of an external script file
xml:space	preserve	Specifies whether whitespace in code should be preserved