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

ソースコードの表示方法 — Google Chromeではドキュメント領域内で右クリック(control+クリック)して[ページのソースを表示]を選択してください

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. カウントダウンタイマー(無名関数)

      以下は詳しい知識をお持ちの方のための参考です。
      カウントダウン(document全体を書き換え)
      カウントダウンタイマー(アロー関数)
      カウントダウンタイマー(画像付きロケット発射。共通項の括りだし)
      カウントダウンタイマー(クロージャー。グローバル変数を使わない)

  7. 配列
    1. 漢数字のカウントダウン
    2. 漢数字のカウントダウン(画像付き)
  8. 文と演算子
    1. 「+=」などを用いたクイズ
    2. 文字列を連結する「+」
    3. テンプレートリテラル

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

  1. オブジェクト指向とJavaScript
    1. windowの高さと幅
    2. window.alert
    3. window.prompt
    4. カウントダウン(カウント部分のみ書き換え)
    5. document.writeの代わりにdocument.getElementByIdを使う
    6. document.getElementsByClassNameの使用例(参考)
    7. Locationオブジェクトのプロパティ
    8. location.hrefへの代入(ランダムなニュースサイトへの移動)
  2. ブラウザオブジェクトの利用
    1. スライドショー(骨格)
    2. スライドショー(タイマー)
    3. スライドショー(フェードイン・アウト)

PART III イベント

  1. イベント
    1. Photo Gallery(innerHTML)

まとめ

  1. まとめ PART I