連載
» 2016年11月08日 05時00分 UPDATE

JavaScript標準ライブラリの使い方超入門(7):JavaScriptのdocument.writeの正体&alertなどダイアログやブラウザー操作の基本 (1/5)

JavaScriptの標準仕様としてビルトインされている主なオブジェクトの使い方を紹介する連載。今回は、ダイアログやブラウザー操作を扱うWindowについて。警告のalert、確認のconfirm、入力のprompt、開閉のopen、closeなどの基本を解説。

[金城俊哉,著]

連載目次

書籍の中から有用な技術情報をピックアップして紹介する本シリーズ。今回は、秀和システム発行の書籍『JavaScript Web開発パーフェクトマスター(2015年6月27日発行)』からの抜粋です。

ご注意:本稿は、著者及び出版社の許可を得て、そのまま転載したものです。このため用字用語の統一ルールなどは@ITのそれとは一致しません。あらかじめご了承ください。


 これまでGlobalオブジェクトとして利用してきたオブジェクト―――それは「Windowオブジェクト」です。

Point ブラウザーウィンドウを操作するオブジェクト、それがWindowオブジェクト

 ブラウザーを操作するためのオブジェクト群を総称して「ブラウザーオブジェクト」と呼びます。ブラウザーオブジェクトは、JavaScriptの利用と共にInternet ExplorerやNetscape Navigatorなどの多くのブラウザーに搭載されてきました。ところが標準の規格はないので、それぞれのブラウザーには独自のブラウザーオブジェクトが搭載されてきました。このため、過去にはクロスブラウザー問題が大きく取り上げられたことがありました。それぞれのブラウザーの仕様が異なるために、JavaScriptの動作不良の原因となったのです。

 このような経緯を経て、現在では、各ブラウザー間の仕様がすべてとは言えないまでも、かなりの部分が共通化され、互換性の問題がほぼなくなりつつあります。このようなブラウザーオブジェクトに属するオブジェクト群の最上位に位置するのが「Window」オブジェクトです。これまでにも何度かWindowオブジェクトの機能を使ってきましたが、Windowオブジェクトこそがブラウザーにおける「Globalオブジェクト」であったというわけです。

 本稿では、あらためてWindowオブジェクトの構造や機能、さらにはWindowオブジェクトに含まれるオブジェクトについて見ていきたいと思います。


ブラウザー本体をオブジェクトとしてゲット!

 ブラウザーを操作するためのオブジェクト群(ブラウザーオブジェクト)の最上位に位置するのが「Windowオブジェクト」です。クライアントサイドプログラミングにおけるGlobalオブジェクトはWindowオブジェクトとなります。

 Windowオブジェクト(のインスタンス)は、JavaScriptプログラムが起動するタイミングで自動的に生成されます。このことによって、グローバル変数やグローバル関数にアクセスできるようになるわけですね(グローバル変数や関数はWindowオブジェクトのプロパティです)。

Windowオブジェクトの構造

 Windowオブジェクトには、ブラウザーのオブジェクトを扱うための様々なオブジェクトが含まれています。これらのオブジェクトは、次のように階層的に含まれています。

ブラウザーオブジェクトの階層図

 このようにブラウザーオブジェクトのすべてのオブジェクトは、最上位に位置するWindowオブジェクトを通じてアクセスします。Windowオブジェクトの配下には、おなじみのDocumentオブジェクトを始め、URL情報を表すLocationがあります。これらのオブジェクトには、Windowsオブジェクトを通じてアクセスすることができます。

ブラウザーオブジェクトへのアクセス

Navigator

「Globalオブジェクト(のインスタンス)は、プログラムの実行と同時に自動的に生成されます。ですが、プログラミングを行ううえで、直接インスタンス自体を操作することはなく、あくまでプロパティやメソッドだけを利用します。Webページにテキストを書き出すwrite()は、Windowオブジェクト配下のDocumentオブジェクトのメソッドですが、直接、次のように書いて呼び出しましたよね」


document.write('こんにちは');
Navigator

「これは、次のようにWindowオブジェクトを指定したことと同じだったのです」


window.document.write('こんにちは');
Navigator

「これまでにもお話ししたことがありますが、ブラウザーオブジェクトの各インスタンスには、それぞれ専用のプロパティを使用してアクセスします。Windowオブジェクトの場合はwindowプロパティ、Documentオブジェクトの場合はdocumentプロパティという具合です」


Driver

「Windowオブジェクトはwindowプロパティって先頭の文字が小文字になっただけですよね。わかりやすいけど紛らわしいですよね」


Navigator

「えっと、話を戻しましょう。考えてみれば前記のようにwindow.〜という書き方は無駄であるばかりか、ほとんど意味のない書き方なのです。これは、グローバル変数の場合を見てみるとよくわかります。次の2つのコードは同じ意味になります」


グローバル変数の場合
Driver

「結局、ブラウザーで実行されるJavaScriptプログラムは、すべてWindowオブジェクトがもとになってるってわけですね」


Navigator

「ですので、わざわざ明記してコードを複雑にする必要はないんです。しかし、これに反するようですが、これまでWindowオブジェクトに属するメソッドやプロパティに関しては、windowを省略しないでwindow.alert()のように記述してきました。これはメソッドやプロパティがどのオブジェクトのものなのかがわかるようにするためです」


Driver

「document.write()の場合はこのままでいいけど、alert()とだけ書くと、どのオブジェクトのものなのかがわからないからですね」


       1|2|3|4|5 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。