"Script Junkie"
by  Nancy Hickman
Web Techniques, March 1998

Web Techniques grants permission to use these listings (and code)  for 
private or commercial use provided that credit to Web Techniques and 
the author is maintained within the comments of the source. For 
questions, contact editors@web-techniques.com. 

This file consists of the two listings accompanying Nancy Hickman's 
article in Web Techniques Magazine, titled "Internationalizing Your Web 
Site".



LISTING ONE

<html>

<head>

<title>JScripterman Size Chart for Men</title>
<SCRIPT LANGUAGE="javascript">
function size(type, lowend, highend){
	this.type= type;
	this.lowend = lowend;
	this.highend = highend;}

var Necksize = new Array(4);
var Chestsize = new Array(4);
var Waistsize = new Array(4);
var Armsize = new Array(4);
var measure = " ";
var caption =" ";
var chart = " ";
var firstload=false;

	

function English () {

		measure = "<HTML><BODY BGCOLOR='cdba96'>";
		measure += "<P></P><CENTER>"
		measure += "<FORM name='toggle'><INPUT type='button' name='measurement' 
value='See Metric Measurements' onClick='parent.Metric()'>"
		measure += "</FORM></BODY></HTML>"

            	Necksize[0] = new size("small", "14", "14.5");
		Necksize[1] = new size("medium", "15","15.5");
		Necksize[2] = new size("large", "16", "16.5");
		Necksize[3] = new size("xlarge", "17","17.5");
	

		Chestsize[0] = new size("small", "34", "36");
		Chestsize[1] = new size("medium","38","40");
		Chestsize[2] = new size("large", "42","44");
		Chestsize[3] = new size("xlarge", "46", "48");

		Waistsize[0] = new size("small", "28",  "30");
		Waistsize[1] = new size("medium", "32", "34");
		Waistsize[2] = new size("large", "36", "38");
		Waistsize[3] = new size("xlarge", "40", "42");


		Armsize[0] = new size("small", "32.5",  "33");
		Armsize[1] = new size("medium", "33.5", "34");
		Armsize[2] = new size("large", "34.5", "35");
		Armsize[3] = new size("xlarge", "35.5", "36");
		
		caption =  "<B>Men's Sizes in Inches</B>";
		
		makechart();

		if (firstload==true)
			{init();}
		firstload = true;
          		
}

function makechart() {
 chart ="<HTML><BODY BGCOLOR='#ffe7ba'>";
 chart +="<CENTER><TABLE BORDER=2 CELLPADDING=8><CAPTION>" + caption + 
"</CAPTION>";
 chart +="<TR><TD>Sizes</TD><TD ALIGN=CENTER><B>Small</B></TD>
<TD ALIGN=CENTER><B>Medium</B></TD><TD ALIGN=CENTER><B>Large</B></TD>
<TD ALIGN=CENTER><B>X-Large</B></TD></TR>";
 chart +="<TR><TD ALIGN=LEFT><B>Neck</B></TD><TD ALIGN=CENTER>" + 
Necksize[0].lowend + " - " + Necksize[0].highend + "</TD><TD ALIGN=CENTER>" + 
Necksize[1].lowend + " - " + Necksize[1].highend + "</TD><TD ALIGN=CENTER>" + 
Necksize[2].lowend + " - " + Necksize[2].highend + "</TD><TD ALIGN=CENTER>" + 
Necksize[3].lowend + " - " + Necksize[3].highend + "</TD></TR>";
 chart +="<TR><TD ALIGN=LEFT><B>Chest</B></TD><TD ALIGN=CENTER>" + 
Chestsize[0].lowend + " - " + Chestsize[0].highend + "</TD>
<TD ALIGN=CENTER>" + Chestsize[1].lowend + " - " + Chestsize[1].highend + "</TD><TD 
ALIGN=CENTER>" + Chestsize[2].lowend + " - " + Chestsize[2].highend + "</TD><TD 
ALIGN=CENTER>" + Chestsize[3].lowend + " - " + Chestsize[3].highend + "</TD></TR>";
 chart +="<TR><TD ALIGN=LEFT><B>Waist</B></TD><TD ALIGN=CENTER>" + 
Waistsize[1].lowend + " - " + Waistsize[1].highend + "</TD><TD ALIGN=CENTER>" + 
Waistsize[2].lowend + " - " + Waistsize[2].highend + "</TD><TD ALIGN=CENTER>" + 
Waistsize[3].lowend + " - " + Waistsize[3].highend + "</TD><TD ALIGN=CENTER>" + 
Waistsize[3].lowend + " - " + Waistsize[3].highend + "</TD></TR>";
 chart +="<TR><TD ALIGN=LEFT><B>Arm</B></TD><TD ALIGN=CENTER>" + Armsize[0].lowend 
+ " - " + Armsize[0].highend + "</TD><TD ALIGN=CENTER>" + Armsize[1].lowend + " - " + 
Armsize[1].highend + "</TD><TD ALIGN=CENTER>" + Armsize[2].lowend + " - " + 
Armsize[2].highend + "</TD><TD ALIGN=CENTER>" + Armsize[3].lowend + " - " + 
Armsize[3].highend + "</TD></TR>";
 chart +="</TABLE><FORM><INPUT TYPE='button' VALUE='Close' 
onClick=parent.close()></FORM></CENTER>";
 chart +="</BODY></HTML>";
}


function Metric(){
	caption = "<B>Men's Sizes in Centimeters</B>";

	      	Necksize[0] = new size("small", "35.5", "37");
		Necksize[1] = new size("medium", "38","39.5");
		Necksize[2] = new size("large", "40.5", "42");
		Necksize[3] = new size("xlarge", "43","44.5");
	

		Chestsize[0] = new size("small", "86.5", "91.5");
		Chestsize[1] = new size("medium","96.5","101.5");
		Chestsize[2] = new size("large", "106.5","112");
		Chestsize[3] = new size("xlarge", "117", "122");

		Waistsize[0] = new size("small", "71",  "76");
		Waistsize[1] = new size("medium", "81.5", "86.5");
		Waistsize[2] = new size("large", "91.5", "96.5");
		Waistsize[3] = new size("xlarge", "101.5", "106.5");


		Armsize[0] = new size("small", "82.5",  "84");
		Armsize[1] = new size("medium", "85", "86.5");
		Armsize[2] = new size("large", "87.5", "89");
		Armsize[3] = new size("xlarge", "90", "91.5");

	            makechart();
   		measure = "<HTML><BODY BGCOLOR='cdba96'>";
		measure += "<P></P><CENTER>"
		measure += "<FORM name='toggle'><INPUT type='button' name='measurement' 
value='See English Measurements' onClick='parent.English()'>"
		measure += "</FORM></BODY></HTML>"

		init();

	}


function init(){
 		parent.chartfrm.location="javascript:parent.chart";	
		parent.buttonfrm.location="javascript:parent.measure";
	}

English();
</SCRIPT>

</head>

<frameset rows='52,*' frameborder=NO>

<frame src="javascript:parent.measure" name="buttonfrm" Border=none scrolling=no marginwidth=0 
marginheight=0>

<frame src="javascript:parent.chart" name="chartfrm" Border=none scrolling="auto" marginwidth=0 
marginheight=0>

</frameset>

</html>




LISTING TWO


<HTML>
<HEAD>
<TITLE>JScripterman Order Form</TITLE>
<SCRIPT LANGUAGE="javascript">
var status="pass";
function validate(){
		checkrequired(); {
                               if (status=="failed"){
			return false;}}
		checkASCII();{
			if (status=="failed"){
			return false;}}
		phonestrip();
                        alert ("Congratulations! Your transaction has been passed to our imaginary database!");
                        return true;}
function phonestrip() {
	var text=document.address.phone.value;
	var cleanphone = "";
	dirtyphone=text.toString( );
                for(var i = 0; i < dirtyphone.length; i++)
                        {var oneChar = dirtyphone.charAt(i);
                        if ((oneChar<="9") && (oneChar>="0" ) ){
		cleanphone +=oneChar;
		}
                        }
		document.address.phone.value = cleanphone;
                        return true; }

function checkrequired(){
	if (document.address.fname.value == ""){
		alert("Please enter your first name.");
		document.address.fname.focus();
		status="failed";
		return false;
		}
	else if (document.address.lname.value==""){
		alert("Please enter your last name.");
		document.address.lname.focus();
		status= "failed";
		return false;}
	else if (document.address.country.value==""){
		alert("Please enter your country name.");
		document.address.country.focus();
		status="failed";
		return false;}
	else if (document.address.address1.value==""){
		alert("Please enter your street address.");
		document.address.address1.focus();
		status="failed";
		return false;}
	else if (document.address.city.value==""){
		alert("Please enter your city name.");
		document.address.city.focus();
		status="failed";
		return false;}
	else if (document.address.state.value==""){
		alert("Please enter your state, province, or region name.");
		document.address.state.focus();
		status="failed";
		return false;}
	else if (document.address.zipcode.value==""){
		alert("Please enter your zip or postal code.");
		document.address.zipcode.focus();
		status="failed";
		return false;}
	
	status = "pass";
	return true;}


function checkASCII()
{var text=document.address.fname.value;
  var correct_msg = " has some characters that are foreign to us. Please reenter it using English characters 
from A to Z or call our support desk."
	   if (islowASCII(text) == false){
		alert("Your first name" + correct_msg);
		document.address.fname.focus();
		document.address.fname.select();
		status="failed";
		return false;}

	  text=document.address.lname.value;
	   if (islowASCII(text) == false){
		alert("Your last name" + correct_msg);
		document.address.lname.focus();
		document.address.lname.select();
		status="failed";
		return false;}

	text=document.address.country.value;
	   if (islowASCII(text) == false){
		alert("Your country name" + correct_msg);
		document.address.country.focus();
		document.address.country.select();
		status="failed";
		return false;}

	text=document.address.address1.value;
	   if (islowASCII(text) == false){
		alert("Your address" + correct_msg);
		document.address.address1.focus();
		document.address.address1.select();
		status="failed";
		return false;}

	text=document.address.address2.value;
	   if (islowASCII(text) == false){
		alert("Your address" + correct_msg);
		document.address.address2.focus();
		document.address.address2.select();
		status="failed";
		return false;}

	text=document.address.address3.value;
	   if (islowASCII(text) == false){
		alert("Your address" + correct_msg);
		document.address.address3.focus();
		document.address.address3.select();
		status="failed";
		return false;}

	text=document.address.city.value;
	   if (islowASCII(text) == false){
		alert("Your city name" + correct_msg);
		document.address.city.focus();
		document.address.city.select();
		status="failed";
		return false;}

	text=document.address.state.value;
	   if (islowASCII(text) == false){
		alert("Your region name" + correct_msg);
		document.address.state.focus();
		document.address.state.select();
		status="failed";
		return false;}

	text=document.address.zipcode.value;
	   if (islowASCII(text) == false){
		alert("Your zipcode" + correct_msg);
		document.address.zipcode.focus();
		document.address.zipcode.select();
		status="failed";
		return false;}

	text=document.address.phone.value;
	   if (islowASCII(text) == false){
		alert("Your telephone number" + correct_msg);
		document.address.phone.focus();
		document.address.phone.select();
		status="failed";
		return false;}

	status = "pass";
	return true; }


function islowASCII(text){testtext=text.toString( );
                for(var i = 0; i < testtext.length; i++)
                        {var oneChar = testtext.charAt(i);
                        if (oneChar>"~"){return false}
                        }
                        return true; }

</SCRIPT>
</HEAD>
<BODY BACKGROUND="stamps.jpg">
<P>
<b>You've ordered one jacket and one pair of pants.</B></P>
<P><b><i>JScripterman delivers around the world, so just tell us where you are.</i></b></P>
</P>
<H2>Please enter your delivery address below:</H2>
<TABLE cellspacing =8 cellpadding=0>
<TR><TD  colspan = "2"  NOWRAP>
<FORM NAME="address">
<b>First&nbsp;Name:</b>&nbsp;&nbsp;<INPUT NAME="fname" SIZE=25
MAXLENGTH=25>&nbsp;&nbsp;&nbsp;
<b>Last&nbsp;Name:</b>&nbsp;&nbsp;<INPUT NAME="lname" SIZE=25
MAXLENGTH=25></TD></TR>
<TR NOWRAP><TD colspan = "2"> 
<b>Country:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT NAME="country"
SIZE=20 MAXLENGTH=30></TD></TR>
<TR NOWRAP><TD align=right><b>Street&nbsp;Address 1:</b></TD><TD>
<INPUT NAME="address1" SIZE=30 MAXLENGTH=30></TD></TR>
<TR NOWRAP><TD align=right><b>Street&nbsp;Address 2:</b></TD><TD>
<INPUT NAME="address2" SIZE=30 MAXLENGTH=30></TD></TR>
<TR NOWRAP><TD align=right><b>Street&nbsp;Address 3:</b></TD><TD>
<INPUT NAME="address3" SIZE=30 MAXLENGTH=30></TD></TR>
<TR NOWRAP><TD align=right><b>City:</b></TD><TD><INPUT NAME="city" SIZE=20
MAXLENGTH=20></TD></TR>
<TR NOWRAP><TD align=right><b>State/Province/Region:</b></TD><TD>
<INPUT NAME="state" SIZE=20 MAXLENGTH=20></TD></TR>
<TR NOWRAP><TD align=right><b>Zip/Postal&nbsp;Code:</b></TD><TD>
<INPUT NAME="zipcode" SIZE=9 MAXLENGTH=9></TD></TR>
<TR NOWRAP><TD align=right><b>Telephone&nbsp;Number:</b></TD><TD>
<INPUT NAME="phone" SIZE=29 MAXLENGTH=19></TD></TR>
</TABLE>

<P ><CENTER><INPUT TYPE=button VALUE="Commit Order"  
onClick=validate()>&nbsp;&nbsp;<INPUT TYPE=button VALUE="Return to Shop" 
onClick=window.location="shop.htm"></CENTER>
</FORM>
</BODY>
</HTML>