プログラミング入門 ⑤入力と出力

ソフトウェアは高度になると、
プログラムの中身も複雑になりますが、
必ず「入力」と「出力」にあたる部分はあります。

これは『コンピューターの得意なことを理解する』の項でも書きました。

前回は「プログラミングとは何か？」という初歩的なことを説明しました。次は「プログラミングの書き方」に入りたい所ですが・・・その前に「コンピューターの得意なことは何か？」という話を先にしておきましょう。プログラミングはコンピュ...

これまでのサンプルプログラムでは、
「alert」が出力になっていたわけですが、
Javascriptでは他にも出力方法があります。

<script type="text/javascript"><!--
 
function sampleExecute() {
 
    alert("Hellow World.");
 
}
 
// --></script>

今回は「入力」と「出力」について、もっとしっかりとやっていきます。

入力できるようにする
出力のレパートリーを増やす

入力できるようにする

まず、入力についてまだやっていないので実装しましょう。
「入力した文字をそのまま出す」というのを実装すると以下になります。

◆サンプル5-1

<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル5-1</title>
<script type="text/javascript"><!--

function sampleExecute() {

	//「id="inputText"」のテキストボックスの値を取得
	var inputValue = document.getElementById("inputText").value;
	
	alert(inputValue);

}

// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル5-1</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;"  >
<input id="inputText" size="20"><br><br>
<input type="button" value="実行" onClick ="sampleExecute()"> 
</div>
</center>
</body>
</html>

上記ソースでは、スクリプト部分にある「document.getElementById(“inputText”).value」で、
表示部分にある「<input id=”inputText” size=”20″>」の値を取得しているわけですね。

次に、入力のレパートリーを増やしてみます。

◆サンプル5-2

<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル5-2</title>
<script type="text/javascript"><!--

function sampleExecute() {

	//テキストボックスの値を取得
	var inputValue1 = document.getElementById("inputTextArea").value;
	alert(inputValue1);

	//コンボボックスの値を取得
	var inputValue2 = document.getElementById("inputComboBox").value;
	alert(inputValue2);
	
	//チェックボックスの値を取得
	var inputValue3 = document.getElementById("inputCheckBox").checked;
	alert(inputValue3);
	
}

// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル5-2</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;"  >
<textarea id="inputTextArea" rows="4" cols="40"></textarea><br><br>
<select name="comboBox" id="inputComboBox">
        <option value="">選択してください</option>
        <option value="パターン1">パターン1</option>
        <option value="パターン2">パターン2</option>
        <option value="パターン3">パターン3</option>
</select><br><br>
<input type="checkbox" id="inputCheckBox">チェックOK？<br><br>
<input type="button" value="実行" onClick ="sampleExecute()"> 
</div>
</center>
</body>
</html>

表示部分はHTMLで書かれているわけですが、
HTMLには他にも様々な入力方法が用意されています。
入力用のアイテムの一個一個を「コントロール」と言います。

今回は、テキストを入力する「テキストボックス」に加え、
「コンボボックス」と「チェックボックス」を配置してみました。

どんなプログラム言語でも、
入力用の「コントロール」には様々なレパートリーのものが用意されているものです。

HTMLではどんな入力方法があるかについて詳しく知りたい場合は、
「HTML コントロール」で検索してみましょう。

出力のレパートリーを増やす

入力で色々やったので、今度は出力で色々やってみましょう。

入力した値をいくつかの方法で表示することにします。

◆サンプル5-3

<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル5-3</title>
<script type="text/javascript"><!--

function sampleExecute() {

	var inputValue = document.getElementById("inputText").value;
	
	//普通にアラート出力
	alert(inputValue);
	
	//テキストエリア内に出力
	var output1 = document.getElementById("outputTextArea");
	output1.innerHTML = inputValue;
	
	//ページ内のテキストとして出力
	var output2 = document.getElementById("outputArea1");
	output2.innerHTML = inputValue;
	
	var output3 = document.getElementById("outputArea2");
	output3.innerHTML = inputValue;
	
	var output4 = document.getElementById("outputArea3");
	output4.innerHTML = inputValue;

}

// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル5-3</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;"  >
<input id="inputText" size="20"><br><br>
<input type="button" value="実行" onClick ="sampleExecute()"><br><br>
<h3>～実行結果～</h3>
<textarea id="outputTextArea" rows="4" cols="40"></textarea><br><br>
<span id="outputArea1"></span>
<div id="outputArea2"></div>
<p id="outputArea3"></p>
</div>
</center>
</body>
</html>

「テキストエリア」と呼ばれるものに出力したり、
ページ内のテキストとして出力する方法が分かったでしょうか？

あと、以下のように
「初期状態では結果が見えないが、ボタンを押したら見えるようにする」
ということもできます。

◆サンプル5-4

<!DOCTYPE HTML><html>
<head>
<meta charset="SJIS">
<title>サンプル5-4</title>
<script type="text/javascript"><!--

function sampleExecute() {

	var inputValue = document.getElementById("inputText").value;
	
	var output = document.getElementById("outputArea");
	output.innerHTML = inputValue;
	
	//結果を非表示→表示にする。
	document.getElementById("resultArea").style.display ="block";

}

// --></script>
</head>
<body bgcolor="aliceblue">
<center><h1>サンプル5-4</h2>
<div style="width:550px;background-color:white;padding:18px;border-radius:16px;"  >
<input id="inputText" size="20"><br><br>
<input type="button" value="実行" onClick ="sampleExecute()"><br>
<div id="resultArea" style="display:none"><h3>～実行結果～</h3>
<span id="outputArea"></span></div>
</div>
</center>
</body>
</html>

以上のように、HTMLの表示部分を操作する方法は色々あるので、
必要に応じて調べていきましょう。

HTMLでは「span」や「div」といったHTMLタグに対して
テキスト出力をする方法をよく使うことになると思います。

今までは出力で「alert」を使ってましたが、
次回からはこっちを使っていくことにします。
　

まとめ