Webブラウザ Netscape上に実装されたスクリプト言語で、Java言語とは 直接関係はない。最初は各ブラウザで独自仕様が作られていたが、共通化を 目指してECMA(ヨーロッパ電子計算機工業会)が共通仕様を策定し、ECMAScriptと いう呼称で標準化された。Mozilla/Firefoxでは JavaScript, IEではJScriptと いうこれまでの実装名で搭載されている。
本講ではJavaScriptの全容を解説する余地がないため、スタイルシー ト特性のへの動的アクセスをするのに最低限の情報のみ示す。JavaScriptの 文法そのものについては各自の学習に任せる。
このページでは、JavaScriptプログラムの初期練習を行なうときに 便利な書き方から説明するが、JavaScriptに対応していないユーザエージェント への影響を軽減するよい書き方をさらにあとで説明する。
ダブルクォーテーションまたはシングルクォーテーションで 括って表す。
整数と浮動小数点数(自動変換)
「真」を表すtrue、「偽」を表すfalse
空を表す
| 演算記号 | 働き |
|---|---|
+ |
加算 |
| - | 減算 |
| * | 乗算 |
| / | 除算 |
| % | 剰余 |
| ++ | 1加算 |
| -- | 1減算 |
| += | 加算代入 |
| -= | 減算代入 |
| *= | 乗算代入 |
| /= | 除算代入 |
| %= | 剰余代入 |
| - | 符号反転 |
加算は数値だけでなく文字列に対しても行なえる。この場合、文字列の 結合となる。
"Hello" + ", world!"
=> "Hello, world!"
文字列と数値を足すと、数値が文字列に自動的に変換されて、文字列の 結合が行なわれる。
398 + "yen"
=> "398"+"yen" => "398yen"
この性質を利用して、以下のように数値を文字列に変換することもできる。
x = 5 y = ""+ x
yはxを文字列に変換した "5" となる。
変数そのものには型がなく、どんな型の値でもいれることができる(Ruby風)。 代入と同時に変数が使える。明示的に変数を宣言するには var を利用する。
x = 5
または
var x = 5
定義するときの書式:
function 関数名(引数リスト) {
定義本体
}
HTML文書中にはscript要素に記述する。方法は2つ。
例:
<script type="text/javascript"> <!-- JavaScriptの文…… // --> </script>
例:
<script type="text/javascript" src="hero.js"> </script>
ユーザエージェントがHTML文書を読み込むときに、含まれるJavaScriptを 評価する。実行文が含まれればそのときに実行する。以下のファイルを 保存しFirefoxで見てみよ。
<html>
<head>
<title>Hello.js</title>
</head>
<body>
<h1>JavaScriptことはじめ</h1>
<p>私の名前は
<script type="text/javascript">
<!--
document.write("波浪春夫");
// -->
</script>
です。</p>
</body>
</html>
HTML文書読み込みと同時のタイミングで関数定義だけしておき、 もっとあとの別のタイミングで起動することもできる。利用できる起動タイミン グは、HTML文書内のいずれかの要素に付随する以下の共通属性により 定義されるものである。
onclick当該要素上でマウスボタンがクリックされたときの挙動を決める。
ondblclick当該要素上でマウスボタンがダブルクリックされたときの挙動を決める。
onmousedown当該要素上でマウスボタンが押下されたときの挙動を決める。
onmouseup当該要素上でマウスボタンが離されたときの挙動を決める。
onmouseover当該要素上にマウスカーソルが乗ったとき。
onmousemove当該要素上でマウスカーソルが移動するとき。
onmouseout当該要素上からマウスカーソルが外れるとき。
onkeypress当該要素上でキーがタイプされたとき(押して離す)。
onkeydown当該要素上でキーが押されたとき。
onkeyup当該要素上でキーが離されたとき。
たとえば、あるdiv要素上でマウスクリックされたときに、スクリプトの
foo() 関数を呼びたい場合は以下のように記述する。
<div onclick="foo();"> なんらかの内容 </div>
また、body要素に関しては以下のイベント関連属性が使える。
onloadユーザエージェントが1つのウィンドウの読み込みを 完了したときのスクリプト挙動を定義する。
onunload1つのウィンドウからの文書の 除去を行なうときのスクリプト挙動を定義する。
onload属性は、文書の読み込みが完了した時点で、
スクリプト本体で定義してある関数を自動的に呼び出すために利用できる。
たとえば、JavaScriptプログラムファイル foo.js
内で定義されている bar() という関数を文書読み込み完了時に
自動的に呼びたい場合は以下のように記述すればよい。
〜〜ヘッダ省略〜〜 <body onload="foo();"> <script type="text/javascript" src="foo.js"> </script> 〜〜中略〜〜 </body> 〜〜以下省略〜〜
文書の読み込みが完了したときに呼ぶべき関数を JavaScript レベルで
定義できる。window.onload 変数に関数を
代入する(厳密には「window.onloadイベントハンドラに関数オブジェクト
を代入する」となる)。
文書の高さを求めるには文書の読み込みが完了した時点まで待たねばならな い。以下の例を試してみよ。
<!DOCTYPE html> <html> <head><title>onLoad test</title></head> <body> <script type="text/javascript" src="getheight.js"> </script> <pre> あ い う え お </pre> </body> </html>
/*
* getheight.js - Sample program for `onload' attribute
*/
function getHeight() {
bodyelement = document.getElementsByTagName("body")[0];
h = bodyelement.offsetHeight;
alert("高さ="+h)
}
getHeight();
window.onload = getHeight;
getElementsByTagName は引数で与えた要素の一覧を
配列で返す関数である。通常HTML文書のbody要素は1つだけなので、配列の
先頭要素([0])を取り出せばよい。求めた要素の高さを
求めるには offsetHeight プロパティを参照する。
alert関数は与えた引数(全て文字列に変換される)を
ダイアログウィンドウに表示する働きを持つ。