MENU

TECHNICAL INFORMATION技術情報

第1回
  はじめてみよう　JavaScript プログラミング

はじめに

　いつもパソコンを使っているけど、市販のソフトや、誰かに作ってもらったソフトを使っているだけ、プログラムなんて自分には無縁だと思っているひとは多いと思います。でも、JavaScript を使えば割と簡単に、便利なプログラムをつくることができます。Q&Aキットの簡単計算フォームも JavaScript で作成してあります。
　「一番簡単な JavaScript」では、プログラムを組んだことがないひとが、実用的な計算ができるようになること、を中心に進めていきたいと思います。

JavaScript とは

　インターネットの、このページのような文書は、HTML（Hyper Text Markup Language）で書かれています。ここをクリックしてみてください。一番簡単な JavaScript の後に、1～100の数字が付いて、100行表示されたはずです。その中身は、次のようになっています。<html>ではじまって、</html>で終わる html 文書の中で、<script>から</script>までが javascript です。たったこれだけ書くだけで、100行の文字列が表示できるんですから、簡単そうに見えませんか？　for(i=1 ; i<=100 ; i++) の部分の100の数値を変えれば、何万行でも表示できます（意味ないけど）。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> var i; for(i=1 ; i<=100 ; i++) document.write("一番簡単な JavaScript "+i+" <br>"); </script> </head> <body> </body> </html>

● 特別なソフトが必要ない

　ふだん使っているWebブラウザで動きます。プログラムを書くのも、普通のテキストが編集できるエディターがあればできます。たとえば メモ帳（notepad）でもOK です。

● Cに似ていてわかりやすい

　色々と違う部分はあるけど、Cと同じような感じで書くことができます。関数の集まりで、if（もし～ならば）、while（～である間繰り返す）、for（～が～になるまで繰り返す）などを使用して、高度な制御もわかりやすく表現できます。Cに無縁のひとには、わかりやすくも見えないかもしれませんが、{ } でかこんだ表現は、慣れれば見やすくなると思います。

● ファイルの操作などはできない

　パソコンのハードディスクの中の、ファイルの内容を変えたり消したり、ということは、基本的にはできません。そうでないと、インターネット上のページを開いたら、ハードディスクの中のファイルが消えた、なんていうこともできてしまい、大変ですからね。

JavaScript の書き方

● 最後が ; で終わる

　エディターで見える行は関係なく、最後は必ず ; です。そのため、上の JavaScript の部分を、
var i; for(i=1 ; i<=100 ; i++) document.write("一番簡単な JavaScript"+i+" <br>");

というように、続けて一行に書いても同じ様に動きます。けれども、見た目でプログラムの構造がわかりやすいように、ふつうは改行してインデントをつけて書きます。

● まとめてブロックにするときは { } でかこむ

for(i=1 ; i&lt;=100 ; i++) { document.write("一番簡単な JavaScript "+i+" <br>"); document.write("二番目に簡単な JavaScript<br>"); } document.write("三番目に簡単な JavaScript<br>");

と書けば、一番... と 二番目... はブロックになっているので、for(i=1 ; i<=100 ; i++) により 100回表示され、三番目... はその後で1回だけ表示されます。

● 大文字と小文字は区別する

　abcd　Abcd　aBcd　は区別されます。後で説明する、変数名や関数名を付けるときも、注意が必要です。

● コメント

　良くあることですが、自分で書いたプログラムを、自分で理解するのが難しくなる場合があります。書いたひと以外が見る場合はなおさらです。
var i; // iを変数として宣言 for(i=1 ; i<=100 ; i++) //i=1からはじめて、1ずつ足していって、100まで繰り返す document.write("一番簡単な JavaScript "+i+" <br>"); /* document.write はドキュメントに書きこみます。 <br>はHTMLの改行です。これがないと表示されません。*/

というように、一行のコメントは // ではじめて、複数行のコメントは /* と */ で囲みます。

● 代入 = ／ 比較 ==

　i=0 は変数 i の値を 0 にするということです。i が 0 と等しいか調べるときは、i==0 と書きます。if(i==0) は、i が 0 なら、という意味ですが、if(i=0) と書くと、i に 0 が代入されるので、常に真になってしまいます。

計算をしてみる

加算：+ , 減算：- , 乗算：* , 除算：/ , 剰余：%

　そろそろ、計算してみましょう。演算子は上のように、ふつうのものはあります。この演算子を使った簡単な例はここをクリックしてください。その中身は、次のようになっています。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> var datA, datB, datC, datD, datE; datA = 10 + 10; datB = 10 - 5; datC = 10 * 10; datD = 10 / 2; datE = 10 % 4; document.write("A: 10 + 10 = "+ datA +"<br>"); document.write("B: 10 - 5 = "+ datB +"<br>"); document.write("C: 10 * 10 = "+ datC +"<br>"); document.write("D: 10 / 2 = "+ datD +"<br>"); document.write("E: 10 % 4 = "+ datE +"<br>"); </script> </head> <body> </body> </html>
　
var は、変数の宣言するときに使用します。data～dateの、5つの変数を宣言しています。変数を宣言するとき、整数型とか文字型といった型を指定する必要がありません。そのため、data = 10 + 10; の部分を、data = "こんにちは"; と書き換えても、正常に動きます。なお "こんにちは" のように、文字は " または ' で囲みます。
　演算子で注意が必要なのは、+ です。+ は、数値の加算だけでなく、文字をつなげるときにも使います。data = "こんに" + "ちは"; と書くと、data には "こんにちは" が代入されます。datb の値が5なら、data = "こんに" +datB+ "ちは"; と書けば、data には "こんに5ちは" が代入されます。ここまでは、まあいいんですが、変数の型が指定されていないために、10 + 10 = 20 という計算をするつもりが、"10"+"10"="1010" となってしまったりもするんです。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function calc() { var data, datb, datc; data = document.form01.txt01.value; datb = document.form01.txt02.value; datc = document.form01.txt03.value; document.form01.txt04.value = (data + datb)* datc; } </script> </head> <body> <form name="form01"> ( <input type="text" name="txt01" size="10"> + <input type="text" name="txt02" size="10"> ) * <input type="text" name="txt03" size="10"> = <input type="text" name="txt04" size="10"><br> <input type="button" value="計算" onclick="calc()"> </form> </body> </html>

　これは、フォームを使用して、入力した数値を計算するものです。<body>から</body>がHTML文書の本文ですが、この中の<form... から</form>がフォームで、名前は "form01" です。<input type="text"... という部分がテキストボックスで、name= で名前、size= で表示文字数を指定しています。<input type="button"... の部分がボタンで、名前は "計算"、onclick はクリックされたら、という意味で、calc という関数が実行されるように指定されています。
　function は calc という関数を定義しています。calc() の()の中には、引数が入りますが、この関数は引数がないので空です。
　calc は、左の3つのテキストボックス（txt01, txt02, txt03）の値を、変数 data, datb, datc に代入してから、(data + datb)* datc を 一番右のテキストボックス（txt04）に表示しています。ここをクリックして、試してください。

　どうでしょう。data = document.form01.txt01.value; は、一番左のテキストボックス（txt01）の値を data に代入していますが、数値とは認識しないで、文字列になってしまっています。そのため、data と datb を加算するつもりが、文字列としてつなげてしまっています。この文字列を乗算するときには、data と datb をつなげた文字列を、数値として乗算してしまうために、とんでもない計算結果になってしまっています。それでは、これを修正してみましょう。

function calc() { var data, datb, datc; data = eval(document.form01.txt01.value); datb = eval(document.form01.txt02.value); datc = eval(document.form01.txt03.value); document.form01.txt04.value = (data + datb)* datc; }

　テキストボックスの値の部分を eval でかこんでいます。ここをクリックしてください。こんどは、正しく計算できたはずです。 eval は、あらかじめ定義されている関数で、数値または数式の文字列を評価して数値にします。そのため、data～datc は数値になり、正しく計算できました。これ以外の方法として、data = document.form01.txt01.value;... という部分はそのままで、...= (data + datb)* datc; の部分を...= (data*1 + datb*1)* datc; としても、正しく計算できます。data に 1を乗じるときに、文字列を数値にしているためです。

使うことができる色々な演算子

　他に、次のような演算子を使用することができます。
算術・代入演算子
表示例   
x++
x--
x += y
x -= y
x *= y
x /= y
x %= y		 意味
x = x + 1  
x = x - 1
x = x + y
x = x - y
x = x * y
x = x / y
x = x % y
比較演算子
表示例   
x == y
x != y
x > y
x >= y
x < y
x <= y		 意味
x と y が等しけれが真
x と y が等しくなければ真  
x が y より大きければ真
x が y 以上なら真
x が y より小さければ真
x が y 以下なら真

eval で簡単な電卓

　 先に出た eval は、数値だけでなく、数式も評価して数値にします。ここをクリックしてください。上側のテキストボックスに計算式を入力してから、[計算]ボタンをクリックすると、下側のテキストボックスに計算結果が表示されます。中身は次のようになっています。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function calc() { with(document.form01) txt02.value = eval(txt01.value); } </script> </head> <body> <form name="form01"> 計算式：<input type="text" name="txt01" size="30"> <input type="button" value="計算" onclick="calc()"><br> 計算結果：<input type="text" name="txt02" size="10"> </form> </body> </html>
　
calc という関数の部分がとても簡単になっています。上側のテキストボックス（txt01）内の計算式を eval で評価して数値化し、下側のテキストボックス（txt02）に表示しているだけです。なお、with というのは、既定のオブジェクトを指定するもので、この中では document.form01 と何度も書くのを省略することができます。
　こんな簡単な電卓でも、カッコも使えて数式と結果が同時に表示されているので、ハンディータイプの電卓とくらべても、けっこう便利だと思うんですが。