トップページ -> プログラミング -> 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)

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

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

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

    ■ Eclipse 4.4 の場合の実行例

    [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]

静的 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 (新規)」→「HTML File (HTML ファイル)」と操作する.

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

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

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

      [image]

JavaScript ファイルの新規作成

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

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

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

    [image]
  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>
    

    [image]
  5. 今度は、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. (オプション) Windows ファイヤウオールに関するメッセージが出る場合がある

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

    [image]

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

    [image]

    ※ サーバが起動しないときは、Eclipse のバグの可能性がある。 「サーバで実行」のあと、手動で、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]

本サイトのサイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]


本サイトのサイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.

問い合わせ先: 金子邦彦(かねこ くにひこ) [image]