JavaScriptのほんとに基本

どんな特徴のある言語?

JavaScript はコンパイルされない、インタープリタ型の言語です。

ブラウザーに表示/格納されている情報にしかアクセスできません。

JavaScript でできることは、だいたい以下のようなことです。

ノーツクライアント (R5) でサポートされているのは JavaScript 1.3 です。(Document Obejct Model 3.2)

JavaScript は難しいか?

簡単ではありますが、やはりひとつの言語ですので、それなりに複雑ではあります。
LotusScript や Java をやっているような人にはわかりやすいでしょうけれど、HTML はなんとかわかる、というような人にはちょっと難しい、といったところでしょうか。

ま、ノーツとブラウザーで同じような動きをするアプリケーションを最小の努力で作りたい、というのがこういうことを調べ始めた動機ですから、そういうように思う人にとってはやっぱりそんなに難しくない言語、という位置付けでいいように思います。

それでは、簡単な例をもとに見ていきましょう。


メッセージの表示

<HTML>
<HEAD><TITLE>タイトル</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function f1() {
alert("メッセージの表示");
}
//-->
</SCRIPT>

</HEAD>

<BODY onLoad=f1()>

</BODY>
</HTML>

これを実行すると、こちらのようになります。

ごく簡単に言うと、<HEAD> のところで function を定義しておいて、後で必要なところで使う、といった基本構造になります。

ここでは alert() でメッセージボックスを出す、というのが f1という function で、それを HTML のロード時に実行させる、というかたちになっています。

この onLoad のところを onUnload に変更すると、ページを変わる時にメッセージが出るようになります。

また、同じヘッダーのまま、今度はボタンを定義して、そこにこの function を指定してみましょう。

ボタンの使用

<HTML>
<HEAD><TITLE>タイトル</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function f1() {
alert("メッセージの表示");
}
//-->
</SCRIPT>

</HEAD>

<BODY>

<FORM>
<INPUT TYPE="button" VALUE="ボタン" onClick=f1()>
</FORM>
</BODY>
</HTML>

これを実行すると、こちらのようになります。

ボタンを押すと同じメッセージが表示されますね。

ちなみに、ドミノの場合、これは適当なフォームにボタンを作成して、"JavaScript" を選んでそのウィンドウの中にコードを書いていくだけなので、とても簡単です。

フィールドへのアクセス (DOM: Document Object Model)

入力されたフィールドを読むこともできます。

Input という入力フィールドを定義し、入力された値を読んでメッセージに表示します。

DOM という階層モデルで HTML内のいろいろな構成要素にアクセスを行うのですが、そのInput というフィールドの値には document.forms[0].Input.value とするとアクセスすることができます。
先に「ブラウザーに表示/格納されている情報にしかアクセスできません」と言いましたが、それはこういうことを指しています。

このブラウザーの中の要素へのアクセスの仕方は、Document Object Model (DOM) というモデルにそっての指定になります。
この場合、この HTMLページが document で、FORM が form[0] になります。(FORM に名前がついている場合(<FORM NAME="thisForm">)は、その名前(thisForm)でも OK です)
さらにその中の要素なので element[0] という指定のしかたも可能ですが、名前がついているので Input と名前でアクセスし、中の値は value でアクセスします。
これを全部つなげると document.forms[0].Input.value となるわけです。

<SCRIPT LANGUAGE="JavaScript">
function f1() {
alert("入力した値は " + document.forms[0].Input.value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT size="20" type="text" name="Input">
</FORM>
<P><INPUT TYPE="button" VALUE="ボタン" onClick=f1()></P>
</FORM>
</BODY>
</HTML>

これを実行するとこちらのようになります。何か文字をフィールドに入れてボタンを押してみてください。

計算

さらに計算などを行うことができます。

tax というグローバル変数を定義し、上の例で触れたような入力フィールドの値をもとに計算する、といった例です。

//コメントです;
tax=.05;

/* この function では入力された価格に税を計算して足します */
function setSalesTax ( ) {
//Price というフィールドの値を price という作業用の変数に入れます;
price = document.forms[0].Price.value;
//もし Price というフィールドに値が入っていなかったらメッセージを出す;
if (price<=0) {
alert("価格を入力してください");
return;
}
//税分を計算して結果を totalPrice という変数に入れる;

totalPrice = (price*tax)+parseInt(price);
//結果のメッセージを出す;
alert("税込み価格は" + totalPrice + "円になります。");
}

//setSalesTax function を呼び出す;
setSalesTax( );

これを実行するとこちらのようになります。

JavaScript には型がないので、変数名を準備して値を指定してやるだけで、変数ができてしまいます。
計算などする時には注意が必要ですね。

変数には function の中で定義すれば ローカル変数になりますし、最初に定義してしまえばグローバル変数になります。
Java などと同じようにスコープがありますので、そのあたりはご注意ください。

また、if文の中で return していますが、return x+y; といったようなかたちで計算結果などを function から外に返すのにも使用できます。

型の変換

ちなみに型の変換はかなり柔軟に行われます。
以下のコードの実行結果を見てみてください。

<SCRIPT LANGUAGE="JavaScript">
function f1() {
//
var x = 2001;
alert("変数 x の型は " + typeof(x) + " で、値は " + x);

//
x = "Hello World!";
alert("変数 x の型は " + typeof(x) + " で、値は " + x);

//
x = 12*12;
alert("変数 x の型は " + typeof(x) + " で、値は " + x);

}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT size="20" type="text" name="Input">
</FORM>
<P><INPUT TYPE="button" VALUE="ボタン" onClick=f1()></P>
</FORM>
</BODY>
</HTML>

また、変数の定義はこの例のように var 変数名; でもいいですし、 変数名 = 値 のように値を指定して作ってしまっても OK です。

これを実行するとこちらのようになります。


ドミノでのJavaScript

ドミノでどうやってやるかを簡単に見ていきましょう。

ドミノデザイナーだけで、JavaScript をノーツでも Webでも同じことをさせるために埋め込むことができます。ちゃんと構文チェックもやってくれます。
上の例はみんなちゃんとノーツクライアントでも Webブラウザーでも同じように稼動することを確認しました。
言ってみれば基本形だと思いますので、上のシンプルな例を使ってちょっと始めてみてはどうでしょうか。

とりあえず適当なフォームを作成して、3つの数値フィールドを作成し、1つボタンを作ります。

今までの HTML の例でも function はヘッダー (<HEAD>と</HEAD>のあいだ)に置いてありました。
ドミノもフォームの JS Header というところがありますので、ここに JavaScript で使用する function を書きます。

以下のように簡単に 2つパラメータをもらって、足した結果を返す、という function です。

ボタンにフォーカスをあてると以下のようなモードになりますので、クリックに反応するように「onClick」を選び、「実行」の右側を「JavaScript」にして実行コードを入力します。

document.forms[0] はこのフォームの文書、document.forms[0].x.value で x という数値フィールドの値を指します。

この時

document.forms[0].z.value = calc(parseInt(input1),parseInt(input2))

document.forms[0].z.value = calc(input1,input2)

としてしまうと、文字列として判断されてしまいます。

1 と 2 を入力すると、12 となってしまいますので、ご注意ください。

これは JavaScript が上の例で挙げたように「型の変換」に対して非常に柔軟であることからきています。便利な反面、気をつけなくてはいけない部分もありますね。

実行結果はこんなかんじです。ちゃんと 3 になっていますね。

ぜひノーツクライアントでもやってみて、さらにこのページの上の方の例もやってみてください。

[Top Pageに戻る]

Ads by TOK2