JavaScript入門2

基礎

ブラウザ

ブラウザの構成と動作

（右図参照）

サーバに要求を出し、HTML（やCSSなど）を受信し読み込む。
それをもとに内部にDOMと呼ばれるデータ構造（HTMLの要素（=Node）から成る木構造）を構成する。
- CSSによる描画ルールもデータ構造として構成する
レンダラーが（CSSを参照しつつ）DOMを画面に配置し描画する。
イベントの発生を待ち、イベントに応じてJavaScriptによるプログラム（もしあれば）を　　内蔵のJSエンジンが実行する。

DOMについて

DOMは木構造
その節点に相当する部分を Node あるいは Element と呼んでいる。
JSのプログラムからそのNodeにアクセスするときは、（プログラミング言語でいう）Object として扱う
Nodeの構造に従って、その相互間に上下関係（親子関係）ができる。（アクセスの際には重要）

JavaScript入門2

ライブラリ

本ページで扱うプログラムは、（jQueryに代表されるような）ライブラリを使うと楽に書けることがある。が
JSの概要を理解することを重視するため、ここではネイティブな機能だけを使うことにしておく。
- 次の段階で、ライブラリの使い方も学びましょう

4 要素を作る

準備

まずは土台になるHTMLを作っておこう。

markdownで書くならこんな感じ(ソース)

  + あいうえお
  + かきくけこ
  + さしすせそ

それを変換するか、HTMLを直接書くなら(ソース)、

  <!DOCTYPE html>
  <meta charset=utf-8>

  <ul>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
  </ul>

実習

上記のHTMLをブラウザで開き、
開発ツール（コンソール）上で
以下の式を順々に（何をしているか理解しながら）実行してみよう

親要素（になるべきもの）

 var pa=document.getElementsByTagName('ul')[0]

子要素（になるべきもの）

 var ch=document.createElement('li')
 ch.textContent="まみむめも"

関係づけ
```
 pa.appendChild(ch)
```

5 CSS属性を変化させる（など）

準備

HTMLを作っておく

  <!DOCTYPE html>
  <meta charset=utf-8>

  <div></div>
  <style>
  div {width:100px ; height:100px;
       background-color: yellow;
  }
  </style>

実習１

前提として、div要素を「取得」しておく
```
  var d=document.getElementsByTagName('div')[0]
```
以下のような式を入力して状況を知る、または変化をつけてみる
```
  // body の背景色
      document.body.style.backgroundColor="#ffcccc"

  // 位置の変更(ここでは左端座標）
  d.style.left="100px"

  // サイズの変更(ここでは幅）
  d.style.width="300px"
```
- HTML要素（を現すJSオブジェクト）の、styleプロパティ（をいちど表示させてみるとわかる）は、
  その要素のCSS属性の一覧をオブジェクトとして保持している。
- ただしこの属性は当該要素に直接設定されたスタイル指定に限定。 CSSファイルの中でセレクタ（タグ名やクラス名の組み合わせ）に対するスタイル指示をしたものはここには値はない。（が値を設定すれば表示に反映される）
- プログラムからアクセスできる（オブジェクトの）属性名は、概ねCSS属性名と同じだが、CSSでケバブケース表記のものはキャメルケースに変換されている。
  - JSでは（殆どのプログラミング言語で）ハイフン - はマイナスの演算子として解釈されるのでこういう変換が必要になるのは理解できるだろう。
なお、現在のサイズや位置をデータとして取得するときには style 属性（オブジェクトの属性）は使えない
（代わりに以下のような属性名がある）
```
  d.clientLeft
  d.clientWidth
```
なので、要素の表示位置を少しずらすような処理は、以下のように若干複雑になる。
```
  d.style.left=d.clientLeft+5+"px"
```
なお、色や余白寸法など様々なCSS属性について、要素ごとの現在値を取得する方法が与えられていないケースが多い。
- xxxxというクラスの要素にはこういうCSSルールを、
  yyyyというクラスの要素にはこういうCSSルールを、
  というCSS定義を作っておいて、当該要素に付与するクラス名をプログラムで変更するというアプローチがよく使われる。
- ~~addClassName, removeClassName メソッドが用意されている~~
  （この記述は（ネイティブ関数の解説としては）誤り。
  次回あらためて解説します。）

総合実習

これまでに学んだJS技術を活用した、ページに変化を引き起こすプログラムを作ってみよう（自由課題）

作りたいプログラムが思い浮かばない人のために例題：

５秒ごとに文字が増えていくページ
５秒ごとに画面の背景が
乱数で生成された色で変化するページ
画面上にある四角い領域（DIV)のサイズが
ゆるやかなスピードで伸び縮みするページ

解答例のページも作っておいたが、自分なりに奮闘努力してから見るようにして下さい。