JavaScriptをベースにしたWebメモアプリの開発

JavaScript ベースの Web メモ アプリケーションの開発

メモは私たちの生活の重要な部分であり、やるべきこと、重要な日付、計画などを記録するために使用されます。 。インターネットの発展に伴い、Webメモアプリの需要も高まっています。今回はJavaScriptを使って簡単なWebメモアプリを開発していきます。

始める前に、基本的な HTML と CSS コードを準備する必要があります。まず、メモを表示するためのリストが必要です:

<ul id="memos"></ul>

次に、新しいメモを追加するための入力ボックスとボタンが必要です:

<input id="memoInput" type="text" placeholder="输入备忘录">
<button id="addButton">添加</button>

次に、美化するための CSS コードを記述する必要があります。 Web メモ アプリケーション:

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

input {
  padding: 5px;
  font-size: 16px;
}

button {
  padding: 5px 10px;
  background-color: #428bca;
  color: white;
  border: none;
  cursor: pointer;
}

上記は、必要な基本的な HTML および CSS コードです。次に、JavaScript を使用して Web メモ アプリケーションに機能を追加します。

まず、入力ボックスとボタンの参照を取得する必要があります:

var memoInput = document.getElementById('memoInput');
var addButton = document.getElementById('addButton');

次に、ボタンのクリック イベント リスナーを追加する必要があります。ボタンがクリックされると、追加関数:

addButton.addEventListener('click', addMemo);

次に、メモを追加する関数を定義する必要があります。この関数は入力ボックスの値を取得し、メモ リストに追加します。

function addMemo() {
  var memoText = memoInput.value;
  var memoList = document.getElementById('memos');
  
  if (memoText) {
    var memoItem = document.createElement('li');
    memoItem.textContent = memoText;
    memoList.appendChild(memoItem);
    memoInput.value = '';
  }
}

上記のコードでは、まず入力ボックスの値を取得し、それが空かどうかを確認します。空でない場合は、新しい <li> 要素を作成し、入力ボックスの値をそのテキスト コンテンツに設定します。次に、新しいメモ項目をメモ リストに追加し、入力ボックスの値を空にリセットします。

最後に、ページが読み込まれた後に Web メモ アプリケーションを初期化し、いくつかの初期メモをメモ リストに追加する必要があります。

window.onload = function() {
  var initialMemos = ['购买礼物', '完成报告', '约会晚餐'];
  var memoList = document.getElementById('memos');
  
  for (var i = 0; i < initialMemos.length; i++) {
    var memoItem = document.createElement('li');
    memoItem.textContent = initialMemos[i];
    memoList.appendChild(memoItem);
  }
}

上記のコードでは、配列を使用していくつかのメモを保存します。初期メモ。次に、ループを使用して配列内の各ノートを反復し、順番にノートのリストに追加します。

以上の手順で、簡単なWebメモアプリの開発が完了しました。ユーザーは入力ボックスに内容を入力し、ボタンをクリックしてメモを追加できます。すべてのメモがメモ一覧に表示されます。

JavaScript イベント リスニングと DOM 操作を通じて、Web アプリケーションの対話型機能を簡単に実装できます。この記事のサンプル コードが、Web アプリケーションを開発するための JavaScript を理解して学習するのに役立つことを願っています。

以上がJavaScriptをベースにしたWebメモアプリの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。