小さなウインドウを動かしてみよう
表示の例
 ボタンを押すと小さなウインドウが開き、画面の右へ動いて消えます。
プログラムAのソースをコピーして、小さなウインドウを表示させたいページ(ボタンをつけるページ)のHTMLソースのHEAD区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function new_win5(){
myWin=window.open("java_swindow3.html","","width=400,height=120");
Move();
}
x=0;
function Move(){
myWin.moveTo(x,0);
x+=15;
if(x>=600){
myWin.close();
clearTimeout(myID);
return;
}
myID=setTimeout("Move()",300);
}
//-->
</SCRIPT>
プログラムAのソースの上から4行目の java_swindow3.html が小さなウインドウのアドレス(ファイル名)ですから、あらかじめ小さなウインドウ用のページを作っておき、そのページのアドレスにかえてください。
表示される小さなウインドウのサイズは width=400,height=120, のところで指定をします。よこのサイズなら 400 を、たてのサイズなら 120 をかえてください。
プログラムBのソースをコピーして、ボタンを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムBのソース
<FORM>
<INPUT type="button" value="動くウインドウ" onClick="new_win5()">
</FORM>
2行目の value="動くウインドウ" の 動くウインドウ がボタンに表示される文字ですから、あなたの好きな文字にかえてくださいね。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
※ 動作確認について
ホームページ作成ソフトのプレビューなどでは、ウインドウが表示されるだけになり、プログラムAのソースで指定したページが表示されないようですから、必ずブラウザで動作確認をしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ