[JavaScript] 3.1 プロジェクトの実践: 簡単な Web アプリケーションの作成

記事ディレクトリ

この章では、JavaScript を使用して簡単な Web アプリケーションを作成する方法を学びます。これは、ユーザーが新しい To Do 項目を追加したり、完了した項目にマークを付けたり、項目を削除したりできる To Do リストアプリになります。このプロジェクトを通じて、JavaScript を使用して DOM を操作し、イベントを処理し、データストレージに localStorage を使用する方法を学びます。

プロジェクトの要件

ToDo リストアプリは次の要件を満たす必要があります。

ユーザーは入力ボックスに To Do 項目を入力し、「追加」ボタンをクリックして To Do 項目をリストに追加できます。
ユーザーは To Do 項目の横にあるチェックボックスをクリックして、完了済みとしてマークできます。
ユーザーは、To Do 項目の横にある削除ボタンをクリックして、To Do 項目をリストから削除できます。
ユーザーがブラウザを閉じた後、ToDo リストの状態が保存され、ユーザーが再度ブラウザを開いたときに、以前の ToDo リストを表示できる必要があります。

HTML構造

まず、HTML ページの基本構造を作成する必要があります。入力ボックス、追加ボタン、ToDo リストが必要です。

<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
</head>
<body>
  <input id="todoInput" type="text" placeholder="What needs to be done?">
  <button id="addButton">Add</button>
  <ul id="todoList"></ul>
  <script src="app.js"></script>
</body>
</html>

この HTML ファイルには、ToDo 項目を入力するための input 要素、ToDo 項目を追加するための button 要素、および A ul 要素は、ToDo リストを表示するために使用されます。また、アプリケーションロジックを含む外部 JavaScript ファイルapp.jsも含まれています。

JavaScript ロジック

次に、アプリケーションロジックを実装するための JavaScript コードを作成する必要があります。まず HTML 要素への参照を取得し、次にこれらの要素を操作する必要があります。

var todoInput = document.getElementById('todoInput');
var addButton = document.getElementById('addButton');
var todoList = document.getElementById('todoList');

ToDo項目を追加する

追加ボタンのクリックイベントをリッスンする必要があります。クリックイベントが発生すると、新しい To Do 項目を作成し、リストに追加します。

addButton.addEventListener('click', function() {
    
    
  var todoText = todoInput.value; // 获取待办事项的文本
  todoInput.value = ''; // 清空输入框

  var todoItem = document.createElement('li'); // 创建一个新的li元素
  todoItem.textContent = todoText; // 设置li元素的文本

  var checkbox = document.createElement('input'); // 创建一个新的input元素
  checkbox.type = 'checkbox'; // 设置input元素的类型为checkbox
  todoItem.prepend(checkbox); // 将checkbox添加到li元素的前面

  var deleteButton = document.createElement('button'); // 创建一个新的button元素
  deleteButton.textContent = 'Delete'; // 设置button元素的文本
  todoItem.append(deleteButton); // 将button添加到li元素的后面

  todoList.append(todoItem); // 将li元素添加到列表中
});

このコードでは、最初に To Do アイテムのテキストを取得し、次に入力ボックスをクリアします。次に、新しい li 要素を作成し、そのテキストを設定します。また、チェックボックスと削除ボタンも作成し、 li 要素に追加しました。最後に、 li 要素をリストに追加します。

To Do アイテムにマークを付ける

チェックボックスのクリックイベントをリッスンする必要があります。クリックイベントが発生すると、To Do アイテムに完了のマークが付けられます。

todoList.addEventListener('change', function(event) {
    
    
  if (event.target.type === 'checkbox') {
    
    
    var checkbox = event.target;
    var todoItem = checkbox.parentElement;
    todoItem.style.textDecoration = checkbox.checked ? 'line-through' : 'none';
  }
});

このコードでは、リストのchangeイベントをリッスンします。チェックボックスの状態が変化すると、change イベントがトリガーされます。イベントのターゲットがチェックボックスであるかどうかを確認し、チェックボックスである場合は、チェックボックスとその親要素 (つまり、 li 要素) を取得し、状態に基づいてを変更します。チェックボックスの li 要素のスタイル。

To Do アイテムを削除する

削除ボタンのクリックイベントをリッスンする必要があります。クリックイベントが発生すると、ToDo 項目がリストから削除されます。

todoList.addEventListener('click', function(event) {
    
    
  if (event.target.tagName === 'BUTTON') {
    
    
    var button = event.target;
    var todoItem = button.parentElement;
    todoList.removeChild(todoItem);
  }
});

このコードでは、リストのclickイベントをリッスンします。削除ボタンをクリックすると、click イベントがトリガーされます。イベントのターゲットがボタンであるかどうかを確認し、ボタンである場合は、ボタンとその親要素 (li 要素) を取得し、要素を削除します。 4> リストから要素を選択します。 li

To Do アイテムを保存する

To Do アイテムのステータスを保存するには、localStorage を使用する必要があります。 To Do アイテムが追加、マーク、または削除されると、localStorage を更新する必要があります。

まず、localStorage から ToDo 項目のステータスを読み取り、ページが読み込まれたときにリストを更新する必要があります。

window.addEventListener('load', function() {
    
    
  var todos = JSON.parse(localStorage.getItem('todos')) || [];
  for (var i = 0; i < todos.length; i++) {
    
    
    var todo = todos[i];
    createTodoItem(todo.text, todo.completed);
  }
});

このコードでは、load イベントをリッスンします。ページが読み込まれると、localStorage から To Do 項目のステータスを読み取り、これらのステータスを使用して To Do 項目を作成します。

次に、ToDo 項目が追加、マーク、または削除されたときに、localStorage を更新する必要があります。

function updateLocalStorage() {
    
    
  var todos = [];
  var todoItems = todoList.children;
  for (var i = 0; i < todoItems.length; i++) {
    
    
    var todoItem = todoItems[i];
    var text = todoItem.textContent;
    var completed = todoItem.querySelector('input').checked;
    todos.push({
    
     text: text, completed: completed });
  }
  localStorage.setItem('todos', JSON.stringify(todos));
}

この関数では、ToDo リストを反復処理し、各 ToDo 項目のテキストと完了ステータスを配列に保存します。次に、この配列を JSON 文字列に変換し、localStorage に保存します。

To Do 項目を追加、マーク、または削除するイベントハンドラー関数でこの関数を呼び出す必要があります。

addButton.addEventListener('click', function() {
    
    
  // ...
  updateLocalStorage();
});

todoList.addEventListener('change', function(event) {
    
    
  // ...
  updateLocalStorage();
});

todoList.addEventListener('click', function(event) {
    
    
  // ...
  updateLocalStorage();
});

要約する

このプロジェクトを通じて、私たちは JavaScript を使用して簡単な Web アプリケーションを作成する方法を学びました。 DOM の操作方法、イベントの処理方法、データストレージに localStorage を使用する方法を学びました。これは、JavaScript の基本概念をより深く理解し、適用できる素晴らしい実践的なプロジェクトです。

次の章では、JavaScript について詳しく学びます。学習プロセスに楽しみを見つけて、JavaScript の学習からプログラミングの旅を始めていただければ幸いです。
ここに画像の説明を挿入します