ホーム » スタッフ » 斉藤徹 » 子どもにJavaScriptで速攻プログラミング体験させようか

2012年12月
« 11月   1月 »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

最近の投稿(電子情報)

アーカイブ

カテゴリー

子どもにJavaScriptで速攻プログラミング体験させようか

CodeZineの中学生?対象の「マンガでプログラミング用語解説」の記事を見つけ、 いきなり「ブーリアン」って用語が書いてあるのに違和感を感じながらも、 特にプログラミング環境もインストールせずにプログラミング体験させるということで、 HTML内のJavaScriptで動かす説明。うちの学科であれば、最初からC/Javaでと 思わなくもないが、改めて見ると、1年ならコレもありかと改めて感じる。

モルモットとして、うちの中1の子ども(一応、情報部だぞ、どこがやねん)の、 冬休みのスパルタ教育で、試してみるかな。

(( CodeZine記事より ))
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>「条件分岐 if」のサンプル</title>
</head>
<body>
<pre><script type="text/javascript">
// 変数の初期化
var tannka = 1000, tannka2, goukei, waribiki;
// 人数によって処理を分岐
for (var i = 0; i < 5; i ++) {
// 割引率
waribiki = 0;
// 人数が3人以上で、割引率が0.3
if (i >= 3) {          // 人数が3人以上か確認
waribiki = 0.3;    // 割引率を変更
}
// 実際の単価を計算
tannka2 = (1 - waribiki) * tannka;
// 合計を計算
goukei = i * tannka2;
// 出力
document.writeln(
i + "人の場合\n"
+ " 割引率  :" + waribiki + "円\n"
+ " 単価    :" + tannka2  + "円\n"
+ " 合計金額:" + goukei   + "円\n"
);
}
</script></pre>
</body>
</html>

でも、数字を入力しながら、計算してくれるってぇのが、 自分のプログラミング初体験(高専1年/30年前)での感動だったし、 入出力が欲しいな。

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>簡単な入出力計算のサンプル</title>
<script type="text/javascript">
function exec() {
// input
var x = document.input.X.value ;
// 計算
var ans = x * x ;
// output
document.output.Y.value = ans ;
}
</script>
</head>
<body>
<h1>簡単な入出力計算のサンプル</h1>
<h2>入力</h2>
<form name="input" action="#">
<input type="text" name="X" size="10"
onChange="exec()" />
</form>
<h2>出力</h2>
<form name="output" action="#">
<input type="text" name="Y" size="10">
</form>
</body>
</html>

うーん、やっぱりHTMLの><とタグが読みづらく汚く並んだ中の、JavaScriptのコード、HTMLの汚さがキモィなぁ。

FacebookにCodeZineのネタを書いたら、『今どきは enchant.js でゲームでしょ』的な ツッコミを受けるが、game.onload = function() { … } の中に処理を書くのか…. JavaScript のクロージャなコールバック無名関数の中に、描画処理書くのか…. 概念的に(初心者にとって)よーわからんものの中に処理書くのは不気味感たっぷりだけど、 以前OBには、「どーせコンピュータ全体がブラックボックスなんだし、 そこにこだわらんでええっしょ」とも言われたけどな。 ここに不気味感を感じるのは、おっさんの老害か!?!?