ポケモン徹底攻略ページ {攻略・裏技・データ}

ポケモン徹底攻略ホームページ作成支援JavaScript講座(仮)
最終更新日:2004年3月20日(土)

注意

1.文章・画像の提供は禁止です。文章を転載する時は必ずこのサイトからの転載であることを明記してください。
2.間違いがあるかもしれません。ご了承下さい。

はじめに
★ 対象
とりあえず、HPは作ったけれど何か物足りない・・・。
もっと面白いHPを作りたい・・・という方のための講座です。
あくまでも、対象は初心者ですが、HTMLをしっかり理解していないと厳しいです。
★ JavaScriptとは何か?
HTMLは文書を整えるための「マークアップ言語」でしたが、
JavaScriptはNetscape Communications社が開発した「プログラミング言語」です。
難しそうですね・・・。たしかに難しいです。でも慣れればハマります。
今回は、このJavaScriptを簡単に使ってHPを少しグレードアップしてみましょう。
ここで友達と差をつけよう!(^^;
★ 注意
JavaScriptは対応していないブラウザでは動作しません。
場合によってはとんでもない事が表示されたりしますので十分に注意しましょう。
とりあえず作ってみよう
★ JavaScriptで「こんにちは」と表示してみよう
何で「こんにちは」などといちいちJavaScriptで書くのかって?
たしかにHTMLで書けば話は早いですが、とりあえず慣れるためです。
ここを飛ばすと痛い目に遭うかもしれませんので、しっかり理解していきましょう。
とりあえず、下のソースの「test.htm」というHTMLファイルを作ってみましょう。
コピペはしないでちゃんと自分で書きましょうね。
<html>
<body>
↓JavaScriptの練習です↓<br>
<script type="text/javascript" language="JavaScript">
<!--
document.write("こんにちは");
//-->
</script>
</body>
</html>
◆ 実行例
どうでしょう?
ちゃんと「こんにちは」と表示されましたよね?
表示されなかった人は何か間違いはないか確認してみましょう。
上記のように、JavaScriptは<script type="text/javascript" language="JavaScript"> </script>の間に、
<!--と//-->を入れて、その中に書きます。
document.write("X");は、Xを書くということです。
★ 時刻を表示してみよう
さて、いよいよHTMLにはできないことをやってみましょう。
HTMLだけでは、現在の時刻を表示することはできませんよね。
JavaScriptを使えば、現在の時刻を表示することができます。
下のソースの「test2.htm」というHTMLファイルを作ってみましょう。
<html>
<body>
現在の時刻:
<script type="text/javascript" language="JavaScript">
<!--
tmp = new Date;
document.write(tmp.toLocaleString());
//-->
</script>
</body>
</html>
◆ 実行例
現在時刻が表示されましたね?
X = new Date;は、「X」という名前の箱にnew Dateという値を入れるという意味です。
new Dateは、現在時刻です。
この「X」のような箱を「変数」と呼びます。変数の名前を「変数名」といいます。変数名は、半角英数字にしましょう。
例えば、「pokemon」という変数に「ピカチュウ」という値を入れたければ、
pokemon = "ピカチュウ";
とします。
document.write(tmp.toLocaleString());は、変数「tmp」をローカル出力するという意味ですが、
今回は「tmp」が時刻だったからの話で、通常は、document.write(tmp);でOKです。
★ カウントボタンを作ってみよう
押すと数字がどんどんカウントされて増えていくボタンを作ってみましょう。
<html>
<body>
<input type="button" value="0" onclick="this.value++;">
</body>
</html>
◆ 実行例
あれ?どこにJavaScriptがあるの?と思われるかもしれません。this.value++;です。
onclick="X"は、クリックされたらXを実行するということです。
this.value++;は、この(this)値(value)を+1するということです。this.value+1;と同じです。
従って、このボタンの初期値は「0」ですのでクリックすれば「1」「2」・・と増えていきます。
★ ボタンが押されたら「こんにちは」とアラートしてみよう
よくありますよね?ボタンを押したら「警告」とかが出てくるの。
それを作ってみましょう。
<html>
<head>
<script type="text/javascript" language="JavaScript">
<!--
function test(){
window.alert("こんにちは");
}
//-->
</script>
</head>
<body>
<input type="button" value="押してみよう" onclick="test();">
</body>
</html>
◆ 実行例
これだけです。
今度は、<script type="text/javascript" language="JavaScript"> </script>を<head> </head>内に入れました。
今回のように、ページを表示してもすぐに動作しないJavaScriptは普通は<head> </head>内に入れたりします。
これは前回のように、<input type="button" value="押してみよう" onclick="window.alert('こんにちは');">としても同じ事です。
ただし、<input type="button" value="押してみよう" onclick="window.alert("こんにちは");">はダメです。
「"〜"」の中に「"〜〜"」をもう1つ入れることはできません。「""」の代わりに「''」を使いましょう。
<html>
<body>
<input type="button" value="押してみよう" onclick="window.alert('こんにちは');">
</body>
</html>
◆ 実行例
window.alert("X");は、Xをアラート表示するということです。
function Y(){Z}というのは、「Z」という機能を「Y」という名前で予め定義しておくといった意味です。
<input type="button" value="押してみよう" onclick="Y();">のonclick="Y();"は、ボタンが押されたら「Y」を実行するという意味です。
従って、ボタンを押すと「Y」内の機能「Z」が実行されるわけです。
当然、「Y」は半角英数字でなければなりません。
★ 足し算機を作ってみよう
2つの数字を入力して、足し算を行う計算機を作ってみましょう。
<html>
<body>
<input type="text" name="t1" size=5>+
<input type="text" name="t2" size=5>=
<input type="text" name="t3" size=5>
<input type="button" value="OK" onclick="document.all.t3.value=Number(document.all.t1.value) + Number(document.all.t2.value);">
</body>
</html>
◆ 実行例
onclick="X"の意味はもう分かりますよね?
document.all.t3.valueは、<input type="text" name="t3" size=5>の値のことですね。
<input>にname="t3"と名前をつけて、どの値かを判断しています。
document.all.t1.value、document.all.t2.valueも同様です。
Number(X)はXを数値だと認識させています。Xのままだと、文字列だと判断されて、2つの値がくっつくだけになってしまいます。
Z=X+Yはいうまでもなく、「X」と「Y」を足した値を「Z」に入れるということですよ。
X-Yは「X」から「Y」を引いた値、X*Yは「X」と「Y」をかけた値、X/Yは「X」を「Y」で割った値になります。
さて・・・これをfunctionの形にできますか?答えは書きません。自分でトライしてみましょう。
★ リンクしてみよう
ページを開いてみましょう。
<a href="URL">〜</a>と同じようなことですが、それより高度なことができます。
<html>
<body>
<input type="button" value="普通に開く" onclick="window.open('./test.htm','_self');">
<input type="button" value="新しく開く" onclick="window.open('./test.htm','_blank');">
<input type="button" value="サイズ指定して開く" onclick="window.open('./test.htm','_blank','width=200,height=150');">
<input type="button" value="効果をつけて開く" onclick="window.open('./test.htm','_blank','menubar=no,resizable=no');">
</body>
</html>
◆ 実行例
window.open('X','_self');は、Xを自分自身のページ(_self)で開きます。
window.open('X','_blank');は、Xを新しい名無しのページ(_blank)で開きます。
window.open('X','_blank','width=Y,height=Z');は、Xを新しい名無しのページで、横Yピクセル縦Zピクセルの大きさで開きます。
window.open('X','_blank','menubar=no,resizable=no');は、Xを新しい名無しのページで、メニューバー非表示&サイズ変更不可能な状態で開きます。
★ ボタンを押すごとに違ったアラートをしてみよう
ボタンを押すごとに毎回違ったメッセージをアラート表示させてみましょう。
今回はfunctionを使ってみます。
<html>
<head>
<script type="text/javascript" language="JavaScript">
<!--
function test2(){
tmp = Math.floor(Math.random()*5);
if(tmp==0){window.alert("今日は良い天気ですね");}
else if(tmp==1){window.alert("今、何してます?");}
else if(tmp==2){window.alert("国語は好きですか?");}
else if(tmp==3){window.alert("明後日は何曜日でしたっけ?");}
else if(tmp==4){window.alert("可愛い犬ですね。");}
}
//-->
</script>
</head>
<body>
<input type="button" value="押してみて" onclick="test2();">
</body>
</html>
◆ 実行例
どうでしょう?色々表示されますよね?
たった5パターンだけですので、同じものが続けて表示されることもありますけれどね。
Math.random()は、「0」以上「1」未満の乱数(ランダムな数)を生成します。
Math.floor(X)は、Xの少数点以下を切り捨てにします。
従って、Math.floor(Math.random()*5)は「0」「1」「2」「3」「4」のいずれかになります。
if(Y){Z}は、もしYだったらZを実行するということです。
if(tmp==0){window.alert("今日は良い天気ですね");}は、もし「tmp」が「0」だったら「今日は良い天気ですね」をアラート表示するということです。
else if(tmp==1)とした場合は、それ以外、つまり「tmp」が「0」以外の場合で、「tmp」が「1」だったら実行するということです。
今回の場合は、else ifではなくて全てifでも問題ありません。
★ 10秒ごとに画像を変えてみよう
10秒ごとにランダムに画像を変更してみましょう。
乱数は、Math.random()で生成できるんでしたよね。
<html>
<head>
<script type="text/javascript" language="JavaScript">
<!--
function ci(){
var i = new Array("./a.gif","./b.gif","./c.gif");
document.rimg.src = i[Math.floor(Math.random()*3)];
}
//-->
</script>
</head>
<body onload="setInterval('ci()',10000);">
<img src="./a.gif" alt="ランダム画像" name="rimg">
</body>
</html>
◆ 実行例
ランダム画像
<body>に、onload="setInterval('ci()',10000);"と入れました。
これは、「10」秒ごとにci()を実行するということです。
var i = new Array("./a.gif","./b.gif","./c.gif");・・・初めて見ましたね。
変数のようなものですが、これを「配列」といいます。./a.gifなどを「要素」といいます。
配列「i」に、「./a.gif」と「./b.gif」と「./c.gif」の要素を入れています。
最初の要素を「0」番目と数えるので、「0」番目から「2」番目の要素に値が入ったことになります。
「0」番目の要素は「i[0]」で表現できます。同様に、「1」番目の要素は「i[1]」です。
この例では、「i[0]」に「./a.gif」、「i[1]」に「./b.gif」、「i[2]」に「./c.gif」を入れたのと同じです。
Math.floor(Math.random()*3)は、前回やったように、「0」「1」「2」のいずれかになります。
従って、i[Math.floor(Math.random()*3)]は、「./a.gif」「./b.gif」「./c.gif」のいずれかになります。
document.rimg.srcは、「rimg」という名前の画像のSRCですので<img name="rimg">というIMGタグを用意することによって、画像を変更できます。