アーカイブ[2008年7月]

デザイナーのためのプログラミング入門(2)

第一回で書いたファイルの説明を簡単にですがしておきます。

 

<input type="button" onclick="execute()" value="実行" />

 

のボタンを押すことで、JavaScriptの関数execute()が実行されるというだけなんですが、これで

 

function execute(){
alert("ほげほげ");
}

 

の{}の中を自由に書き換えて保存、ブラウザで開いて(リロードして)ボタンを押すことで実行、という環境が整います。

 

さて、折角なのでもうちょっと話を進めましょう。

 

プログラムとして書かなければならないものは、大きくわけて二つあります。

 

・実行される命令

alert("ほげほげ"); ・・・”ほげほげ”という文字列を表示しろ!

a = a + 1;      ・・・aという変数に、a + 1 という値を入れろ!

 

・どんなときに命令が実行されるか決める構文

if ( a == b){ alert("ほげほげ"); } ・・・a==bのときだけ、alert("ほげほげ");を実行する。

for(i=0;i<10;i++){ alert("ほげほげ"); } ・・・iが0から9まで1ずつ増える間、alert("ほげほげ");を実行する。

 

基本的にこれだけです。変数の型とか、本当は色々知っておかないといけないことがあるんですが、そんなのは色々書きながら覚えていけば十分です。まずはなんでもいいから動くもの書けないと楽しくならないですから。(楽しくなりさえすれば細かな知識は後から勝手についてきます)

 

先に書いた例について、プログラミングを全く知らない人は”a = a + 1 ”という書き方に戸惑うんじゃないかと思うので、その点補足しておきます。

JavaScriptやC、C++、Java、PHP等の言語においては これは数学で扱うような数式ではなく、右辺の中身を左辺に突っ込め!という命令です。

なので、aという変数にもともと3という値が入っていて、

a = a + 1;

という命令を実行した場合には変数aの中身は4になります。

a に、 3(もともとのaの中身) + 1 という値を代入するからです。

 

それに対して、if文のところで書いた"=="は右辺と左辺の中身が一致するか調べるための記号です。if(a == b){・・・}と書くと、{・・・}の中身は()の中に書いてある内容が正しいときにだけ実行されます。この場合、変数aの値と変数bの値が一致すれば正しいことになりますし、そうでなければ嘘が書いてあることになり、{・・・}の中身は実行されません。