Programming | JavaScript, Ajax » Work samples, source code, Javascript

A.RFRY Work Samples ► Source Code ► Javascript Introduction This document provides a number of examples of Javascript/Jscript* code that I designed and developed. (*Jscript is the Microsoft version of Javascript. It is based on Javascript, but there are some extensions/differences). See Notes and Caveats at the end of this document. The examples require some understanding of modal and modeless dialogs. Example(s): Description This document contains 4 examples: Example 1. This example is part of a web page which is part of a large intranet application One function performs client-side form validation. The other function creates a 2nd window – a ‘Modal Dialogue’ window – and displays another web page in this new window. Example 2. This example is part of a web page which provides a user interface to a local application The function shown creates the appropriate command line to invoke the application and pass arguments to it, and then issues this command via the command

shell. In essence, it shows how you can invoke/start a local application from a web page. Example 3. This example is part of a web page which contains a form which requires validation before being submitted to the server. The form contains a number of date fields, and each date is expected to take the form dd/mm/yyyy (UK format). The function shown is part of the form validation process and is used to check each date field. Example 4. This example is a web page which contains 2 x drop-down lists and 3 x buttons 2 of the buttons allow you to move an item from one list to the other, and the 3rd button clears and repopulates the lists from the contents of hidden text fields. This page demonstrates DHTML and DOM manipulation. About ResourceIT ResourceIT is an intranet-based application developed for a large job agency. The database stores information on consultants, clients, requirements and candidates. It employs a set of web pages (HTML and ASP), some of which are forms. A client

consists of company, site(s) and contact(s). The page ClientSiteEditasp is used to create or edit client site details. Example(s): Code Example 1: <script LANGUAGE="JavaScript"> function CheckVal() { with (document.forms[0]) { // check for under-length fields. // (NB. *TO BE REVIEWED. For now, insist on // site name; at least one means of contact) if (SiteName.valuelength < 1) { window.alert("Please provide site name (Site)"); return false; } if (SitePhone.valuelength < 1 && SiteFax.valuelength < 1 && SiteEmail.valuelength < 1 && SiteAddr1.valuelength < 1) { window.alert("Please provide contact information (Phonenumber/Faxnumber/E-mail/Address)"); return false; } // check for over-length fields. if (SiteName.valuelength > 50) { window.alert("Site exceeds max 50 characters"); return false; } if (SitePhone.valuelength > 50) { window.alert("Phonenumber exceeds max 50 characters");

return false; } if (SiteFax.valuelength > 50) { window.alert("Faxnumber exceeds max 50 characters"); return false; } if (SiteEmail.valuelength > 50) { window.alert("E-mail exceeds max 50 characters"); return false; } if (SiteAddr1.valuelength > 50) { window.alert("Address line 1 exceeds max 50 characters"); return false; } // other statements here (removed for purpose of example) if (SitePostcode.valuelength > 10) { window.alert("Postcode exceeds max 10 characters"); return false; } if (SiteCountry.valuelength > 50) { window.alert("Country exceeds max 50 characters"); return false; } return true; } } function SlctDialogClCom(strURL) { strFeatures = "dialogWidth=700px;dialogHeight=500px;" + "scrollbars=no;center=yes;border=thin;help=no;status=no"; strRet = window.showModalDialog(strURL, "clcomdlg", strFeatures); if (strRet != null) { with (document.ClientSiteUpdate) { CompanyID.innerText =

strRet[0]; // Company ID Company.innerText = strRet[1]; // Company name } } window.eventcancelBubble = true; window.eventreturnValue = false; } function OnClickClCom() { SlctDialogClCom("clcomselect.asp"); } </script> Example 2: function BuildCommandLine() { var cl; var oExec; var i; var input = ""; var win2; win2 = showModelessDialog("xtb2out.html",document, "status:no;dialogWidth:400px;dialogHeight:600px;resizable:yes;dialogTop:10px;dialogLeft:10px"); // construct the command line. epfolder = dpfolder; cl = "perl -w " + epfolder + "/xtb.pl"; // Perl source, Win32 //cl = epfolder + "/xtb.pl"; // Perl source, other (Unix/Linux) //cl = epfolder + "/xtb"; // executable cl = cl + " -z"; with (document.forms[0]) { if (Directory.valuelength > 0) { cl = cl + " -dir " + Directory.value; } if (UseRecursion[0].checked) { cl = cl + " -rec " + UseRecursion[0].value; } if

(UseRecursion[1].checked) { cl = cl + " -rec " + UseRecursion[1].value; } if (XMLFilExt.valuelength > 0) { cl = cl + " -ext " + XMLFilExt.value; } if (InputFiles.valuelength > 0) { cl = cl + " -ifl "" + InputFiles.value + """; } if (TagInfoFile.valuelength > 0) { cl = cl + " -tif " + TagInfoFile.value; } if (OutputFile.valuelength > 0) { cl = cl + " -ofl " + OutputFile.value; } if (ShowLevel[0].checked) { cl = cl + " -shl " + ShowLevel[0].value; } // other statements here (removed for purpose of example) if (Colour.valuelength > 0) { cl = cl + " -col " + Colour.value; } } //window.alert(cl); i = "Command line: " + cl + "<BR>"; win2.statustextinsertAdjacentHTML("beforeEnd",i); // issue the command. var WshShell = new ActiveXObject("WScript.Shell"); var oExec = WshShell.Exec(cl); while (!oExec.StdOutAtEndOfStream) { input =

oExec.StdOutReadLine() + "<BR>"; win2.statustextinsertAdjacentHTML("beforeEnd",input); } // this is here to stop the result from disappearing!. window.alert("Done?"); WshShell.Quit; return true; } Example 3: function IsDate(s) { var DatePat = /^(d{2})(/)(d{2})(/)(d{4})$/; var matchArray = s.match(DatePat); var day, month, year; //Check valid format if (matchArray == null) { return false; } day = matchArray[1]; month = matchArray[3]; year = matchArray[5]; // check month range if (month < 1 || month > 12) { return false; } //Check day range if (day < 1 || day > 31) { return false; } //Check months with 30 days if ((month==4 || month==6 || month==9 || month==11) && day>30) { return false; } //Check Feb days if (month == 2) { var leapYr = (year%4 == 0 && (year%100 != 0 || year%400 == 0)); if (day > 29 || (day>28 && !leapYr)) { return false; } } return true; } Example 4: <html> <head>

<script language="javascript"> // setlist1length - set list length to actual length. function setlist1length() { var list1=document.getElementById("list1"); var list1l = list1.length; list1.outerHTML = <select id="list1" size=" + list1l + "> + list1innerHTML + </select>; list1.size = list1l; } function setlist2length() { var list2=document.getElementById("list2"); var list2l = list2.length; list2.outerHTML = <select id="list2" size=" + list2l + "> + list2innerHTML + </select>; list2.size = list2l; } // populate - create lists from values in hidden fields. function populate() { // create list1. var list1=document.getElementById("list1"); list1.optionslength = 0; var list1contents=document.getElementById("list1c"); var cs = list1c.value; var ca = cs.split(;); for (ind=0; ind<ca.length; ind=ind+2) { var newOpt = new Option(ca[ind], ca[ind+1]);

list1.options[list1length] = newOpt; } setlist1length(); // create list2. var list2=document.getElementById("list2"); list2.optionslength = 0; var list1contents=document.getElementById("list2c"); var cs = list2c.value; var ca = cs.split(;); for (ind=0; ind<ca.length; ind=ind+2) { var newOpt = new Option(ca[ind], ca[ind+1]); list2.options[list2length] = newOpt; } setlist2length(); } function add() { var list1=document.getElementById("list1"); var list2=document.getElementById("list2"); var list1l = list1.length; var list2si = list2.selectedIndex; if (list2si >= 0) { alert(list2si); var newOpt = new Option(list2.options[list2si]text, list2options[list2si]value); // add option to list1. list1.options[list1l] = newOpt; // remove option from list2. list2.removeChild(list2options[list2si]); alert("Added"); setlist1length(); setlist2length(); } } function remove() { var list1=document.getElementById("list1"); var

list2=document.getElementById("list2"); var list2l = list2.length; var list1si = list1.selectedIndex; if (list1si >= 0) { alert(list1si); var newOpt = new Option(list1.options[list1si]text, list1options[list1si]value); // add option to list2. list2.options[list2l] = newOpt; // remove option from list1. list1.removeChild(list1options[list1si]); alert("Removed"); setlist1length(); setlist2length(); } } </script> </head> <body onload="setlist1length();setlist2length();"> Items, selected and selectable. <p> <table border=1> <tr> <td> Current selection: </td> <td>&nbsp;</td> <td> Options: (select as required) </td> </tr> <tr valign="top"> <td> <select id="list1" size="10"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option>

<option value="3">3</option> <option value="4">4</option> </select> </td> <td> <input type="button" value=">" onclick="remove();" /><br> <input type="button" value="<" onclick="add();" /> </td> <td> <select id="list2" size="10"> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> </tr> </table> <p> <input type="button" value="Populate" onclick="populate();" /> <input type="hidden" id="list1c" value="a1;a2;b1;b2;c1;c2"> <input type="hidden" id="list2c"

value="p1;p2;q1;q2;r1;r2;s1;s2"> </body> </html> Explanation Example 1 (CheckVal, SlctDialogClCom, OnClickClCom). The web page ClientSiteEdit.asp is used to set up or edit client site details The web page/form contains executable code and a number of links and buttons. The links are provided by means of appropriate HTML link statements, as follows: ‘Company’ link: <a HREF="#" LANGUAGE=javascript ONCLICK="OnClickClCom();">Company</a> ‘Submit’ button: <form language=Javascript onSubmit="return CheckVal()" method="post" action="ClientSiteEdit.asp?<%=strQuery%>" id="FORM1" NAME="ClientSiteUpdate"> <INPUT TYPE="SUBMIT" VALUE="Update" id="submit1" NAME="submit1"> CheckVal: This checks form field values prior to the form and values being submitted to the server. It is linked to, and executed as a result of pressing, the

‘Submit’ button. (The basic procedure us that the user completes the form fields and then presses ‘Submit’). This checks field value lengths, to check for values which are either absent (mandatory parameter values which are missing) or too long. If it finds an error, it outputs an alert message and return false (indicating that an error has been detected). Otherwise, it returns true (indicating no errors) SlctDialogClCom: This creates a second window which shows, and allows the user to select, a client company. The second window is opened in modal form, which means it retains focus until it closes or is closed. Upon closure, control returns to SlctDialogClCom, which copies the selected values (company id and name) into the form fields. The function showModalDialog creates a window in the form of a modal dialog. The first argument, strURL, is the name of a web page to be displayed in the (new) window. In this case, the name passed is clcomselect.asp, and it is this page which

provides the ability to list and select a company OnClickClCom: This creates a second window which shows, and allows the user to select, a client company (in fact, it calls SlctDialogClCom, above, to do this). It is linked to, and executed as a result of pressing, the ‘Company’ link. Example 2 (BuildCommandLine). XMLToolBox is a utility for checking, viewing, manipulating and converting XML documents. It consists of a user interface component and a core engine component. It is written in Perl, and so the core engine can be provided either in Perl source form or in a compiled form (eg .exe on Windows). Two forms of user interface are possible: (1) a web interface (GUI), using a standard browser and set of web pages, and (2) a command line interface (non-GUI). In the case of (1), the web page uses a Javascript function to construct the appropriate command, create a command shell (Windows Script Host), and then pass the command to the shell in order to launch the application (core

engine component). Basically, this function shows how you can invoke/start a local application from a web page. Example 3. The function IsDate() first uses a regular expression (regex) pattern match to (a) check that the input string matches the format dd/mm/yyyy and (b) extract the day, month and year components. It then performs a number of checks on the day and month components. Notes and Caveats • All examples require some understanding of the language concerned. Some examples may require some understanding of other technologies/mechanisms/interfaces. • All code has been tested and is known to work. • Some/all code is taken from commercial product(s) and is provided on a confidential basis. • To minimize explanation and aid understanding, I have selected pieces of code which are reasonably simple and selfcontained. (If you want something more complex, contact me!) • Unauthorized (re-)use is not permitted without the author’s explicit permission