上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 補足編、第2回目です。
 スクリプトが使えるようになってくると、たくさんのデータを扱いたくなってきます。
 例えば、「ランダム」で表示させる画像を100枚作って、「1/100」の確率でどれかを表示したいとか。24時間、一時間おきに24枚の画像を時間帯別に表示したいとか。
 そんな時、変数に連番を付けれれば、データ管理が楽になるかも知れません。この機能がJavaスクリプトには用意されていて、これを「配列」と言います。




配列の作り方



renban = new Array("赤","青","黄");

 こんな風に書きます。
 この場合、「変数renban」の中に、「0.赤」「1.青」「2.黄」という連番でデータが入りました。例えば、連番1番の「青」のデータは、

変数[1]
renban[1]

 の中に入ります。

 つまりこの場合は、「変数[0]~変数[2]」と言う「連番付きの変数」が出来るわけです。
連番は、必ず「0」から始まります。



データが大きいときは、直接連番に代入

 「newArray(0個目のデータ , 1個目のデータ , 2個目のデータ , 3個目のデータ , …………)」と書いていくわけですが、例えばこの「連番付きの変数」の一つ一つのデータが大きい場合、なんかこう言う書き方をすると訳が分からなくなりそうですよね。
 また、連番の数値も考慮してスクリプトをかっちり組まなければならない場合は、連番の数とデータをきっちり合わせておかないとならないかも知れません。
 そんな場合は、「連番付きの変数」に直接データを代入することが出来ます。

renban = new Array();

renban[0] = "あいうえお";
renban[1] = "かきくけこ";
renban[2] = "さしすせそ";
renban[3] = "たちつてと";
renban[4] = "なにぬねの";

 こんな感じです。




連番が何個あるか調べる



a = renban.length;

 これで、「変数a」に、連番の数が何個あるかを返します。連番の最終番号ではなく、連番の「個数」であることに注意してください。

 例えば、以下のように配列を組んだとき、連番の個数は…
renban = new Array();

renban[0] = "あいうえお";
renban[1] = "かきくけこ";
renban[2] = "さしすせそ";
renban[3] = "たちつてと";
renban[4] = "なにぬねの";

 連番の終了番号「4」ではなく、連番の個数である「5」が返されます。




連番の中にさらに連番を作る



 最初に作った「連番変数」の中に、データをそれぞれ入れていきましたが、その「連番変数」に入れるデータ自体にさらに「配列」を入れることが出来ます。

renban = new Array();

renban[0] = new Array("あ","い","う","え","お");
renban[1] = new Array("か","き","く","け","こ");
renban[2] = new Array("さ","し","す","せ","そ");
renban[3] = new Array("た","ち","つ","て","と");
renban[4] = new Array("な","に","ぬ","ね","の");

 この場合、例えば「ち」は「renban[3][1]」に入っています。

 例えば、「renban[0][0]」縦のデータ軸をランダムで、「renban[0][0]」横のデータ軸を曜日別に…なんて感じでデータを取得することも出来ます。(次の章を参照してください)





使い道



 この「配列」ですが、データの整理以外に一体何に使えるかというと、例えば「if文」を省略する事が出来ます。いちいち「もし1の目が出たら、これを表示する。でなければこれを…、これを…………」と今までは分岐させていましたが、変数自体に連番が付いていることで「2の目が出たら、連番「2」が表示される」と言う風に表示させることが出来ます。

 言葉で説明するのはややこしいので、以下のサンプルを確認してみてください。

<div id="test"></div>
<script type="text/javascript"><!--
//配列の設定
renban = new Array();

renban[0] = "あいうえお";
renban[1] = "かきくけこ";
renban[2] = "さしすせそ";
renban[3] = "たちつてと";
renban[4] = "なにぬねの";

//乱数で「0~4」を発生させ「変数a」に代入
a = Math.floor(Math.random()*5);

//「連番変数renban」の「変数a番」を表示させる
document.getElementById("test").innerHTML=renban[a];
//--></script>

 これで、出た目そのものの連番番号のデータを直接表示します。「IF文」でわざわざ分岐して表示させる必要がなくなったわけです。

■サンプルを動かしてみる





このエントリーをはてなブックマークに追加
Sun.03.27.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。