そろそろ本気で学びませんか?
![](https://thinkit.co.jp/sites/default/files/styles/main_image_730x/public/main_images/72_main_7.png?itok=BdPjWUHY)
画面の一部を瞬時に切り替える方法
JavaScriptを勉強したいけど、プログラム構造がよく分からなくて、なんとなく使っている人は多いのではないかと思います。市販の本やWebサイトにはJavaScriptのサンプルがたくさん載っているので、必要なところをコピー&ペーストしてしまうと、JavaScriptの文法が分からなくても動いてしまいます。
しかし、このような使い方をしていると、JavaScriptサンプルを少しだけ修正したいという時に対応できなくなります。これでは「JavaScriptを使える」とは言えませんよね。
そこで、本連載では、JavaScriptをもう一度やり直したい方々のために、勉強の切り口を変えて紹介していきましょう。
最初のトピックでは、JavaScriptを使ってHTMLのコンテンツを入れ替える方法について紹介してます。この技術は、最近話題になっているAjaxのベースとなる知識にもなるので、楽しく学んでほしいと思います。
まずは、今回最終的に作りたい「画面の一部を瞬時に切り替える方法」のサンプルプログラムを動画で見てみましょう。
サンプルファイルはこちらからダウンロードできます。
イベント処理でJavaScript呼び出し
サンプルファイルのプログラムを見ると、マウスでクリックした時に、コンテンツ内容や、文字の色や大きさが変化しているのを確認できたと思います。こういった動作を開始させるための引き金を「イベント」と言います。
今回のサンプルでは、「マウスでクリック(click)」というイベントを感知して、JavaScirptが実行される仕組みになっています。
では、どのようにして、イベントを感知するのでしょうか。HTMLとJavaScriptの橋渡しになる役割を演じているのが、イベントハンドラというものです。
具体的に書きますと、「JavaScriptとは」というリンクの部分には、「JavaScriptとは」というタグが入っています。
ここに書いてある「onclick」が、イベントハンドラと呼ばれるもので、マウスでクリックされるのを感知したら、イコールの右辺に書いてあるJavaScriptを実行します。JavaScriptは、ダブルクオーテーション(")、または、シングルクオーテーション(')でくくります。
onclickで指定したJavaScriptは、showText()です。showText()は、関数と呼ばれるもので、一連の動作をまとめたものです。
showText()という関数が呼び出されると、「タイトル表示領域」「説明文表示領域」「参考URL表示領域」のコンテンツをJavaScriptで書き換えます。
まずは、この部分の動作だけをindex1.htmlで確認してみましょう。
リンクのa要素のhref属性に「javascript:void(0)」と記述していますが、これは、リンクを無効にするために用います。
HTMLの中を見ていただくと、もう1カ所イベントハンドラを設定しているところが「
」です。body要素にonloadというイベントハンドラを設定していますが、これは、body要素をすべて読み込んだ時に、init()というJavaScriptを実行してくださいと指定しています。「body要素をすべて読み込む」というのもイベントとして扱います。
詳しくイベントハンドラについて調べたい方は、イベントハンドラ一覧を参照願います。