感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

JavaScriptでフォームに入力された値をオブジェクトに格納し、表示する。

<スポンサーリンク>

まずはHTMLから。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>人のデータを配列に追加する</title>
	<link rel="stylesheet" href="css/form.css">
</head>
<body>
	<form action="#" method="post" id="theForm">
		<fieldset><legend>人を追加してください</legend>
	        <div><label for="firstName">名前</label><input type="text" name="firstName" id="firstName" required></div>
	        <div><label for="lastName"></label><input type="text" name="lastName" id="lastName" required></div>
	        <div><label for="program">好きな言語</label><select name="program" id="program">
	            <option value="Java">Java</option>
	            <option value="JavaScript">JavaScript</option>
	            <option value="Ruby">Ruby</option>
	            <option value="PHP">PHP</option>
	        </select></div>
	        <input type="submit" value="送信" id="submit">
	    </fieldset>
		<div id="output"></div>
	</form>
	<script src="js/person.js"></script>
</body>
</html>

ここで名前や好きなプログラミング言語を登録。
送信ボタンが押されたことをきっかけにJavaScriptが動く。
JavaScriptはこんな感じ。

function process() {
	'use strict';

	var firstName = document.getElementById('firstName').value;
	var lastName = document.getElementById('lastName').value;
	var program = document.getElementById('program').value;

	var output = document.getElementById('output');

	//personオブジェクトを作る
	var person = {
		firstName : firstName,
		lastName : lastName,
		program : program,
		addedDate : new Date()
	};

	console.log(person);

	var message = '<h2> 人の情報が追加されました' + person.lastName + ', ' + person.firstName + '</br>';
	message += '好きなプログラミング言語:' + person.program + '<br>';
	message += '追加された日:' + person.addedDate.toDateString(); 

	output.innerHTML = message;

	return false;
}

function init() {
	'use strict';
	document.getElementById('theForm').onsubmit = process;
}

window.onload = init;

Windowの読み込みが完了した時点でinit関数を呼ぶ。
init関数は、submitが呼び出されたことをきっかけにprocess関数を実行する。

process関数の中ではpersonオブジェクトを持っていて、この中に入力された値を突っ込む。
で、innerHTMLを使って詰め込んだメッセージを書き込むという処理を行なっている。

やっと少しJavaScriptの理解が進んだ感じ。やっぱり復習するといいね。
<参考>

入門 モダンJavaScript

入門 モダンJavaScript

                                                          • -

今回で感謝のプログラミングは【210時間目】
10000時間まで、あと【9790時間】