JavaScript basics

©ilj@flowsim.se
JavaScript code samples
JavaScript 1: basics

where and how do I use JavaScript
how do I define and call a function
what eventhandlers are there
how do I write comments
does case matter
how can I use JavaScript to detect what browser is being used

WHERE
between SCRIPT tags in the HEAD part of the document	this is where you put functions code that is to be executed when the page is loading
between SCRIPT tags in the BODY part of the document	this is where you put eg code that writes text on the page as the page is loading
after event handlers like ONMOUSEOVER ONMOUSEOUT ONCLICK	this is where you put eg code that is to be executed only if and when the web page visitor does something, eg moves the mousepointer over a clickable image
in its own text file <SCRIPT SRC= "minkod.js"> </SCRIPT>	this is where you put eg code that is to be used on several pages

EXAMPLE

<HTML>
    <HEAD>
    <SCRIPT LANGUAGE = "JavaScript"
        TYPE="text/javascript">
    ¹
    </SCRIPT>
    </HEAD>
    <BODY>

    <A HREF ="javascript:functionname()"
    eventHandler = "JavaScript code">³...</A>

    <SCRIPT LANGUAGE = "JavaScript"
        TYPE="text/javascript">
    ¹
    </SCRIPT>

    </BODY>
</HTML>

1 put the script inside comment fields

2 functions can be defined in the HEAD part of the document to make sure they are properly loaded before the user clicks a button that will call them

3 you can use JavaScript code together with various event handlers, for instance onClick, onMouseOver - you could, for instance, make an animation start when the user clicks a link

4 this is an example that writes the text within quotation marks to the page (text on one line)

JavaScript can thus be placed either within SCRIPT tags and comment fields or after event handlers. You can also for instance call a function like this

<A HREF="javascript:iljfunktion()">link</A>

DEFINING AND CALLING FUNCTIONS

A function is a piece of code that will be executed only if and when it is called. A page can be full of functions - nothing will happen until they are called.

The framework of a simple function could look like this:

function a_name()
{

}

Between the curly brackets you put code that decides what will happen when the function is called.

a_name may be replaced by any name.

If you want to define a function that, every time it is called, displays a message you can write something like this:

function showmessage()
{
alert('Hello!')
//more code
}

You can then put a call - showmessage() - either after an event handler e g like this

<A HREF="URL"
onMouseOver="showmessage()">move the mouse pointer over this link to see a javascript alert</A>

or within SCRIPT tags and comment fields.

Here is another way of calling the same function:

<A HREF="javascript:showmessage()">click here to see a javascript alert</A>

EVENT HANDLERS:

onMouseOver
onMouseOut
onClick
onBlur
onFocus
onAbort
onSubmit
onUnload
onLoad

MORE EVENT HANDLERS
- (browser versions 4 and later)

onDblClick
onDragDrop
onKeyDown
onKeyPress
onKeyUp
onMouseDown
onMouseMove
onMouseUp
onMove
onResize

<NOSCRIPT> between these tags you can put e g a message that will be displayed only if the browser does not support JavaScript</NOSCRIPT>

Comments are written like this

//comment - single line

/* comments - several lines
comments - several lines*/

JavaScript is case sensitive - calling the function test1() will not lead to anything if the function you have defined is Test1().

BROWSER-DETECTING CODE

Code that will work in browsers that follow the w3 standard (e g Mozilla 1.6) can be put in an if-clause like this:

if(document.getElementById)
{
....
}

Code that will work only in Microsoft browsers from version 4 can be put in an if-clause like this:

if(document.all)
{
....
}

To check whether it is ok to use LAYERS (Netscape 4.x) you can use document.layers. Like this:

if(document.layers)
{
....
}

To check whether it is OK to swap images you can use:

if(document.images)
{
...
}

The following code checks whether the browser that is being used is Nescape Navigator 3 or later (in that case webbr is set to 1) or Microsofts Internet Explorer 4 or later (in that case webbr is set to 2).

Put the code in the HEAD portion of the document. Make sure there are carriage returns (new lines) only after red slashes - no carriage return between "Internet" and "Explorer" for instance:

webbr = 0 //
if((navigator.appName == "Netscape")&&(parseInt(navigator.appVersion)) >= 3)//
{ //
webbr = 1 //
} //
if((navigator.appName == "Microsoft Internet Explorer")&&(parseInt(navigator.appVersion)) >= 4) //
{//
webbr=2 //
} //

Add an if statement - for instance if(webbr==1) - wherever you use code that will work only with one of these browsers. For instance before code that opens different pages depending on what browser is being used. Like this:

if(webbr==1)
{
code that opens a page designed for Netscape browsers
}
if(webbr==2)
{
code that opens a page designed for Microsoft browsers
}

One way of checking whether it is ok to switch images is to use document.images. For instance like this:

function iljswtch2(nummer)
{
if(document.images)
{
document.switch16.src = bild[nummer].src
}
}

Page by

ilj@flowsim.se

Last modified May 6, 2004.

This page should be part of a frames system
at:
http://www.flowsim.se