サイトマップ サイト内検索 まとめ

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

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

この Web ページで行うこと

前準備

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

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

  1. Eclipse の起動
  2. 「新規ソフトウェアのインストール」の開始

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

  3. 作業対象として「--すべての使用可能なサイト-- (--All Available Sites--)」を選ぶ
  4. 「Web, XML, Java EE および OSGi エンタープライズ開発 (Web, XML, Java EE and OSGi Enterprise Development)」を展開
  5. 必要なパッケージをチェックし、「次へ (Next)」をクリック
    • Eclipse Web 開発ツール (Eclipse WebDevelpment Tools)
    • JavaScript 開発ツール (JavaScript Development Tools)
    • Web ページ・エディター (Web Page Editor)
    • WST サーバー・アダプタ (WST Server Adapter)
  6. インストールされるパッケージの確認

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

  7. ライセンス条項の確認
  8. インストールが始まる
  9. Eclipse の再起動

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

  1. （オプション）テキストファイルエンコーディングの確認
  2. 新規の静的 Web プロジェクトを作成したいので「File (ファイル)」→「New (新規)」→「Project (プロジェクト)」と操作する．
  3. Static Web Project (静的 Web プロジェクト) を選ぶ
  4. プロジェクト名の設定

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

    • プロジェクト名：hoge
  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" "https://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」と操作する．