金子邦彦研究室プログラミングJavaScript と JQuery による Web プログラミングEclipse を用いて JavaScript, JQuery を使う Web アプリケーションを実行してみる (VJET あり)

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

VJet は,次の機能を持つ Eclpse のプラグインです.Eclipse で JavaScript のプログラムを実行してみます

VJet の URL: https://projects.eclipse.org/projects/webtools.vjet

この Web ページで行うこと

VJET の要点

前準備

JDK (Java Development Kit) のインストール

Eclipse のインストール

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

  1. Eclipse を起動

    [image]
  2. インストールしたいので「ヘルプ (Help)」 → 「新規ソフトウェアのインストール (Install New Software)」と操作

    [image]
  3. Work With のところを設定し、しばらく待つ

    ◆ Eclipse 4.2 (juno) での実行例

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

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

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

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

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

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

    [image]
  9. Eclipse の再起動

    [image]

GWT Designer for the Google Plugin for Eclipse とthe Google Web Toolkit SDK のインストール

関連する外部ページhttps://developers.google.com/eclipse/docs/install-eclipse-4.2

  1. Eclipse を起動

    [image]
  2. インストールしたいので「ヘルプ (Help)」 → 「新規ソフトウェアのインストール (Install New Software)」と操作

    [image]
  3. Work With の右横の「追加 (Add)」をクリック
  4. 名前 (Name) とロケーション (Location) の設定

    Eclipse 4.2 (juno) での設定例.「4.2」のところは Eclipse のバージョン番号に一致させること.

    http://dl.google.com/eclipse/plugin/4.2
    

    [image]
  5. GWT ツールをインストールしたいので、次の2つをチェックし、「次へ (Next)」をクリック

VJET のインストール

Eclipse 4.2 系列

  1. Eclipse を起動
  2. インストールしたいので「ヘルプ (Help)」 → 「Eclipse マーケットプレース」と操作

    [image]
  3. Eclipse マーケットプレースのウインドウが開く

    [image]
  4. VJET」で検索

    [image]
  5. 検索結果について、確認の上、「インストール (install)」をクリック

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

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

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

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

    [image]
  9. インストールが終わったら, 「はい (Yes)」をクリックして Eclipse を再起動

    [image]

Eclipse 3系列

  1. Eclipse を起動

    [image]
  2. インストールしたいので「ヘルプ (Help)」 → 「新規ソフトウェアのインストール (Install New Software)」と操作

    [image]
  3. Work With の右横の「追加 (Add)」をクリック
  4. 名前 (Name) とロケーション (Location) の設定
    http://www.ebayopensource.org/svn/vjet/tags/RELEASE/plugin/
    

    [image]
  5. VJET」をチェックし、「次へ (Next)」をクリック

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

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

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

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

    [image]
  9. インストールが終わったら, 「はい (Yes)」をクリックして Eclipse を再起動

    [image]

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

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

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

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

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

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

    [image]
  5. オプションの設定

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

    [image]
  6. Web パースペクティブに関連付ける

    はい」をクリック.

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

    [image]
  8. 試しに index.html を作成してみる
    1. いま作成した 静的 Web プロジェクトの 「WebContent」を右クリックし、 「New (新規)」→「その他」と操作する.

      [image]
    2. HTML ファイル」を選ぶ

      [image]
    3. ファイル名を index.html のように設定する

      [image]
    4. テンプレートを選ぶ

      [image]
    5. ファイルが作成される

      [image]

(オプション) VJET パースペクティブに設定

  1. ウインドウ (Window)」→ 「パースペクティブを開く (Open Perspective)」→ 「Other (その他)」と操作する

    [image]
  2. VJET JS」を選ぶ

    [image]

VJET の設定

いま作成した静的 Web プロジェクトについて、次の手順で、VJET を有効にする

  1. VJET を有効にする設定

    プロジェクト を右クリックし、 「VJET」→「Enable VJET Project Capabilities」と操作する.

    [image]
  2. VJET のソースのパスに WebContent を含める設定
    1. プロジェクト を右クリックし、 「プロパティー (Properties)」と操作する.

      [image]
    2. VJET を展開.VJET Build Path で「ソース (Source)」を選び、「インクルード:(すべて) (included: (All))」をクリックし、 「編集 (Edit)」をクリックする.

      [image]
    3. 追加 (Add)」をクリックする

      [image]
    4. WebContent」を設定する

      [image]
    5. 完了 (Finish)」をクリックする

      [image]

JavaScript ファイルの新規作成

  1. 今度は、 「WebContent」を右クリックし、 「New (新規)」→ 「JavaScript Source File (JavaScript ソース・ファイル)」と操作する.

    [image]
  2. JavaScript ファイル名の設定

    [image]
  3. 先ほどの 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>
    

    [image]
  4. 今度は、main.js (JavaScript ファイル) を編集する.

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

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

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

    [image]

Web ブラウザでの表示

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

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

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

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

    [image]
  4. 実行結果の確認

    Web サーバは、Eclipse に組み込みずみのものが起動する(「HTTP Preview」を選んだので).

    [image]

    サーバが起動しないときは、Eclipse のバグの可能性がある。 (下図のように、サーバビューで起動を試みても起動しない).

    [image]

    「サーバで実行」のあと、手動で、J2EEサーバを選ぶとうまくいく場合がある

    [image]

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

メッセージ表示

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

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

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

[image]

変数と式

先ほど作成した 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」と操作する.

[image]

関数定義

先ほど作成した 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」と操作する.

[image]

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」と操作する.

[image]