# 受託講座のカリキュラム

**概要**

この講座では事前で学んだHTML, CSSを用いながら、より実践的なWebサービスの開発に欠かせないJavascriptに親しんでもらう。

**目標**

Javascriptの基礎を学習して、基本的な文法(データ型・変数・関数・配列・イベント・if文等)やブラウザにデータの表示・変更が理解できるようにする。

上記を組み合わせれば色々なアプリが作れることを体験してもらう。

**用意**

この講座ではエディタとWebブラウザは以下を推奨する

- エディタ
- VScode
- Webブラウザ
- Chrome

VScodeはインストールしたら以下の拡張機能をインストールすること
- 必須
- zenkaku : 全角文字が挿入されていた場合にハイライトで教えてくれる。
- Japanese Langage Pack for vscode : VScode日本語化
- 推奨
- JS-CSS-HTML Formatter : 保存すると自動でコード整形してくれる。ごちゃごちゃのコードになりにくい。
- Auto Rename Tag : HTMLの開始タグと閉じタグを自動で補完してくれる
- indent-rainbow : インデントをカラフルに表示して視認性を高める。初学者はあるといいかもしれない。
- Bracket Pair Colorizer : ブロック(波括弧)の対応をカラフルにしてくれる。初学者はカッコの過不足でエラーが頻出するのであるといい。

****

## 1日目

### VScodeのインストール
### 拡張機能のインストール

こっから実際に触りながらやる

### 1.Javascripptの基礎

- これから学習するjavascriptって何？
- JSの記載する場所
- 変数とか、文字列の書き方
- [ ] HTML・ChromeDevツールで表示
- dev toolの簡単な使い方
- console.log( )について
- 計算してみたり、変数代入とか
- ログの種類を紹介。代入しては出力する。
- ブロック
- デバッグのやり方的な

- ボタンを押したら表示を変更する
文字列の操作
文字列の挿入

- インプットフォームから入力値を取得して表示
DOMの取得とか、出力とか。
変数とか代入とか。
テンプレート文字列も余裕があれば。
フェードインアウトとかのメソッドも余裕があれば紹介

## 2, 3日目

2つ3つの簡単なアプリを作りながら言語仕様を学ぶと共に、簡単な組合せでゲームなどが作れることを知ってもらう。

- 英単語クイズ
表示された日本語を英単語に訳する。
Objectの概念、初めは1問だけ
配列の概念、複数問題をランダムで出題
if分岐、答え合わせの判定など

- iTunesのAPIを使った曲当てゲーム
APIの理解, Ajax等
localStorageとかも余裕があったら

- Mapアプリとか
CDNの使い方とか
Web APIとか
GoogleのAPIを使ってもいいけど、クレカの登録が必要なので、BingMapAPIを使うといいのかも