JavaScript and the Browser

Eloquent JavaScript Chapter 13 の読書ノート。

Networks and the Internet

  • 計算機のネットワークは 1950 年代から存在している。

  • インターネットの基礎になる技術は 1980 年代に開発された。

  • 計算機は別の計算機にビット列を発射する。これにより通信をする。

  • ネットワークプロトコル は、ネットワーク上での通信の様式を記述するものだ。例えば

    • 電子メールを送信・受信するプロトコル、

    • ファイルを共有するプロトコル、

    • 感染した計算機を制御するプロトコルさえある。

    • HTTP については第 18 章で述べる。

  • プロトコルのほとんどは他のプロトコルの上に建っている。HTTP はネットワークをビット列を置いて、それを正しい順序で目的地に到着させるストリームのような装置として扱う。この難しい問題を解決するのが TCP だ。

    • TCP はインターネットに接続されている機器すべてが利用しているプロトコルだ。

    • インターネット上の通信のほとんどが、このプロトコルの上に建っている。

TCP 接続は次のように働く。ある計算機が別の計算機がそれに話しかけてくるのを待っていなければならない。同時に単一の機械が種類の異なる通信を聴き取れるように、聴取者には通信種類に関連づけられた ポート と呼ばれる番号が決められている。

  • プロトコルのほとんどでは、既定のポート番号が割り振られている。例えば SMTP でメールを送信する場合、受信側は 25 番ポートで待機しているだろう。

  • 送信側の計算機は正しいポート番号を使って目標の計算機に到達できる。受信側の計算機はそのポートを聴取していれば、接続が正常に確立する。

    • 聴取側の計算機を サーバー という。

    • 接続している計算機を クライアント という。

このような接続は、どちらの計算機もデータをそこに流すことができる、双方向の管のような役割を果たす。データが正常に送信されると、受信側の計算機がデータを読み取ることができる。

TCP はネットワークを抽象化したものだと言える。

The Web

  • WWW とはブラウザーで Web ページを閲覧するためのプロトコルとフォーマットの集合だ。

  • Web に参加するには、計算機をインターネットに接続して、他の計算機が文書を求められるようにするべく HTTP を 80 番ポートで聴取するようにさせる必要がある。

  • Web 上にある文書のそれぞれは URL で名前が付いている。

  • インターネットに接続する機械には IP アドレスが割り当てられる。それはその機械にメッセージを送るために使用される番号だ。

    • 数字では人間が扱いづらいので、特定のアドレスに対して ドメイン名 を登録することができる。

  • URL をブラウザーのアドレスバーに入力すると、ブラウザーはそのアドレスで示される文書を取得、表示しようとする。例えば http://eloquentjavascript.net/13_browser.html を入力すると次のように動く:

    • まずブラウザーは eloquentjavascript.net がどのアドレスを参照しているのかを調べる。

    • 次に URL が http:// から始まっていることから HTTP を使用して、そのアドレスのサーバーに接続する。

    • リソースである /13_browser.html を求める。

    • すべてがうまくいくと、サーバーはブラウザーに文書を送り返す。

    • ブラウザーは画面上に内容を表示する。

HTML

HTML とは、Web ページで使用される文書フォーマットだ。テキストと、リンク、段落、見出しなどを記述してテキストに構造を与えるタグとかなる。

この節はよく知っていることが記述されている。ノート省略。

HTML and JavaScript

HTML タグ <script> を使うと JavaScript の断片を文書に含めることができる。

<h1>Testing alert</h1>
<script>alert("hello!");</script>
  • こういうインラインのスクリプトは、ブラウザーが <script> タグを見つけた時点で実行される。

  • 大規模なプログラムを HTML 文書に直接埋め込むことはたいていの場合現実的ではない。

<script> タグに src 属性を付与することで、値の URL からスクリプトファイルを取得するようになる。

<h1>Testing alert</h1>
<script src="code/hello.js"></script>
  • ファイル code/hello.js は先ほどのタグの中身と同じコードからなる。

  • <script> タグは、値が空であっても必ず </script> で閉じなければならない。そうしないと、文書の残りがスクリプトコードとして扱われるだろう。

  • <script> タグに type="module" を指定すると ES モジュールを読み込ませることができる。このようなモジュールは import 宣言でモジュール名として相対的な URL を指定することで、他のモジュールに依存することができる。

HTML のタグには JavaScript コードを含むことができる属性もある。

  • <button> タグの onclick 属性の値は、ボタンがクリックされるたびに実行される。

    <button onclick="alert('Boom!');">DO NOT PRESS</button>
    
    • ここでは引用符を使い分けていることに注意。引用符を表す実体参照を代わりに使うこともできる。

In the sandbox

  • ブラウザーは JavaScriptプログラム ができることを厳しく制限している。それが埋め込まれた Web ページに関係のないものを変更することもできない。

  • プログラミング環境を隔離することを 砂箱化 という。

  • 砂箱は、プログラムが有用に使えるだけの余地を残しつつ、同時にプログラムがいかなる危険なこともしないように制限する。

Compatibility and the browser wars

  • 昔はブラウザーごとに JavaScript がバラバラだった。互換性の暗黒時代と呼ばれている。

  • 主要ブラウザーの最新バージョンは動作が非常に統一されており、バグも比較的少ない。

以上