Advanced HTML Guide

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

UpJavaScript 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.

UpVerify 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>

UpStatic 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

UpDynamic 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
Privacy Policy
Advanced HTML Home
Copyright © 1997 - 2016
Hosted by 1&1