JavaScript

Placing JavaScript in document

<HTML>
<HEAD>
<TITLE>Page title</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--

javascript code

//-->
</SCRIPT>
</BODY>
</HTML>

HTML comments are used to hide the JavaScript code from non-JavaScript browsers.

Placing JavaScript in an external file

<SCRIPT LANGUAGE="JAVASCRIPT" SRC="code.js" TYPE="TEXT/JAVASCRIPT">
<!--

//-->
</SCRIPT>

Examples

Text output

document.write("Hello World");

Form submission

  • document.myform.submit()

or

  • document.forms[0].submit()

If this doesn't work, check you haven't defined a form element with the name 'submit' ;-)

Alert Pop-Up

  • alert("Some message\nOn a new line with \"embedded quotes\"");

Confirmation

  • var response = confirm("Proceed?");

Input

  • prompt("Title", "Prompt");

Status bar

  • window.status="status message"
  • <a href="javascript:void(0)" onclick="alert('Message')">Dead link</a>

Set Focus

  • <body onLoad="onLoadInit();">

  • document.myform.myField.focus()

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" href="style.css">
<TITLE>Focus Example</TITLE>
</HEAD>
<BODY onLoad="setFocus();">
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
function setFocus() {
  document.myForm.field2.select();
  document.myForm.field2.focus();
}
//-->
</SCRIPT>
<FORM name="myForm" action="example.html" method="GET">
  <INPUT type="text" name="field1" value="example">
  <INPUT type="text" name="field2" value="example">
  <INPUT type="submit" value="submit">
</FORM>
</BODY>
</HTML>

Clear Input Field on Focus

  <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
  <!--
  function clearInput(text) {
    if (text.value == text.defaultValue) {
    text.value = "";
    }
  }
  //-->
  </SCRIPT>
  <input type="text" value="Search" onfocus="clearInput(this)">

Scroll Top

  • window.scroll(0,0);

Objects

Window

Properties

  • width
  • height
  • location
  • menubar
  • scrollbars
  • toolbar
  • directories
  • resizable
  • fullscreen (IE only)

Methods

  • Open
  • Close
  • Resize

Event handlers

  • <a href="http://www.fdsd.co.uk/" onmouseover="alert('Careful!')">

  • onmouseover
  • onmouseout
  • onclick

  • ondblclick

Multiple statements

<a href="http://www.fdsd.co.uk/" onmouseover="window.status='Test message'; document.bgColor='#FF00FF'">

Functions

<SCRIPT>
<!--
my_function() {
}
//-->
</SCRIPT>

Variable Initialisation

var my_var;

types

  • Number - integer or floating point
  • String

  • Boolean - true or false

  • Null - null

  • Undefined - undefined

Browser detection

  • navigator.appName
  • navigator.appVersion
  • navigator.appCodeName
  • navigator.platform

Date

  • var d = new Date();

Running JSLint from the Command Line

JSLint can be run from the command line using Rhino.

The following example assumes js.jar was installed as part of the rhino package on a Debian system and that jslint.js is in the current directory, otherwise, replace paths as necessary:

  $ java -cp /usr/share/java/js.jar org.mozilla.javascript.tools.shell.Main jslint.js myprogram.js

Emacs Mode

Resources

- - - Frank Dean - 05 Nov 2003