ＨＰ作成講座、脱初心者編

文字や画像を動かす。その１

ホームページを見ていると、文字や画像が動くものがあります。
「あれはどうやってるんだろう？？」と、私も興味を持ちました。
ここからは、その方法のお話です。

動くホームページを作るのに、何も特ぺつなソフトがいらないのが、ＤＨＴＭＬとＪＡＶＡスクリプトです。
普通にＨＰを作るツールがあれば、あと必要なのはその知識だけです。
◆ では、ＤＨＴＭＬとＪＡＶＡスクリプトで文字や画像を動かす基本的なお話からしていきましょう。
ＤＨＴＭＬとは、この講座で紹介してきたＨＴＭＬにチョットした機能を追加するために属性としてＨＴＭＬのタグに書き込むことが出来るものです。
このＤＨＴＭＬでＪＡＶＡスクリプトとＨＴＭＬを、うまく組み合わせることが出来ます。
とは言っても、はじめての人には何のことだかわかりませんね。
そして、これからは「スタイルシート」というものも出てきます。
ま、あわてず、ぼちぼちと行きましょう。
◆ では、早速、下の”笑い”と書いた部分にマウスカーソルを当ててみてください。
笑い
そして、当てたマウスカーソルを、離すと？
マウスカーソルが文字の上に重なると、”笑い”の文字が動きます。
そして、マウスカーソルを離すと止まります。
◆ では、これのソースです。

<html>
<head>
<SCRIPT Language="JavaScript">

</SCRIPT>

</head>

<body>

では、早速、下の”笑い”と書いた部分にマウスカーソルを当ててみてください。<br> <span id="wahaha"
onMouseover="gyahaha()" onMouseout="clearTimeout(timer1ID)"
style="font-family:TT-JTCナミキPOP-M;
font-size:32pt;color:red;position:relative;left:22px;top:1px">
笑い
</span><br>

</body>
</html>

さて、<body>～</body>の中から見ていきましょう。

<span>の中にたくさん何か書かれていてわかりにくいですが、
基本的には<span>笑い</span>というＨＴＭＬが書かれています。
<span>というのは、単にそれで囲んだところを「ここから～～ここまで」というふうに、その範囲を示すだけで、何の働きもありません。
だから、初心者編では説明しませんでした。
例えば<h2></h2>で囲むと字の大きさを変えてしまいますし、<div></div>で囲むと最後の行を改行してしまいます。
ところがこの<span>は、囲む範囲を決めるだけで、何もしません。
だから、ＨＴＭＬだけでＨＰを作るならほとんど使い道はないのです。
ところが、ＤＨＴＭＬでは、結構重要です。
つまり、どこからどこまでの範囲にＤＨＴＭＬやＪＡＶＡスクリプトが有効になるか、その範囲を示すとき、何のＨＴＭＬの働きもなく、ただ範囲だけを設定したいときがあるからです。
この例の場合は、”笑い”という２文字に範囲を設定しました。
そして、その範囲について、どうするのか？ということを<span>のタグの中にいろいろと書き込んでいます。
つまり、<span ･･何やらたくさん書いている･･>笑い</span>
では、次にその何やらたくさん書いている部分を見ていきましょう。
◆

それでは、まずid="wahaha"から！
ｉｄというのはタグの属性の一つです。
そのタグに固有の認識票をつけて、他のタグと区別したいときに使います。
id="半角ローマ字"というふうに好きなキーワードをつけておくのです。
何のための認識票かというと、あとでＪＡＶＡスクリプトで、その部分を指定したいからです。
マウスを当てると文字がぶるぶると動くのはＪＡＶＡスクリプトで動作しています。
そのＪＡＶＡスクリプトでid="wahaha"というふうにｉｄを設定した部分に対して、働きかけをするようにしています。
つまり、この場合、id="wahaha"というふうに認識票をつけた範囲（この例の場合は<span></span>で囲んだ部分を示す）が、ＪＡＶＡスクリプトの影響する範囲になります。
◆

その次は、
onMouseover="gyahaha()"
onMouseout="clearTimeout(timer1ID)"
これはＤＨＴＭＬのイベントハンドラです。
前のページでもonclick=""というのが出てきました。
onMouseover=""というのは、そのタグが囲んでいる範囲のものにマウスカーソルが重なると・・・
””で囲まれた事をする！という意味です。
onMouseout=""というのは、そのタグが囲んでいる範囲に、マウスカーソルが重なっていないと・・
””で囲まれた事をする！という意味です。
この例の場合、<span></span>で囲まれた部分（”笑い”という文字）に、マウスカーソルが重なったとき、重なってないときの事をそれぞれ指定しているのです。
onMouseover="gyahaha()"は、マウスが重なるとＪＡＶＡスクリプトのgyahaha()を実行するというということです。
で、onMouseout="clearTimeout(timer1ID)"については、このあとのＪＡＶＡスクリプトの説明でお話しします。
◆

そして、次に出てくる、style="・・・・・いろいろ書いてる・・・・"ですが、これは、スタイルシートといいます。
主に文字の表示スタイルを、ＨＴＭＬで設定できるよりもさらに細かく設定できるものです。
そして、インターネットエクスプローラー用にＤＨＴＭＬ、ＪＡＶＡスクリプトを使う場合、このスタイルシートも欠かせません。
まず最初に、
font-family:TT-JTCナミキPOP-M;ですが、これは<font>タグの face=""と同様に、文字の種類を指定しています。ここ参照！
そして、区切りとして　; の半角記号が入ります。
font-size:32pt;は、字の大きさです。これは<font>タグよりも細かく指定できます。<font>タグでは、１～７の数字で指定しますがスタイルシートではもっと詳細なサイズの指定が出来ます。
この例では３２ポイントに指定しています。
color:red;は、<font>タグでも指定できる、色の設定です。<font>タグで指定したものと変わりありません。
position:relative;・・これが今回、重要です。
この指定をしておくと、
次のleft:22px;top:1pxとの組み合わせで、表示される位置を指定できるのです。
下の例を見てください。

position:relative;を指定しなかったとき、普通このように表示されます。

では、早速、下の”笑い”と書いた部分にマウスカーソルを当ててみてください。・・例１
笑い

そして、position:relative;left:22px;top:1pxを指定した場合は、

では、早速、下の”笑い”と書いた部分にマウスカーソルを当ててみてください。・・例２
笑い

このように左から２２ピクセル右へずれています。
上下方向も、ちとわかりにくいですが、上から１ピクセル下にずれています。

さあ、そして、ＪＡＶＡスクリプトで、この”位置の指定”を、操るわけです。

ＪＡＶＡスクリプトは、この例では<head>～</head>に書かれています。
もう一度ここに書きます。

次はこれに簡単に説明を加えてみましょう。

<SCRIPT Language="JavaScript">←ここからはＪＡＶＡスクリプトだ！というタグ
←これは、<!--から、ここまで画面に出さない。
</SCRIPT>←ここまでがＪＡＶＡスクリプト！

まず最初のvar k=0;についてですが、変数のページを見てください。
◆ function gyahaha(){ここにひとまとまりのスクリプト}は{ }で囲まれた部分をひとまとまりのプログラムとして、gyahaha()という名前にするということです。
このようにひとまとまりにしておくと、<span>タグに書いてある、onMouseover="gyahaha()"のように、その名前を指定するだけで、そのひとまとまりを実行することが出来ます。（この例の場合は、マウスカーソルが重なるとgyahaha()という名前を付けたプログラムが働きはじめるということです。）
このようにひとまとまりにして名前を付けたものをＪＡＶＡスクリプトでは”関数”といっています。
そしてそのgyahaha()の中は、４行のプログラムが書かれています。
◆ まずは、最初の２行から・・・
if (k % 2 == 0){document.all.wahaha.style.pixelLeft = 30;}
if (k % 2 == 1){document.all.wahaha.style.pixelLeft = 22;}
この２行は、
if (・・・){・・・・；}と
(・・・)の中に、k % 2 == 0 または、k % 2 == 1
{・・・}の中に、document.all.wahaha.style.pixelLeft = 30;または、=22 という構成になっています。
if (・・・){・・・・；}は、
もし、(・・・)だったら、{・・・}をやる！という意味です。
(・・・)の中に書いた条件によって、そのときは{・・・}の中に書いたことをやるというふうに、条件によって何をするのか変えたいときに使います。こちら参照。
◆ ( )の中の　k % 2 == 0　ですが、
k % 2 とは、k　を２で割った”あまり”のことです。
で、== 0 は、”０と等しいがどうか”ということです。= ではありません。== です。
ＪＡＶＡスクリプトの場合、= というのは、等しい（イコール）という意味ではありません。
ｋ＝０　の場合、左側に書いてあるｋに、右側に書いてある０を代入する・・つまり”ｋは０だっ！と決めた”という意味になります。（こちら参照）
左側 == 右側・・・と書けば左側と右側を比較してみると等しいぞということです。
というわけで、ｋを２で割ったあまりが０の時と、ｋを２で割ったあまりが１の時とに分けているのです。
ｋを２で割ったときのあまりが０なら　document.all.wahaha.style.pixelLeft = 30;　をやるぞ！ということです。
◆ ここで、チョットふり返って欲しいのですが、先ほどスタイルシートで、left:22px　と、決めました。参照
style.pixelLeft は、それを変更しようというプログラムです。そして、”笑い”という文字を囲んだ<span>タグに id="wahaha"　と書いています。つまり、wahaha　というＩＤをつけています。参照
document.all.wahaha.style.pixelLeft = 30;　は、wahaha というＩＤをつけたところの、スタイルシートのleft:を３０ピクセルにする！ということです。
そして、 if (k % 2 == 1){document.all.wahaha.style.pixelLeft = 22;}
ｋを２で割ったときのあまりが、１のときは、wahaha というＩＤをつけたところの、スタイルシートのleft:を２２ピクセルにする！
k % 2 （ｋを２で割ったときのあまり）が０のときと、１のときに<span>で囲まれた”笑い”という文字の位置を、左から３０ピクセルにしたり、２２ピクセルにしたりを切り替えるのです。
◆ そして、次に　k = k + 1；があります。
ｋは、ｋに１を足したものにする！ということです。
ｋは最初、var k = 0;　で、ｋを０に決めましたが、ここで、ｋに１を足したものに変更しています。
ｋはもともとの０から１を足されて、１になります。
なんかおかしな感じがするかもしれません。
どうして、そんなふうに書くのかっ？！？！？・・と、悩んではいけない(ー⊿ー)b
そのように書くんだからしょうがない。
ＪＡＶＡスクリプトというものを、考えた人がそう決めたんだから、私の責任ではない！！ ◆ その次に、 timer1ID=setTimeout("gyahaha()",20);
これは、タイマーです。何秒後に何かをするという働きをします。
この場合は、１０００分の２０秒後に、gyahaha() と名付けたプログラム（関数）をする！ということです。
１０００分の２０秒後（０．０２秒後）に、gyahaha() を、実行すると、またこのタイマーに出くわします。
だから、また１０００分の２０秒後に、gyahaha() が実行されるというふうに繰り返されるのです。
◆ すると、ｋはその都度、１ずつ足されて増えていきます。
０・・１・・２・・３・・４・・５・・
すると、そのｋを２で割ったあまりが０のとき・１のとき・０のとき・１のときと交互に訪れます。そして、繰り返されるたびに、”笑い”の文字の位置が
３０ピクセル

笑い

２２ピクセル

笑い

という具合に横に動くのです。 ◆ そして、<span>タグに書いた、onMouseout="clearTimeout(timer1ID)" は、そのＪＡＶＡスクリプトのタイマーを、止める働きです。
onMouseout　というのは、onMouseover（マウスカーソルが重なったとき）の逆です。
”マウスカーソルが重なっていないとき”ということです。
マウスが重なっていないとき、timer1ID=setTimeout("gyahaha()",20);　というタイマーを止めるということです。（赤い字のところが共通だということに注意）
結局、gyahaha() が止まるのです。

あ～～ちかれた。

ＰＣ－Ｐａｒｋトップ

心の話サイコロＴｏｗｎ！

広告		花万馬券	無料レンタルサーバーブログ blog