JavaScript で単語カウンターを作成する方法
単語カウンターは、テキスト内の単語数をカウントするために使用できるツールです。ドキュメントの長さを確認したり、単語数の制限に達しているかどうかを追跡したりするために使用できます。
HTML、CSS、JavaScript を使用して、独自の単語カウンターを作成できます。Web ブラウザーで単語カウンターを開き、入力フィールドにテキストを入力して、使用している単語数を確認します。
このプロジェクトは、JavaScript の知識を練習して固めるのにも役立ちます。
ワード カウンターの UI を作成する方法
単語カウンターの UI を作成するには、基本的な HTML ページにテキスト領域入力を追加します。これは、単語を数えたい文または段落を入力できる場所です。
- 「index.html」という新しい HTML ファイルを作成します。
- ファイル内に、HTML Web ページの基本構造を追加します。
<!doctype html>
<html lang="en-US">
<head>
<title> Word Counter </title>
</head>
<body>
<div class="container">
<h1> Count Words </h1>
</div>
</body>
</html> - コンテナー div 内と見出しの下に、テキスト領域を追加します。
<textarea id="input" rows="10"></textarea> - テキスト領域の下に、ボタンを追加します。
<button id="count-button">Count Words</button> - ユーザーが上のボタンをクリックしたときに単語数を表示する span タグを追加します。
<div>
Words: <span id="word-count-result">0</span>
</div> - HTML ファイルと同じフォルダーに、「styles.css」という名前の新しいファイルを作成します。
- CSS ファイルに CSS を入力して、Web ページのスタイルを設定します。
body {
margin: 0;
padding: 0;
background-color: #f0fcfc;
}* {
font-family: "Arial", sans-serif;
}.container {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2rem;
color: #202C39;
}textarea {
padding: 20px;
font-size: 1rem;
margin-bottom: 40px;
}button {
padding: 10px;
margin-bottom: 40px;
} - HTML head タグ内に link タグを含めて、CSS ファイルを HTML ファイルにリンクします。
<link rel="stylesheet" href="styles.css"> - Web ページの UI をテストするには、「index.html」ファイルをクリックして Web ブラウザで開きます。
テキストエリア内の各単語を数える方法
ユーザーがテキスト領域に文を入力すると、Web ページは単語数のカウント ボタンをクリックしたときに各単語をカウントする必要があります。
この機能は、新しい JavaScript ファイル内に追加できます。必要に応じて、JavaScript の知識をブラッシュアップする必要がある場合は、他の初心者向け JavaScript プロジェクトのアイデアを修正してください。
- 「index.html」および「styles.css」ファイルと同じフォルダーに、「script.js」という新しいファイルを追加します。
- body タグの末尾に script タグを追加して、HTML ファイルを JavaScript ファイルにリンクします。
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - script.js 内で、getElementById() 関数を使用して、テキストエリア、ボタン、およびスパンの HTML 要素を取得します。これらの要素を 3 つの個別の変数に格納します。
let input = document.getElementById("input");
let button = document.getElementById("count-button");
let wordCountResult = document.getElementById("word-count-result"); - クリック イベント リスナーを追加します。この関数は、ユーザーが [単語を数える] ボタンをクリックすると実行されます。
button.addEventListener("click", function() {
}); - クリック イベント リスナー内で、ユーザーがテキストエリアに入力した値を取得します。この値は、textarea HTML 要素を格納する入力変数で見つけることができます。
let str = input.value; - 文字列を個別の単語に分割するには、split() 関数を使用します。これは、文字列にスペースがある場合に発生します。これにより、各単語が新しい配列の要素として保存されます。たとえば、入力された文が「I love dogs」の場合、結果の配列は [“I”, “love”, “dogs”] になります。
let wordsList = str.split(""); - 配列の長さを使用して単語数を見つけます。
let count = wordsList.length; - 結果をユーザーに表示するには、span HTML 要素のコンテンツを変更して、新しい値を表示します。
wordCountResult.innerHTML = count;
サンプル単語カウンターの使用方法
Web ブラウザーを使用してワード カウンター Web ページをテストできます。
- 任意の Web ブラウザーで index.html を開きます。
- テキスト領域に文または段落を入力します。
- 単語カウントボタンをクリックして、単語カウントを更新します。これにより、Google Docs、Microsoft Word、またはその他の単語数を持つエディターで単語数を確認した場合と同じように、単語数が表示されます。
JavaScript を使用した簡単なアプリケーションの作成
これで、JavaScript を使用して単語をカウントし、HTML ページの要素を操作する方法についての基本的な理解が得られたことを願っています。プログラミングの理解を深めるために、JavaScript で小さな有用なプロジェクトを作成し続けてください。
コメントを残す