これまではNode.js上でJavaScriptを動かしてきましたが、Webブラウザー上でのJavaScriptも扱っておきます。

HTML と DOM

HTMLは、Webページを記述するためのマークアップ言語です。

例：

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>すごいWebページ</title>
  </head>
  <body>
    <p id="sugoi">すごーい！</p>
  </body>
</html>

< > で囲まれた部分は、タグと呼ばれ、何らかの機能を持ちます。それぞれのタグは、名前と、いくつかの属性を持ちます。名前の前にスラッシュが置かれているタグは閉じタグと呼ばれ、同名のタグ（開始タグ）の内容の終わりを示します。開始タグと閉じタグの間は内容であり、内容としてはいくつかのタグとテキストを入れることができます。タグと内容をひっくるめて要素と呼びます。

上記のHTML文書を解釈すると、次のような木構造となります：

html
- head
  - meta （属性：charset="utf-8"）
  - title
    - テキスト：すごいWebページ
- body
  - p （属性：id="sugoi"）
    - テキスト：すごーい！

このような木構造をJavaScriptなどのプログラミング言語から扱えるようにしたものを、DOM (Document Object Model) と呼びます。

JavaScriptからHTMLの内容を書き換える際には、HTMLソースの文字列を直接書き換える方法と、木構造であるDOMを操作する方法があります。

script 要素

HTML文書にJavaScriptを埋め込むには、scriptという名前のタグを使います。

例：

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>すごいWebページ</title>
  </head>
  <body>
    <p id="sugoi">すごーい！</p>
    <script>
      console.log("Hello world!");
    </script>
  </body>
</html>

この内容を hello.html という名前で保存し、Webブラウザーで開きます。次に、そのWebブラウザーのJavaScriptコンソールを開きます：

Google Chrome: メニューから「JavaScriptコンソール」を開く
Mozilla Firefox: 「ツール」＞「ウェブ開発」＞「ウェブコンソール」を開く
Safari: メニューの「開発」＞「JavaScriptコンソールを表示」。メニューバーに「開発」がなかったら、「環境設定」＞「詳細」＞「メニューバーに“開発”メニューを表示」にチェックを入れます。
Microsoft Edge: （TODO: 調べる）

開いたコンソールに「Hello world!」と表示されていれば成功です。

演習問題：コンソールに「Goodbye world!」を表示するJavaScriptを含むHTML文書を作ってみましょう。

演習問題：コンソールに100以下の素数を表示するJavaScriptを含むHTML文書を作ってみましょう。

組み込みオブジェクト

Webブラウザー上で動くJavaScriptでは、ECMAScript標準で定められていたもの以外にも、いくつかのグローバル変数が定義されています。

window オブジェクト

window オブジェクトには、ページの表示や、ブラウザーのウィンドウに関するプロパティーやメソッドが定義されています。

window.alert メソッドは、警告メッセージを表示します。

例：

window.alert("Hello world!");

window.prompt メソッドは、ユーザーに文字列の入力を求めます。

例：

var haiku = prompt("ハイクを詠め：");
console.log(haiku);

window.confirm メソッドは、 OK かキャンセルかをユーザーに選択させます。結果は true / false で帰ってきます。

例：

var is_the_order_a_rabbit = confirm("Is the order a rabbit?");
if (is_the_order_a_rabbit) {
    console.log("The order is a rabbit.");
} else {
    console.log("The order is not a rabbit.");
}

alert, prompt, confirm 等のメソッドは、ユーザーの操作を中断するので、使用には注意しましょう。

実は、これらの関数は window. をつけなくても呼び出すことができます：

alert("Hello world!");
var haiku = prompt("ハイクを詠め：");
var is_the_order_a_rabbit = confirm("Is the order a rabbit?");

これは window オブジェクトがグローバルオブジェクトであるのが理由です。グローバルスコープに var 定義した変数は window オブジェクトのプロパティーとして見え、逆に window オブジェクトのプロパティーはグローバル変数として見えます：

// 定義したグローバル変数が…
var Foo = 123;

// window オブジェクトのプロパティーとして見える。
console.log(window.Foo);

// window オブジェクトのプロパティーが…
window.Bar = 42;

// グローバル変数として見える。
console.log(Bar);

グローバルオブジェクトが window という名前なのは Web ブラウザー特有で、 Web ブラウザー以外の実行環境（Node.js など）では、グローバルオブジェクトが別の名前だったりします。

document オブジェクト

document オブジェクトは、主に文書の内容を操作するためのメソッド等を持ちます。

let n = document.createTextNode("Goodbye world!");
let e = document.createElement("p");
e.appendChild(n);
document.body.appendChild(e);

その他のオブジェクト

navigator

ページを開いているWebブラウザーに関する情報を取得できます。

よく使われるのは userAgent プロパティーで、Webブラウザーの種類やバージョン、動いているOS等の情報が含まれます。

userAgent プロパティー：

console.log(navigator.userAgent);

location

現在表示しているWebページのURLを取得、設定できます。

href プロパティー：

console.log(location.href);

console

すでに使っていますが、 console オブジェクトによってJavaScriptコンソールに色々と表示することができます。

console.log("Hello world!");
console.info("JavaScriptを実行中です");
console.warn("警告：進捗がありません");
console.error("エラー：何もしていないのにパソコンが壊れた");
console.assert(Math.PI > 3.14); // 注：ある式が成り立つことをチェックすることをプログラミングでは assert と言う。その式が成り立たない場合はプログラムのバグであると見なして、エラーを表示したり強制終了したりすることが多い