HTML入門トレーニング

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

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webページを読み込む度にランダムでメッセージを表示する方法について学びます。
講師:
10:16

字幕

このレッスンでは 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 の後ろの かっことセミコロンを 忘れないように入力しておきます それではこの配列のインデックス― 順番を取得するためのコードを書きます JavaScript でランダムな数値を得るためには Math.random() このような関数を利用します 関数とは何なのか 詳しい説明は ここでは省きますが Javascript では あらかじめ用意されている Math.random() この命令を使うことで 0から1 未満の ランダムな数値を 小数点付きで 得ることができます ただし ここで取得できるのは 小数点付きの数値ですので そのままこの配列のインデックス 順番を得るためには適していません これを少し加工してみましょう 同じように Math.floor という 関数があります これは小数点を切り捨てるための関数です この関数で Math.random を囲い さらにその内側で 取得したい数値の 1つ大きい数値を 掛け算すると これで 0から3の ランダムな数値を 得ることができます ここでは詳しい計算の処理内容については 詳細な説明を省きますが この式で 0から3の ランダムな値が取得できる そういう風にお考えください 実際にブラウザで確認してみましょう いったん保存し ブラウザに切り替え コンソールを表示します 現在は Chrome を使っていますので 右上のメニューボタンから [その他のツール] [JavaScript コンソール] を開くとコンソールが開きます Internet Explorer をお使いの方は 開発者ツール Firefox をお使いの方は 同じように Developer ツールで コンソールを開くことができます コンソールを開き 再読み込みすると hi from London という文字が コンソールに出力されていることを 確認できます 何度か再読み込みしてみましょう Message の内容が 変わっていることが確認できます このように あらかじめ用意された 4つの都市名の中から いずれかがランダムで 出力されるような仕組みが 実装できました それでは実際に この Message を HTMLに適用するように 実装していきます コードエディタに戻ります ここではこの console.log の 内側で欲しい値 “hi from” “いずれかの都市名” という Message が取得できていますので この Message を使います そして HTML に対して 値を適用するためには このように書きます まずHTML全体を示す document と書き ドットを書きます さらに ここでは 見出し h1 に対して “heading” という ID が あらかじめ付けられていますので この ID を利用します JavaScript から 特定の ID を持つ 要素を 取得するためには getElementById という 関数が使えます この関数のカッコの中に ダブルクォーテーション (“ ”) で囲って 取得したい要素の ID 属性の名前を このように入力します そしてさらにドットでつないで .innerHTML この innerHTML という プロパティを使うと この “heading”という ID を持つ要素の HTML の中身を書き換える という命令が書けます ここでは すでに記述している この console.log の中身に 書き換えたいので この console.log の中身をカットし 後ろにペーストします 最後にセミコロンを付けるのを 忘れないでください 不要になった console.log は削除し ちょっと見やすいように イコールの後ろを改行しておきます このように JavaScript では 命令の途中で改行しても 最後をセミコロンで終わらせておけば それは1行として扱われます これでランダムな Message が “heading” という ID を持つ要素の 中の HTML に 出力されるようになりました ここで保存して ブラウザをリロードします しかし エラーが出ているようです これは どういうことでしょうか? 再度コードエディタに戻ります ここでは script 要素は h1 要素よりも 上に書かれています body 要素の中に書かれた script は 上から順番に実行されますので この script が 実行されるタイミングでは heading という ID を持つ要素は 取得できない― つまり 実行のタイミングによるもの ということがわかります そのため この script 要素の順番を h1 要素の後ろにして保存 ブラウザをリロードしてみると エラーメッセージが出ず 実際に HTML に Message が出力されました コンソールを閉じて 何度かリロードすると 都市の名前の部分が ランダムに変わっていることがわかります これで概ねの実装は問題ありませんが もっと最適化ができます ここでは body 要素の中で script 要素が出現する順番を変えましたが JavaScript を書くことによって この Web ページにある 全ての要素の 準備が整った状態で実行する という命令を書くことができます 実際に書いてみましょう window.onload = function() そして 中カッコ この中カッコの中に 実行したい命令を入れて JavaScript を実行すると この HTML の中の 全ての要素の準備が整った状態で 初めてこの JavaScript が 実行されるように設定できます 保存し ブラウザに切り替えて リロードすると やはり 問題なく動作していますね そして この script 要素の 順番を 上にしても 同じように 問題なく 動作していることがわかります このレッスンでは JavaScript を使って Web ページを読み込むたびに ランダムで HTML に Message を表示する方法について 学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。