授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
JavaScriptの特徴を説明出来る。
HTMLのページにJavaScriptを組み込むことが出来る。 |
初回ガイダンス
インラインスクリプト、外部スクリプト
HTML要素の取得、デバッグコンソールの使い方
プロパティ、メソッド |
| 【理解度確認】実習課題 |
| 2 |
JavaScriptのイベントハンドラを使って、動的なWebサイトを作成出来る。 |
イベントハンドラ
addEventListener |
| 【理解度確認】実習課題 |
| 3 |
JavaScriptのプログラム内で、Webサイトに適用されたCSSを変更出来る。 |
CSSの変更
style, classList |
| 【理解度確認】実習課題 |
| 4 |
JavaScriptの配列を使って、動的なWebサイトを作成出来る。
オブジェクトの概念を理解し、説明出来る。 |
配列、連想配列、オブジェクト |
| 【理解度確認】実習課題 |
| 5 |
配列用のメソッドを使って、配列の各要素を適切に処理出来る。 |
reverse, forEach, map, filter |
| 【理解度確認】実習課題 |
| 6 |
JavaScriptのプログラム内で、HTMLの要素を追加・削除・編集出来る。 |
HTML要素の追加、削除、編集 |
| 【理解度確認】実習課題 |
| 7 |
タイマーを使った動的なWebサイトを作成出来る。 |
setInterval, clearInterval
setTimeout, clearTimeout
requestAnimationFrame |
| 【理解度確認】実習課題 |
| 8 |
これまでの学習内容を活かして、Webサイトを作成出来る。 |
総合演習（JavaScript基礎） |
| 【理解度確認】実習課題 |
| 9 |
JavaScriptを使ってサーバからデータを取得し、画面に表示出来る。 |
サーバ連携手法、RESTful API
データ取得方法（fetch API：GET） |
| 【理解度確認】実習課題 |
| 10 |
JavaScriptを使ってサーバにデータを送信出来る。 |
データ送信方法（fetch API：POST） |
| 【理解度確認】実習課題 |
| 11 |
JavaScriptを使って外部のWebAPIを実行し、その結果を表示出来る。 |
Google Cloud API |
| 【理解度確認】実習課題 |
| 12 |
JavaScriptのクラスを使って内部データを適切に管理出来る。 |
クラス
Google Cloud API |
| 【理解度確認】実習課題 |
| 13 |
ブラウザにデータを保持し、再度閲覧したときにそのデータを参照して動作を切り替えるWebサイトが作成出来る。 |
localStorage, sessionStorage |
| 【理解度確認】実習課題 |
| 14 |
これまでの学習成果をもとに、ユーザビリティを考慮したECサイトのトップページが制作出来る。 |
総合問題（サーバ連携） |
| 【理解度確認】実習課題 |
| 15 |
これまでの学習成果をもとに、ユーザビリティを考慮したECサイトのトップページが制作出来る。 |
総合問題（サーバ連携） |
| 【理解度確認】実習課題 |
