JavaScript

JavaScript

Inline JavaScript

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <script type="text/javascript">
      <!--
          /* javascript code */
          alert("Hello world!");
          //-->
    </script>
  </body>
</html>

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

External JavaScript

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Hello World</title>
    <script type="text/javascript" src="code.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      <!--
          myAlert("Hello world!");
          //-->
    </script>
  </body>
</html>


$ cat code.js
function myAlert(message) {
    alert(message);
}

Examples

Text output

document.write("<p>Hello World!</p>");

Form submission

document.myform.submit()

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"

Note: This no longer works with most browsers for security reasons.

-- Frank Dean - 7 Dec 2011

Dead Link

<a href="javascript:void(0)" onclick="alert('Message')">Dead link</a>

Set Focus

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
        PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Form Focus Example</title>
    </head>
    <body onload="setFocus();">
        <script type="text/javascript">
            <!--
                function setFocus() {
                    f = document.getElementById('field2');
                    f.select();
                    f.focus();
                }
            //-->
        </script>
        <form id="myForm" action="example.html" method="post">
            <p>
                <input type="text" name="field1" value="example1"/>
                <input id="field2" type="text" name="field2" value="example2"/>
                <input type="submit" value="submit"/>
            </p>
        </form>
    </body>
</html>

Clear Input Field on Focus

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Clear Input Field Example</title>
    </head>
    <body>
        <script type="text/javascript">
            <!--
                function clearInput(text) {
                    if (text.value == text.defaultValue) {
                        text.value = "";
                    }
                }
            //-->
        </script>
        <form id="myForm" action="example.html" method="post">
            <p>
                <label>Field1:
                    <input type="text" name="field1" value="example1"/>
                </label>
                <label>Field2:
                    <input type="text" name="field2" value="enter value:"
                        onfocus="clearInput(this)"/>
                </label>
                <input type="submit" value="submit"/>
            </p>
        </form>
    </body>
</html>

Scroll Top

window.scroll(0,0);

Objects

document

https://developer.mozilla.org/en/DOM/document

window

https://developer.mozilla.org/en/DOM/window

Properties

Methods

Event handlers

https://developer.mozilla.org/en/DOM/element#Event_Handlers

<a href="http://www.fdsd.co.uk/" onmouseover="alert('HelloWorld!')">Mouse over me</a>

Multiple statements

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

Functions

https://developer.mozilla.org/en/JavaScript/Guide/Functions

<script type="text/javascript">
    <!--
        function myFunction(param1) {
        }
    //-->
</script>

Variable Initialisation

https://developer.mozilla.org/en/JavaScript/Guide/Values%2C_Variables%2C_and_Literals

var my_var;

var MyApp = {};
MyApp.value = 0;

MyApp.myFunction = function(param1) {
    // MyApp.MyFunction(param1);
}

types

Number - integer or floating point
String
Boolean - true or false
null - null
undefined
Object
function

Browser detection

https://developer.mozilla.org/en/DOM/window.navigator

navigator.appCodeName
navigator.appName
navigator.appVersion
navigator.cookeEnabled
navigator.language
navigator.platform
navigator.userAgent

Date

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date

var d = new Date();

Closures

https://developer.mozilla.org/en/JavaScript/Guide/Closures

function makeWorld() {
    var msg = "Hello World!";
    var now = new Date();
    function displayMessage() {
        alert(msg + "\n" + now);
    }
    return displayMessage;
}

var world = makeWorld();
world();
world();

The value displayed when world() is called, will show the time that the object was created (in var world = makeWorld()) and not the time that the alert is displayed. I.e. if the user waits some time before causing the second call to world() the time displayed will be the same as the first call.

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

Best Practices

Style Guide

Style guide

Miscellaneous

Babel - a compiler for writing next generation JavaScript

Resources

-- Frank Dean - 05 Nov 2003 -- Frank Dean - 7 Dec 2011

Related Topics: DevelopmentSetup