JavaScript Quick Reference

• Introduction
  
• JavaScript and JScript
  
• JavaScript URL/Interpreter Window
  
• Comments in JavaScript
  
  
• { }  (curly braces)
  
• ;  (semicolon)
  
• Alert (Message) Box
  
• Arrays, Creating
  
• Arrays, Sorting Elements of
  
  
• Calling External JavaScript Files
  
• Confirm and Prompt Boxes
  
• Date Object
  
• Displaying Text in Non-JavaScript Browsers
  
• Document Object
  
  
• Escape Sequences
  
• escape() and unescape()
  
• Forms
  
• Functions
  
• Hiding Code from older Browsers
  
  
• Image Replacement
  
• Navigator Object
  
• Objects (see Arrays)
  
• Operators, Arithmetic
  
• Operators, Comparative
  
  
• Query Strings
  
• Recursion
  
• Search a String (indexOf)
  
• Sorting Data (see Arrays, Sorting Elements of)
  
• Strings, Passing to other Pages (URLs)
  
  
• Strings, Returning Substrings
  
• Time ( see Date Object )
  
• VBScript
  
• Windows, Opening
  
• Windows, Microsoft, Print Dialogue Box
  

Introduction

Note that JavaScript is case-sensitive, e.g. LastModified is not the same as lastModified.

JavaScript and JScript

Fortunately, Internet Explorer 4 complies with JavaScript 1.2. In fact, both Netscape and Microsoft have committed themselves to supporting JavaScript, which is now an official standard, called ECMA-262. ECMA-262, also known as ECMA Script, has been ratified by the IETF and the W3C. An interface to ECMA-262 is part of the HTML4 standard.

JavaScript URL/Interpreter Window

Furthermore, Navigator versions 3 and later have an interpreter window which allows sequential lines of code to be tested. This is activated by typing javascript: on its own in the Location field. Beware that objects such as document and window are seen as URLs outside the interpreter window and will cause Netscape to return an error message. It is best to test statements without those objects, e.g. 'Hello World' instead of document.write('Hello World').

Comments in JavaScript

To prevent comments being read as code by the JavaScript interpreter, prefix them with two forward slashes. This should be done for every line containing a comment, e.g.:

//  This is the first line of my comment.
//  This is the second line of my comment.

a=prompt('Please enter your name','');  // Displays the prompt box.

{ }  (curly braces)

  function doSomething()
  {
    x = 0;
  }

;  (semicolon)

a = 5;
b = 4;

a = 5; b = 4;

Alert (Message) Box

Alert() is a Method belonging to the Window Object.

    alert('\n\nDocument Properties:\n'
    + '_________________________________   \n\n'
    + document.title                       + '\n\n'
    + 'Modified: ' + document.lastModified + '\n'
    + '_________________________________   \n')

Note that \n generates a line feed character in Alert boxes (see 'Escape Sequences').

Alert box messages in Netscape Navigator are prefaced with "JavaScript Alert:".  Internet Explorer does not display any such identification. This has been raised as a possible security problem.

Arrays, Creating

In Navigator 3 and Internet Explorer 3, arrays can be created with the following constructor:

    myarray = new Array();
        myarray[0] = "first element";
        myarray[1] = "second";
        myarray[2] = "third";
        myarray[3] = "fourth";


    d = new Array(16);
        d[0] = "dansak";
        d[1] = "korma";
        d[2] = "madras";

        d[14] = "jalfrezi"
        d[15] = "vindaloo"

Use the length property to determine the number of elements in the array.

    arraysize = myarray.length

Although array.length always returns the correct number of elements in an array, the number of the last element will always be one less.

Navigator 3 and Internet Explorer 4 introduced three new methods for manipulating arrays, array.join, array.sort, and array.reverse.

The Array() constructor is not available in Navigator 2. It uses the Object() constructor which can be assigned elements or properties. When a Navigator 2 array is assigned a property, it is assigned the next available array element. Therefore, in the following example address.town could also be called up as address[1] and address.county as address[2].

    address = new Object();
      address[0] = "64 High Street";
      address.town = "Basingstoke";
      address.county = "Hampshire";

Also, Navigator 2 does not understand array.length. This restriction applies only to user-defined arrays, - built-in arrays such as document.links do have a length property. It is common for user-defined arrays to store the array length in the first element of the array (array[0]):

    function MakeArray(length);
    {
        this.size = length;
        for(var i =1; i <= length; i++)
             this[i] = 0;
    }

If the array will be updated frequently (as 'real' data often becomes out of date), re-numbering the element arrays will become tedious (all array elements must be numbered sequentially). Instead, use the ++ operator to increment the array element number:

    nu = 0;
    data = new Array();

    data[nu++] = "apples";
    data[nu++] = "pears";
    data[nu++] = "bananas";
    data[nu++] = "grapefruit";

    dt = "Date|Event|Circuit|Country";
    dt += "~16 May|Monaco Grand Prix|Monte Carlo|MC";
    dt += "~30 May|Spanish Grand Prix|Barcelona|E";
    dt += "~13 June|Canadian Grand Prix|Montreal|CAN";

The next line uses the split property to convert the data string into an array called 'data':

    data = dt.split('~');

Arrays, Sorting Elements of

    myarray.sort();

    myarray.reverse();

Calling External JavaScript Files

    <SCRIPT LANGUAGE="JavaScript 1.1" SRC="sub_doc.js">
    </SCRIPT>

    document.write('This is text from another file.')

For external JavaScript files to be included, they must have a .js extension, and must be exported by the web server with MIME-type "application/x-javascript".

Confirm and Prompt Boxes

confirm() and prompt() are properties belonging to the Window Object.

Confirm: confirm('Do you want to press the OK Button?');

Prompt: a=prompt('Please enter your name','');

              if (a==null) {
                   document.write('You did not enter your name')
              }
               else {
                   document.write('Your name is ' + a)
              }

Prompt boxes in Netscape Navigator do not allow multiple lines (i.e. using the \n newline character) although Internet Explorer's Prompt boxes do.

Date Object

    tm = new Date(arglist);

integer	Milliseconds after UTC, e.g 5000 = 5 seconds past midnight, 1st January 1970.
month, day, year	e.g. 12, 31, 1999
datestring	e.g. Sat 21 August 1999

Once the Date Object has been constructed, it can be manipulated as follows:

Date.getYear()	Retrieve the year (two or four digit number.
Date.setYear()	Set the year in Date, e.g. Date.setYear(1998). Note that two digit numbers can be used for the 20th century.
Date.toGMTString	Returns a string expression in the format Mon, 20 Aug 2001 22:55:34 GMT (format may vary from OS to OS).
Date.toLocaleString	Returns a string expression in the format 08/20/01 23:55:34. This is not generally as useful as .toGMTString.

To get the current year:

    now = new Date();

    y = Date.getYear(now);
    document.write('The year is ' + y);
         // returns two or four digit integer (see below)
    x = Date.getMonth(now);
    document.write('The month is ' + x);
         // returns month as integer between 0 and 11

To display a "time of day" greeting:

    today = new Date()
    if (today.getHours() > 16)  {
        document.writeln('Good Evening!')
    }
    else if (today.getHours() > 11)  {
        document.writeln('Good Afternoon!')
    }
    else if (today.getHours() < 12)  {
        document.writeln('Good Morning!')
    }

To display a 'Page last updated' message at the foot of each document, use the following code:

    //  Check datestamp is present in HTTP header (server not obliged to send it):
    if (Date.parse(document.lastModified) != 0) {
       a = new Date(document.lastModified);

       // Set a pivot year of 1950 for Millennium non-compliant browsers:
       if (a.getYear() < 50) {
          a.setYear(a.getYear() + 2000);
          }

       document.write('Last Modified: ' + a.toGMTString() + '<BR>');
       }

Displaying Text in Non-JavaScript Browsers
(but hiding it from JavaScript-enabled Browsers)

    <SCRIPT LANGUAGE="JavaScript">
        <!-- -->  If JavaScript is enabled, this text will not 
        <!-- -->  be displayed, but it will be visible on non-
        <!-- -->  JavaScript Browsers.<P>
    </SCRIPT>

The <NOSCRIPT></NOSCRIPT> tags may also be used, because non-JavaScript Browsers ignore the tags and display any text inside them. Unfortunately, Navigator 2 does not play ball because it too does not recognise the <NOSCRIPT></NOSCRIPT> tags!

Alternatively, divert JavaScript-enabled Browsers to another page, so that messages for non-JavaScript Browsers are not seen.

<HTML><HEAD><TITLE>Document Title</TITLE>

    <SCRIPT LANGUAGE="JavaScript 1.1"><!-- Hide code
        window.location.href="newpage.htm";
    //--></SCRIPT>

    </HEAD>

    <BODY>Sorry, you need JavaScript enabled to read this page.<P>

</BODY></HTML>

Document Object

window.document
document

lastModified - date and time the document was last uploaded or saved[R] *
location     - a synonym of the URL property
referrer     - URL of the document from where the current document was opened
title        - Title of the document [R]
URL          - URL of the document [R]
vlinkColor   - colour of visited links.

 *    Some web servers do not return this information, in which case
     midnight 1st January 1970 UTC is displayed.

Methods:

clear()      - Erases the document's contents
close()      - Closes a document opened with the open() stream
open()       - Opens a stream to which document contents may be written
write()      - Inserts a string or strings into the document
writeln()    - Same as write() but appends a line feed character

window.document.writeln('hello world')

Escape Sequences

    \'    Single quote  '
    \b    Backspace
    \f    Form Feed
    \n    Newline (Line Feed)
    \r    Carriage Return
    \t    Tab

    \xxx  Latin (ISO8859-1) character xxx
    \251  Copyright Symbol ©

escape() and unescape()

As an example, the expression escape("Hello World!") will encode the string to Hello%20World%21.

Use the unescape() function to decode strings encoded by the escape() function.

The use of encode() and unescape() ensures that the string is portable to all computers, networks and transmission paths, regardless of character encodings, providing of course, that they all support standard ASCII. The function is also used to overcome the restriction on the use of punctuation marks when setting cookie values.

escape() performs encoding not dissimilar to that of URL-encoding. The main difference is that URL encoding replaces spaces with the + character.

Forms

The problem does not arise with other form elements used on their own, or if there are two or more text input fields on the form.

The onSubmit argument does not always prevent a form with invalid data from being submitted.

Functions

For tidiness, code can be wrapped inside Functions:

    <SCRIPT LANGUAGE="JavaScript"><!--Hide etc.
        function dothis()
        {
           code goes here...
        }
    //--></SCRIPT>

    <A HREF="link.htm" onmouseOver=dothis()>A Link</A><P>

Hiding Code from older Browsers:

<HTML><HEAD><TITLE>Document Title</TITLE>

    <SCRIPT LANGUAGE="JavaScript 1.1">
    <!-- Start of Tag which hides code from old Browsers

        JavaScript code goes here...
            "            "  
            "            "  

    // End of Tag which hides code from old Browsers --> 
    </SCRIPT>

</HEAD>

This is often abbreviated to something like this:

    <SCRIPT LANGUAGE="JavaScript 1.1"><!-- 
        JavaScript code goes here...
            "            "  
            "            "  
    // --></SCRIPT>

Image Replacement

The following script produces a "Windows-style" menu, where dragging the mouse over the menu option causes a new image to be loaded:

    <HEAD><SCRIPT LANGUAGE="JavaScript 1.1">
    d = new Array(16);         // Create Array for Image Objects

    for(var i = 0; i < 16; i++) {
        d[i] = new Image();          // Create Image Object
        d[i].src = "img" + i + ".gif";  // Load the URL
    }


    function paint(x,y) {
        document.images[x].src=y;
    }

    function unpaint(x,y) {
        document.images[x].src=y;
    }
    </SCRIPT></HEAD>

    <BODY>
    <A HREF="homepage.htm" onmouseOver=paint(0,d[0].src) 
onmouseOut=unpaint(0,d[1].src)>
<IMG SRC="img1.gif" ALT="Home Page" 
WIDTH=95 HEIGHT=20 BORDER=0></A>
etc...

Navigator Object

Property	Netscape Navigator	Internet Explorer
appCodeName	Mozilla	Mozilla
appName	Netscape	Microsoft Internet Explorer
appVersion	3.03 (Win95; I)	2.0 (compatible; MSIE 3.0A;Windows 95)
mimeTypes[] mimeTypes.length	text/html, images/gif etc.	Not supported
userAgent	Mozilla/2.01 (Win16; I)	Mozilla/2.0 (compatible; MSIE 3.0A;Windows 95)

Operators, Arithmetic

Operators, Comparative

Query Strings

Use location.search to read a query string, for example:

    if (location.search == '?reverse') {
       myarray.reverse();
       }

http://www.anydomain.com/doc.htm?myquery_string

Recursion

    for(var i = 0; i < 16; i++) {
        d[i] = new Image();          // Create Image Object
        d[i].src = "img" + i + ".gif";  // Load the URL
    }


    count = 0;
    while (count < 10) {
         document.write(myarray[count]);
         count++;
         }

Search a String (indexOf)

    string.indexOf(substring);

Finds the starting location of a substring in string. The first characater of string is at position 0. If the substring is not found, the value -1 is returned.

   if (haystack.indexOf(needle) > -1) {
       document.write('Needle found in haystack.');
   }

Strings, Passing to other Pages (URLs)

The example below sends text to the URL second_page.htm.  Note the use of the question mark ? to separate the query string from the URL:

    function sendto(a)
    {
       window.location.href='second_page.htm?' + escape(a);
    }

    document.write('<FORM NAME="form">');
    document.write('<INPUT TYPE="text" NAME="txt1" SIZE="40"><P>');
    document.write('<INPUT TYPE="Button" VALUE=" Send Now " ');
    document.write('onclick=sendto(form.txt1.value)></FORM>');

    a = unescape(location.search);
    document.write(a.split('?')[1]);

Do not forget to convert the command tail or query to an escape sequence before transmission (using the escape() command), and to unescape() the query at the destination. This is to ensure that all network and transmission paths understand non-ASCII characters such as spaces and punctuation marks.

Strings, Returning Substrings

    stringname.substring(x, y);

For example:

    outp = 'Fred Bloggs";
    document.write(outp.substring(5, 6);

If you want to return the remainder of the string from your starting point, but do not know the length of the string, you can set y to a number much gretaer than the string could ever be, e.g:

    document.write(outp.substring(5, 3000);

VBScript

    <SCRIPT LANGUAGE="VBScript">
    <!-- Start of Tag which hides code from non-VBScript Browsers

        // VBScript code goes here...

        Document.Write "You have VBScript enabled."

    // End of Tag which hides code from non-VBScript Browsers --> 
    </SCRIPT>

Netscape Navigator has never supported VBScript, which means that such scripts will be unreadable on about 50% of web browsers. No VBScript plug-in for Netscape (if one exists) has gained prominence, indicating the level of support this language has achieved on the World Wide Web.

VBScript will be more effective on those intranets which run MS Internet Explorer as the default client browser.

Windows, Opening

When using JavaScript to print to a new window, leave URL as a null string. Window_Name can contain alphanumeric characters and the underscore character.

Features specify browser options as follows:

toolbar	Displays the Browser toolbar with Back and Forward buttons.
location	Displays the text box used to enter URLs from the keyboard.
directories	Displays directory buttons, such as What's New and What's Cool in Netscape.
status	Displays the Status window at the bottom of the Browser.
menubar	Displays the menu bar with File, Edit, etc.
scrollbars	Displays horizontal and vertical scrollbars when required.
resizable	Allows the Browser window to be resized. Depending on the Browser and operating system in use, if resizable is ommitted, the user may still have control over the window's size. Note that the spelling resizeable will not work.
width	When followed by an integer, specifies the window's width in pixels, eg: width="600".
height	When followed by an integer, specifies the window's height in pixels, eg: height="300".

A script to open a new browser window and add text to it would look something like this:

  n = window.open("","NEW","WIDTH=400,HEIGHT=250,menubar,scrollbars");

  n.document.open("text/html");
  n.document.write('<HTML><HEAD></HEAD><BODY>');
  n.document.writeln('Text in a new Window.<P></BODY></HTML>');

  n.document.close();

Windows, Microsoft, Print Dialogue Box

However, it may be better suited to intranets where Microsoft Windows is the default client installation. The code for this method is as follows:

  <INPUT TYPE="button" VALUE=" Printer Setup " onClick="window.print()">

Therefore, it would be wise to put this code inside a conditional statement which tests for the presence of Communicator 4 or MSIE5.

Index