そろそろ本気で学びませんか？

画面の一部を瞬時に切り替える方法

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要素をすべて読み込む」というのもイベントとして扱います。

詳しくイベントハンドラについて調べたい方は、イベントハンドラ一覧を参照願います。