Mar 30, 2008

HTML Script Embedding

HTML Script Embedding

This tutorial is not intended to teach script writing, but will only define some of the related tags and give an example script so the user can get an idea how to embed script in HTML. This tutorial also does not explain how to get information entered in a script form to the server. That is a subject that will be described when the hyper text transfer protol (HTTP) and server side script writing is discussed.

The script below will check inputs from the form, below, to be sure they have been entered correctly before sending the data to the server. If you attempt to press submit in the form below without filling the appropriate fields in, you will see that the script is active.

SCRIPT Element Attributes

The script element is usually embedded in the document header but may be placed in the head or the body of the HTML document so long as it occurs before code that invokes it.

  • CHARSET - (Depreciated). The encoding of any external script specified such as "iso-8859-1".
  • DEFER - (Depreciated). The script is not parsed until the HTML document is rendered.
  • EVENT - Specifies the event used to trigger the script.
  • FOR - Specifies an object (combined with an action) that is used to trigger the script event
  • LANGUAGE - (Depreciated). Tells the name of the language the script is written in. Required for most browsers. Possible values are JavaScript, VBScript, and JavaScript1.1
  • SRC - (Depreciated). Specifies an external script which may include a URL path to another webserver.
  • TYPE - The new method to specify the script language using MIME specification rather than the LANGUAGE attribute. This attribute is not widely supported yet.

The NOSCRIPT element is used to provide alternate content when a browser does not support script

Scripting Events

  • ondblclick
  • onclick
  • onkeydown
  • onkeypress
  • onkeyup
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup

An example Script

How the script looks: 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<head>
<title>New CTDP Member Registration</title>
<scrypt type="text/javascript" for="cmdSubmit" event="onclick" language=JavaScript>
<!--
 
var MemSubForm;
MemSubForm = document.RegistrationForm;
 
if (MemSubForm.firstname.value.length == 0) {
   MemSubForm.firstname.value = prompt("Please enter your first name.");
        if (MemSubForm.firstname.value.length != 0)
        MemSubForm.lastname.focus();
}
if (MemSubForm.lastname.value.length == 0) {
        MemSubForm.lastname.value = prompt("Please enter your last name.");
        if (MemSubForm.lastname.value.length != 0)
        MemSubForm.addr1.focus();
}
if (MemSubForm.addr1.value.length == 0) {
        MemSubForm.addr1.value = prompt("Please enter your address.");
        if (MemSubForm.addr1.value.length != 0)
        MemSubForm.addr1.focus();
}
if (MemSubForm.city.value.length == 0) {
        MemSubForm.city.value = prompt("Please enter your city of residence.");
        if (MemSubForm.city.value.length != 0)
        MemSubForm.city.focus();
}
if (MemSubForm.state.value == 0) {
        alert("Please select a 2-letter state abbreviation.");
        MemSubForm.state.focus();
}
else if (MemSubForm.code.value.length != 3 ||
        isNaN(MemSubForm.code.value)) {
        alert("Please enter a valid telephone area code.");
        MemSubForm.code.focus();
        MemSubForm.code.select(        );
}
else if (MemSubForm.phone.value.length != 7 ||
        isNaN(MemSubForm.phone.value)) {
        alert("Please enter a valid phone number.");
        MemSubForm.phone.focus();
        MemSubForm.phone.select();
}
else if (MemSubForm.zip.value.length < 5) {
        MemSubForm.zip.value = prompt("Please enter a valid zip code.");
        if (MemSubForm.zip.value.length != 0)
        MemSubForm.zip.focus();
}
// -->
</script>
</head>
<body>
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts