今回は、JavaScriptで簡単に実装できる「文字数カウンターアプリ」の作り方を紹介します。
JavaScriptでプログラミングを本格的に学んでいきたい人は、是非参考にしてください。
文字数カウンターアプリの作り方
文字数カウンターアプリの完成形はこちら。
非常にシンプルな作りになっています。
それでは「HTML・CSS・JavaScript」の順番でコードを見ていきましょう。
HTML
HTMLコードはこちら。
<h1>文字数カウンターです</h1> <textarea id="input_text" cols="50" rows="5"></textarea> <p> 合計<span id="character">0</span>文字です。 </p>
◎1行目
h1タグでタイトルを記載します。
◎2行目
「id=’input_text’」を指定したtextareaタグを用意。
そして、colsは50でrowは5にします。
この数字は自由でOK。
◎3〜5行目
pの中に「id=’character’」を指定したspanタグを用意。
idは後でJavaScriptでDOM操作をするときに使います。
CSS
CSSコードはこちら。
body {
text-align: center;
margin-top: 200px;
}
h1 {
margin-bottom: 20px;
}
p {
margin-top: 20px;
}
文字数カウンターを真ん中に持ってきて、h1とpタグに少し余白を入れて見やすくしました。
JavaScript
JavaScriptのコードはこちら。
// 即時関数
(function() {
'use strict';
// id input_textのエレメントを取得する
var e = document.getElementById('input_text');
// keyupのイベント発生時に、入力文字数をコンソールに出力
e.addEventListener('keyup', function() {
// テキストエリアの文字列を変数に代入
var str = e.value;
// 改行の削除
str = str.replace(/\r?\n/g, "");
// id characterを取得して、HTML要素に表示する
var moji = document.getElementById('character');
moji.innerHTML = str.length;
});
})();
まずは全体を即時関数の処理にします。
そして、厳密なエラーチェックができるように「’use strict’;」を書きます。
次に、HTMLで指定した「id=’input_text’」をJavaScriptで操作できるようにするために、eの変数に代入。
textareaに文字を入力してキーボードを離した時に値を取得するために、keyupメソッドを使います。
そして、入力した文字数e.valueを変数strに代入。
改行した分が文字数としてカウントされないように、「str = str.replace(/\r?\n/g, “”);」とします。
そして、現在の合計文字数をHTMLに表示させるために、「id=”character”」の値を取得して変数mojiに代入。
変数mojiのHTML要素を「str.length」つまり文字数の長さに当てはめます。
textareaに文字を入力してキーボードから話すと、しっかりリアルタイムでの合計文字数がHTMLに表示されます。
まとめ
以上が、「JavaScriptで簡単に実装できる文字数カウンターアプリの作り方」でした。
是非これからのJavaScriptプログラミング学習の参考にしてください。
