アマグラマーのすすめ - 下ごしらえ

それでは、いよいよプログラムを進めていきます....

が、その前に、ちょっと下ごしらえしておきます。

本書は、あくまで「アマグラマーのすすめ」であって「プログラマーのすすめ」ではありません。料理本を一冊読んだからといって調理士にはなれないように、本を一冊読んだぐらいではプログラマーにはなれません。それがどんな名著でも。

本書がめざすのは、読者に「プログラムってこんな感じなんだ」という、だいたいの感じをつかんでいただくことです。料理にたとえれば、サンドウィッチのパンは外で買ってきて、具をいろいろと作ってみるという感じでしょうか。

というわけで、以下は本書で使う「パン」に相当するプログラムです。この時点で意味はわからなくても結構です。私のblogからそのままコピーしても構いません。これに適当な名前を付けて保存しておいてください。「パン」なので"bread.html"とでもしておきましょうか。

bread.html

<script>
function p(s){
  document.getElementById('stdout').innerHTML += s + '<br>';
}
</script>
<dl>
<dt>プログラム:</dt>
<dd><textarea id="src" cols="80" rows="25"></textarea></dd>
<dd><input type="submit" value="実行" onclick="
  document.getElementById('stdout').innerHTML = '';
  document.getElementById('stderr').innerHTML = '';
  try {
    eval(document.getElementById('src').value);
  }catch(e){
    document.getElementById('stderr').innerHTML = e;
  }
"></dd>
<dt>出力:</dt>
<dd><div id="stdout"></div></dd>
<dt>エラー:</dt>
<dd><div id="stderr"></div></dd>
</dl>

これをブラウザーで表示すると、以下のようになるはずです。

プログラム:

出力:

エラー:

この入力フィールドに、JavaScriptのコードを入れて「実行」ボタンを押すと、その結果が「結果」のところに表示されるという案配です。試しにp(1+1)と入力してみましょう。

出力のところに2と表示されたでしょうか?

今度は、でたらめに何か打ち込んで「実行」ボタンを押してみましょう。今度はエラーのところに何か英語で表示されたはずです。

本書では、以降この「パン」に「具」となるプログラムを「はさみこむ」ならぬ「打ち込む」形で、実際にJavaScriptを体験しながら、プログラムとは「どんな感じ」のものかを体験していくことになります。

Dan the Programmer

• 404 Blog Not Found:アマグラマーのすすめ - 目次

Comments

実際にテキストエリアの中に以下のようなコードを入れて「実行」
ボタンを押すと、ダイアログボックスが表示されてその中に計算結
果がちゃんと表示されました。

var result = 3 + 2;
alert(result);

ブラウザ上でちょっとしたJavaScriptの動作チェックを行うには
結構便利だな、と感じました。

Posted by ちょっと通りすがりますよ at 2007年11月01日 10:06

pはputの略ですか？

Posted by LiosK at 2007年11月01日 11:20

案配は
塩梅がベターです。

Posted by 九龍（添削） at 2007年11月01日 21:08

pは、
サンドイッチのパンの中身だから
『Filling』頭文字…あれ、違うみたいですねぇ

Posted by ゆうだい at 2007年11月03日 18:11

typooしたりやたらと時間は掛かりましたが何とか完成しました。
手が遅くとも一歩一歩確実にやって行きたいと思います。
御教授有難う御座います。
i'm enjoy!
boz :-3

Posted by boz at 2007年11月04日 14:57