トップページ -> 研究道具箱と教材 -> JavaScript と JQuery による Web プログラミング -> Eclipse を用いて JavaScript, JQuery を使う Web アプリケーションを実行してみる (VJET 無し)
[サイトマップへ]  

Eclipse を用いて JavaScript, JQuery を使う Web アプリケーションを実行してみる (VJET 無し)

Eclipse JSDT は,HTML ファイルの中に JavaScript プログラムを書くときに便利な開発環境.  Eclipse で JavaScript のプログラムを実行してみます

この Web ページで行うこと


前準備

下記のソフトウエアをすべてインストールする。


Web Development Tools, JSDT のインストール

  1. Eclipse の起動 (Start Eclipse)

  2. 「新規ソフトウェアのインストール」の開始 (Install New Software ...)

    ヘルプ (Help)」メニュー → 「新規ソフトウェアのインストール (Install New Software ...) 」 を選ぶ

  3. 作業対象として「--すべての使用可能なサイト-- (--All Available Sites--)」を選ぶ

    ■ Eclipse 4.4 の場合の実行例

  4. Web, XML, Java EE および OSGi エンタープライズ開発 (Web, XML, Java EE and OSGi Enterprise Development)」を展開

  5. 必要なパッケージをチェックし、「次へ (Next)」をクリック

  6. インストールされるパッケージの確認

    確認の後、「次へ (Next)」をクリック

  7. ライセンス条項の確認

  8. インストールが始まる

  9. Eclipse の再起動


静的 Web プロジェクトの新規作成

  1. (オプション)テキストファイルエンコーディングの確認

  2. 新規の静的 Web プロジェクトを作成したいので「File (ファイル)」→「New (新規)」→「Project (プロジェクト)」と操作する.

  3. Static Web Project (静的 Web プロジェクト) を選ぶ

  4. プロジェクト名の設定

    静的 Web プロジェクト名は好きにつけて良いが,全角文字は避ける.分かりやすい名前が良い. ここでは,例として,次のように指定する.

  5. オプションの設定

    既定のままでよい。「Finish (完了)」をクリック.

  6. (オプション) 「Web パースペクティブに関連付けるか」の確認表示が出る場合がある

  7. いま作成した 静的 Web プロジェクトが,プロジェクト・エクスプローラーウインドウに表示される

  8. 試しに index.html を作成してみる
    1. いま作成した 静的 Web プロジェクトの 「WebContent」を右クリックし、 「New (新規)」→「HTML File (HTML ファイル)」と操作する.

    2. ファイル名を index.html のように設定する

    3. テンプレートを選ぶ

    4. ファイルが作成される


JavaScript ファイルの新規作成

  1. 今度は、 「WebContent」を右クリックし、 「New (新規)」→「Other (その他)」と操作する.

  2. JavaScript を展開し「JavaScript Source File (JavaScript ソース・ファイル)」を選ぶ

  3. JavaScript ファイル名の設定

  4. 先ほどの index.html を編集し、いま作成した JavaScript を使うように書き換える

    ウインドウがエディタになっている。 編集が終わったら、<コントロールキー>+「S」(同時押し)で保存する.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    
    <script type="text/javascript" src="main.js"></script>
     
    </body>
    </html>
    

  5. 今度は、main.js (JavaScript ファイル) を編集する.

    次のようなプログラムを書いてみる

    編集が終わったら、<コントロールキー>+「S」(同時押し)で保存する.

    document.write("Hello, World!");
    


Web ブラウザでの表示

  1. 実行したいので、index.html を右クリックし、「実行 (Run As)」→「サーバで実行 (Run on Server)」と操作する.

  2. ローカル・ホストの HTTP プレビュー (HTTP Preview)」を選び、「次へ (Next)」をクリック

    ※ 使用しているプラグインによっては表示が変わる場合がある.

  3. 完了 (Finish)」をクリック

  4. (オプション) Windows ファイヤウオールに関するメッセージが出る場合がある

  5. 実行結果の確認

    「ローカル・ホストの HTTP プレビュー (HTTP Preview)」を選んだので, Web サーバは、Eclipse に組み込みずみのものが起動する. このことは Eclipse の「サーバー」表示で確認できる.

    ※ サーバが起動しないときは、Eclipse のバグの可能性がある。 「サーバで実行」のあと、手動で、J2EEサーバを選ぶとうまくいく場合がある


JavaScript プログラムと実行結果例

メッセージ表示

先ほど作成した hoge.js を書き換え

document.writeln("<hr>");
document.writeln("<h1>hoge</h1>");

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する.

変数と式

先ほど作成した hoge.js を書き換え

var a = 100;
var b = a * 1.05;
document.writeln("a = ", a);
document.writeln("b = ", b);

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する.

関数定義

先ほど作成した hoge.js を書き換え

function area(x) {
  var a = x * x * 3.14;
  return a;
}
var x = 100;
document.writeln("x = ", x);
document.writeln("area(x) = ", area(x));

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する.

JSON

先ほど作成した hoge.js を書き換え

var x = 100;
document.writeln( "x =", x);
document.writeln( JSON.stringify(x) );

var M = [0, 1, 2]; 
document.writeln( "M =", M);
document.writeln( JSON.stringify(M) );

var t = {id:1, name:"hoge"};
document.writeln( "t =", t);
document.writeln( JSON.stringify(t) );

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する.