JavaScriptとは？

javascriptとは

javascriptとは、HTMLやCSSを動的に操作するためのスクリプト言語のこと。

CSS3はアニメーションに対応していますが、ブラウザが追いついていないので普通に使えるようになるのはまだまだ先のことですので、HTMLに動的な動きを付ける手段としてはjavascriptの一択となります。

javascriptを使うとできることは、簡単なところで

CSSを外部から操作できる。jsでフォントを赤にすることも可能
常に文字が動いていたり、一定の動きをするアニメーションを作れる
文字やボタンをクリックしたときの動作（イベント）を設定できる

ような感じです。

イベントというのが何よりもjavascriptの特徴で、PHPでよく使うsubmitはイベントではありますが、フォーム送信という目的として使うに過ぎません。

クリックや、マウスオーバーによりイベントを発火させると、予め設定しておいた命令やら関数が発動して、

新しいウィンドウが新たに立ち上がったり
全ての文字が赤色になってしまったり
フォームに入力された数字を計算したり

実にさまざまことができるようになります。

javascriptに慣れよう

本来であれば最初は、型だったり、命令を学ぶのがセオリーなのですが、なぜ学ぶのかがわからないとイマイチやる気がおきないと思うので、先に簡単なプログラムを組んでみて、だから必要なのか～的な感じでいければと思います。

足し算をするプログラムを作ってみます。

<form>
<input type="text" name="z1" id="z1" />＋
<input type="text" name="z2" id="z2" />＝？
</form>
<button onclick="tasizan()">足し算する</button>

「足し算する」ボタンを押すと、2つのマスに入力した数字が足された結果がアラートウィンドウに表示されるというもの。

buttonの中のonclickは、クリックしたら中の処理を行うというイベント命令で、buttonに限らず、pでもhでもいろんな要素に入れることができます。

中のtasizan()は「()」がついているので関数です。もちろん関数でなくてもかまいませんが、関数のほうが見やすいので普通はそうします。

続いて、javascript、

function tasizan(){
    var no1 = document.getElementById("z1").value;
    var no2 = document.getElementById("z2").value;
    var no3 = no1+no2;
    alert(no3);
}

tasizan()という関数を作っています。varは最初に変数として使う文字に必ず付けなければならない宣言のようなもので、var no1とするとno1は変数として見なされる。一度宣言してしまえば、もう宣言せずして変数として使用することができます。

PHPだと常に$no1みたいにするけど、javascriptは最初はvar no1、そしたらあとはno1だけでOK。

document.getElementById("z1").valueのdocument.getElementById("z1")はIDがz1の要素を選ぶDOMと呼ばれる命令で、そのvalue属性（テキストボックス内）を選択している。

alret()はアラートボックスを表示させる命令で、document.write()メソッドとともに動作確認に利用することが多いです。Firebugが入っているならば、console.log()メソッドで確認できます。

ためしに1と2を入れて計算してみると、「12」と表示されるはず。全角で１と２を入れた人は「１２」となっているはず。何もいれずに押した人は「NaN」＝not a numberとなる。NaNには何を足したり引いたりしてもNaNになるゆえ、片方に数値が入っていても、もう片方が空欄なら結果はNaN。

すなわち、足し算だと思って計算したけど、数字が加算されたわけではなく、値同士がくっついてしまったのではないか？と考えられる。確かめるためにオブジェクトの型を調べるtypeof()関数を使う。

function tasizan(){
    var no1 = document.getElementById("z1").value;
    var no2 = document.getElementById("z2").value;
    var no3 = no1+no2;
    alert(typeof(no3));
}

これを実行すると、string（文字列型）とでるはず。数字型ならnumberだから、テキストボックス内に入力された数字はstringとして認識されてしまったことがわかる。

javascriptの「+」は文字列の連結と数値の加算の意味とを兼ねるので型変換の知識を学ぶことになるかもしれない。（PHPは加算は+だが、連結は.（ドット））

string型をnumber型に型変換する命令には、eval()、parseFloat()、parseInt()がある。この場合ならどれでもいいけど、一般的なparseFloat()命令を使う。

function tasizan(){
    var no1 = document.getElementById("z1").value;
    var no2 = document.getElementById("z2").value;
    var no3 = parseFloat(no1)+parseFloat(no2);
    alert(no3);
}

直したフォームが下

このように、「イベント（クリック等）→関数実行→動的な動き」を実現するのがjavascriptです。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>