この章ではwindowオブジェクトについて説明します。
Windowオブジェクトは以下の通り、Documentオブジェクトなどに分類できます。
[Windowオブジェクト]
• Windowオブジェクト (self、parentなど)
• Documentオブジェクト
• Formオブジェクト
• Anchorオブジェクト
• Linkオブジェクト
• Imageオブジェクト
• navigatorオブジェクト
• locationオブジェクト
• historyオブジェクト
• screenオブジェクト
例えば今まで
windowオブジェクトはウィンドウに関しての色々なメソッドやプロパティを提供しています。
以下のダイアログボックスはchromeの表示です。
ブラウザによりダイアログボックスの形式は違います。
inputタグに埋め込まれているonclickの意味は後ほど詳しく説明しますが、英字の通り「クリックしたのならば」という意味があります。
onloadの意味は後ほど説明します。
次の例はaタグに埋め込んでいます。
ではonloadとonclickについて説明します。
「ページの読み込みが完了したとき」や「ボタンをクリックしたとき」などの動作のことをイベントと言います。
「ページの読み込みが完了したとき」や「ボタンをクリックしたとき」に動作を行わせるのがonloadとonclickなどのイベントハンドラです。
イベントハンドラはonloadとonclickだけではありません。
以下のようにたくさんのイベントハンドラがあります。
次はconfirmメソッドについて説明します。
このメソッドはalertメソッドと似ているのですが、alertメソッドはただ「OK」のあるダイアログボックスを表示するだけですが、confirmメソッドはダイアログボックスに「OK」と「キャンセル」の2つ表示して、ユーザーに確認を求めます。
では例をみてみましょう。
関数の中に処理が移ると
trueの場合は
falseの場合は
このifの条件式のようにtrueであるのかfalseであるのかを判断する時に、明示的にtrueやfalseを条件式に書けることを覚えておいてください。
hrefはlocationオブジェクトのプロパティで、現ページのURLを持っています。
例えば
次はpromptメソッドについて説明します。
では例をみてみましょう。
初期値が無い場合は例のようにカラでも結構です。
なお、第1引数と第2引数の間には「,」が必要です。
次は以下の箇所を説明します。
promptメソッドは何か文字を入力した時はその文字を戻り値として返します。
この例の場合はnameにその戻り値が代入されます。
キャンセルを押した場合は
何も入力せずにOKボタンを押した場合は
次はopenメソッドについて説明します。
では例をみてみましょう。
target属性はHTMLの分野なので詳しくは説明しませんが
target属性の値は以下の通りです。
また「ウィンドウの名前」はnullでも結構です。
その場合には
window.openメソッドの戻り値は、オープンに成功したときはその開いたウィンドウのウィンドウオブジェクト、失敗したときは null を返します。
openメソッドのオプションは以下の通りです。
ではプログラムの説明をしていきます。
「開く」をクリックするとopenGoogle関数が呼び出されて
「閉じる」をクリックしますとcloseGoogle関数が呼び出されます。
この関数の中にcloseメソッドを記述しています。
この例のbにはその開いたウィンドウのウィンドウオブジェクトが入っていますので、
次はsetIntervalメソッドについて説明します。
一定時間ごとに動作を繰り返す時に使われます。
例えば、指定した時間ごとに文字を出したり消したりできます。
関数はダブルクォートで囲んでください。
では例をみてみましょう。
この関数ではカウントするための変数countを作り0を代入しています。
そして、setIntervalメソッドは、指定された時間ごとに指定した関数を呼び出します。
この例の場合は2000ミリ秒ごとにcount1関数を呼び出します。
count1関数内ではcount変数の値を
この関数は2000ミリ秒ごとに呼び出されるので、その度に1が足されます。
その結果を画面に表示するのが
カウントをクリアにするには初めにsetIntervalメソッドの戻り値のIntervarIDをse変数のような変数に入れます。
その変数をclearIntervalメソッドの引数にすることで、setIntervalメソッドで設定したタイマーを解除することが出来ます。
タイマーの解除は
setIntervalメソッドで返ってきたタイマーIDをclearIntervalの引数に入れます。
次は
この例ではgetElementByIdメソッドの引数に
「innerHTML」はHTML内の要素の「テキスト」にアクセスできるプロパティですので、先ほどのプログラムは「ID属性の値がabcの箇所にcountの値を埋め込む」という意味です。
説明は以上ですが、簡単な流れを説明しますと