JavaScript for Websites

Javascript has been one of the most interesting innovation of the web in recent years. It allows you to make your web pages interactive. Unlike Java applets, JavaScript code runs instantly and does not need to be compiled. The source code can be inserted straight into the HTML.

On this page I hope to demonstrate, and give you the source code for many Javascript uses.

JavaScript Pull Down Menu | Email Validation | Static Pop Up Window | Dynamic Pop Up Window

JavaScript pull down menu

The first bit goes between the <HEAD> and </HEAD> part of the page.


<SCRIPT language="JavaScript">
<!--
   function surfto(form) {
      var myindex=form.select1.selectedIndex
      if (form.select1.options[myindex].value != 0) {
         location=form.select1.options[myindex].value;}
   }
//-->
</SCRIPT>

This goes anywhere on the page where you want the pull down menu to be.

<FORM NAME="MenuForm">
  <SELECT NAME="select1" onChange="surfto(this.form)" SIZE=1>
     <OPTION SELECTED VALUE=0> --- Choose A Page ---
     <OPTION VALUE="http://www.advancedhtml.co.uk">Advanced HTML
     <OPTION VALUE="tables.htm">Tables
     <OPTION VALUE="faq.htm">FAQ
  </SELECT>
</FORM>

For a different version of a Java pull down menu see the Java menu page.

Verify an email address in a form.

This piece of code can be used to verify that someone has supplied a valid looking email address in your form. It will instantly tell them to re-enter it when they hit the submit button, if the address does not seem valid.

To do this bung the following in-between the <HEAD> and </HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!--
function checkEmail() {
  text=document.emailform.email.value;
  if (text.indexOf("@")<3){
    alert(" This email address seems wrong. Please"
    +" check the prefix and '@' sign.");
    return false;
  }
  if ((text.indexOf(".com")<5)&&(text.indexOf(".org")<5)
    &&(text.indexOf(".gov")<5)&&(text.indexOf(".net")<5)
    &&(text.indexOf(".co.uk")<7)&&(text.indexOf(".nl")<4)
    &&(text.indexOf(".mil")<5)&&(text.indexOf(".edu")<5))
  {
     alert(" This email address seems wrong. Please"
     +" check the suffix. (It should include a .com, .edu,"
     +" .net, .org, .gov, .co.uk, .nl or .mil)");
     return false;
  }
return true;
}
//-->
</SCRIPT>

This code will only verify email addresses whose suffixes (the .co.uk or .com bit) are checked for in the code. If you want the script to check for more then just add them into the code.

Stick the next code where ever you want the form to appear.

<CENTER>
<FORM NAME="emailform" ACTION="thanks.htm"
 onSubmit="return checkEmail()">
  <INPUT TYPE="text" NAME="email" SIZE=40 VALUE=""><BR>
  <INPUT TYPE="submit" NAME="email1" VALUE="Submit">
</FORM>
</CENTER>

Static Pop Up Windows

<FORM>
  <INPUT TYPE="button" NAME="openwindow" VALUE="Open pop-up"
   onClick="return Popup()">
</FORM>

You can open the window with a link as well.

<A HREF="javascript:Popup()" >You can open the window
  with a link as well</A>

The following goes between the <HEAD> and </HEAD>

<SCRIPT language="JavaScript">
<!--
function Popup()
{
  var popupURL ="wierd.htm";
  var popup = window.open(popupURL,"Popup",
   'toolbar=0,location=0,directories=0,status=0,menubar=0,
    scrollbars=0,resizable=0,width=630,height=450');
  if( navigator.appName.substring(0,8) == "Netscape" )
  {
    popup.location = popupURL;
  }
}
// -->
</SCRIPT>

These attributes can be used in the window.open()command.
Note: The window.open command (shown in red) should all be on one line. I've split it above to make it fit on the page.

Attribute	Options / What it does
toolbar	0 - no tool bar 1 - with tool bar
menubar	0 - no menubar 1 - with menubar
scrollbars	0 - no scrollbars 1 - with scrollbars
location	0 - no location bar 1 - with location bar
directories	0 - no directory bar 1 - with directory bar
status	0 - no status bar 1 - with status bar
width	width of the new window
height	height of the new window

Dynamic Pop Up Windows

Wheras the static pop up windows loads a pre-existing HTML page into the pop up this dynamic window code lets you create a new page on the fly. Try the links below to create three dynamic pop ups.

These pops ups are created using the below function. We give the window a unique name to allow more than one window to be opened at once.

<SCRIPT language="JavaScript">
<!--
function PU(text,width,height)
  {
  var name = 'window' + width + '' + height;
  var attrib = 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=' + width + ',height=' + height;
  po = window.open('',name,attrib);
  po.document.open();
  po.document.write("<HTML><HEAD><TITLE>www.advancedhtml.co.uk Popup Demonstration</TITLE>");
  po.document.write("</HEAD><BODY BGCOLOR=FFFFFF><CENTER>");
  po.document.write(text);
  po.document.write("<BR><A HREF=\"javascript\:self.close\(\)\">Close Window</A>");
  po.document.write("</CENTER></BODY></HTML>");
  }
// -->
</SCRIPT>

Parameters are passed to the function by the three links. They are separated by commas.

<A HREF="javascript:PU('Hello. This is test 1',300,100)">Popup Window 1</A>
<A HREF="javascript:PU('Hello. This is test 2',300,500)">Popup Window 2</A>
<A HREF="javascript:PU('Hello. This is test 3',300,300)">Popup Window 3</A>

If you want to learn JavaScript more in depth then there are a selection of JavaScript books on our books page.

The

Advanced

HTML

Site