読者入力の利用

１． javascript疑似プロトコルの利用
　読者からの入力を受け付ける簡単な方法の1つは，javascript疑似プロトコルを利用する方法です．
　HTML文書は，リンクという仕組みを利用して別の文書を参照できる（別の文書に移動できる）という重要な特徴があります．このリンクを作るには

①外部のURLを参照するとき
<a href="参照先のURL">ラベル</a>
の形で書きます．<aとは何か，hrefとは何か，なぜ二重引用符が必要なのかなどと考えても進みませんので，ここではそういう約束になっていると考えるとよいでしょう．

【例】 Yahoo! JAPANのトップページのURLは「 https://www.yahoo.co.jp/ 」です．このページへ「Yahoo! JAPAN」というラベルを使ってリンクをかけるには

<a href="https://www.yahoo.co.jp/">Yahoo! JAPAN</a>
　これをブラウザから見ると→Yahoo! JAPAN
となります．通常の設定になっていると，リンクがかけてあるラベルには下線が付いて表示されます．

②自分のファイルを参照するとき
<a href="参照先のファイル名">ラベル</a>
の形で書きます．（参照元のファイルと参照先のファイルが同一フォルダにある場合は，単にファイル名を書くだけでよい）

【例】「 abc1.htm 」というファイルへ，「HTMLの基本」というラベルを使ってリンクをかけるには

<a href="abc.htm">HTMLの基本</a>
と書きます．

③javascript疑似プロトコルの利用
　読者がラベルをクリックするとき，リンクの仕組みは読者のクリックという動作を受け付けています．このとき，リンクのタグ<a href="行先のファイル名"></a>の中の行先のファイル名の代わりに，次の形で関数を書くとファイルではなく関数を呼び出すことができます．プロトコルというのは通信上の手順という意味ですが，ここでは難しく考えずに「読者が関数を呼び出す約束事」と割り切りましょう．
<a href="javascript:関数名();">ラベル</a>

【例】分数を小数に直す関数 to_dec() という関数が定義してあるとき，この関数を「変換」というラベルを使って呼び出すには

<a href="javascript:to_dec();">変換</a>
と書きます．javascriptと関数名の間にコロン( : )を付けるところが重要です．
　このページでは，実際にto_dec()という関数を作って，次の分数を小数に直す計算を行うようにしています．下の変換というラベルをクリックすると，その関数が呼び出せますので，試してください．

（参考）
(1) ブラウザの通常の設定で，リンクのラベルには下線が付き，ラベルの文字色は青～紫色になります．これらの設定を変更するには，スタイルの指定を行います．
<a href="javascript:to_dec();" style="text-decoration:none;color:#0000ff;">変換</a>とすれば，下線なしで文字色は青(#0000ff)になります．
text-decoration:の後には，下線を付ける:underline; ，上線を付ける:overline; ，取り消し線を付ける:line-through; ，何もなし:none; が書けます．
color:の後には，16進数で赤→#ff0000;，緑→#00ff00;，青→#0000ff;のように256×256×256色の中から濃さの程度を組み合わせて指定します．

(2) この教材の他のページで多用しているdocument.write();を利用するには，危険な落とし穴がありますので，取り扱い注意です．
　すなわち，ブラウザがそのページの読み出しと同時に行うdocument.write();は，単にHTML文書のbody部分に文字が書かれているのと同様に，その場所に単純に表示するだけですが，関数の中にdocument.write();が書かれていて，ブラウザがそのページの読み出すときには実行されずに，何かの合図（上記のようなリンクのラベルををクリックしたとき）によって後に関数が呼び出される場合は，それまでにHTML文書に書かれていた全ての文字，画像を消して「何もない画面に指定された文字などを書きます」．
　つまり，画面がロードされて後に，関数からdocument.write('ある文字');を実行すると，画面の内容が全部消えて，'ある文字'だけになります．
　上記に述べた③を使って，画面上の文字や画像を後から変更するには，文字や画像をnameやIDで区別する方法を学んでおく必要があります．（以下に少しずつ述べます）

２．フォームの利用
　読者が入力できる「空欄」や読者がクリックできる「ボタン」は，フォームの中に設置できます．
　フォームは<form>と</form>で囲んで書きます．フォームの中には空欄やボタンなどの要素を設置できます．関数などからこれらの要素を参照（読み書き）するには，どのフォームのどの要素をどうするのか明確になるように「フォームにも」「要素にも」名前を付けます．

【例】
<form name="f1">←①
<input type="text" name="t1" size="2" value="" style="width:20px;">←②
<input type="button" name="b1" value="変換">←③
</form>
【このように書いた時の実際の見え方】
【使い方】
空欄t1の値を変数xx1に代入するには
xx1 = f1.t1.value;←④
空欄t1の文字を'abc'に書き換えるには
f1.t1.value = 'abc';←⑤
ボタンb1のラベルを"完了"に書き換えるには
f1.b1.value = '完了';←⑥

①<form>～</form>だけでも使えますが，呼び出して使うには名前を付ける必要があります．name=""と書きます．
②<input type="text">で1行からなる入力欄ができます．この入力欄という要素にもname="" によって名前を付けます．異なるフォームの中に重複する要素名があっても問題なく動きますが，１つのフォームの中に重複する名前があるとエラーになります．
size="n"によって半角n文字分の長さの空欄ができます．例えば，size="3"で3文字分の空欄ができます．ただし，Chromeで読み出すとsize指定に関わらず一律に10文字分の空欄ができますので，画面のレイアウトが想定外のものになることがあります．そこで，どのブラウザでも同じように見えるようにするために，style="width:30px;"なるどとスタイルを指定するとよい．
value = ""によって，空欄に書き込まれる文字列の初期設定を行います．この文字列は，後から，読者の直接入力やプログラムによって書き換えることができます．
③<input type="buttom">でボタンができます．name=""によって，後から参照できますが，上の書き込み用空欄とは異なり，value=""がラベルとして表示される文字列になります．sizeはラベルに応じて自動設定されますので，特に指定する必要はありません．また，ボタンの色をstyleで指定することもできますが，特に指定しなければ標準的な銀色になります．
フォーム名，要素名を使うと④⑤⑥のように後から参照（読み書き）できるようになります．

３．ボタンを使った関数の呼び出し
　onClick = "関数名()"という書き方により，フォームの中に設置されたボタンを関数呼び出しに利用することができます．
　Onclickはイベントハンドラと呼ばれ，あるイベントが起きたときに行う処理を指定することができます．マウスでクリックされたときにというイベントハンドラはOnMouseDownと書いても同じになります．（ただし，OnMouseOver[マウスが上に重なったときに]のように，パソコン上では働いても，スマホやタブレット上でマウスがなくて，指タッチで操作する場合には使えないイベントハンドラもあります．ここでは，どちらでも行けるものを扱います）
　右辺が関数名で左辺がonClickでなければなりません．逆では働きません．
　このonClickはjavascriptのキーワードではなくてHTMLでのキーワードなので，半角英字であれば大文字で書いても，小文字で書いても，大文字小文字混じりで書いても同じ動きになります．

【例】
<form name="f1">
<input type="text" name="t1" size="2" value="" style="width:20px;">
<input type="button" name="b1" value="変換" onClick="change_rabel();">
</form>
そのページ内に次の関数が定義されているものとします
<script>
function change_rabel()
{f2.b1.value = "完了";//ボタンのラベルが変わる
}
</script>

【実際の見え方】→ボタンをクリックして確かめてください

【例】次の例は，初めの空欄に pen と記入されたら2つ目の空欄にＯを出し，それ以外ではＸを出す仕組みです．
採点というボタンからは関数is_true()が，消すというボタンからは関数del_text()が呼び出されます．
<form name="f3">
ペンの綴りは
<input type="text" name="t31" value="" style="width:50px;">
<input type="button" name="b1" value="採点" onClick="is_true();">
<input type="button" name="b4" value="消す" onClick="del_text();">
<input type="text" name="t32" value="" style="width:20px;">
</form>
そのページ内に次の関数が定義されているものとします
<script>
function is_true()
{if(f3.t31.value == "pen")
f3.t32.value = 'O';
else
f3.t32.value = 'X';
}
function del_text()
{f3.t31.value = "";
f3.t32.value = '';
}
</script>

４．画像の書き換え
　HTMLにおいて，画像を表示するには，
<img src="ファイル名">
としますが，そのときに
<img src="ファイル名" name="">
という形で識別子を付けておくと，プログラムから画像を参照して書き換えることができます．

(1)

英語で「ペン」の綴りを正しく「選択する」と正誤に応じて右の画像が変化します．（javascript疑似プロトコルの利用）
pen apple cat dog

選択肢の間を広げたり，選択肢の文字色を変えるなどの枝葉末節の部分を取り除くと，次のプログラムになっています．

枝葉末節の部分を取り除くと，次のプログラムになっています．

５． IDを使った書き換え
　HTML文書にnameではなく，IDを埋め込んでおくと，後からプログラムを使って文章や画像を簡単に書き換えることができます．
(1) 文中にIDを埋め込んで，そのIDを手がかりに文章や画像を書き換える場合

①【文字色，文字サイズ，背景色などの変更】
1) HTML文書でのIDの埋め込み
<span id="aa1">abcde</span>
2) scriptからの書き換えプログラム
document.getElementById('aa1').style.color = '#ff0000';←文字色を赤に変える
②.1【文字の変更】
document.getElementById('aa1').innerHTML = 'おはよう';←文字を変える
②.2【文字と色の変更】
document.getElementById('aa1').innerHTML = '<span style="color:#ff0000;">おはよう</span>';←文字と色を変える

(2) 新しい段落にIDを埋め込んで，そのIDを手がかりに文章や画像を書き換える場合

上記の(1)の代わりに<div>～</div>の間に書きます．

（解説）
○　ID=""の部分はHTML文書なので，大文字小文字の区別はありません．id=""でも同じ働きをします．""の中の文字列はjavascriptに渡されますので，大文字小文字の区別はあります．
○　getElementByIdの部分は大文字小文字を完全にこのまま書きます．一般に２つ以上の単語を組み合わせて作られたjavascriptの関数（メソッド）は，小文字で始まり，単語の変わり目を大文字にした形がよく使われます…get Element By Idとは，「Idによって要素を得る」という意味でしょう．
　文字色，文字サイズ，背景色，表示非表示の別などは，styleの中のプロパティ（値）として定義されているので，.style.colorのように参照します．
【文字色を..に】document.getElementById('aa1').style.color = '#..';
【文字サイズを..に】document.getElementById('aa1').style.fontSize='..px';
【非表示を表示に】document.getElementById('aa1').style.visibility='visible';

○　スタイルでなく書かれている内容を書き換えるには
document.getElementById('aa1').innerHTML = 'おはよう';
とします．(innerは小文字，HTMLは大文字)
innerがあるのならouterのあるのか？ありますが，やさしい方のinnerから使えるようにしましょう．

【例】　getElementById('..').innerHTMLを左辺として（代入される側として）文書の内容を変更する場合
次の「書き換え1」をクリックすると「コブタとタヌキ」に変わります．「書き換え2」をクリックすると「キツネとネコ」に変わります．

↓クリックして確かめてください
イヌとネコ
書き換え1
書き換え2

【例】　getElementById('..').innerHTMLを左辺として（代入される側として）「文書の内容もスタイルも」変更する場合
次の「書き換え3」をクリックすると正答に変わります．

問題：1+2=
採点結果
3
4

６．このページで扱った内容のまとめ

コンピュータに入力する仕組み
A) javascript疑似プロトコル
B) onclickイベントハンドラ
見え方
i) 空欄書き込み
ii) 選択肢
コンピュータからの出力の仕組み
1) 画像の変更
2) form中の要素の変更
3) IDによる文書や画像のスタイルの変更
4) IDによる文書や画像の内容とスタイルの変更

【例A.i.1】
問題に対する解答が合っていれば○を間違っていれば×を表示するプログラムです．

【例A.i.2】
問題に対する解答が合っていれば○を間違っていれば×を表示するプログラムです．

【例A.i.3】
問題に対する解答が合っていれば○を間違っていれば×を表示するとともに，間違ったときに解説を表示するプログラムです．

【HTMLのbody部分】
<form name="qx3">
3<sup>2</sup>を計算すると<input type="text" name="tx31" value="" style="width:50px;">
<span id="o_x3" style="visibility:hidden;">Ｏ</span><span id="x_x3" style="visibility:hidden;">Ｘ</span>
<br>
<a href="javascript:saiten_x3()" style="text-decoration:none;color:#0000ff;">採点</a>
<a href="javascript:erase_x3()" style="text-decoration:none;color:#0000ff;">消す</a>
<a id="h_x3" href="javascript:ans_x3()" style="visibility:hidden;text-decoration:none;color:#0000ff;">解説</a><br>
<div id="msg_x3" style="visibility:hidden;">
3<sup>2</sup>=3×3=9になります
</div>
</form>
【スクリプトの部分】
<script>
function saiten_x3()
{if(document.qx3.tx31.value == 9)
	document.getElementById('o_x3').style.visibility = 'visible';
 else
	{document.getElementById('x_x3').style.visibility = 'visible';
	document.getElementById('h_x3').style.visibility = 'visible';
	}
}
function erase_x3()
{document.qx3.tx31.value = '';
 document.getElementById('o_x3').style.visibility = 'hidden';
 document.getElementById('x_x3').style.visibility = 'hidden';
 document.getElementById('h_x3').style.visibility = 'hidden';
 document.getElementById('msg_x3').style.visibility = 'hidden';
}
function ans_x3()
{document.getElementById('msg_x3').style.visibility = 'visible';
}
</script>

【例A.i.4】
問題に対する解答が合っていれば○を間違っていれば×を表示するとともに，どちらの場合でも解説を表示するプログラムです．

【HTMLのbody部分】

<form name="qx4">
4<sup>2</sup>を計算すると<input type="text" name="tx41" value="" style="width:50px;">
<span id="r_x4"></span>
<br>
<a href="javascript:saiten_x4()" style="text-decoration:none;color:#0000ff;">採点</a>
<a href="javascript:erase_x4()" style="text-decoration:none;color:#0000ff;">消す</a>
<a id="h_x4" href="javascript:ans_x4()" style="visibility:hidden;text-decoration:none;color:#0000ff;">解説</a><br>
<div id="msg_x4" style="visibility:hidden;">
4<sup>2</sup>=4×4=16になります
</div>
</form>
【スクリプトの部分】
<script>
function saiten_x4()
{if(document.qx4.tx41.value == 16)
	document.getElementById('r_x4').innerHTML = '<span style="background-color:#ffff00;color:#ff0000;">Ｏ</span>';
 else
	document.getElementById('r_x4').innerHTML = '<span style="background-color:#ff0000;color:#ffff00;">Ｘ</span>';
document.getElementById('h_x4').style.visibility = 'visible';
}
function erase_x4()
{document.qx4.tx41.value = '';
 document.getElementById('r_x4').innerHTML = '';
 document.getElementById('h_x4').style.visibility = 'hidden';
 document.getElementById('msg_x4').style.visibility = 'hidden';
}
function ans_x4()
{document.getElementById('msg_x4').style.visibility = 'visible';
}
</script>

【例A.ii.1】
選択問題をjavascript疑似プロトコルで採点し，画像の変化で採点結果を表示します．

次の中から素数を選んでください．

1 4 7 9

【例B.i.4】
空欄書き込み問題をonclickで受けて，採点結果を文字で示し，解説も出します．

【HTMLのbody部分】
<form name="qx6">
5−4×3=<input type="text" name="tx6" value="" style="width:40px;">
<span id="kekka6"></span><br>
<input type="button" value="採点" onclick="saiten_x6()">
<input type="button" value="消す" onclick="erase_x6()">
<input type="button" value="解説" id="b_x6" style="visibility:hidden;" onclick="ans_x6()"><br>
<div id="msg_x6" style="visibility:hidden;">
掛け算を先に行います<br>
5−4×3=5−12=−7
</div>
</form>
【スクリプトの部分】
<script>
function saiten_x6()
{if(qx6.tx6.value == '-7')
	document.getElementById('kekka6').innerHTML = '<span style="background-color:#ffff00;color:#ff0000;">ＯＫ</span>';
 else
	document.getElementById('kekka6').innerHTML = '<span style="background-color:#ff0000;color:#ffff00;">ＮＯ</span>';
document.getElementById('b_x6').style.visibility = 'visible';
}
function erase_x6()
{qx6.tx6.value = '';
 document.getElementById('kekka6').innerHTML = '';
 document.getElementById('b_x6').style.visibility = 'hidden';
 document.getElementById('msg_x6').style.visibility = 'hidden';
}
function ans_x6()
{document.getElementById('msg_x6').style.visibility = 'visible';
}
</script>