JavaScriptで学ぶ プログラミング入門丸一日コース 例題
ソースコードの表示方法 — Google Chromeではドキュメント領域内で右クリック(control+クリック)して[ページのソースを表示]を選択してください
PART I プログラムの基礎的概念
-
JavaScriptの第一歩
-
ダイアログボックス
-
関数
-
document.write
-
document.writeで画像タグを出力
-
Math.random
-
分岐(選択肢)
-
おみくじ(if文)
-
ループ(繰り返し)
-
document.writeをループで利用
-
同じ文章の繰り返し
-
番号を付ける
-
スタイル指定
-
スタイル指定(変数を利用)
-
if文(11枚以上の画像の表示)
-
自作の関数
-
おみくじ(自作の関数を使う)
-
おみくじ(何回も呼び出す)
-
おみくじ(自作の関数 -- 値を返さない関数)
-
おみくじ(自作の関数 -- 引数を使う)
-
タイマー
-
カウントダウン(カウント部分のみ書き換え。後ほど詳細)
-
カウントダウンタイマー(サブ課題)
-
カウントダウンタイマー(無名関数)
以下は詳しい知識をお持ちの方のための参考です。
カウントダウン(document全体を書き換え)
カウントダウンタイマー(アロー関数)
カウントダウンタイマー(画像付きロケット発射。共通項の括りだし)
カウントダウンタイマー(クロージャー。グローバル変数を使わない)
-
配列
-
漢数字のカウントダウン
-
漢数字のカウントダウン(画像付き)
-
文と演算子
-
「+=」などを用いたクイズ
-
文字列を連結する「+」
-
テンプレートリテラル
PART II オブジェクト指向とJavaScript
-
オブジェクト指向とJavaScript
-
windowの高さと幅
-
window.alert
-
window.prompt
-
カウントダウン(カウント部分のみ書き換え)
-
document.writeの代わりにdocument.getElementByIdを使う
-
document.getElementsByClassNameの使用例(参考)
-
Locationオブジェクトのプロパティ
-
location.hrefへの代入(ランダムなニュースサイトへの移動)
-
ブラウザオブジェクトの利用
-
スライドショー(骨格)
-
スライドショー(タイマー)
-
スライドショー(フェードイン・アウト)
PART III イベント
-
イベント
-
Photo Gallery(innerHTML)
まとめ
-
まとめ PART I