初心者のためのホームページ作り 第33号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

今週<第33号>マガジンのおさらい

                  毎週金曜日配信 What's New 2002/12/27
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題 ■ JavaScript講座 第4回

関数

頻繁に利用するスクリプトは、あらかじめ関数を定義することによって、何度でも呼び出して実行させることができます。

関数の定義

関数には2つの種類があります。

1つは、「ビルトイン関数」と呼ばれるもので、3つの形が定義されています。

もう1つは、関数を自由に定義する「ファンクション」と呼ばれるものです。

function myImage { 
    プログラムの記述
  }
これは、myImage を関数として定義したものです。

関数名は、JavaScriptで予約された名称以外で自由に設定することができます。

下記のスクリプトは、画像をクリックしたら、別の画像に入れ替わる関数を示したものです。

var num = 0;
function myImage()
{
   num++;
   num %=8;
   document.banIMG.src= "num + ".jpg";
}

ただし、関数を記述したスクリプトは、HTML文に読み込まれても、すぐに実行するわけではなく、関数が呼ばれたときに実行するものです。

関数のサンプル実行結果

配列

配列とは、変数に代入する値をまとめて複数設定することを指します。通常、変数に代入する値は、1つだけですが、配列を宣言することによって、幾つでも代入させることが可能になります。

配列を設定する

myBack = new Array(7)

new は配列を定義する演算して、Array というオブジェクトを作成して共に使用します。ここでは myBack という変数に7つの配列を宣言しています。

分かりやすく説明しますと、myBack という変数に7つの箱が用意され、それぞれに値を読み込むことができるわけです。箱は0から6までの合計7つという順番になります。

これは下記のへたくそな図は、配列の設定で色コードを7つの箱に代入するイメージを示したものです。

配列の代入を解説する図 それぞれの箱の中に値を代入する場合、変数に付記して [ ] の中に番号を決めて、どの箱に入れるのかを指定する必要があります。

myBack[0] の値は、0番の箱に代入されます。以下指定された順に、箱の中に値を入れていきます。

コンピューターにおける数字の数え方は、必ず0から始まります。

以下は、関数と組み合わせた背景色を2秒毎に変化させるスクリプトです。

myBack= new Array();
myBack[0]="#ffffcc";
myBack[1]="#ccffff";
myBack[2]="#ffccff";
myBack[3]="#ccccff";
myBack[4]="#cccccc";
myBack[5]="#ccffcc";
myBack[6]="#ffcccc";
my_time=1; n=0; cnt=0;

function my_bgcolor()
        {
         document.bgColor=myBack[cnt];
         cnt++;
         if(cnt>=myBack.length)cnt=0;
         clearTimeout(n);
         n=setTimeout('my_bgcolor();',my_time*2000);
        }

配列のサンプル実行結果



Copyright(C) 2002-2003 banban@scollabo.com