情報処理概論第10回

情報処理概論第10回 12/7

Introduction to the Information Systems

上記の実習bに沿って、方法を学び、「ボタンを押すとページに表示されている内容（いずれかのDOM要素）が変化する」ようなページをHTMLで作ってみる。

骨組みとしては以下のようになるだろう

  <!doctype html>
  <!-- ボタンをおすと画面に文字が   　   	現れるようにしよう
  -->
  <button onclick="">

  <div id="xxx"></div>

  <script>


  </script>

同じ内容のHTMLファイルをここにも置いた。

授業時の実演で示したように、
- タグ名（要素名上記例では ‘div’）を getElementsByTagName() に渡して、
要素にアクセスするための関数
- その結果（配列）の、0番目（最初）の要素を [0] を後置して取り出す、
という方法で要素にアクセスしてもいいし、
実習bのページにあるように、id を付加して、 getElementById() でアクセスしてもいい。
Element　が単数系の名前の関数と、複数形のものとで、その関数が返す値の型（ひいては扱い方）が違うので混乱しないように。

変数を宣言する文法
上記のアクセス関数が返す値（要素または要素の配列）は、その後の処理で使えるように、名前をつけて記憶する、という使い方をするのが一般的である。
- つまり右図のような文法で、変数を作って、その変数に値として代入しておく、という書き方。
この実習は、HTMLを１つ作成する形で行うものだが、それに先立って、
- DOMの構造を理解したり、
- JavaScriptのちょっとしたコードを試しに実行したり、
といった作業は、ブラウザの開発ツールを使うといいだろう。（ブラウザと開発ツールに関する解説を別ページにまとめてある）。

木構造のイメージ

HTML文書の構造

HTML文書は右左図のような入れ子構造。
これを読み込んだブラウザの内部では右右図のようなデータ構造が構築される。
- これを DOM と呼ぶ。
- 図の　windows, document 等の、□で示したものは、 DOMを構成する「要素（element）」と呼ばれる。
- このそれぞれの要素を、JavaScript（で書かれたプログラム）から操作することができる（ということを今、学んでいる）。
矢印=> をつけた２つの要素だけは、プログラム中で既定の変数として直接呼び出せるが、
他の要素はdocumentからたどるか、get系のメソッドで取り出す必要がある。
ブラウザの「コンソール」（開発ツールの中にある）でそれらの要素にアクセスする方法（別ページに実施例を示す）

CSSセレクタ

要素に、クラス名（class）や id名(id)を付与することができ、
CSSではセレクタとしてフル活用されている（右図）。
それらをキーにして要素にアクセスすることもできるが、このとき、以下の違いを認識しておく必要がある。
- １つのid はページ内で一か所しか付与できない（ページ内で「ユニーク」である必要がある）
- クラス名は、複数の要素に付与できる
この違いがあるため、getElementById と getElementsByClassName の２つのネイティブ関数の名の、 Element(s) の部分が、
一方が単数形、一方が複数形という違いがある。

ページ遷移

(ご存じのように）Webでは、リンク（アンカー；HTMLでは a 要素）をクリックすることでページ遷移する（のが一般的な動作;右図）。
このとき、遷移先(HREF属性)を示すURLの末尾に # を挟んでページ内のid名が書かれていれば、その部分が表示される。
- ためしに遷移先として#とidだけが書かれた、右のリンク「本節の先頭に移動」をクリックしてみると（このページ内で移動する）動作が理解できるだろう。
なお、この遷移先は、（ブラウザによって微妙に違うが）カーソルがリンク上に置かれると図にように画面隅に表示される。（されてますよね？）

遷移先表示
- ファイル名またはURLであることが多いが、
- ‘javascript:…’ というような文字列であることもある。
- そのときはクリックされるとコロン(:)の右に書かれたプログラム片が呼び出される。
昨今のWebでは「アフィリエイト」などの仕組みにより、単純に遷移するだけではない動作をする必要があるケースも多く、
ここに書かれたプログラムが大活躍しているのが現状のようである。

以下は次回扱う

=> この課題も来週行います。