Eclipse と VJET を用いた JavaScript プログラミング

VJET とは，次の機能を持つ Eclpse のプラグインです．Eclipse で JavaScript のプログラムを実行してみます

コードアシスト
コード検索
構文チェックと意味チェックなど

この Web ページで行うこと

Web Development Tools, JSDT のインストール
Eclipse で VJET のインストール
VJET プロジェクトの新規作成
JavaScript ファイルの新規作成
JavaScript プログラムと実行結果例

VJET の要点

Eclipseでのインストールでは Name と Location を設定する
http://www.ebayopensource.org/svn/vjet/tags/RELEASE/plugin/
Eclipseのプロジェクトを右クリックしてVJET を有効にする

前準備

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

Windows での OpenJDK のインストール: 別ページ »で説明
Ubuntu での Open JDK のインストール: 別ページ »で説明

Eclipse のインストール

Windows での Eclipseのインストール，日本語化，基本操作: 別ページ »で説明
Ubuntu での Eclipseのインストール，日本語化，基本操作: 別ページ »で説明

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

Eclipse を起動
インストールしたいので「Help」 → 「Install New Software」と操作
Work With のところを設定し、しばらく待つ
「Web, XML, Java EE and OSGi Enterprise Development」を展開
必要なパッケージをチェック
- Eclipse WebDevelpment Tool
- JavaScript Development Tools
- Web Page Editor
- WST Server Adapter
インストールされるパッケージの確認
確認の後、「Next」をクリック
ライセンス条項の確認
インストールが始まる
Eclipse の再起動

VJET のインストール

Eclipse を起動
インストールしたいので「Help」 → 「Install New Software」と操作
Work With の右横の「Add」をクリック

Name と Location の設定

http://www.ebayopensource.org/svn/vjet/tags/RELEASE/plugin/

「VJET」をチェックし、「Next」をクリック
インストールされるパッケージの確認
確認の後、「Next」をクリック
ライセンス条項の確認
インストールが始まる
Eclipse の再起動

VJET プロジェクトの新規作成

Eclipse を起動
（オプション）テキストファイルエンコーディングの確認
新規のVJET プロジェクトを作成したいので「File (ファイル)」→「New (新規)」→「Project (プロジェクト)」と操作する．
VJET Project (VJET プロジェクト) を選ぶ
プロジェクト名の設定
VJET プロジェクト名は好きにつけて良いが，全角文字は避ける．分かりやすい名前が良い．ここでは，例として，次のように指定する．
- プロジェクト名：　好きな名前を付ける
オプションの設定
既定のままでよい。「Finish」をクリック．
いま作成した VJET プロジェクトが，Script Explorer ウインドウに表示される

JavaScript ファイルの新規作成

プロジェクトを右クリックし、「New (新規)」→「JavaScript Source File」と操作する．
JavaScript ファイル名の設定
いまさ作成したJavaScript ファイルを編集する．
次のようなプログラムを書いてみる
編集が終わったら、＜コントロールキー＞＋「S」（同時押し）で保存する．
print("Hello, World!");

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

メッセージ表示

先ほど作成した JavaScript ファイルを次のように書き換え

document.write("Hello, World!");
println("I am here");

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

変数と式

先ほど作成した JavaScript ファイルを次のように書き換え

var a = 100;
var b = a * 1.05;
print("a = ", a);
print("b = ", b);

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

rhino main.js

関数定義

先ほど作成した JavaScript ファイルを次のように書き換え

function area(x) {
  var a = x * x * 3.14;
  return a;
}
var x = 100;
print("x = ", x);
print("area(x) = ", area(x));

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

rhino main.js

Java のメソッドを使う

先ほど作成した JavaScript ファイルを次のように書き換え

java.lang.System.out.println("Hello, World!");

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

rhino main.js

JSON

先ほど作成した JavaScript ファイルを次のように書き換え

var x = 100;
print( "x =", x);
print( JSON.stringify(x) );

var M = [0, 1, 2]; 
print( "M =", M);
print( JSON.stringify(M) );

var t = {id:1, name:"hoge"}
print( "t =", t);
print( JSON.stringify(t) );

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

メッセージ表示

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

println("Hello, World!");
println("I am here");

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

変数と式

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

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

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

関数定義

先ほど作成した main.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

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