2.JavaScriptの使い方
JavaScriptは、ネットスケープ社が開発したオブジェクト指向のスクリプト言語で、HTML文書内に直接書き込ことで手軽に利用できます。
(1)JavaScriptの特徴
- JavaScriptは、Javaのようなプログラム言語とは異なり、HTML文書内に記述されたスクリプト文をブラウザが解釈して実行します。
- Java言語に比べ制限が多いため複雑なことはできませんが、プログラミング経験のない人でも比較的容易に作成できます。また、特別な開発環境は不要です。
- JavaScriptを利用することで、例えば次のような処理をクライアントのパソコン側で処理することができます。
- タイマー処理、マウスの動きに対応する処理
- フォームを利用したデータの入出力およびチェック
- 新しいページ・ウインドウ等の処理
(2)JavaScriptの使用法
・書き方
<SCRIPT LANGUAGE=”JavaScript”> … Scriptの開始 <!−− … 未対応ブラウザのための記述 〜〜スクリプト文〜〜 //−−> </SCRIPT> … 終了(例1)時刻によってメッセージを変える
・HTML文
<H2>簡単なJavaScriptの例<BR>
(時刻によってメッセージを変える)</H2>
<IMG SRC="../homepage/beer.gif">
<SCRIPT LANGUAGE="JavaScript">
<!--
var today=new Date(); // todayに現在の日時を得る。
var h=today.getHours(); // 時刻の取得。
if (h<18) {
msg="こんにちは!" ; // 18時までの場合
}
else
msg="今晩は!"; // 18時以降の場合
document.write("<H2>",msg,"ただいま",h,"時です。</H2>"); // HTML文の生成。
//-->
</SCRIPT>
(例2)スクロール・メッセージ
・HTML文
<HTML>
<HEAD>
<TITLE>JavaScript(例2)</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var msg="こんにちは。ようこそ、JavaScriptの世界へ!!・・・じゅうぶん、お楽しみ下さい。 ";
function dispMsg() { //関数dispMsgの定義
setTimeout("dispMsg()",600); //600ミリ秒(0.6秒)毎にdispMsgを呼び出す
document.msgBox.bun.value = msg; //msgBoxというFORMのbunの内容をセット
window.status=msg; //ステータス・バーにもセット
msg=msg.substring(2,msg.length)+msg.substring(0,2) //2バイトずらす
}
//-->
</SCRIPT>
<BODY>
<CENTER>
<H2>スクロール・メッセージ</H2>
<IMG SRC="../homepage/beer.gif">
<FORM NAME="msgBox" bunSubmit="0">
<INPUT TYPE="text" NAME="bun" SIZE="60" VALUE="">
</FORM>
</CENTER>
<SCRIPT LANGUAGE="JavaScript">
<!--
dispMsg();
//-->
</SCRIPT>
</BODY>
</HTML>
(例3)入力フォームのデータチェック
・HTML文
<HTML>
<HEAD>
<TITLE>入力フォーム(JavaScriptによる入力チェック)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function submitCheck(){ //関数submitCheckの定義
if (document.kansou.shimei.value==""){ //フォームの氏名欄が空白の場合
alert("お名前をご記入下さい"); //確認メッセージ
return false; } //メール送信処理をしない
else
alert("送信します" //メール送信確認メッセージ
return true; //メール送信処理を行う
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H2 ALIGN="center">ご感想をお聞かせ下さい。</H2>
<FORM NAME="kansou" ACTION="mailto:kousi@mail.netwave.or.jp?subject=kansou" METHOD="post" ENCTYPE="text/plain" onSubmit="return submitCheck()">
<!-- submitCheckがTrueのときのみサーバへ送信 -->
<HR WIDTH="90%">
<BLOCKQUOTE>
<H3>お名前
<INPUT TYPE="text" NAME="shimei" >(必ず入力して下さい)
</H3>
(略)</BLOCKQUOTE>
<HR WIDTH="90%">
<CENTER>
<INPUT TYPE="submit" VALUE="送 信">
<INPUT TYPE="reset" VALUE="取 消" onClick="document.kansou.name.value=''">
</CENTER>
</FORM>
</BODY>
</HTML>
(例4)消費税の計算
・HTML文
<HTML>
<HEAD>
<TITLE>消費税の計算</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function JScalc() { // 計算する関数
form = document.calc
tanka = form.tanka.value
suryo = form.suryo.value
if (suryo=="") {
suryo=1 }
zei = Math.floor(tanka * suryo * 0.05) // 整数化
gokei = tanka * suryo + zei
form.zei.value = zei
form.gokei.value = gokei
}
function JSclear() { // 入力欄をクリアする関数
form = document.calc
form.tanka.value = ""
form.suryo.value = ""
form.zei.value = ""
form.gokei.value = ""
}
//-->
</SCRIPT>
<BODY>
<BLOCKQUOTE>
<H1>消費税の計算</H1>
<FORM NAME="calc">
<P>単 価 <INPUT TYPE="text" NAME="tanka" value size="20"></P>
<P>数 量 <INPUT TYPE="text" NAME="suryo" value size="20"></P>
<P>消費税 <INPUT TYPE="text" NAME="zei" value size="20"></P>
<P>合 計 <INPUT TYPE="text" NAME="gokei" value size="20"></P>
<P> <INPUT TYPE="button" VALUE="計算" onClick="JScalc()">
<INPUT TYPE="button" VALUE="クリア" onClick="JSclear()"></P>
</FORM>
</BLOCKQUOTE>
</BODY>
</HTML>
[目次へ] [次へ]