2008年07月29日
デザイナーのためのプログラミング入門（番外編1）
前回から数値を計算するのをプログラムの例に挙げてきたので、ここでちょっと「プログラムらしさ」を味わってもらうためにちょっと込み入ったことを説明します。デザインには関係ないので、興味ない人は無視してください。
function execute(){
a=Math.pow(2,64);
alert(a);
}
前回までと同様、関数execute(){}の中を上記のように書き換えて実行してみてください。Math.powというのはJavaScriptで最初から用意されている関数（便利な処理をひとまとめにしたもの）で、Math.pow(x,y)と書くとxのy乗を返します。つまりここでは2の64乗ですね。前回まででやった書き方だと
function execute(){
var a=1;
for(i=1;i<65;i++){
a = a * 2;
}
alert(a);
}
とかくのと基本的に一緒です。
さて、実行するといくつになりますか？
もしよければ答をコメントしてください。
2008年07月24日
デザイナーのためのプログラミング入門（4）
amachangとかぶったwww
まあスタンスが違うので良しとしましょう。
僕はややこしいこと考えるよりもとにかく色々書いて遊ぶことができれば最初はそれでいいと思います。
用語覚えたりは楽しくなってからでいいやん。
***.htmlというファイルを作って、テキストエディタで開いて、保存して、ブラウザで開く。その後はテキストエディタで書き換え⇒ブラウザでリロード（ボタンでもF5でもOK）。という流れはwebデザイナーの方なら問題ないですよね。
前に書いたexecute(){}のかもめ括弧（この呼び方、あまり賛同を受けないのですがどうでしょう？高校時代の恩師が言っていたのを気に入って今でも使っています）の中をどんどん書き換えていってください。
execute(){
a=1+2+3+4+5+6+7+8+9+10;
alert(a);
}
としてみてください。
ちゃんと1から10までの合計が出ますよね？
これをもうちょっとプログラムっぽく書くとこうなります。
execute(){
var a=0;
for(i=1;i<11;i++){
a = a + i;
}
alert(a);
}
これは、まずaという変数（情報を入れる箱）を用意して、0という値を入れます。
for(i=1;i<11;i++){}というのは、まず最初iに1を入れて、その次の条件"i<11"を満たすまで{}内の処理を行うたびに"i++"という処理を行うということを繰り返す、ということです。i++はiに1を足すということで、ひとまずは"i=i+1"と同じだと思ってください。そして、{}のなかで変数iは、()内で書いた内容の値をとります。つまり、最初は1で、{}の処理が一回終った後（つまり2周目）はi++が実行されて2になります。三周目は3で、10周終ればその次はi<11の条件に弾かれますから処理が終了します。
なのでここでは
(((((((((a + 1周目のi) + 2周目のi) + 3周目のi) + ・・・ )+10周目のi
つまり、
(((((((((0+1)+2)+3)+ ・・・ )+10
が行われることになります。
2008年07月17日
デザイナーのためのプログラミング入門（3）
さて、三回目です。
前回、関数を実行、といきなり書きはじめましたが、関数とは何か、というお話をしていませんでしたね。
色々説明の仕方はあると思うのですが、一連の処理をまとめたもの、というくらいに考えてください。
function execute(){
処理１;
処理2;
処理3;
}
なら、関数execute()を実行すると上から順に処理1、処理2、処理3が実行されます。このとき、処理1や処理2に処理を終了する、という内容が含まれているときは、そこから先は実行されません。
詳しい説明は後々行いますので、今はこの程度にしておきます。
さて、第一回で書いたHTMLの中の、関数execute()の内容（「{}」に囲まれた部分）を書き換えていきましょう。ボタンを押せば必ずexecute()が実行されるので、ここに処理をどんどん書いていくだけでOKです。
function execute(){
a = 1 ;
b = 1 ;
if(a==b){
alert("いっしょ");
}else{
alert("ちがうよ");
}
}
これを実行してみてください、”いっしょ”と表示されると思います。それが確認できたら、a=1、b=2と書き換えてみてください。どうでしょう？
これが条件分岐の書き方です。
#ちょっと内容簡単すぎます？
2008年07月09日
デザイナーのためのプログラミング入門（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の値が一致すれば正しいことになりますし、そうでなければ嘘が書いてあることになり、｛・・・｝の中身は実行されません。
2008年07月08日
デザイナーのためのプログラミング入門（1）
ぼちぼちですがはじめていきたいと思います。
第一回は、お約束どおり環境構築です。
とはいっても、JavaScriptだと下記のHTMLコードをエディタに貼り付けて、htmlファイルとして保存するだけで終了です、はい。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="">
<script type="text/javascript">
<!--
function execute(){
alert("ほげほげ");
}
-->
</script>
</head>
<body>
<input type="button" onclick="execute()" value="実行" />
</body>
</html>
2008年06月26日
デザイナーのためのプログラミング入門（0）
どなたもコメントくださらなくてさびしいんですが、ぼちぼち書いていこうと思います。
趣旨は、プログラミングを食わず嫌いしていたり、不必要な苦手意識を持ったりしているデザイナーの方に、すこしでもプログラミングに興味を持ってもらおうというものです。なので、本当に初歩の初歩から書いていいきますし、本格的に勉強したいという方の参考には多分なりません。僕自身大して書けないですから笑
あと、前提として言語はC系の記法を前提とします。C、C++、Java、PHP.ECMAScript(JavaScript)などですね。デザイナーの方であれば、これらを抑えておけば十分だと思います。その中でも、特にJavaScriptをメインに扱おうと思います。
なぜなら、環境構築が一番簡単だからです。昔だったら、PC-9801なんかだとフロッピーディスクを挿さずに起動すればN88BASICが立ち上がりプログラムを書き始められたのですが、今プログラムを書こうとすると色々下準備が必要になる場合がほとんどです。PHPなら簡単と聞いてはじめてみたものの、Apacheのインストールで苦労してあきらめた人も少なく無いんじゃないでしょうか。
その点、JavaScriptなら環境構築の手間は一切不要です。HTMLファイルを作って、メモ帳なりで編集して、ブラウザで開くだけでOKです。
次回からは具体的に少しずつ話を進めていこうと思います。
ちなみにめちゃくちゃ重いですがこんなサイトもあります。