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

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

テキストエリアに入力した文字の操作

<スポンサーリンク>

JavaScriptでいう「イベント」とは、ウェブページ内でなんらかの「動き」があったときに引き起こされる。

JaveScriptでは「イベントハンドラ」という仕組みを利用してイベントを捉え、そのイベントをきっかけとしてなんらかの処理を行うことができる。

■イベントモデルの種類
・オリジナルベントモデル DOMレベル0 すべてのブラウザで利用できるHTML4の標準。
・標準イベントモデル DOMレベル2 IEを除くほとんどのブラウザでサポートされている。
・Internet Explorerのイベントモデル。

てゆうか、JavaScriptの勉強していると、「InternetExplorer」のせいでプログラマーが苦労している気がしてきた。
使いづらいし・・・。

JavaScriptでは関数名をキャメルケースで書くのが一般的。
キャメルケースとは、doMethodのように、2語目以降の先頭文字だけを大文字にして書く書き方。


XHTMLではtext,hidden,passwordの各フィールドは以下のような後部で記述される(「|」は「または」という意味)

<input type="text|hidden|password" name="フィールド名" value="値" />

JavaScriptではどのようなテキスト関連フィールドであってもvalueプロパティを介して、入力されたフィールド値を参照できる。

テキストエリアに入力された情報をつなぎあわせて、テキストエリアに返すJavaScript

<?xml version="1.0" encoding="Windows-31J"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtmll/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-31J" />
<title> TEXT TEST </title>
<script type="text/javascript">

catchEvent(window, "load",setupEvents);

function catchEvent(eventObj, event, eventHandler) {
	if (eventObj.addEventListener) {
		eventObj.addEventListener(event, eventHandler, false);
	} else if (eventObj.attachEvent) {
		event = "on" + event;
		eventObj.attachEvent(event, eventHandler);
	}
}

function cancelEvent(event) {
	if (event.preventDefault) {
		event.preventDefault();
		event.stopPropagation();
	} else {
		event.returnValue = false;
		event.cancelBubble = true;
	}
}

function setupEvents(event) {
	catchEvent(document.getElementById("someForm"), "submit", validateForm);
}

function validateForm(event) {
	var theEvent = event ? event : window.event;
	
	var strResults = "";
	//inputタグのエレメントを取得する
	var textInputs =
		document.getElementById("someForm").getElementsByTagName("input");
	for (var i = 0; i < textInputs.length; i++) {
		if (textInputs[i].type != "submit") {
			//textの値をstrResultsに追記していく。
			//submitは除く
			strResults += textInputs[i].value + "\n";
		}
	}
	document.getElementById("text4").value = strResults;
	cancelEvent(theEvent);
}

</script>
</head>
<body>
<form id="someForm" action="">
<p>
<input type="text" name="text1" /><br />
<input type="password" name="text2" /></br>
<input type="hidden" name="text3" value="隠されたテキスト" />
<textarea name="text4" id="text4" cols="50" rows="10">テキストエリア </textarea><br/><br/>
<input type="submit" value="送信" />
</P>
</form>
</body>
</html>
	
	

<参考>

初めてのJavaScript 第2版

初めてのJavaScript 第2版

これ欲しい

DVD&CDでマスター 英語の発音が正しくなる本

DVD&CDでマスター 英語の発音が正しくなる本