新JavaScript入門 1 はじめのいっぽ

上では、ONCLICK に直接コードを書きましたが、ふつうはそこにはサブルーチン（関数オブジェクト）の呼び出しだけ書いておき、サブルーチン自体はHTMLのHEAD部に書いておきます。

    <HTML>
    <HEAD>
        ...
    <SCRIPT LANGUAGE="JavaScript">
    //サブルーチンはここに記述
    function increment(obj) {
        var i = obj.value - 0;   //ボタンの表示文字列を整数に
        i++;
        if(i < 10)
            obj.value = "0" + i;
        else
            obj.value = i;
    }
    </SCRIPT>
    </HEAD>
    <BODY>
        ...
    <INPUT TYPE="button" VALUE="00" ONCLICK="increment(this)">
        ...
    </BODY>
    </HTML>

このようにイベントが起きたとき以外に、ページがロードされるときにも<SCRIPT>タグの中の JavaScript が順次実行されます。

    <SCRIPT LANGUAGE="JavaScript">
    var a = 1;
    
    function increment(obj) {
        ...
    }
    </SCRIPT>

上の例では、変数 a が宣言され1で初期化されています。そして、increment という関数オブジェクトが定義されます（その他の例はページを作るを参照）。
次のようなコードは避けましょう。

    <SCRIPT LANGUAGE="JavaScript">
    var a = document.forms[0].elements[0].value;
    </SCRIPT>

このコードは、最初の form の最初の要素（ボタンなど）の value プロパティを見にいっていますが、このコードが実行されているときにはまだこの要素が記述されている部分がロードされていない可能性があり、その場合エラーとなります。
この場合は次のように書くのが普通です。

    <SCRIPT LANGUAGE="JavaScript">
    var a;
    
    function init() {
        a = document.forms[0].elements[0].value;
    }
    
    window.onload = init;
    </SCRIPT>

a という変数が宣言され、init という関数オブジェクトが定義され、 window オブジェクトがロードされたときに実行されるコードが init とされます。そして、このページがロードされ終わったときに、init が実行されます。
ここで初学者が間違えやすいのは、

    window.onload = init;

を、

    window.onload = init();

や、

    window.onload = "init()";

と書いてしまうことです。ここではあくまで関数オブジェクト（へのアドレス）を代入します。
関数オブジェクト init を定義せずに次のように直接書くこともできます。

    window.onload = function() {
            a = document.forms[0].elements[0].value;
    }

ここでよくある例を挙げておきます。ソースを参照してください。もう一つ注意しなければならないのは、 JavaScript のソースを外部から読み込んでいるときでしょう。
例えば、次のような HTML のソースがあったとして、

    <HTML>
    <HEAD>
        ...
    <SCRIPT LANGUAGE="JavaScript"
            TYPE="text/javascript" SRC="ex1.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
    window.onload = display_date2;
    </SCRIPT>
        ...

ex1.js が読み込む外部ファイルで、

    function display_date2() {
        ...
    }

と display_date2 が定義されています。
これだと、

    window.onload = display_date2;

が実行されるときに、まだ外部ファイルが読み込まれておらず、 display_date2 が未定義になる可能性があります。
このような場合は、display_date2が定義されるまで待てばよいでしょう。

        ...
    <SCRIPT LANGUAGE="JavaScript"
            TYPE="text/javascript" SRC="ex1.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
    function wait() {
        if(display_date2)
            if(document.piyo)
                if(document.piyo.can) {
                    display_date2();
                    return
                }
        setTimeout("wait()", 200);
    }
    
    wait();
    </SCRIPT>
        ...

document.piyo.can が定義されるのも待って display_date2を実行します。ちょっとややこしいですが、とにかく何かがロードされていない可能性があることを考えておきましょう。