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

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

  $ mkdir WSL/ap/0711
  $ cd !$
  

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

    • Ver.2
    • Ver.3
    • 完成版
• ウェブページの表示：
  • 端末で...

    $ ブラウザ 〇〇.html  &
    

    ブラウザは，firefox，firefox.exe，chrome.exe，等．
  • ブラウザで「ファイル→開く」等．
  • エクスプローラで開く．
• コンソール（ウェブ開発ツール）の表示：
  • Firefox の場合，[Ctrl]+[Shift]+[K]キー，等．
  • Chrome の場合，[Ctrl]+[Shift]+[J]キー，等．
• ソースコードの表示：[Ctrl]+[U]キー，等．
• ウェブページの編集：

  $ エディタ 〇〇.html  &
  

  エディタは，gedit や notepad.exe 等． （WSL の場合，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オブジェクトが関数に渡される．

  具体例：デモ

  // HTML
  <button id="btn" onclick="pushed(this.id)"></button>
  
  // JS
  <script>
  function pushed(elem) {
  	n++;
  	if (n%2 == 1) {
  		btn.innerHTML = "押すなって";
  	} else {
  		btn.innerHTML = "押すなよ";
  	}
  	console.log(elem + " pushed " + n + " times.");
  }
  
  let n = 0;
  </script>
  

• 可変引数な関数： 仮引数としてスプレッド構文「...配列名」を使うと， 任意の個数の実引数が，その配列に代入される．
  この「...」は省略の意味ではありませんよ． 「...」と記述．

  具体例：

  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-0711
• 本文：作品の説明（改造版なら変更・工夫事項の説明）
• 添付：
  • JS/HTMLファイル.html
  • CSSファイル.css
• 提出期限：07月18日（金）17:00