こんな本も目にすると、無視できません。まず、高校生に何をどんな手順で教えようとしているか気になります。
中身はHTML,javascript,CSSでした。javascript、強敵です。触るたび面白いなとも思いますが、思わぬところで引っかかります。
function(){
なにがしの処理・・・
}
読み込まれた途端に動く。分かります。ま、そういうものだと理解できます。これを、別ファイルのjsファイルにして、
<script srs=”js/なんちゃら.js”>みないなことして読み込みますわな。
で、処理の中でなんかのイベントを捉えようとします。
document.body.onKeyPress = なんかの関数
こんな記述が処理の中にあるとします。
すると、この<script.>タグをどこに書くかに左右されてしまします。
このケースでは<body> タグの中に書かないとエラーします。本の中に示されている例でも確かに<body>タグの中に書かれています。
これを<head>タグに持っていくとエラーします。これが何故エラーになるのか理解するのに少し時間がかかりました。
要するに、ブラウザはhtmlを頭から実行してしまうので、bodyタグを読まないうちに,document.body.なんちゃらが来てしまうとエラーしてしまうようです。なるほど。
でもbodyタグのなかにscriptタグ書きたくないなぁなどという、ごく個人的な好き嫌いを反映する方法はないかと、探しますとちゃんとあります。
window.onload = function(){
document.body.onKeyPress = 関数;
function 関数(){
処理・・・
}
}
全部loadしてから実行したいよ、と伝えます。ちゃんと動きます。ところが、この本に出てくる例題では、さらに難敵がまっていました。全体を
(
)();
で覆っています。
bodyタグの中に書くぶんにはこれがあってもなくても動作に違いはありません。しかし、headタグの中に書くと違いが出ます。いや、ブラウザ上では違いはない。ちゃんと動きます。
しかし、デベロッパーツールのコンソールで実行を監視すると、不思議な動きが見えます。
(
)();
で覆わない場合、まったく普通に動きます。しかし覆うと一旦エラーが出てその後正常に動きます。
これの説明を捜すと、他の処理の邪魔をしないように囲う、と理解しておけば良い、的なことが書いてあります。
それなら、何故一度エラーが出るのか、みたいな疑問が残ります。
ここからは想像になってしまいますが、おそらく囲っていない場合は
window.onload =
がそのまま尊重されてロードされるまで実行が待たれるのでしょう。
しかし、
(window.onload = function(){
})();
とした場合、他の処理に影響しないようにするためにやはり一度その場で読むのでしょう。そのときに一度エラーが出て、しかし、window.onload=なのでその後、ロードがおこわ慣れた後に実行されるのでちゃんと動く。
そんなような順番なのだろう、と。勝手に理解しています。
たぶん、動作が単純に行われるのでこういうことが起きるのかな、と。それはそれで好ましく思われるのです。
しかし、馬鹿にしたものではなく、本当に色々なことができます。CSSと組み合わさるとびっくりするような動作をブラウザ上でみせることができるんですね。
高専ではjavaでWindowsアプリを作っているのでjavascriptの出番はありません。しかし、塾に来る高校生にはjavascriptを教えたいな、と思い、色々試しているのです。
高専でjavaを教え、塾でHTML,CSS,javascriptを教えてみると、その分野に興味を持っている子でない限り、javaは手強い。楽しむというところに手がなかなか届かないな、と感じます。
その点、HTMLCSS,javascriptは恰好の材料に思えます。開発環境がかんたんに作れるので自宅でも簡単に真似ることができますしね。
javaに果敢に挑戦していく子も全面的にバックアップしたいですし、自分の学習がすごーくたいへん。こういう立場に身を置くと自分を伸ばさざるを得ない。これがいいなと思います。