JavaScript勉強会

JavaScriptの学習日記

【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

を読んでみます。

 

f:id:jsstudy:20190210210452p:plain

 

Webブラウザーのホストオブジェクトとは?

JavaScriptのalert()、prompt()、confirm()メソッドについて学ぶ前に、JavaScriptのオブジェクトの仕組みについて復習しておきましょう。

 

「オブジェクト」とは?

「オブジェクト」(Object)という用語は、JavaScriptに限らず他のプログラミング言語でも出てきます。

 

jsstudy.hatenablog.com

 

データと処理をまとめて束にしたもの

が「オブジェクト」です。

  • データ → オブジェクトの「状態」を表し、「プロパティ」と呼ばれる。
  • 処理 → オブジェクトの「操作」を表し、「メソッド」と呼ばれる。

 

JavaScriptには、いろいろなオブジェクトが用意されており、それぞれのオブジェクトを呼び出して使えば、いろんな機能が使えるようになってます。

 

ホストオブジェクト

一口にオブジェクトといっても、JavaScriptの場合は、さらに「ネイティブオブジェクト」と「ホストオブジェクト」の2種類に分類されます。

(ここら辺の話は、単なる分類/用語についての話なので、深く考える必要はありません。ただ、JavaScriptではそうなっている、というだけの話です。)

 

jsstudy.hatenablog.com

 

  • ネイティブオブジェクト
     JavaScriptには必ず用意されている基本的なオブジェクト。
  • ホストオブジェクト
     ネイティブオブジェクト以外のオブジェクトで、JavaScript実行環境によって用意されている様々なオブジェクト。実行環境が違うと、ホストオブジェクトの品揃えも違ってきます。

 

f:id:jsstudy:20170709154556p:plain

 

ネイティブオブジェクトやホストオブジェクトを含む、全てのオブジェクトの親玉がグローバルオブジェクトです。

ネイティブオブジェクト+ホストオブジェクト=グローバルオブジェクト

 

  • ネイティブオブジェクト=「ECMAScript」で仕様が定められている。
  • Webブラウザーのホストオブジェクト=「DOM」で仕様が定められている。

という位置づけになってます。

 

developer.mozilla.org

 

ECMAScript から見た場合に、DOM 仕様で定義されるオブジェクトのことを「ホストオブジェクト」と呼びます。

 

DOMとは?

jsstudy.hatenablog.com

 

DOMとは、HTMLをプログラムで操作するための仕様です。

Webブラウザーは、DOMが使えるように作られています。

Webブラウザーに実装されているJavaScriptは、DOMが使えるようにするため、JavaScriptのネイティブオブジェクトに加えて、DOM用のホストオブジェクトも追加されているのです。

 

ここまで、ホストオブジェクトやDOMについて復習しました。

では、本題のalertの話に戻りましょう。

 

windowオブジェクトのメソッド

alertは、ホストオブジェクトに属しています。

ホストオブジェクトであるwindowオブジェクトのメソッドの1つがalertです。

 

ja.javascript.info

 

チュートリアルのこのパートは、環境依存なしでJavaScript “そのまま” を説明することを目的としています。

環境依存なしの、素のJavaScriptとは、「ネイティブオブジェクト」のことです。

 

しかし、私たちはデモ環境としてブラウザを使っているので、最低限いくつかのユーザインタフェース機能について知っておく必要があります。このチャプターでは、ブラウザ機能である alert, prompt そして confirm について説明します。

ブラウザという環境に依存している機能とは、「ホストオブジェクト」のことです。

 

で、このチャプターでは、ホストオブジェクトである「alert」「prompt」「confirm」の機能について学ぶ、というわけです。

alert、prompt、confirmはブラウザーのホストオブジェクトなので、ブラウザーでは使えますが、Node.jsなどブラウザーとは関係ないJS実行環境では使えません。

(Node.jsのホストオブジェクトにはalert等は用意されていないため)

 

Webブラウザーを使って、JavaScriptを練習する場合だけ、alertなどが使えます。

 

windowオブジェクト

developer.mozilla.org

 

alertメソッド

developer.mozilla.org

 

promptメソッド

developer.mozilla.org

 

confirmメソッド

developer.mozilla.org

 

使い方はチュートリアルに書いてある通りですね。

 

JSのコードの中で、

alert(message);

というように書けば、Webブラウザーで「変数 message」に内容がポップアップ表示されます。

 

プログラムの途中で、変数の内容を確認したい場合に、alertメソッドを使えば、その都度変数の内容を表示させて確認することもできます。

 

まとめ

(教材のサマリーから引用)

 

  • alert

     メッセージを表示します

  • prompt

     ユーザにテキスト入力を求めるメッセージを表示します。テキスト、もしくはCANCEL/ Esc がクリックされた場合はすべてのブラウザは null を返します。

  • confirm

     メッセージを表示し、ユーザが “OK” または “CANCEL” を押すのを待ちます。OKの場合は true を、CANCEL/Esc の場合は false を返します。

 

 

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)