Columnコラム

Facebookでシェアする

Javascript講座1プログラミング未経験者がjQueryを使う前に簡単な基礎

全くのプログラミング未経験者がjQueryを使う前に知っておいたほうが良い知識をご紹介します。どこかから拾ってきたプラグインを埋め込むだけにしても、最低限の約束を知っておいたほうがためになります。

変数

変数と聞くと数学用語で難しそうと感じるかもしれませんが、値の入れるための「箱」だと思ってください。その箱の作り方ですが、例えば「hako」という名前の箱を作る場合、javascriptでは、

var hako;

と書きます。varは箱を作るためのおまじないです。varの後に箱の名前を書くと、その名前の箱の出来上がりです。

箱に物を入れる方法

その箱に物を入れる方法をご紹介します。

箱に物を入れるために必要な記号は、

=

です。=は数学では右辺と左辺が等しいという意味になりますが、プログラミングの世界では、「右辺を左辺に代入する」という意味になります。つまり、=の左側に箱を、右側に物を置くと、箱に物が入る。ということです。ここ、重要ですので頭に叩き込んでください!

例:hakoという箱に5という数字を入れる

        var hako;
        hako = 5;
        

箱に文字を入れる方法

先程は箱に5という数字を入れましたが、今度は「あ」という文字を入れようと思います。しかし、先ほどと同じように、

hako = あ;

とすると、エラーになってしまいます。何故かと言うと、文字は " で囲んであげないとコンピューターが文字だとわかってくれないのです。

例:hakoという箱に「あ」という文字を入れる

        var hako;
        hako = "あ";
        

これでちゃんとhakoに「あ」という文字が入りました。でも箱に物を入れたからには確認したくないですか?

こんな時、箱にどんなものが入っているか確認する方法でよく使われるのがアラートを出す方法です。アラートというのはWindowsではジャン!という音とともに現れる

アラートの例

のことです。このアラートを出す命令は、alert()と書いて、下のように、カッコ内に文字を入れると入れた文字がアラートになって出てきます。

alert("これがアラートです");

カッコ内に入れるのはもちろん文字なので""で囲みます(前回のおさらいですね)。ここに、「あ」という文字を入れた箱を入れてやると、入れた「あ」という文字がアラートになって出てきます。

例:hakoという箱に「あ」という文字を入れ、アラートを出すことによって箱の中身を確認する

        var hako;
        hako = "あ";
        alert(hako);
        

このプログラムを実行すると、下のようなアラートが表示されます。

アラートの例

実際に動かしてみる!

さて、上のプログラムを実際に動かして見ましょう!下の文字をメモ帳にコピペして、index.htmlという名前で保存してください。ボタンを押すごとに上記のプログラムが実行されるように作ってあります。

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>プログラム動作テスト</title>
            <meta name="Author" content=""/>
            <script>
            function hoge(){
                //ここから下にプログラムを書く

                var hako;
                hako = "あ";
                alert(hako);

                //ここから上でにプログラムを書く
            }
            </script>
        </head>
        <body>

        <input type="button" value="ボタン" onclick="hoge();" />

        </body>
        </html>
        

テキストフォーム判定プログラム

今回は、テキストフォームに値が入力されているか判定するJavascriptの作り方を紹介します。

まずはサンプルから

使い方

   $(function(){
       var al=$("#alert");  
   $("input").blur(function(){
       var f=false;
       var inp=$("input");
       for(var i=0;i<inp.length;i++){
           var va=inp.eq(i).val();
           if(va==""){f=true;};
       };
       if(f){
        al.text("入力されていない項目があります。");
       }else{
        al.text("正しく入力されました");
       };
   });
   }); 
        

3行目の.blurイベントはフォームからフォーカスが外れたタイミングで実行されます

全てのフォームの入力をチャックし、もし未入力の値がかえってきたらfをtrueにして「入力されていない項目があります」を出力します。