More JavaScript

More JavaScript Language Features

Note that many of these features will be moved out to different pages in due course, and others will take their place. This page is just a temporary holder.

Link Events

JavaScript is sent a link event whenever you move your cursor over a link (onMouseOver), or click on a link (onClick). For example:

Click here! Mouse over this link!


<a href="#" onClick="alert('Thank you for clicking on me.');">Click here!</a>

<a href="#" onMouseOver="alert('Thank you for mousing over');">Mouse over this link!</a>

Browsers automatically interpret anything inside the quotes of an onClick or an onMouseOver as JavaScript, so there's no need for <script> tags. You can put a whole program in there if you want., using semicolons as statement delimiters. The JavaSript is executes when you click or mouse over, as appropriate.

The "#" is used in the anchor to prevent the browser from trying to load another page.

A common use for mouseovers is rollovers

Quotes

You can single or double quotes interchangeably, but when nesting quotes, one kind should be within the other. So, you can have: "alert('Thank you for clicking on me.');" or 'alert("Thank you for clicking on me.");' but not "alert("Thank you for clicking on me.");" or "alert('Thank you for clicking on me.");'.

Statements

Statements end in a semicolon.

writeln()

document.writeln() is used to write text and HTML to a Web page.

Opening Windows

In HTML. we use <a href="new_contents.html" target="my_new_window"> to open a new window with the name "my_new_window". If the window is still open, another href using the same target name will open another HTML page in the same window. With javaScript, however, you can control various features of the window.

window.open("URL","name","parameters"); opens a window called "name", just like in HTML.

<a href="#" onClick="window.open('new_contents.html','my_new_window'); return false;">This window is called my_new_window</a> achieves the same as the HTML above, placing the contents of new_contents.html into a window called 'my_new_window'. The parameters, which are optional, havebeen left out, so the window has a standard appearance.

<a href="#" onClick="window.open('different_contents.html','my_new_window'); return false;">Here are some different contents going int my_new_window</a> replaces the contents in my_new_window.

If you specify one or more parameters, then only those features of the window that you specify will appear. You specify them as a comma separated list. The open statement should be all one one line with no spaces. The possible list of features is as follows:

menubar (i.e. file, edit, etc.)
status (the messages that appear at the bottom of the window, including marquees)
scrollbars - let's them appear when necessary
resizable - let's the user resize the window
width (of window in pixels)
height (of window in pixels)
toolbar (e.g. Back, Forward, Stop, Home buttons)
location (the area in which URLs can be typed)
directories (e.g. "What's new")

Use the following code to open a simple sized window:


function sizedWindow()

{

  sized_window = 

    window.open("JSMenu.html","sized","width=60,height=60");

}

and


<a href="#" onClick="sizedWindow();">A small, plain window</a>

Use the following code to open a resizable window placed in a particular location:


function placedWindow()

{

  placed_window = window.open("JSMenu.html","placed","location,resizable");

}

and


<a href="#" onClick="placedWindow();">A resizable window placed in a particular location.</a>

If you want most of the features, you can list those you don't want, rather than those you do, for example:


function excludeWindow()

{

  exclude_window = window.open("JSMenu.html","location=no,status=no");

}