ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。