課題：DOMの操作でWebページに動きをつけよう

INDEX

課題：DOMの操作でWebページに動きをつけよう

課題テーマ

課題テーマは「DOMの操作」です。
作品例を参考にして、JavaScriptを使用したWebページを作成して下さい。

これまでに本教材で学習したことを使うのはもちろん、学んでいないことも自分で調べながら作成してみましょう。
Webサイト、ゲーム etc... JavaScriptを使用してDOMを操作し、ブラウザで閲覧できる作品ならなんでもOKです！

自分で用意した画像素材を使うのはOKです！
CSSによるWebページのスタイリングも自由に行なって下さい。

作品例

おみくじ

13_課題_1

合計金額の計算

13_課題_2

注文画面

13_課題_3

計算機

13_課題_4

順番決めアプリ

13_課題_5

ブラウザゲーム

13_課題_6

課題の目標

本教材で学んだJavaScriptの知識を、確実に自分のものとして身につけること。

自由な発想でプログラムを考えること。

課題ファイルの作成手順

🟧 1. ディレクトリ構成

次のディレクトリ構成で、ファイルを作成して下さい。

ファイル構成

kadai_JavaScript

　├─ js_kadai.html

　└─ js

└─ js_kadai.js

🟧 2. HTMLファイル

js_kadai.htmlに、以下のコードを記述してから作品制作をスタートして下さい。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DOMの操作でWebページに動きをつけよう</title>
  </head>
  <body>
  
  
    <script src="js/js_kadai.js"></script>
  </body>
</html>

js_kadai.html

🟧 3. JSファイル

js_kadai.jsに、JavaScriptを記述して下さい。

DOMの操作、イベント処理、関数、条件分岐、変数と定数、配列、ループなど、本教材で学んださまざまな知識を組み合わせて、思い通りのプログラムを書いてみましょう。

合格の基準

DOMを操作することにより、動きのあるWebページを作成できていること。

以上で「課題：DOMの操作でWebページに動きをつけよう」の解説を終わります。

お疲れ様でした！

前の章に戻る