ウェブページの自動生成

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

  $ mkdir WSL/ap/0702
  $ cd !$
  

• ダウンロード：
  • js.html - JS/HTMLのサンプル
  • style.css - CSSのサンプル
• ウェブページの表示：
  • 端末で...

    $ ブラウザ js.html &
    

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

  $ エディタ js.html &
  

  エディタは，gedit や notepad.exe 等． （WSL の場合，gedit では日本語を入力できませんでした...）
  今回，CSSの方は編集しなくてもOK．

具体的な作業内容については， 授業時間中にデモンストレーションしながら指示します．

• コンソール表示：

  console.log(データ);
  

  プログラムの動作テスト等のため，データをコンソール画面上に表示する．

  まずは，コンソール表示を利用して，JSの基本事項を学習しよう．
  JSのデータは（ほぼ）全てがオブジェクト． 複数のプロパティ（データを保持する変数）と メソッド（データを操作する関数）の集合体．
• DOM（document object model）操作：

  console.log(HTML要素.innerHTML);
  HTML要素.innerHTML = 文字列;
  

  HTML要素のコンテンツの文字列を取得したり， コンテンツの文字列を更新する． 更新結果は自動的にドキュメント画面上に反映される．

  これを利用して，ウェブページを自動生成できる．
  ウェブページ内のHTML要素も全てオブジェクト． ブラウザは，このオブジェクトの変化に応じて， ドキュメント画面をレンダリングしている．

<タグ id="識別名">
コンテンツ
</タグ>

HTML要素 = document.getElementById(識別名);
HTML要素.innerHTML ...

識別名.innerHTML ...

• 教科書：とほほのWWW入門：
  • とほほのJavaScriptリファレンス： まずは「基本編」でJSの基礎を学習し， 「基本オブジェクト編」と「ブラウザオブジェクト編」を 辞書として活用しましょう．
  今回の課題として，レポート提出は不要ですが， 「基本編」には目を通しておきましょう． 次回，アプリ開発の作業へスムーズに移行するため．
• 開発者向けのウェブ技術：MDN Web Docs
  • JavaScript： より詳細な解説・辞書