(cache) JavaScript講座

基本的なJavaScriptについては理解されましたでしょうか？
これから説明するサンプル事例を確認しながら、更に理解を深めてください。

プログラムサンプル

フォームのデータを受け取る

<form name="js">
お名前：<input type="text" name="txtb" value=""><br>
<input type="button" value="歓迎１" onclick="TBOX1()"><br>
<input type="button" value="消去" onclick="CLR()"><br>
</form>

<script type="text/javascript">
<!--

//テキストボックスの文字を取得する
function TBOX1(){

  var str1=document.js.txtb.value;
  alert("ようこそ"+str1+"さん！");

}


//テキストボックスの文字を操作する
function CLR(){

  document.js.txtb.value="";

}

// -->

</script>

上のソースリストをエディターにコピーして、ファイル名を任意（form.htmlとか）で保存してください。
IE（インターネットエクスプローラー)等で実行してみてください。

このサイトでの動作確認

<プログラムの説明>

<form name="js">
お名前：<input type="text" name="txtb" value=""><br>
<input type="button" value="歓迎１" onclick="TBOX1()"><br>
<input type="button" value="消去" onclick="CLR()"><br>
</form>
"お名前"と言うタイトルのテキストボックスを用意し、歓迎１ボタンを押すとTBOX1サブルーチンを実行します。
消去ボタンを押すとCLRルーチンを実行します。



<script type="text/javascript">
<!--		
JavaScriptの宣言です。


				
//テキストボックスの文字を取得する
function TBOX1(){
var str1=document.js.txtb.value;
  alert("ようこそ"+str1+"さん！");
}			
テキストボックスに書かれた文字を,変数str1に代入し、alertで”ようこそ　str1　さん”と表示します。


				
//テキストボックスの文字を操作する
function CLR(){
  document.js.txtb.value="";
}			
クリアボタンが押されたら、クリア処理するサブルーチンです。

日付を表示する(現在の時刻・・・動く）

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
<!--
function jikoku() {
    dd = new Date();
    document.F1.T1.value = dd.toLocaleString();
    window.setTimeout("jikoku()", 1000);
}
// -->
</script>
</head>
<body onload="jikoku()">
<form name="F1" action="#">
<input type="text" name="T1" size=50>
</form>
<form action="#">
</form>

</body>
</html>

ソースリストをエディターにコピーして、ファイル名を任意（time.htmlとか）で保存してください。
IE（インターネットエクスプローラー)等でスタートしてみてください。

このサイトでの動作確認

<プログラムの説明>

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
<!--
function jikoku() {
    dd = new Date();
    document.F1.T1.value = dd.toLocaleString();
    window.setTimeout("jikoku()", 1000);
}
// -->
</script>	
スクリプト宣言の後、<>迄がJavaScriptの部分です。
jikoku関数を定義しています。変数ddにDate関数の結果を代入し、ddの地域時刻(toLocaleString())を
フォームF1のテキストボックスT1の値valueに代入します。これが時刻を表示する処理です。
1000ms(1sec)毎に関数jikokuを呼び出します。1秒毎に時刻を更新します、つまり時計を進めます。



<body onload="jikoku()">
<form name="F1" action="#">
<input type="text" name="T1" size=50>
</form>
<form action="#">
</form>

</body>
</html>

HTMLでフォームの設定をします。このページの読み込み完了時に最初にjikoku関数が呼ばれます(body onload)。フォーム名をF1,テキストボックス名をT1と設定します。

トップページに戻る