プログラムの中にデータ−をいちいち書きこむのでは実用になりません。
そこでデータ−はキーボードから入力するようにするにはどうしたらよいのでしょう。
1、データの入力
それには、ＨＴＭＬの＜ＦＯＲＭ＞タグと＜ＩＮＰＵＴ＞タグを使えばいい。
そして、それぞれに名前を
name="in_form"
name="in_nen"
name="in_na"
のように付けておきます。
具体的には
<![CDATA[
<form name="in_form">
年齢<input type=text name="in_nen" value="">
:名前<input type=text name="in_na" value="">
:<input type=button value="実行" onClick="test2()">
</form>
]]>
と書けば
のような入力窓ができ、ボタンを押すと
自作命令の test2() が実行できます。
前記したＪａｖａｓｃｒｉｐｔ言語の使用開始宣言をしなくても
＜ＩＮＰＵＴ＞タグの中にはＪａｖａＳｃｒｉｐｔの命令が書けるのです。
onClick="命令（）"
はマウスでクリックしたら "命令（）" を実行しろ！。
という意味に翻訳され実行されるのです。
2、フォームからデータの取込み
JavaScriptの自作命令のtest2()側では
置場名=document ．ＦＯＲＭ名 ．ＩＮＰＵＴ名 ．value；
と書けば＜ＦＯＲＭ＞内での入力データが置場に取込めます。
ただし、＜ＦＯＲＭ＞の入力窓では、数が数字（文字）となっているので
Ｊａｖａｓｃｒｉｐｔで用意されている「数字を数に変換する命令」
置場名 = parseInt(置場名) ;
を通して置場内のデータを数に変換してから演算する必要があります。
3、体験しよう
それでは次のソースをコピーして「メモ帳」に貼り付け、ＨＴＭＬファイルとして保存した上で、そのファイルをダブルクリックして開いてみてください・
-
<![CDATA[
<html>
<head>
<title>javascript_no3</title>
<script language="javascript">
<!--
function test2(){
nenrei = document.in_form.in_nen.value ;
nenrei = parseInt(nenrei) ;
namae = document.in_form.in_na.value ;
nenrei = nenrei + 1 ;
alert(nenrei);
namae = namae + "さん" ;
alert(namae);
}
//-->
</script>
</head>
<body>
<form name="in_form">
年齢<input type=text name="in_nen" value="">
:名前<input type=text name="in_na" value="">
:<input type=button value="実行" onClick="test2()">
</form>
</body>
</html>
]]>
|
|