プログラミングの初歩(2)

• JS を前提にすすめます。
• 前回の続きです。

いくつかの実習

1. pug でページを書いてHTMLを生成する
   => これは各自でやっておいて下さい（できたら報告してね）

   • この資料集のトップページにあるサイト内検索で pug を引くと情報が得られる筈

2. jQuery を含むWebページを作る

3. jsファイル（JavaScriptのソース・ファイル）を作って実行

   • クライアント側のコード をWebページ内で実行 => タグ <script src="... "> で呼び出すか、
     HTMLの中（scriptタグに囲まれた箇所）にコードを直接書く
   • サーバサイドのコードを node.js で実行
     • コマンドプロンプトから node ファイル名 で呼び出す。
     • なお、右図のようにエディタの中で直接実行できるものもある（図は Atom）

この２，３については、各自が、上記の指示だけで（知ってる知識で、または調べながら）できるかどうか、 やってみて報告ください。

DOM操作

（以前のレクチャーの記録も参照）

• ブラウザは HTMLを読み込み、そこに含まれる タグ を
• 要素（タグと同じ名前の）として、ページ毎のデータ空間に、位置づける。
• その構造は、ページの構造に対応した木構造になる。
• これがDOMと呼ばれるもの。

ネイティブ関数を使う

1. 要素を（ハンドルとして）取得

   • getElement…系の関数を使う

   • 単数形の取得関数（Element型の値が返される）と、複数形の取得関数 （Elementの配列、のようなものが返される）があることに注意。

     複数形の関数は NodeList, HTMLCollection といった型の （一貫性が欠如している部分があるが歴史的経緯だろう） オブジェクト（配列と同じように扱うことができる）を返す。

   • これ以外に query系の取得関数もあるが今日は省略した。

2. 要素に対する操作
   • 今日はサンプルとして、
     1. input要素の value属性の値
     2. button要素の textContent属性の値（表示される文字）
     を取得したり設定（代入したり）するやり方を提示した。
3. 要素を作る
   • document.createElement 等の関数を使う
     • 他に document.createTextNodeなども。
   • 作っただけでは画面には表示されない（DOM構造のどこに位置づけるか、場所を指定してあげる必要がある＝＞次のステップへ）
4. 挿入（作るだけでは不足なので）
   • DOMのつながり（右図のような木構造）のどこかに新たに作成した要素をつなげてやる必要がある。
   • insertBefore または appendChild を使って、3.で作った要素を、「この要素の前に挿入する」とか「子要素（chirdren）の末尾に追加する」といった意味で位置づける。
     • この図（借り物）がわかりやすいかも知れない
     • ネイティブ関数は数が少ない上に一貫性のなさも相まって使いづらい点があるかも知れない。

プログラムから呼ぶ（実習）

1. ユーザ操作に対するアクションとして

2. タイマーで起動

   • setTimeout, setInterval の第一引数として関数（などの手続き）を渡す。
   • 第２引数は経過時間または時間間隔（単位はミリ秒）。

   ---

   以下は次回につづく

3. 複数の要素をまとめて

4. 論理を追加

jQueryでも同じことができる

1. jQuery (または $）という名のオブジェクト（変数）、と関数
2. jQueryオブジェクト
3. 様々なメソッド
4. メソッドチェーン