Webアプリの常識をJSPとStrutsで身につける
連載インデックスへ
 Webアプリの常識をJSPとStrutsで身につける（終）

JavaScript/Ajaxで知るWebアプリとスクリプトの常識


株式会社メセナ・ネットコム
竹下 靖久
2009/10/21
本連載は、JSP／サーブレット＋StrutsのWebアプリケーション開発を通じて、Java言語以外（PHPやASP.NET、Ruby on Railsなど）の開発にも通用するWebアプリケーション全般の広い知識・常識を身に付けるための連載です

いまさら聞けない、スクリプト入門


今回の主な内容

・いまさら聞けない、スクリプト入門
・JavaのWebアプリ開発でも必須の「JavaScript」
・JavaのWebアプリ開発でも採用が増えてきた「Ajax」
・JSP上でAjaxを使ってみよう
・Web開発で需要が増えるJavaとJavaScript/Ajaxの連携

　さまざまなWebアプリにおける常識を紹介してきた本連載も今回で最終回です。今回は番外編として、JSPとStrutsといったJavaの枠を超えて、Webアプリケーション開発におけるスクリプトの常識について説明していきます。

　「スクリプト」という言葉はよく耳にしますが、いったいどのようなものなのでしょうか？ 本記事ではスクリプト概念についての説明と、代表的なスクリプト言語であるJavaScriptについて説明し、最後にAjaxについても触れていきたいと思います。それぞれにJSPと連携するサンプルを提示しますので、ぜひご参考に。

■ スクリプトとは？

　スクリプト言語によってプログラミングされたプログラムをスクリプトと呼びます。一般的なプログラミング言語と同様の記述方法を取りますが、コンパイルを行い、コンピュータの理解できる機械語に変換して実行するプログラミング言語と異なり、機械語変換は自動的に行われるため、手間を掛けずに実行可能です。これは、ソースコードを逐次解釈しながら実行するインタプリタ方式を採用しているためです。

　また、Webページ上でHTMLだけでは表現できない処理・動作を実現するためのプログラムをスクリプトと呼ぶことが多いです。代表的なスクリプト言語にはJavaScript、Perl、PHP、ActionScriptなどがあります。

■ スクリプトを使う利点

  • メンテナンスが容易
    インタプリタ方式を採用しているため、再コンパイルやシステムの再起動が必要ない。つまり、プログラム修正がいつでも行える（スクリプト最大の利点といえる）
  • 習得が容易
    記述方法が比較的簡単で、基本的なプログラミングができる人であれば、すぐに扱える

■ スクリプトを使う問題点

  • 実行速度が遅い
    インタプリタ方式であるため、コンパイラ方式と比較すると、処理速度は劣る。大規模なプログラムには向かない

JavaのWebアプリ開発でも必須の「JavaScript」

　スクリプトがどのようなものか分かったところで、次は代表的なスクリプト言語であるJavaScriptについて説明していきます。いまやWebアプリケーション開発で必ず耳にするJavaScriptとは、いったいどのようなものなのでしょうか？

■ JavaScriptとは

　米ネットスケープコミュニケーションズが開発したスクリプト言語の1つです。静的な情報だけしか表示できないHTMLソースにJavaScriptを埋め込むことで、動的な情報の表示・制御ができます。つまり、HTMLのお手伝いをしてくれるのがJavaScriptです。名前に「Java」という文字がありますが、Javaとの相互性はなく、まったく別のものです。

　JavaScriptの詳細については、下記記事もご参照ください。

■ JavaScriptの特徴

  • 実行環境の広さ
    Internet ExplorerやFirefoxなどの主要Webブラウザにはスクリプト・エンジンが搭載されているため、特別な設定を行わずともJavaScriptの実行が可能（ただし、Webブラウザごとで動きが異なることも）
  • 作成が容易
    メモ帳などを使ってHTMLソースの中にJavaScriptを書き込むだけで使える。また、記述方法がJava言語やC/C++に似ているため、プログラミング経験があれば習得するコストが少なくて済む

■ JSPにJavaScriptを埋め込んでみよう

　それでは、JavaScriptを埋め込んだJSPファイルを作成してみましょう。作業環境は、連載第2回「Strutsの常識を知り、EclipseとTomcatの環境構築」で構築した環境を利用します。Who.jspを以下のように変更し、「BMI算出」サンプルを作成します。

　　Who.jsp 　 
<%@ page contentType="text/html; charset=Shift-JIS" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<html:html>
  <head>
    <title>Who</title>
    
    <script type="text/javascript">
        <!--
        //【1】始まり
        function bmiCalculation(form){
            height2 = form.height.value*form.height.value;    //身長（m）の2乗
            bmi = form.weight.value/height2         //体重÷身長の2乗
            bmi = Math.round(form.weight.value/height2);        //小数点以下四捨五入
            
            form.bmi.value = bmi;
            
        }
        //【1】終わり
        // -->
    </script>
    
  </head>
  <html:form action="/hello">
    <table border="0">
      <html:errors/>
      <tr><td>
        あなたの名前は？<br>
        <html:text property="name" size="20" maxlength="30" />です。
        
        <br>
        あなたの体重は？<br>
        <html:text property="weight" size="20" maxlength="30" />kgです。<br>
        
        あなたの身長は？<br>
        <html:text property="height" size="20" maxlength="30" />mです。<br>
        
        <br>
 
        <html:button property="button" value="BMI算出" onclick="bmiCalculation(form)"/><!-- 【2】 -->
        <br>
        あなたのBMIは<html:text property="bmi" size="20" maxlength="30" />です。
        
      </td></tr>
      <tr><td>
        <html:submit value="OK" />
      </td></tr>
    </table>
  </html:form>
</html:html>

　上記サンプルプログラムは、入力された体重と身長を基にBMI（体重指数）を算出し、ダイアログで結果を表示するJavaScriptを組み込んだJSPファイルです。

補足：JavaScript未対応ブラウザへの配慮としてJavaScriptは「<!--〜//-->」でコメントアウトしてください

　赤枠【1】をご覧ください。この部分がJavaScriptです。JavaScriptは、通常<script>タグで囲んで記述します。赤枠【2】の<input>タグにある。onclickというコード、これをイベントハンドラといい、ページ上でどのように操作するとJavaScriptを実行するかを指定するものです。この場合、算出ボタンをクリックすると、赤枠【1】のJavaScriptを実行します。

■ JavaScriptイベントハンドラはいろいろ

　ちなみに、イベントハンドラはonclick以外にもさまざまなものが用意されています。

表　イベントハンドラ一覧（抜粋）
イベントハンドラ JavaScliptが実行されるタイミング
onclick クリックされたとき
ondbclick ダブルクリックされたとき
onkeydown キーが押されたとき
onkeypress キーがしばらく押されたとき
onkeyup 押されたキーが離れたとき
onmousedown マウスボタンが押されたとき
onmouseup マウスボタンが離されたとき
onmouseover マウスカーソルがそのオブジェクトの上に乗ったとき
onmouseout マウスカーソルがそのオブジェクトの上から離れたとき
onmousemove マウスカーソルが移動したとき
onload ページが読み込まれたとき
onunload ほかのページに移動するとき
onload ページが読み込まれたとき
onfocus フォーカスを得たとき
onsubmit フォームがサブミットされたとき
onreset フォームがリセットされたとき
oncheange フォーム部品の内容が変更されたとき
onresize ウィンドウがリサイズされたとき
onmove ウィンドウが移動されたとき
ondragdrop ファイルがウィンドウにドラッグ＆ドロップされたとき

　次ページでは、実際にサンプルを動かしてみます。その前に、helloForm.javaとHello.jspを変更しますが、この2ファイルについては、説明を省きます。確認したい方は、サンプルのソースコードをここからダウンロードしてください。

 
1-2-3

　Index
最終回　JavaScript/Ajaxで知るWebアプリとスクリプトの常識
Page1
いまさら聞けない、スクリプト入門
JavaのWebアプリ開発でも必須の「JavaScript」
  Page2
JavaのWebアプリ開発でも採用が増えてきた「Ajax」
JSP上でAjaxを使ってみよう
  Page3
Web開発で需要が増えるJavaとJavaScript/Ajaxの連携

Webアプリの常識をJSPとStrutsで身につける バックナンバー 連載インデックスへ»



Java Solution全記事一覧

TechTargetジャパン

Java Solution フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH