これまでは、入力されたデータの読み込み、コードで処理した結果の出力は、標準入出力で行ってました。
今回は標準入出力を使用せず、Webサイト（ブログを含む）でデータの入出力を行います。すなわち、Webサイトに設置したフォームに入力されたデータを読み取り、読み取ったデータを処理した結果をWebサイトの指定された場所に出力させます。
JavaScriptでは、
var 変数名 = document.getElementById(“データを読み込みたいフォームID”).value;
を使うことで、指定したIDのフォームに記入されているデータを読み込んで、変数に入れることができます。
一方、処理結果の出力については、
document.getElementById(“表示させたい場所のID”).innerHTML = 出力させたいデータ;
とすることで、Webサイトの指定された場所にデータを出力することができます。
フォームに入力された文字列を逆順で出力
標準入力された文字列を逆順に並べ替えて標準出力に出力する処理は、以前こちらでやっています。
フォームに文字列を記入した状態で「送信」ボタンを押すと、入力された文字列が逆順で■色の部分に表示されます。
文字が入力されていない状態で「送信」ボタンを押した場合は、「文字を入力してください！」が表示されます。
なお、セキュリティ上の理由から、比較演算子は自動的に削除しています。比較演算子を含む文字列が入力された場合は、比較演算子を削除した文字列が逆順で出力されます。
HTMLとJavaScriptのコードはこちらです。
<p>
<form name="form1" action="#">
<input type="text" id="input_data1" value="" style="width:300px">
<input type="button" onclick="testFunc1()" value="送信">
</form>
<div id="output1" style="background-color: #F8FBEF;width:300px"> </div>
</p>
<script language="javascript" type="text/javascript">
//ここにJavaScriptのコード
</script>function testFunc1() {
var line = document.getElementById("input_data1").value;
line = line.replace(/=|<|>/g,'');
if (line !==''){
var str = line.split('');
document.getElementById("output1").innerHTML = str.reverse().join('');
} else {
document.getElementById("output1").innerHTML = '文字列を入力してください！';
}
}フォームに入力された数値の約数を出力
標準入力された数値の約数を求めて、標準出力にカンマ区切りで出力する処理は、以前こちらでやっています。
フォームに半角で正の整数を記入した状態で「送信」ボタンを押すと、入力された数値の約数がカンマ区切りで■色の部分に出力されます。
半角数字以外がフォームに入力された場合は、半角数字以外の文字を自動的に削除しています。このため、負の整数は－符号を削除されて、正の整数として扱われます。
何も入力されていない（入力した文字が自動的に全て削除された場合を含む）状態で「送信」ボタンを押した場合は、「半角で数値を入力してください！」が出力されます。
HTMLとJavaScriptのコードはこちらです。
<p>
<form name="form2" action="#">
<input type="text" id="input_data2" value="" style="width:80px">
<input type="button" onclick="testFunc2()" value="送信">
</form>
<div id="output2" style="background-color: #F8FBEF;width:500px"> </div>
</p>
<script language="javascript" type="text/javascript">
//ここにJavaScriptのコード
</script>function testFunc2() {
var line = document.getElementById("input_data2").value;
line = line.replace(/[^0-9]/g,'');
if (line !==''){
var num = parseInt(line);
document.getElementById("output2").innerHTML = divisor(line);
} else {
document.getElementById("output2").innerHTML = '半角で数値を入力してください！';
}
}
function divisor(num){
var arrBox = [];
for (var i = 1; i <= parseInt(num / 2); i++){
if (num % i === 0){
arrBox.push(i);
}
}
arrBox.push(num);
return arrBox;
}