My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

JavaScript 初心者にもおすすめ 10分でできるテキストカウンター

今日は、JavaScriptでテキストカウンターを作ってみました。
f:id:sntkk3:20180924175251p:plain

普段文章を作っていて、
「今、どれくらいの文字数なんだろう?」
って思う時がありますが、そんな時にはこうしたテキストカウンターがあると便利です。

文字数の入力に応じてリアルタイムに入力文字数を計測してくれるテキストカウンター、
とっても簡単にできてしまうので、JavaScriptの勉強がてら作ってみるのもおすすめです。

では、以下より、作り方をご紹介しますね。

テキストカウンターの作り方

コード紹介

[HTML]
ここではテキストエリアのフィールドを用意しています。

<textarea name="message" id="message" rows="10" cols="30"></textarea>
<p>文字数: <span class="count">0</span></p>


[JS]

 document.addEventListener("DOMContentLoaded", function() {
    var node = document.getElementById('message');
      node.addEventListener('keyup', function() {
          var count = this.value.length;
          var counterNode = document.querySelector('.count');
          counterNode.innerHTML = count;
      }, false);
  }, false
);


Demo


解説

.addEventListener()について

対象となる要素の振る舞いをイベントとして登録します。
ここでは、messageという名前のIDを付与したテキストエリアでのkeyup動作をイベントとして通知させるために使用しています。

※keyupとは
キーボードので押し下げたキーから指が離れ、キーが戻る時に発生するイベントです。

DOMContentLoadedについて

見ているHTMLページのオブジェクトが読み込まれた時に処理を実行します。

使用する理由:
JavaScriptは、HTML上の対象要素が読み込まれてからでないと正しく動作しません。
そのため、JavaScriptの位置が対象要素より前にあると、処理が正常実行されないということが起こりえます。
DOMContentLoadedを使用することにより、JavaScriptはHTMLページのオブジェクトが読み込まれてから実行されるため、記述位置の影響を受けず、処理が正常実行されることになります。

【参考】
developer.mozilla.org


いかがでしょうか。
ここでは、独立したテキストカウンターとしてご紹介していますが、実際の使用方法としては、お問い合わせフォームに実装するとかもありですよね。

簡単なので、ぜひお試しあれ。


なお、今日ご紹介したテキストカウンターの作り方は、
「ウェブカツ」という初心者向けオンラインプログラミング学習 サービスサイトで学べます。
webukatu.com

ということで、今日はこの「ウェブカツ」についても併せてご紹介させていただきます。

「ウェブカツ」について

ここ最近、プログラミングを学べるオンラインサービスはいろいろありますが、中でも「ウェブカツ」はちょっとユニークで面白いサイト。

どんなところがと言うと、「ウェブカツ」は、

未経験から1年で年収1千万以上稼ぎ続ける有名エンジニアが教える【どこよりも分かりやすく】学べ【どこよりも効率的】で【どこよりも実践的】な初心者向けプログラミング学習スクール

だからなんです。

なので、

ウェブカツは、プログラミング学習を元に "年収1千万稼ぐ" ための様々な環境を用意しました。
年収600万、700万といった "はした金" を稼ぐ環境ではありません。
秒速で1億稼ぐ。といったしょうもない情報商材を教える環境でもありません。
"確実に" そして "着実に" 成果を出し、成長していき、年収1千万を目指していく環境を用意しました。

だそうです。 ※上記、「ウェブカツ」サイトより引用

どうですか? 「秒速で1億稼ぐ」とか、すごい強気が興味深いですよね。
これからプログラミングを学んで仕事にしていきたいという方には、ここで学んでみる価値が大いにありそうです。

まずは、「無料仮入部」から始められます。
気になる方は、ぜひサイトを覗いてみては?

ウェブカツ公式サイトはこちら