対話的ウェブページの作成

• 作業用ディレクトリの準備：

  $ mkdir ap/0628
  $ cd !$
  

• ダウンロード：
  • input.html - 主要入力要素の利用例（JS不使用）
  • 99-1.html - クイズ系アプリの作成例「九九ドリル」Ver.1
• ウェブページの表示：

  $ firefox  〇〇.html  &
  

• コンソール（ウェブ開発ツール）の表示： ブラウザ内で [Ctrl]+[Shift]+[K]キー，等．
• ウェブページの編集：

  $ gedit  〇〇  &
  

  今回，CSSは用意していない． 必要に応じて，各自で作成．

具体的な作業内容については， 授業時間中に指示します．

• HTMLの入力要素： <button>〜</button> <select> <option>〜</option> <option>〜</option> </select>
  <textarea>〜</textarea> 等...
• イベント処理：ウェブページ上でクリックやキー入力等のイベント発生→JSのコードを実行

  <HTML要素 ... イベント属性="JSコード">
  

  イベント属性の例：onClick，onChange，onKeyDown，...

  JSコードとしては，何でも記述してよいが， 下記のように関数呼出がオススメ．

  イベント属性は，入力要素に限らず，どのHTML要素（例えば，タイトルH1 とか）にも適用可能． しかし，入力要素を使えば「ここを押してね」というメッセージがユーザに伝わり易く， 直観的な操作性を実現，みたいな...
• JSの関数：

  // 関数の定義
  function 関数名(仮引数１, 仮引数２, ...) {
  				// 仮引数は関数内だけで通用するvar変数
  	処理
  	...
  	return 戻り値	// 戻り値やreturnは無い場合もある
  }
  
  // 関数の呼出とその使用例
  let 変数 = 関数名(実引数１, 実引数２, ...);
  
  // HTML内での使用例
  <HTML要素 onClick="関数名(実引数１, ...)">
  

  JSの関数は，基本的にはＣ言語などと同様．
  HTML要素内のイベント処理関数の実引数として「this」を使うと， その要素のDOMオブジェクトが関数に渡される．
• 可変引数な関数： 仮引数としてスプレッド構文「...配列名」を使うと， 任意の個数の実引数が，その配列に代入される．

  具体例：

  function varArg(x, ...va)
  {
  	...
  }
  
  varArg(1);		// → x = 1, va = [], va.length = 0
  varArg(1, 2);		// → x = 1, va = [2], va.length = 1, va[0] = 2
  varArg(1, 2, 3);	// → x = 1, va = [2, 3], va.length = 2, va[0] = 2, va[1] = 3
  ...
  

  つまり，単独変数用の関数と複数変数用の関数との作り分けが不要なので， これは便利．
  紛らわしいですが，この「...va」は説明の省略ではなく， そのまま「...」（半角ドット三連続）と「va」（配列名）とを記述するんですよ．

教科書： とほほのWWW入門

• HTMLリファレンス： 今回は，各入力要素（「<button>」，「<input>」，等）の他， イベント属性（「グローバル属性」のon〇〇）についても調査しよう．
• とほほのJavaScriptリファレンス： 今回は，主に「基本オブジェクト」の「関数（Function）」について学習しよう． 可変長引数のスプレッド構文は「配列（Array）」も．

クイズ系の対話的ウェブアプリを自由に作成せよ． HTMLファイルの他，CSSファイルも作成すること．

担当教員へレポートを送信せよ：

• To：yanagawa@kushiro-ct.ac.jp
• Subject：ap-0628
• 本文：作品の説明（改造版なら変更・工夫事項の説明）
• 添付：
  • JS/HTMLファイル.html
  • CSSファイル.css
• 提出期限：07月12日（金）17:00