２．ＪａｖａＳｃｒｉｐｔの使い方

　ＪａｖａＳｃｒｉｐｔは、ネットスケープ社が開発したオブジェクト指向のスクリプト言語で、ＨＴＭＬ文書内に直接書き込ことで手軽に利用できます。

（１）ＪａｖａＳｃｒｉｐｔの特徴


（２）ＪａｖａＳｃｒｉｐｔの使用法


　　　・書き方

＜ＳＣＲＩＰＴ　ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞　… Scriptの開始
＜！−−　　　　　　　　　　… 未対応ブラウザのための記述

　　　〜〜スクリプト文〜〜

／／−−＞ 
＜／ＳＣＲＩＰＴ＞　　　　　　　　　　　　　　　… 終了

（例１）時刻によってメッセージを変える




（クリックして下さい）


　　　・ＨＴＭＬ文

<H2>簡単なＪａｖａＳｃｒｉｐｔの例<BR>
（時刻によってメッセージを変える）</H2>
<IMG SRC="../homepage/beer.gif">

<SCRIPT LANGUAGE="JavaScript">
<!--
　　var today=new Date();　　// todayに現在の日時を得る。
　　var h=today.getHours();　// 時刻の取得。
　　if (h<18) {
　　　　msg="こんにちは！" ; 　// １８時までの場合
　　}
　　else
　　msg="今晩は！"; 　　　　　// １８時以降の場合
　　document.write("<H2>",msg,"ただいま",h,"時です。</H2>"); 　// ＨＴＭＬ文の生成。
//-->
</SCRIPT>




（例２）スクロール・メッセージ




（クリックして下さい）


　　　・ＨＴＭＬ文

<HTML>
<HEAD>
<TITLE>JavaScript（例２）</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var msg="こんにちは。ようこそ、ＪａｖａＳｃｒｉｐｔの世界へ！！・・・じゅうぶん、お楽しみ下さい。　　　";
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) //２バイトずらす
}
//-->
</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>




（例３）入力フォームのデータチェック




（クリックして下さい）


　　　・ＨＴＭＬ文

<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がＴｒｕｅのときのみサーバへ送信 -->
<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>


（例４）消費税の計算




（クリックして下さい）


　　　・ＨＴＭＬ文

<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>


　

　[目次へ]　[次へ]




GigaHit