あーりーです。
前回は、JavaScriptの配列の基本について書きました。
今回は、配列を使って実際に何かやってみようと思います。
数字を表示してみよう
配列に数字を代入して、それをブラウザで表示してみることにします。
サンプルは、こちらです。
↓
<html>
<head>
</head>
<body>
<script>
var abc=[100,200,300];
document.write(abc[1]);
</script>
</body>
</html>
※JavaScriptがメインなので、HTMLの部分は究極にあっさりと書いています。
緑色の部分がJavaScriptです。
ブラウザに「200」と表示される
上の内容をメモ帳などのエディタにコピペして、HTML形式で保存します。
保存したファイルをダブルクリックなどで開くと…
ブラウザに「200」と表示されます。
解説
では…
どういう仕組みで「200」と表示されるのか、1行ずつ見ていきましょ～。
配列に数字を代入
まず、この部分。
var abc=[100,200,300];
これが配列です。
「abc」という配列に、数字の「100」、「200」、「300」が代入されています。
分解して考えると…
この配列を分解して考えると、以下のようになります。
変数abc[0]に、数字の「100」が代入されている。
変数abc[1]に、数字の「200」が代入されている。
変数abc[2]に、数字の「300」が代入されている。
ブラウザに表示
ブラウザに数字を表示させているのは、この部分です。
document.write(abc[1]);
これは「ブラウザの画面に abc[1] を表示させる」という意味です。
abc[1]の中身は、「200」という数字でした。
だから、ブラウザの画面上には「200」が表示されます。
ちなみに「document.write();」について詳しくは「JavaScriptで文字を表示する方法」をご覧ください。
以上が、配列を使って数字を表示する方法です。
つぎは、文字を表示してみましょう。
文字を表示してみよう
配列を使って文字を表示させるサンプルは、こちらです。
<html>
<head>
</head>
<body>
<script>
var abc=["信長","秀吉","家康"];
document.write(abc[2]);
</script>
</body>
</html>
緑色の部分がJavaScriptです。
ブラウザに「家康」と表示される
上の内容をメモ帳などのエディタにコピペして、HTML形式で保存します。
保存したファイルをダブルクリックなどで開くと…
ブラウザに「家康」と表示されます。
解説
では、どんな仕組みで「家康」と表示されるのか、見ていきましょう。
さっきの数字のときと、ほぼ同じです。
ひとつ違うのは、ダブルクォートを使うことです。
ダブルクォート
文字をあつかうときは、数字と違ってダブルクォートで囲みます。
赤い部分がダブルクォートです。
var abc=["信長","秀吉","家康"];
これによって、「abc」という配列に「信長」、「秀吉」、「家康」という文字が代入されます。
分解して考えると…
この配列を分解して考えると、以下のようになります。
変数abc[0]に、「信長」という文字が代入されている。
変数abc[1]に、「秀吉」という文字が代入されている。
変数abc[2]に、「家康」という文字が代入されている。
ブラウザに表示
ブラウザに「家康」という文字を表示させているのは、この部分です。
document.write(abc[2]);
これは「ブラウザの画面に abc[2] を表示させる」という意味です。
abc[2]の中身は、「家康」でした。
だから、ブラウザの画面上には「家康」と表示されます。
表示する文字を変えるには
abc[2]のカッコ内の文字のことを、インデックスといいます。
↑
この場合、インデックスは2です。
インデックスを変えると、表示される文字が変わります。
たとえば、abc[2] を abc[0]にすると…
画面には「信長」と表示されます。
なぜなら…
abc[0]には、「信長」という文字が代入されているからです。
次回予告
インデックスが変われば、表示される文字が変わります。
つまり…
インデックスがランダムに決まるようにすれば、ブラウザを開くたびにランダムな文字が表示される、というわけです。
次回はそれをやってみますね。
追記
次回の記事はこちらです。⇒「JavaScriptで文字をランダムに表示する方法」
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
