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

2008年5月13日(火)
須田 超一

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

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

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

株式会社ITコア R&Dグループリーダー/有限会社グローバルイーネットワーク 代表取締役

有限会社グローバルイーネットワーク代表取締役。ITコアでは、クラウドサービスやオープンソースの研究開発に従事。株式会社東芝で半導体メモリの開発やシステム開発を経験後、南カリフォルニア大学やボンド大学のビジネススクールで経営学を学びMBA取得。
ITと経営戦略を武器にして、多方面で事業活動を展開中。 2011年は、バルーンアート事業を立ち上げます。デジタルハリウッド講師(PHP/Ajax)。 アメブロはこちら

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています