コース: HTML5 基本講座

今すぐコースを受講しましょう

今すぐ登録して、23,100件以上登録されている、業界エキスパート指導のコースを受講しましょう。

ランダムにメッセージを表示する

ランダムにメッセージを表示する

このレッスンでは JavaScript を使って Web ページを読み込むたびに ランダムで HTML に Message を表示する方法について学びます 画面ではブラウザで サンプルファイルの HTML を開いているところです 赤い枠の中に Message という テキストが表示されています この HTML を コードエディタで 開いてみましょう 先ほどと同じ HTML を コードエディタで 開いています 冒頭には 先ほどの Message という テキストを表示するエリアに対する スタイルが定義されており その下には body 要素があり h1 要素と script 要素があります h1 要素は先ほど表示されていた Message というテキストが 入っている見出しです script の中には message という変数と city という変数が それぞれ宣言されています ここでは これらの情報を使って Web ページを読み込むたびに ランダムで この Message と書かれたテキストが 変化するように 実装をしてみましょう まず 実際に HTML 上の テキストを変化させる前に Message をランダムで 出力できるようにしてみます console.log を使って ブラウザに ランダムで Message を表示してみましょう ここではすでに用意されている この2つの変数を使います まず固定のメッセージである message という変数に +記号で city という 配列の入った変数を指定します この city の配列の中に 4つの都市の名前が入っています この4つの都市のいずれかが ランダムにコンソールに 出力されるようにしてみましょう 配列の中の 特定の値を指定するには ブラケット [ ] で値を指定します 1番最初のアイテムを指定する場合は 数字の0 そこからひとつずつ 数値が増えていきますので ここで言う Graz を出力したい場合は 0, 1,2,3... 3を指定すると Graz が出力されます ここでは この0から3という値が ランダムに出力されれば よいことになります 実際に実装してみましょう 先に console.log の後ろの かっことセミコロンを 忘れないように入力しておきます それではこの配列のインデックス―…

目次