サンプルをダウンロードしてください。

1-1-1.HTMLタグ解説

まずHTMLタグ部分を見ていきます。

<form name="text">
<input type="text"name="textfield1"size="20"onFocus="this.blur()">
<input type="text"name="textfield2"size="20"onFocus="this.blur()">
</form>

<form name="button">
<input type="button"value="ボタン１"onClick="kekka()">
<input type="button"value="ボタン２"onClick='kekka2("こんにちは")'>
<input type="button"value="空にする"onClick="empty()">
</form>

まずテキストフィールドやボタンを作成する際には必ず<form>〜</form>内に 記述しなければなりません。 この講座ではテキストフィールドの中身を書き換えるので<form>に名前をつけておきます。 名前はname="名前"というオプションでつけることができます。

テキストフィールドを作成するには

<input type="text"name="テキストの名前"size="テキストのサイズ">

とします。オプションとしてonFocus="this.blur()"を入れるとテキストフィールド内を クリックして中身を消したり付け加えたりができないようになるので、JavaScriptでだけ 操作できるようにオプションとして指定します。

ボタンを作成するにはテキストフィールド作成のタグのtype="text"という部分を type="button"と変更するだけです。オプションとしてvalue="文字列"とすると ボタンの上にその文字列が表示されます。

ボタンをクリックした時にテキストフィールドを操作するのでクリックされた時に JavaScriptで作成した関数を呼び出しています。ボタンをクリックして関数を呼び出すやり方は

<input type="button"onClick="abc()">

となり、オプションとしてonClick="関数名()"を入れればクリック時に関数が呼ばれるようになります。
ここで注意してほしい事が一点。引数として文字列を渡す時に

onClick="kekka2("こんにちは")";

としてしまうとエラーになります。なぜならばボタンがクリックされた時に実行するのがkekka2(というものになってしまうからです。 "から"までをクリック時の動作としてしまう為です。
そこで引数に"を使った場合は

onClick='kekka2("こんにちは")';

のように"（ダブルクォーテーション）ではなく'（シングルクォーテーション）で外を囲うようにしましょう。

1-1-2.JavaScriptの解説

<script language="JavaScript">
<!--

function kekka(){
　document.text.textfield1.value="こんにちは";
}
function kekka2(moji){
　document.text.textfield2.value=moji;
} function empty(){
　document.text.textfield1.value="";
　document.text.textfield2.value="";
}

-->

</script>

JavaScript部分は上のようになっています。
テキストフィールドにデータを入れる方法は

document.フォームの名前.テキストフィールドの名前.value="データ";

となります。
それでは実際に関数の中身を見てみましょう。

kekka()関数は呼び出されると『こんにちは』という文字列をtextfield1という名前のテキストに出力しています。

kekka2()関数はひとつの引数を受け取り、その引数の値をtextfield2に出力しています。
この引数を渡すのがHTMLタグ部分のボタン２がクリックされた時のkekka2("こんにちは")という呼び出しの部分です。
このkekka2()関数は受け取る引数によってテキストの中身をいろいろ変更できるので、ボタン２の 関数呼び出しの引数を変更して試してみましょう！

最後にempty()関数です。この関数は呼ばれるとtextfield1とtextfield2を空にします。 空にするには文字列を囲む"（ダブルクォーテーション）を二つならべればできます。

これで今回のJavaScriptからテキストフィールドの操作は終了です。 第一回目ということでしたが、理解できましたでしょうか？ 次回講座に行く前に必ずわからないところがないようにしておきましょう！ わからずに進めていくと結局理解できないまま終わってしまいますので・・・。