JavaScript

JavaScript is a proven scripting language, which is supported by most browsers. When used within a web page, it gives the Web Author the ability to add client-side pre-programmed interactive functions to your web pages. JavaScript greatly extends the capabilities of HTML.

JavaScript is a powerful programming language. Its complexity can rival that of advanced Basic and C++. It can easily produce a number of fascinating browser "stunts" in a very short period of time requiring very little effort.

JavaScript, like other programming languages, utilizes the basics of the computer language. If you have heard of the Universal Grammer discovered by linguistic scientists at the turn of the century, you may agree that computer languages have sort of the same thing going for them too.

What follows is a terse overview of what you can expect from JavaScript. It is by no means complete and a good book from QUE would go much more in depth. But, if you're looking into the language this may be of some help.

Go to Scripting Examples

Variables

    Var MyVar = 0
    Var MyVar_String = "String Data"
    Var MyVar_Str_Array=new Array(100)

    MyVar is a numeric type of a variable. Positive and negative numbers can be stored.

    Var_String is a variable that can hold string or text type data.

    Variable MyVar_Str_Array is an array of strings. The 100, of course is the size of the array. This would represent something similar to the size of 100 copies of the variable MyVar_String, referenced by MyVar_Str_Array[#] to indicate which string you are referring to.

Program Flow / Statements

    if () { }
    while () { }
    for (,,) {}

The standard C++ syntax for these statements applies. As a quick example, the following demonstrates the usage of "for". Unfortunately, due to some bugs in some browsers you may have to view the source and look for the following text:

    for (x=1;x <arraycounter>;x+=1) {

      displayarea.document.write(MyVar_Str_Array[x]);
      displayarea.document.write("Some happy HTML code");

    }

Simply put, until the variable x starting at 1 is no longer less than the variable arraycounter (initialized elsewhere) it will process the statements within the brackets. The "x+=1" portion says increment x by one through each repetition through the loop.

In most of the JavaScript books you will find a reference to the statements included with JavaScript.

Operators

    ++ increment
    -- decrement
    + add
    - subtract
    * multiply
    / divide
    % modulus
    & and
    ^ Xor
    | or
    < less than
    > greater than
    == equal
    <= guess
    >= guess
    != Not equal
    += assign addition to
    -= assign subtraction of
    << and >> can shift bits if you like

There are more :) See the Netscape site mentioned below for the complete list.

Methods and Objects

For a complete list go to Netscape's Method List

Of honorable mention are:

  • Submit - Submit a form
  • Navigator - Control the browser and test for version
  • IndexOF - Find a string in a string
  • parseFloat - Convert string to floating point ie: 1.99
  • parseInt - Convert string to integer ie: 2
  • toString - Convert numeric to string
  • substring - Return a string within a string
  • length - Return the size of a string (object)
  • window - For new browser windows and stuff
There are, of course, many more very powerful methods.

Tech Notes

1. Doing a submit can be done from OnLoad or another Event using code like this:

    A. The form you want to submit:

      <FORM METHOD="POST" ACTION="/cgi-bin/dbsearch.exe" TARGET="outputarea" NAME="myform">
      <input type="hidden" name="mdb" value="\example.mdb">
      <input type="hidden" name="tbl" value="MyTable">
      <input type="hidden" name="template" value="\htms\return.htm">
      <input type="submit" name="goforit" value="Submit">
      <nput type="text" name="DB_productname" size=20>
      </FORM>

    B. Create a function that calls the form.submit()

      <SCRIPT Language="JavaScript">
      function Myfunc() {
        document.myform.submit();
      }
      </SCRIPT>

    C. Launch it!

      <Body background=..whatever... OnLoad="Myfunc()">
      </BODY>

2. Setting the value of an input type=text element of a form:

    A. Using code similar to this:

      <SCRIPT LANGUAGE="JavaScript">
      function names are case sensitive
      function showme() {
        document.testform.checkme.value="hi there"
      }
      </SCRIPT>

    B. Where the form is testform and the object is checkme as seen here:

      <FORM NAME="testform">
      <INPUT type="text" name="checkme" onBlur="checkinput()">
      <INPUT type="button" Value="JavaScript" onClick="Scoobydooby()">
      </FORM>

3. Checking user input is another valuable capability:

    A. Script code:

      <SCRIPT LANGUAGE="JavaScript">
      function checkinput() {
      // better done by passing "this" but for clarity...
          var checkstring=document.testform.checkme.value
          var lcheckstring=checkstring.toLowerCase()
          if ( lcheckstring =="" ) {
            return;
          }
          if (lcheckstring.indexOf("e") >= 0) {
            alert("No eeees permited");
          }
      }
      </SCRIPT>

    B. From the Form, where the Form is testform and the object is checkme as seen here:

      <FORM NAME="testform">
      <INPUT type="text" name="checkme" onBlur="checkinput()">
      <INPUT type="button" Value="JavaScript" onClick="Scoobydooby()">
      </FORM>

4. Browser Detection:

      <SCRIPT Language="JavaScript">
      function WhatVersion () {
        document.write ("Mypage<P>");
        document.write (navigator.appVersion+"old<P>");
      }
      </SCRIPT>

5. I want to substitute that cold, grey "Submit" button for my own happy image. I can use the same kind of code for form.submit, by making the event related to the image:

    <a href="javascript: Myfunc()">
    < img border=0 src="myownbutton.gif" width=40 height=20 alt=Submit>

    Where the Myfunc() routine is identical to the one in item #1 above.

6. I want to load variables from a search result. Can I program the template to do this? Yes, by using frames. Here is the template code. You would need one frame for making the request and one for displaying the data:

    <SCRIPT Language="JavaScript">
    function LoadVars() {
        ProductName=new Array (100);
        description=new Array (100);
        price=new Array (100);
        id=new Array (100);
        shortdesc=new Array (100);
        shipprice=new Array (100);
        var arraycounter=0;
        var x=0;
    &*
    arraycounter +=1;
    ProductName [arraycounter] ="&&productname&&";
    description [arraycounter] ="&&longdesc&&";
    price[arraycounter]="&&price&&";
    id[arraycounter]="&&prodid&&";
    shortdesc[arraycounter]="&&desc&&";
    shipprice[arraycounter]="&&ship&&";
    *&
        parent.rightside.document.write("Ready<p>")
        for (x=1;x parent.rightside.document.write(ProductName[x]+"<P>");
        }
    }
    </SCRIPT>

<body background="mybackground.gif" onLoad="LoadVars()">

7. I see that you can write from one frame to another. Can you break this down for me?

parent.rightside.document.write("Ready<p>")

  • parent = Tells the brower to find "rightside" as a component of the FRAMESET
  • rightside = name of frame. That was set in the original frame statement.
  • document.write is plain ole JavaScript
8. Variables created/set in one function can be accessed as global variables from other functions. This seems to be the JavaScript mentality. But to access you must access with parent.target.variablename:

parent.outputarea.arraycounter

THE VARIABLES MUST NOT BE WITHIN THE BRACKETS OR THEY WILL NOT BE GLOBAL.

    <SCRIPT Language="JavaScript">
      ProductName=new Array(100);
      description=new Array(100);
      price=new Array(100);
      id=new Array(100);
      shortdesc=new Array(100);
      shipprice=new Array(100);
      var arraycounter=0;
    </SCRIPT>

9. Create windows:

    A. The window is referenced by the variable before the equal sign. IE "displayarea" would be used to reference this window:

      displayarea=window.open('','NameOfWindow','toobar=no,location=no,directories =no,status=no,scrollbars=yes,resizable=yes,copyhistory=no,width=300,height=200')

    URL,NAME,FEATURELIST

    FeatureList

    B. windowFeatures is a comma-separated list of any of the following options and values:

      toolbar[=yes|no]|[=1|0]
      location[=yes|no]|[=1|0]
      directories[=yes|no]|[=1|0]
      status[=yes|no]|[=1|0]
      menubar[=yes|no]|[=1|0]
      scrollbars[=yes|no]|[=1|0]
      resizable[=yes|no]|[=1|0]
      width=pixels
      height=pixels

10. Suppose you have a page that has been moved to a different location. Instead of going through your site and changing every page that references the page's old location, use this "URL-grabber" to send your viewers to the new location:

<body onLoad=window.location.href="http://www.yoursite.com/newpage.htm">

11. setTimeout is a JavaScript 1.0 compliant command. This means that you can set a timer on any JavaScript-capable browser for the purpose of scheduling some task for the future:

setTimeout("document.myform.submit();",15000);

EXAMPLE SCRIPTS

ARTICLES

The JavaScript Handbook Netscape's JavaScript Guide

Netscape's JavaScript Resources

The JavaScript Mailing List

JScript, JavaScript Documentation Download (JSDOC.exe 500KB)

JAVASCRIPT RESOURCE SITE

The JavaScript section at Developer.com An excellent collection of links and articles about JavaScript Development.







  © 95-00 InfoDial, Inc. Privacy Policy