JavaScript examples

Last updated:

1. Basic examples
2. Form validation & pop-up windows
3. Regular expressions
4. Handling cookies
Giovanni's logo
1. Basic examples

This is a small collection of JavaScript examples.
Do the following:

  1. go through each of them, and try to understand it by clicking
    on the token click here to learn more
  2. write your own test case
  3. when you are through, visit our classic case, later on this page.
  1. document.write
  2. external script
  3. define and execute a function
  4. validate a form
  5. sample event handler
  6. properties
  7. window.open
  8. communicating between two windows
  9. using a function in an anchor <A HREF=...>


2. A classic case: form validation & pop-up windows
(Get a virtual car)

The following case demonstrates the advantages you can obtain by just applying some JavaScript to your HTML scripts, to control input forms and to generate pop-up windows.
In the following examples, we have a single RPG CGI, which adopts HTML scripts containing different degrees of JavaScript.

  1. In a first case no Javascript is used
  2. In the second case some JavaScript was inserted only to display the HTML and the RPG sources on pop-up windows. No JavaScript was used to control the input forms.
  3. In the third case some more JavaScript was added to control the two input forms ( form1 and form2)
  4. In the fourth case additional JavaScript was added to:
    1. display the second page (the one containing the form form2) in a pop-up window, instead of using a full-screen window
    2. provide the final page as a replacement of the first page (changing its location property)
  5. The fifth case, though apparently looks similar to the fourth case, provides a more elegant solution by
    • replacing submit buttons with plain buttons
    • providing the final page from the pop-up window through submission of the form in the first page.
  6. When you develop a pop-up window for use from many CGI programs (as an example: a customer search pop-up), you may want to use a variable name for the mother_window input field receiving data from the pop-up.
    This is what is done in our sixth case.
Please note that our JavaScript is far from being optimized. You would read some naive code, still rather easy to be read by beginners.


3. Regular expressions

Regular expressions are patterns used to match character combinations in strings. Regular expressions make up the base for whatever form validation need.

For a complete description of regular expressions, see JavaScript Client Guide Chapter 4

From developer.netscape.com we have downloaded for you some super
   Sample Code for Form Validation with Javascript 1.2 Regular Expressions
which is available on iSeries 400 as /js2/regexp/FormChek.js.
This sample code

  • allows to learn a lot about making proficient use of regular expressions for form validation
  • contains numerous functions that you may immediately use to validate your forms
  • allows for an easy translation into national languages
About FormChek.js
link Read an overview
link Display the source code
link Sample U.S. form
link Sample international form
link About credit card numbers ...
link Test the code
  • the sample U.S. form and the sample international form are just examples of validating input forms using JavaScript functions defined in FormChek.js
  • read the about credit card numbers before running the examples
  • if you make some changes to FormChek.js, run test the code to make sure it is still working correctly.

After learning the FormChek.js functions, we decided to write our own form validation example.
Our example deals with numeric input fields.
This example teaches:

  1. how to validate numeric inputs using masks built with regular expressions
  2. how to shift (align) right numeric input data, thus avoiding the CGI performing this task
  3. how to validate date inputs
  
Visit our example
   
link Validating form numeric fields

More on validating forms
More JavaScript examples for validating forms are available in file validators.zip, that you may download.



4. Handling cookies

Cookies are a mechanism for storing persistent data on the client. As HTTP is a stateless protocol, cookies provide a way to maintain information between client requests.
In a sense, a cookie may be though of as a small data area on the client.
A cookie has the following properties:
Name mandatory Identifies the cookie (as if it were the name of a data area)
Value mandatory The contents of the cookie (as if it were the value of a data area). Note that Netscape Navigator does not support blanks in the cookie value. If that happens, the Set-Cookie string is trimmed right at the first blank met. Therefore it may be needed to substitute all the blanks in a cookie value with some other character before creating the cookie; in such a case, the opposite operation should be performed after retrieving the cookie.
Expiration optional The date until which the cookie should survive. If the expiration is not specified, the cookie expires when the user session ends.
Domain optional The domain under which the cookie can be retrieved. If the domain is not specified, the web browser should assume the host name of the server generating the cookie.
Path optional The path under which the cookie can be retrieved. If the path is not specified, the web browser should assume the path of the page generating the cookie.

Cookies are stored and retrieved by the web browser.
  • Netscape stores all cookies in file
    C:\Program Files\Netscape\Users\Default\cookies.txt.
    Each cookie is a separate line.
  • Microsoft Internet Explorer maintains an object for each cookie. All these objects are collected in folder
    C:\WINDOWS\Cookies

Whenever a web page is loaded, the web browser makes available all the unexpired cookies that:

  1. match the domain of the page
    (for instance, www.ibm.com or 195.183.8.2)
  2. are in the path of the page
    (for instance, to page /js2p/cookie2.cgi are made available all the cookies with path "/" and all the cookies with path "/js2p".
For further details on the rules controlling access to cookies, read Determining a Valid Cookie.

There are two ways you may create and retrieve cookies:

  • with some Javascript in your HTML
  • with CGI

4a. Handling cookies with JavaScript

You may create and retrieve cookies on the client through some simple JavaScript.

To create a cookie you must provide the following information:

  • Cookie name
  • Cookie value
  • Expiration date and time (timestamp) (optional)
  • Path

To retrieve a cookie you must provide some Javascript code in a Web page. In this code you must just provide the Cookie name. You do not have to provide the domain name, the directory name, nor the expiration date.

For more information about handling cookies with JavaScript, please visit this page of JavaScript Client Guide manual.

  
See our examples of handling Cookies through JavaScript
   
link Basic example on handling a cookie (static page)
link Advanced example on handling a cookie (dynamic page)

4b. Handling cookies with CGI
Please refer to the section Handling Cookies in the CGIDEV2 CGI tutorial.


Back to the initial page