完全無料のJavaScript学習講座 12日目：第2週の復習と実践

今回は、第二週目に学んだ内容を復習し、実践的な例を使って理解を深めましょう。

今日実践してもらうプログラムはこんな感じです。

シンプルなToDoリスト

ToDoリスト

第2週目の復習

まず、第2週の復習です。

今週の学習ポイントは以下の通りです。

DOMの概念とツリー構造

DOM要素の選択方法

DOM要素の属性とスタイルの操作

DOM要素の追加、削除、変更

イベントリスナーとイベントハンドリング

実践

次に、実践的な例を用いて学んだ内容を使ってみましょう。

今回は、シンプルなToDoリストアプリを作成してみます。

HTMLファイルに、入力欄（テキストボックス）、追加ボタン、ToDoリストを表示する領域を作成します。
JavaScriptで、追加ボタンがクリックされたときにイベントリスナーを登録し、入力欄の内容を取得します。
入力欄の内容をToDoリストに追加するため、新しい要素（li要素）を作成し、そのテキストに入力内容を設定します。
ToDoリストの表示領域に新しい要素を追加します。

プログラムコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>シンプルなToDoリスト</title>
  <style>
    #simpleTodoApp {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: auto;
    }
    #simpleTodoApp input, #simpleTodoApp button {
      font-size: 1.2em;
    }
    #simpleTodoApp ul {
      padding: 0;
    }
    #simpleTodoApp li {
      list-style-type: none;
      font-size: 1.2em;
      margin: 5px 0;
    }
    #simpleTodoApp .completed {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <div id="simpleTodoApp">
    <h1>ToDoリスト</h1>
    <input type="text" id="todoInput" placeholder="タスクを入力してください">
    <button id="addButton">追加</button>
    <ul id="todoList"></ul>
  </div>

  <script>
    // 第2週3日目のDOM操作の基本
    const addButton = document.getElementById('addButton');
    const todoInput = document.getElementById('todoInput');
    const todoList = document.getElementById('todoList');

    // 第2週5日目のイベントリスナーとイベントハンドリング
    addButton.addEventListener('click', () => {
      const task = todoInput.value; // 入力されたタスクを取得

      if (task === "") {
        alert("タスクを入力してください");
        return;
      }

      // 第2週4日目のDOM要素の追加
      const listItem = document.createElement('li');
      listItem.textContent = task;

      // チェックボックスを作成し、li要素に追加
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      listItem.prepend(checkbox);

      // チェックボックスがクリックされた時の処理
      checkbox.addEventListener('change', () => {
        if (checkbox.checked) {
          listItem.classList.add('completed');
        } else {
          listItem.classList.remove('completed');
        }
      });

      todoList.appendChild(listItem);
      todoInput.value = "";
    });
  </script>
</body>
</html>

まとめ

かなり難しくなってきましたね。

学んだ内容を使って動くプログラムを作ることができれば、今後更に複雑になってくる学習にもついていけるはずです。

知るだけじゃなく、学んだ内容を活かしたいろんなプログラムを作ってみてください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！