« 【1】jQueryを読解する | ホーム | 高校時代の懐かしいユニフォームを描いてみた。 »

2011年4月 4日

【2】就活で見かけるあの機能|jQueryを読解する

スクリーンショット(2011-04-04 13.42.22).png 就職活動をしていると、Webフォームを使ってESを提出。。。ってことがよくあると思います。
文量も指定されるので、フォーム下のカウンターを見ながら、文字数が多すぎたり、少なすぎたりで格闘しますよね汗
ということで、今日はそんな文字数カウンターの仕組みを読み解きたいと思います。

Webクリエイターボックスより引用
$(function () {
     $("textarea").keyup(function(){
          var counter = $(this).val().length;
        $("#countUp").text(counter);
        if(counter == 0){
            $("#countUp").text("0");
        }
        if(counter >= 10){
            $("#countUp").css("color","red");
        } else{$("#countUp").css("color","#666");}
    });
});

$("textarea").keyup();

<textarea>タグに.keyup()というイベントが付与されています。
keyupイベントは、キーボードのキーが押され、上がった際に( )内のイベントを実行するというものです。
keyupイベントの内容は、( )内にfunction()としてまとめられています。

var counter = $(this).val().length;

counterという名前の関数(var)を生成しています。
イコールで結ばれた右式は、<textarea>タグ内に入力された文字列の長さという意味であり、counterという関数にはtextareaに入力した文字数が格納されます。
.val()プロパティは、value属性を返すものです。
textareaに入力された文字は、<textarea>タグのvalue属性として格納されているので、val()を使っています。

$("#countUp").text(counter);

id属性に[countUp]がついたタグで挟まれたテキストをコントロールするコードです。
.text( )内に、先ほど生成した、textareaに入力した文字数を格納する関数counterを入れることで、入力した文字数に応じて、表示される文字も変化するように設定しています。

if(counter == 0){$("#countUp").text("0");}

ここからは、条件分岐が書かれています。ここでは、文字数がある一定以上の文字になったら、入力フォームの下にある文字数カウンターの色が赤色になるように、設定されています。
デフォルト(何も文字が入力されていない状態)では、当然表示文字は「0」であるため、
if文を使って、もしcounter関数(入力された文字数)が0ならば、「0」をテキストに設置と書かれています。

if(counter >= 10){
  $("#countUp").css("color","red");
} else{$("#countUp").css("color","#666");}

if(counter >= 10){}の意味は、もし入力された文字数が10以上になったらという意味です。
if(){ }内に書かれたプログラムは、文字数が10文字以上になったときに実行されます。
if{}に続いて、else{ }とありますが、elseは「そうでなかったら」という意味です。
つまり、「文字数が10文字未満だったら」という意味で、その場合にelse{ }の中に書かれたプログラムが実行されることになります。

$("#countUp").css("color","red");

これが、条件別で実行されるプログラムです。
ID属性「#countUp」がつけられたタグのcolorプロパティをredにするという意味です。
.css("プロパティ名","プロパティ値")が使われています。
else{}内には、$("#countUp").css("color","#666");がつけられていますが、もう説明するまでもないでしょう。

非常に簡単なプログラムですが、学ぶべきことがたくさん詰まっていました。。。

OpenID対応しています OpenIDについて

このブログ記事について

このページは、HAKASHUNが2011年4月 4日 12:47に書いたブログ記事です。

ひとつ前のブログ記事は「【1】jQueryを読解する」です。

次のブログ記事は「高校時代の懐かしいユニフォームを描いてみた。」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。