【JS学習マラソン】第12回 1.2.9 対話: alert, prompt, confirm
JavaScript学習マラソンの第12回は、
「現代の JavaScript チュートリアル」パート1の2.9「対話: alert, prompt, confirm」です。
対話: alert, prompt, confirm https://ja.javascript.info/alert-prompt-confirm
を読んでみます。
Webブラウザーのホストオブジェクトとは?
JavaScriptのalert()、prompt()、confirm()メソッドについて学ぶ前に、JavaScriptのオブジェクトの仕組みについて復習しておきましょう。
「オブジェクト」とは?
「オブジェクト」(Object)という用語は、JavaScriptに限らず他のプログラミング言語でも出てきます。
データと処理をまとめて束にしたもの
が「オブジェクト」です。
- データ → オブジェクトの「状態」を表し、「プロパティ」と呼ばれる。
- 処理 → オブジェクトの「操作」を表し、「メソッド」と呼ばれる。
JavaScriptには、いろいろなオブジェクトが用意されており、それぞれのオブジェクトを呼び出して使えば、いろんな機能が使えるようになってます。
ホストオブジェクト
一口にオブジェクトといっても、JavaScriptの場合は、さらに「ネイティブオブジェクト」と「ホストオブジェクト」の2種類に分類されます。
(ここら辺の話は、単なる分類/用語についての話なので、深く考える必要はありません。ただ、JavaScriptではそうなっている、というだけの話です。)
- ネイティブオブジェクト
JavaScriptには必ず用意されている基本的なオブジェクト。- ホストオブジェクト
ネイティブオブジェクト以外のオブジェクトで、JavaScriptの実行環境によって用意されている様々なオブジェクト。実行環境が違うと、ホストオブジェクトの品揃えも違ってきます。
ネイティブオブジェクトやホストオブジェクトを含む、全てのオブジェクトの親玉がグローバルオブジェクトです。
「ネイティブオブジェクト+ホストオブジェクト=グローバルオブジェクト」
- ネイティブオブジェクト=「ECMAScript」で仕様が定められている。
- Webブラウザーのホストオブジェクト=「DOM」で仕様が定められている。
という位置づけになってます。
ECMAScript から見た場合に、DOM 仕様で定義されるオブジェクトのことを「ホストオブジェクト」と呼びます。
DOMとは?
DOMとは、HTMLをプログラムで操作するための仕様です。
Webブラウザーは、DOMが使えるように作られています。
Webブラウザーに実装されているJavaScriptは、DOMが使えるようにするため、JavaScriptのネイティブオブジェクトに加えて、DOM用のホストオブジェクトも追加されているのです。
ここまで、ホストオブジェクトやDOMについて復習しました。
では、本題のalertの話に戻りましょう。
windowオブジェクトのメソッド
alertは、ホストオブジェクトに属しています。
ホストオブジェクトであるwindowオブジェクトのメソッドの1つがalertです。
チュートリアルのこのパートは、環境依存なしでJavaScript “そのまま” を説明することを目的としています。
環境依存なしの、素のJavaScriptとは、「ネイティブオブジェクト」のことです。
しかし、私たちはデモ環境としてブラウザを使っているので、最低限いくつかのユーザインタフェース機能について知っておく必要があります。このチャプターでは、ブラウザ機能である alert, prompt そして confirm について説明します。
ブラウザという環境に依存している機能とは、「ホストオブジェクト」のことです。
で、このチャプターでは、ホストオブジェクトである「alert」「prompt」「confirm」の機能について学ぶ、というわけです。
alert、prompt、confirmはブラウザーのホストオブジェクトなので、ブラウザーでは使えますが、Node.jsなどブラウザーとは関係ないJS実行環境では使えません。
(Node.jsのホストオブジェクトにはalert等は用意されていないため)
Webブラウザーを使って、JavaScriptを練習する場合だけ、alertなどが使えます。
windowオブジェクト
alertメソッド
promptメソッド
confirmメソッド
使い方はチュートリアルに書いてある通りですね。
JSのコードの中で、
alert(message);
というように書けば、Webブラウザーで「変数 message」に内容がポップアップ表示されます。
プログラムの途中で、変数の内容を確認したい場合に、alertメソッドを使えば、その都度変数の内容を表示させて確認することもできます。
まとめ
(教材のサマリーから引用)
- alert
メッセージを表示します
- prompt
ユーザにテキスト入力を求めるメッセージを表示します。テキスト、もしくはCANCEL/ Esc がクリックされた場合はすべてのブラウザは null を返します。
- confirm
メッセージを表示し、ユーザが “OK” または “CANCEL” を押すのを待ちます。OKの場合は true を、CANCEL/Esc の場合は false を返します。
スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)
- 作者: リブロワークス,及川卓也
- 出版社/メーカー: インプレス
- 発売日: 2018/06/22
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る