(1) 書式、画面表示、実行方法

1.標準的な書式と、画面表示

JavaScriptはhtml文の中に書く。
下の例文の <SCRIPT から <!--> までと、 // --> から </SCRIPT> までは他の言語でもよくある決まり文句みたいなもので、どの言語を勉強する時も、この手の行ははじめの頃は「おまじない」と思うようにしている。今回もそのうち分かるだろうと、「たかをくくる」ことにする。
プログラム本文は <!-- の次の行から // --> の前の行までの6行だけ。
行の右の方にある // は、ここから行の右端まではコメントで、プログラムとしては無視されると言う意味。
document.write は画面に文字を表示させる命令で、 '' とで囲まれた文字が、そのままHTML文として表示される。HTML文のタグも、ちゃんと使える。
document.write より前にdocument.open()を入れる必要がある。また最後にdocument.close()を入れないと、ブラウザによっては表示処理が終わらない(=地球マークがくるくる回ったまま止まらない、マウスカーソルも砂時計のままになる。)
\n で改行したり writeln 文で改行する場合は <PRE> タグではさんで、HTML文としてではなく、そのままの文字を出力する。
window.confirm は確認ダイアログボックスを表示させる命令。確認ダイアログボックスは、[OK]ボタンと[キャンセル]ボタンがある。
window.alert は警告ダイアログボックスを表示させる命令。警告ダイアログボックスは、 [OK]ボタンのみ。
ダイアログボックスの中のメッセージは \n で改行。
各行の最後の ; は、命令の終わりを意味する区切り文字(デリミタ)で、必ず付ける。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>1.標準的な書式と、画面表示</TITLE>
</HEAD>
<BODY>
JavaScript以外の行は普通のHTML文と全く同じです。<BR>
この下の行からがJavaScriptです。<P>
<SCRIPT language="JavaScript">
<!--
document.open();      //これと、最後のdocument.close()を入れないと、ブラウザによっては表示処理が終了しない
document.write('この行はJavaScriptで<BR>表示されています。<BR>');       //ここから行の右端まではコメント
document.write('<PRE>この行もJavaScriptで\n表示されています。\n</PRE>'); //です。コメントにはプログラムの
document.writeln('<PRE>この行もJavaScriptで');                    //説明を書きます。
document.writeln('表示されています。</PRE>');
window.confirm('この確認ダイアログボックスもJavaScriptで\n表示されています。');
window.alert('この警告ダイアログボックスもJavaScriptで\n表示されています。');
document.close();

/*
複数行にわたる長いコメントは
こんな風に書きます。
*/
// -->
</SCRIPT>
</P>この上の行までがJavaScriptです。<BR>
あとは、また普通のHTML文と同じように書けます。
<P align="center"><A href="jvs-1.html">戻る</A></P>
</BODY>
</HTML>

 




2.ボタンなどによるJavaScriptの実行

上の例では、ブラウザがページを読み込むと自動的に JavaScript が実行されたが、ボタンやリンクなどによって実行させる事もできる。
<INPUT TYPE="button" でボタンを表示させ、 VALUE="○○" でボタンの中に表示される文字を指定する。
onclick="□□" にボタンがクリックされたときに実行するJavaScriptを書く。
bgColor はバックグラウンドカラーのプロパティー。それをyellowwhite に変更している。document.〜 は「アクティブなウインドウの〜」という意味。
別のウインドウの色を変えたい時は ○○.document.bgColor の様に、前にウインドウの名前を付ける。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>2.ボタンなどによるJavaScriptの実行</TITLE>
</HEAD>
<BODY>
JavaScriptを INPUT タグの button の onclick イベントに関連づける事も出来ます。<BR>
<INPUT TYPE="button" VALUE="黄色" onclick="document.bgColor='yellow';"><BR>
<INPUT TYPE="button" VALUE=" 白 " onclick="document.bgColor='white';"><BR>

上のボタンを押すと、バックグラウンドカラーが変わります。<BR>
また、リンクで JavaScript を実行させることもできます。<BR>
下の「閉じる」リンクをクリックするとこのウインドウが閉じます。
<P align="center">
<A href="JavaScript:window.close()">閉じる</A>
</P>
</BODY>
</HTML>

 




3.テキストボックスの値の取得

ユーザーが入力した値を処理したい場合は、まずフォームでテキストボックスを作る。
<FORM name="FormName">
<INPUT type="text" name="TextName">

関数を呼び出す時に以下の様にしてその値を受け渡す。
<INPUT type="button" name="ButtonName" value="ボタン" onclick='JavaScript:window.confirm(FormName.TextName.value);'>
</FORM>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>3.テキストボックスの値の取得</TITLE>
</HEAD>
<BODY>
テキストボックスの値を表示させるだけのプログラムです。<BR>

<!-- フォームの始まり -->
<FORM name="Fm1">
<INPUT TYPE="text" value="何か入力して下さい" name="Tx1"><BR>
<INPUT TYPE="button" VALUE=" ボタン " onclick="window.confirm(Fm1.Tx1.value);"><BR>
</FORM>

<!-- フォームの終わり -->

上のボタンを押すと、テキストボックスに入力した文字がそのまま表示されます。
<P align="center">
<A href="JavaScript:window.close()">閉じる</A>
</P>
</BODY>
</HTML>


 

戻る 進む