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

今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号  第９号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  第20号
第21号  第22号  第23号  第24号  第25号  第26号  第27号  第28号  第29号  第30号
第31号  第32号  目次

プレーンテキスト版バックナンバー

今週＜第33号＞マガジンのおさらい

■ 関数

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

◆ 関数の定義

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

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

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

function myImage { 
    プログラムの記述
　　}

これは、myImage を関数として定義したものです。

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

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

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

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

関数のサンプル実行結果

■ 配列

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

◆ 配列を設定する

myBack = new Array(7)

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

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

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

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

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

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

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

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);
        }

配列のサンプル実行結果

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

■ 関数

■ 配列

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