JavaScript:オブジェクト
●オブジェクト
JavaScript は、オブジェクト指向の考え方を取り入れています。
HTML 中のウインドウやフォーム部品なども、
それぞれオブジェクトとして扱われます。
例えば、
<html>
<body>
<form name="form1">
<input type="text" name="text1" value="test text">
<input type="button" value="OK" onClick="test()">
</form>
</body>
</html>
のような HTML があれば、
window (全体)
|
+- document (body)
|
+- Form
|
+- Text
|
+- Button
のような構成になります。
text1 の値を取得するなら、
window.document.form1.text1.value
となります。
先頭の window. は省略できます。
具体的に参照するコードを書いてみると、
<html>
<head>
<script type="text/javascript">
<!--
function test() {
textValue = document.form1.text1.value;
alert(textValue);
}
// -->
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1" value="test text">
<input type="button" value="OK" onClick="test()">
</form>
</body>
</html>
この HTML ファイルをブラウザに読み込ませると、
テキスト枠とボタンが表示されます。
ボタンを押すと、
テキスト枠に入っている文字列がポップアップします。
動作の流れは、以下の通り。
・ボタンを押すと、onClick イベントが発生
・test 関数が呼ばれる
・document.form1.text1.value でテキスト枠の文字列を取得
・alert で表示
試しにテキスト枠の文字列を変更してからボタンを押すと、
変更後の文字列が表示されると思います。
test 関数の中で、
document.form1.text1.value = "new test";
の行を追加してみると、
ボタンを押した後、テキスト枠の文字列が変わるでしょう。
このように、
JavaScript は、動的な状態を制御できるのが特徴です。
●メソッド
オブジェクトは、一般にメソッドを持ちます。
例えば、
既に出てきている document.write() は、
document オブジェクトの write メソッドを呼ぶ、
という事です。
alert() は、実際は window.alert() なのですが、
window. は省略可能なので、
単独の組込関数のように見えるだけです。
# window オブジェクトの alert メソッドを呼ぶ、です。
良く使用するメソッドを挙げておきます。
・document.write(text)
text を body の中に書き出します。
・window.alert(text)
主に、ユーザーに警告を出す場合に使用します。
text をポップアップで表示します。
・window.confirm(text)
主に、ユーザーに確認したい場合に使用します。
text をポップアップで表示します。
更に、[OK]、[キャンセル] ボタンが表示され、
それぞれをクリックすると、
この関数が、
[OK] => true
[キャンセル] => false
を返します。
・window.history.back()
ひとつ前のページに戻ります。
●プロパティ
オブジェクトは、一般にプロパティを持ちます。
例えば、
先の text1.value は、
text1 という名前のボタン・オブジェクトの
value というプロパティを表します。
よって、value を書きかえると、
実際のボタンの表示文字列が書き変わります。
良く使用するプロパティを挙げておきます。
・window.location.href
指定した URL に移動します。
# location.href="index.php"; のように使います。
・document.cookie
クッキー文字列を保持しています。