配列を使って数字や文字を表示する

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

前回は、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入門」にまとめてあります。よろしければご覧ください。

A8 JavaScript

おまけ

JavaScriptを一人で勉強していてわからないことがあれば、teratailで質問することをおすすめします。

プログラミングに特化したYahoo!知恵袋のようなサイトです。

超・初心者のぼくにも優しく教えてくれました。

とても感謝しています。

関連記事コンテンツ



シェアする

  • このエントリーをはてなブックマークに追加

フォローする

自己紹介

あーりーと申します。アクセスありがとうございます。布団でぬくぬくしながら本を読んだりスマホでテレビを見たり、のんびり過ごすのが好きです。

ブログ村

ブログランキング・にほんブログ村へ

グロースファクター 毛髪再生