JavaScriptで学ぶ プログラミング入門丸一日コース 例題

ソースコードを見るには、Chromeで[表示]→[開発/管理]→[ソースを表示]の順に選択してください。

PART I プログラムの基礎的概念

  1. JavaScriptの第一歩
    1. ダイアログボックス
  2. 関数
    1. document.write
    2. document.writeで画像タグを出力
    3. Math.random
  3. 分岐(選択肢)
    1. おみくじ(if文)
  4. ループ(繰り返し)
    1. document.writeをループで利用
    2. 同じ文章の繰り返し
    3. 番号を付ける
    4. スタイル指定
    5. スタイル指定(変数を利用)
    6. if文(11枚以上の画像の表示)
  5. 自作の関数
    1. おみくじ(自作の関数を使う)
    2. おみくじ(何回も呼び出す)
    3. おみくじ(自作の関数 -- 値を返さない関数)
    4. おみくじ(自作の関数 -- 引数を使う)
  6. タイマー
    1. カウントダウンタイマー(ロケット発射)
    2. カウントダウンタイマー(サブ課題)
    3. カウントダウンタイマー(無名関数)
    4. カウントダウンタイマー(アロー関数、参考)
    5. カウントダウンタイマー(画像付きロケット発射。共通項の括りだし)
  7. 配列
    1. 漢数字のカウントダウン
    2. 漢数字のカウントダウン(画像付き)
  8. 文と演算子
    1. 「+=」などを用いたクイズ
    2. 文字列を連結する「+」
    3. テンプレートリテラル
    4. ラッキーナンバー(変数を使う)

PART II オブジェクト指向とJavaScript

  1. オブジェクト指向とJavaScript
    1. windowの高さと幅
    2. window.alert
    3. window.prompt
    4. カウントダウン改良版(カウント部分のみ書き換え)
    5. Locationオブジェクトのプロパティ
    6. location.hrefへの代入(ランダムなニュースサイトへの移動)
    7. navigator
  2. ブラウザオブジェクトの利用
    1. スライドショー(骨格)
    2. スライドショー(タイマー)
    3. スライドショー(フェードイン・アウト)
    4. スライドショー(別解、getElemetById)

PART III イベント

  1. イベント
    1. Photo Gallery(innerHTML)
    2. Photo Gallery(innerHTML、addEventListner)
    3. Photo Gallery(CSS)