金子邦彦研究室 ▶ プログラミング ▶ 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 の起動

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

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

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

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

本サイトは金子邦彦研究室のWebページである．

資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには， 「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明 再配布や資料改変の際には，そのページをご確認ください．

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

問い合わせ先： 金子邦彦（かねこ くにひこ） [image]