トップページ -> 実践知識 -> JavaScript と JQuery による Web プログラミング -> Aptana Studio 3 を用いて JavaScript, JQuery を使う Web アプリケーションを実行してみる
[サイトマップへ], サイト内検索:

Aptana Studio 3 を用いて JavaScript, JQuery を使う Web アプリケーションを実行してみる

サイト構成 連絡先,業績など 実践知識 コンピュータ 教材 サポートページ

Aptana Studio とは, HTML, CSS, JavaScript, PHP, Ruby などを扱う機能をもった統合開発環境ソフトウエアです.

この Web ページで行うこと


前準備

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

Aptana Studio 3 で JavaScript のプログラムを実行してみる

  1. Aptana Studio 3 を起動

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

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

  4. テンプレートの選択

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

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

    設定したら「Finish」をクリック.

  6. いま作成した Web プロジェクトが,Project Explorer ウインドウに表示される

  7. テンプレートとして「Basic Web Template」を選んだときは index.html ファイルができている
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>New Web Project</title>
        </head>
        <body>
            <h1>New Web Project Page</h1>
        </body>
    </html>
    

  8. プロジェクトを右クリックし、「New (新規)」→「File (ファイル)」と操作する.

  9. JavaScript ファイル名の設定

  10. ウインドウがエディタになっている。そこに JavaScript プログラムを書く.

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

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

  11. index.html の書き換え

    次のようなプログラムを書き加える

    <script type="text/javascript" src="hoge.js"></script>
    

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

  13. 実行結果の確認

    Web サーバは、AptanaStudio に組み込みずみのものが起動する(それが既定の設定).


実行結果例

メッセージ表示

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

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

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

変数と式

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

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

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

関数定義

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

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 」→「JavaScript Web Application」と操作する.