まずは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

  • 作者: Larry Ullman,永井勝則
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2013/02/23
  • メディア: 大型本
  • 購入: 1人 クリック: 26回
  • この商品を含むブログ (18件) を見る

                                                          • -

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