トップ «前の日(03-07) 最新 次の日(03-09)» 追記

Masa's blog

検索キーワード:

2013年03月08日 Javascript memo

_ Javascript memo

sample page

This sample page is meaningless. This is just for "CUT and PASTE" to another javascript program that I develop seriously ;)

jssample.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
//
// Personal Ajax class
//
// ex.
//
//   <tag ... onClick='eventHandler(some params...);' ... >
//
//   var ajax;
//
//   function eventHandler(some params...){
//       ajax = new Ajax();
//
//       var okArgHash = new Array();
//       okArgHash['arg1'] = foo;
//       okArgHash['arg2'] = bar;
//       okArgHash['arg3'] = boo;
//       ajax.setCallBack(okFunc, okArgHash, null, null)
//
//       var msgHash = new Array();
//       msgHash['argument1'] = FOO;
//       msgHash['argument2'] = BAR;
//       msgHash['argument3'] = BOO;
//       ajax.send("http://foo.org/cgi-bin/foo.cgi", msgHash, true);
//   }
//
//   function okFunc(obj, okArgHash){
//       var recvHash = new Array();
//       recvHash = obj.recv();
//
//       Your coding with using recvHash['...'] and okArgHash['...']
//
//   }
//
	function Ajax(){
	    this.xhr = null;
	    this.initialize();
	}

//
// Initialize property
//
	Ajax.prototype.initialize = function(){
	    if (XMLHttpRequest) {
		this.xhr = new XMLHttpRequest();
	    }else{
		try {
		    this.xhr = new ActiveXObject('MSXML2.XMLHTTP.6.0');
		}catch (e){
		    try {
			this.xhr = new ActiveXObject('MSXML2.XMLHTTP.3.0');
		    }catch (e){
			try {
			    this.xhr = new ActiveXObject('MSXML2.XMLHTTP');
			}catch (e){
			    this.xhr = null;
			}
		    }
		}
	    }
	}

//
// Set call back function
//
//   notice! : Both of okFunc and ngFunc must have 2 arguments which are obj and arghash
//
// okFunc    : call back function for normal
// okArgHash : argument(hash) for okFunc
// ngFunc    : call back function for error
// ngArgHash : argument(hash) for ngFunc
//
	Ajax.prototype.setCallBack = function(okFunc, okArgHash, ngFunc, ngArgHash){
	    var obj = this;	// You can't use `this' in `function(){}'
	    obj.xhr.onreadystatechange = function(){
		if (obj.xhr.readyState == 4){
		    if (obj.xhr.status == 200){
			if (okFunc != null){
			    okFunc(obj, okArgHash);
			}
		    }else{
			if (ngFunc != null){
			    ngFunc(obj, ngArgHash);
			}
		    }
		}else{
		    // Not ready, so do nothing
		}
	    }
	}

//
// Send message to CGI
//
// uri     : URI
// msgHash : message to be sent to server
// async   : async mode(true | false)
//
	Ajax.prototype.send = function (uri, msgHash, async){
	    var msg = "";
	    var amp = "";
	    for (var i in msgHash){
		msg += (amp + i + '=' + encodeURIComponent(msgHash[i]));
	        amp = "&";
	    }
	    this.xhr.open("POST", uri + "?dummy=" + new Date().getTime(), async);
	    this.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    this.xhr.send(msg);
	}

//
// Recieve message from CGI
//
// return : hash data which is responsed from server
//
	Ajax.prototype.recv = function (){
	    var ary = this.xhr.responseText.split("\t");
	    var kv = new Array();
	    var res = new Array();
	    for (i in ary){
		kv = ary[i].split("=");
		res[kv[0]] = decodeURIComponent(kv[1]);
		i++;
	    }
	    return res;
	}
// -->
</script>
<title>JavaScript 1</title>
</head>
<body>
<h1>JavaScript 1</h1>
<h2>変数</h2>
<script type="text/javascript">
<!--
	var string1, string2, intnum, realnum1, realnum2, octnum, hexnum;

	string1 = "文字列です\n文字列です";
	string2 = '文字列です\n文字列です';
	intnum = 123;
	realnum1 = 123.456;
	realnum2 = 123.456e2;
	octnum = 012;
	hexnum = 0x1b;

	document.write(string1 + "<br>");
	document.write((string1 + string1) + "<br>");
	document.write(string2 + "<br>");
	document.write((string2 + string2) + "<br>");
	document.write(intnum + "<br>");
	document.write((intnum + intnum) + "<br>");
	document.write(realnum1 + "<br>");
	document.write((realnum1 + realnum1) + "<br>");
	document.write(realnum2 + "<br>");
	document.write((realnum2 + realnum2) + "<br>");
	document.write(octnum + "<br>");
	document.write((octnum + octnum) + "<br>");
	document.write(hexnum + "<br>");
	document.write((hexnum + hexnum) + "<br>");
// -->
</script>

<h2>配列</h2>
<script type="text/javascript">
<!--
	var a1 = new Array("1個目", "2個目", "3個目");
	var a2 = new Array(3);
	var a3 = new Array();

	a2[0] = "1個目";
	a2[1] = "2個目";
	a2[2] = "3個目";

	a3["apple"] = "red";
	a3["lemon"] = "yellow";
	a3["lime"] = "green";

	document.write(a1[0] + "<br>");
	document.write(a2[1] + "<br>");
	document.write(a3["lime"] + "<br>");
// -->
</script>

<h2>if文</h2>
<script type="text/javascript">
<!--
	var intnum1, intnum2;

	intnum1 = 100;
	intnum2 = 200;

	if (intnum1 == intnum1){
		document.write(intnum1 + " == " + intnum1 + "<br>");
	}

	if (intnum2 > intnum1){
		document.write(intnum2 + " > " + intnum1 + "<br>");
	}

	if (intnum2 >= intnum1){
		document.write(intnum2 + " >= " + intnum1 + "<br>");
	}

	if (intnum1 < intnum2){
		document.write(intnum1 + " < " + intnum2 + "<br>");
	}

	if (intnum1 <= intnum2){
		document.write(intnum1 + " <= " + intnum2 + "<br>");
	}

	if (intnum1 != intnum2){
		document.write(intnum1 + " != " + intnum2 + "<br>");
	}

	if (intnum1 == intnum2){
		document.write(intnum1 + " == " + intnum2 + "<br>");
	} else if (intnum1 > intnum2){
		document.write(intnum1 + " > " + intnum2 + "<br>");
	} else {
		document.write("ELSE<br>");
	}

	if ((intnum1 == intnum2) && (intnum1 > intnum2)){
		document.write("TRUE<br>");
	}else{
		document.write("FALSE<br>");
	}

	if ((intnum1 == intnum2) || (intnum1 < intnum2)){
		document.write("TRUE<br>");
	}else{
		document.write("FALSE<br>");
	}
// -->
</script>

<h2>case文</h2>
<script type="text/javascript">
<!--
	var intnum;

	intnum = 100;
	switch(intnum){
	case 1:
		document.write("case 1<br>");
		break;
	case 10:
		document.write("case 10<br>");
		break;
	case 100:
		document.write("case 100<br>");
		break;
	default:
		document.write("case default<br>");
		break;
	}
// -->
</script>

<h2>while文</h2>
<script type="text/javascript">
<!--
	var i;

	i = 0;
	while (i < 3){
		document.write("while " + i + "<br>");
		i++;
	}
// -->
</script>

<h2>for文</h2>
<script type="text/javascript">
<!--
	var i;

	for (i = 0; i < 3; i++){
		document.write("for " + i + "<br>");
	}
// -->
</script>

<h2>for文(配列)</h2>
<script type="text/javascript">
<!--
	var a = new Array(3);
	var idx;

	a["lemon"] = "yellow";
	a["apple"] = "red";
	a["melon"] = "green";

	for (idx in a){
		document.write(idx + " : " + a[idx] + "<br>");
	}
// -->
</script>

<h2>break文</h2>
<script type="text/javascript">
<!--
	var i;

	i = 0;
	while (i < 1000){
		document.write("break " + i + "<br>");
		i++;
		if (i > 3){
			break;
		}
	}
// -->
</script>

<h2>continue文</h2>
<script type="text/javascript">
<!--
	var i;

	i = 0;
	for (i = 0; i < 5; i++){
		if (i == 2){
			continue;
		}
		document.write("break " + i + "<br>");
	}
// -->
</script>

<h2>演算子</h2>
<script type="text/javascript">
<!--
	var i, j;

	i = 10;
	j = 3;

	document.write((i + j) + "<br>");
	document.write((i - j) + "<br>");
	document.write((i * j) + "<br>");
	document.write((i / j) + "<br>");
	document.write((i % j) + "<br>");
	i++;
	document.write(i + "<br>");
	j--;
	document.write(j + "<br>");
// -->
</script>

<h2>ビット演算子</h2>
<script type="text/javascript">
<!--
	var i, j;

	i = 0x55;
	j = 0xf0;

	document.write((i & j).toString(16) + "<br>");
	document.write((i | j).toString(16) + "<br>");
	document.write((i ^ j).toString(16) + "<br>");
	document.write((~i).toString(16) + "<br>");
	document.write((i << 1).toString(16) + "<br>");
	document.write((i >> 1).toString(16) + "<br>");
// -->
</script>

<h2>indexOf</h2>
<script type="text/javascript">
<!--
	var str1, str2, offset;

	str1 = "あいうえおあいうえお";
	str2 = "うえ";

	offset = 0;
	document.write(str1.indexOf(str2, offset) + "<br>");

	offset = 3;
	document.write(str1.indexOf(str2, offset) + "<br>");
// -->
</script>

<h2>length</h2>
<script type="text/javascript">
<!--
	var str;

	str = "あいうえおあいうえお";

	document.write(str.length + "<br>");
// -->
</script>

<h2>charAt</h2>
<script type="text/javascript">
<!--
	var str, position;

	str = "あいうえおあいうえお";
	position = 3;

	document.write(str.charAt(position) + "<br>");
// -->
</script>

<h2>substring</h2>
<script type="text/javascript">
<!--
	var str, from, to;

	str = "あいうえおあいうえお";
	from = 3;
	to = 6;

	document.write(str.substring(from, to) + "<br>");
// -->
</script>

<h2>split</h2>
<script type="text/javascript">
<!--
	var str, sep, lim;

	str = "あいう,えおあ,いうえお";
	sep = ",";
	lim = 2;

	a1 = str.split(sep);
	document.write(a1[0] + "<br>");
	document.write(a1[1] + "<br>");
	document.write(a1[2] + "<br>");

	a2 = str.split(sep, lim);
	document.write(a2[0] + "<br>");
	document.write(a2[1] + "<br>");
	document.write(a2[2] + "<br>");
// -->
</script>

<h2>replace</h2>
<script type="text/javascript">
<!--
	var str;

	str = "あいう,えおあ,いうえお";

	document.write(str.replace(/,/g, "|") + "<br>");
// -->
</script>

<h2>toUpperCase</h2>
<script type="text/javascript">
<!--
	var str;

	str = "This Is Javascript.";

	document.write(str.toUpperCase() + "<br>");
// -->
</script>

<h2>toLowerCase</h2>
<script type="text/javascript">
<!--
	var str;

	str = "This Is Javascript.";

	document.write(str.toLowerCase() + "<br>");
// -->
</script>

<h2>match</h2>
<script type="text/javascript">
<!--
	var str;

	str = "This Is Javascript.";

	if (str.match(/This.*script/)){
		document.write("TRUE<br>");
	}else{
		document.write("FALSE<br>");
	}
// -->
</script>

<h2>search</h2>
<script type="text/javascript">
<!--
	var str;

	str = "This Is Javascript.";

	document.write(str.search(/Is Java/) + "<br>");
	document.write(str.search(/Is Ruby/) + "<br>");
// -->
</script>

<h2>Number</h2>
<script type="text/javascript">
<!--
	var strnum1, strnum2;

	strnum1 = "10";
	strnum2 = "20.5";

	document.write((strnum1 + strnum2) + "<br>");
	document.write((Number(strnum1) + Number(strnum2)) + "<br>");
// -->
</script>

<h2>parseFloat</h2>
<script type="text/javascript">
<!--
	var strnum1, strnum2;

	strnum1 = "10";
	strnum2 = "20.5";

	document.write((strnum1 + strnum2) + "<br>");
	document.write((parseFloat(strnum1) + parseFloat(strnum2)) + "<br>");
// -->
</script>

<h2>parseInt</h2>
<script type="text/javascript">
<!--
	var strnum1, strnum2;

	strnum1 = "10";
	strnum2 = "20.5";

	document.write((strnum1 + strnum2) + "<br>");
	document.write((parseInt(strnum1) + parseInt(strnum2)) + "<br>");
// -->
</script>

<h2>String</h2>
<script type="text/javascript">
<!--
	var num1, num2;

	num1 = 10;
	num2 = 20.5;

	document.write((num1 + num2) + "<br>");
	document.write((String(num1) + String(num2)) + "<br>");
// -->
</script>

<h2>escape, unescape</h2>
<script type="text/javascript">
<!--
	var str;

	str = "あいうえお";

	document.write(escape(str) + "<br>");
	document.write(unescape(escape(str)) + "<br>");
// -->
</script>

<h2>encodeURIComponent, decodeURIComponent</h2>
<script type="text/javascript">
<!--
	var str;

	str = "あいうえお";

	document.write(encodeURIComponent(str) + "<br>");
	document.write(decodeURIComponent(encodeURIComponent(str)) + "<br>");
// -->
</script>

<h2>eval</h2>
<script type="text/javascript">
<!--
	var str;

	str = 'document.write("EVAL<br>");'

	eval(str);
// -->
</script>

<h2>Math</h2>
<script type="text/javascript">
<!--
	document.write(Math.random() + "<br>");
	document.write(Math.ceil(1.23) + "<br>");
	document.write(Math.floor(1.23) + "<br>");
	document.write(Math.round(1.23) + "<br>");
	document.write(Math.abs(-1.23) + "<br>");
	document.write(Math.pow(2, 3) + "<br>");
	document.write(Math.sqrt(2) + "<br>");
// -->
</script>

<h2>Date</h2>
<script type="text/javascript">
<!--
	var d1, d2;

	d1 = new Date();
	d2 = new Date(2012,4,11,23,59,59);

	document.write(d1.getFullYear() + "<br>");
	document.write(d1.getMonth() + "<br>");
	document.write(d1.getDate() + "<br>");
	document.write(d1.getDay() + "<br>");
	document.write(d1.getHours() + "<br>");
	document.write(d1.getMinutes() + "<br>");
	document.write(d1.getSeconds() + "<br>");

	document.write(d2.getFullYear() + "<br>");
	document.write(d2.getMonth() + "<br>");
	document.write(d2.getDate() + "<br>");
	document.write(d2.getDay() + "<br>");
	document.write(d2.getHours() + "<br>");
	document.write(d2.getMinutes() + "<br>");
	document.write(d2.getSeconds() + "<br>");
// -->
</script>

<h2>alert</h2>
<input type="button" value="alert" id="alert">
<script type="text/javascript">
<!--
	document.getElementById("alert").onclick = function(e){
		window.alert("ハロー\nワールド");
	}
// -->
</script>

<h2>confirm</h2>
<input type="button" value="confirm" id="confirm">
<script type="text/javascript">
<!--
	document.getElementById("confirm").onclick = function(e){
		if (window.confirm("ハロー\nワールド")){
			document.getElementById("confirm").value = "confirm TRUE";
		}else{
			document.getElementById("confirm").value = "confirm FALSE";
		}
	}
// -->
</script>

<h2>prompt</h2>
<input type="button" value="prompt" id="prompt">
<script type="text/javascript">
<!--
	document.getElementById("prompt").onclick = function(e){
		var str;
		str = window.prompt("何か入力してください:");
		document.getElementById("prompt").value = "prompt " + str;
	}
// -->
</script>

<h2>print</h2>
<input type="button" value="print" id="print">
<script type="text/javascript">
<!--
	document.getElementById("print").onclick = function(e){
		window.print();
	}
// -->
</script>

<h2>setTimeout</h2>
<input type="button" value="setTimeout" id="setTimeout">
<script type="text/javascript">
<!--
	var TimeoutId;
	function timeout_func(){
		window.alert("Timeout happen");
		window.clearTimeout(TimeoutId);
	}
	document.getElementById("setTimeout").onclick = function(e){
		TimeoutId = window.setTimeout(timeout_func, 3 * 1000);
	}
// -->
</script>

<h2>setInterval</h2>
<input type="button" value="setInterval" id="setInterval">
<script type="text/javascript">
<!--
	var IntervalId;
	function interval_func(){
		if (window.confirm("Cancel interval?")){
			window.clearInterval(IntervalId);
		}
	}
	document.getElementById("setInterval").onclick = function(e){
		IntervalId = window.setInterval(interval_func, 3 * 1000);
	}
// -->
</script>

<h2>getElementById</h2>
<input type="button" value="getElementById" id="getElementById"><br>
<span id="getElementById_span">This is span area</span><br>
<textarea id="getElementById_textarea">This is text area</textarea>
<script type="text/javascript">
<!--
	document.getElementById("getElementById").onclick = function(e){
		var span = document.getElementById("getElementById_span");
		var textarea = document.getElementById("getElementById_textarea");
		for (var i = 0; i < span.childNodes.length; i++){
			window.alert(span.childNodes.item(i).nodeValue);
		}
		var max = span.childNodes.length;
		for (var i = 0; i < max; i++){
			span.removeChild(span.childNodes.item(0));
		}
		span.appendChild(document.createTextNode("ここはスパン領域です"));
		window.alert(textarea.value);
		textarea.value = "ここはテキストエリアです";
	}
// -->
</script>

<h2>style</h2>
<input type="text" value="This is text1" id="style_text1" />
<input type="text" value="This is text2" id="style_text2" /><br>
<input type="text" value="This is text3" id="style_text3" />
<input type="text" value="This is text4" id="style_text4" /><br>
<input type="text" value="This is text5" id="style_text5" />
<input type="text" value="This is text6" id="style_text6" /><br>
<div id="style_div"></div>
<textarea id="style_textarea">This is textarea</textarea><br>
<p id="style_p">This is p</p>
<table border="1">
<tr><th>header1</th><th>header2</th><th>header3</th></tr>
<tr><td>data1</td><td>data2</td><td>data3</td></tr>
<tr><td>data4</td><td id="style_td"></td><td>data6</td></tr>
<tr><td>data7</td><td>data8</td><td>data9</td></tr>
</table><br>
<input type="button" value="display none" id="style_display_none">
<input type="button" value="display block" id="style_display_block">
<input type="button" value="display inline" id="style_display_inline"><br>
<input type="button" value="visibility hidden" id="style_visibility_hidden">
<input type="button" value="visibility visible" id="style_visibility_visible"><br>
<input type="text" value="This is text7" id="style_text7" /><br>
<input type="text" value="This is text8" id="style_text8" /><br>
<input type="text" value="This is text9" id="style_text9" /><br>
<input type="button" value="position static" id="style_position_static">
<input type="button" value="position absolute" id="style_position_absolute">
<input type="button" value="position relative" id="style_position_relative">
<input type="button" value="position fixed" id="style_position_fixed"><br>
<input type="text" value="This is text10" id="style_text10" /><br>
<input type="button" value="z-index 1up" id="style_z_index1">
<input type="button" value="z-index 2up" id="style_z_index2"><br>
<span id="style_span1">This is span1</span>
<span id="style_span2">This is span2</span>
<script type="text/javascript">
<!--
	var text1 = document.getElementById("style_text1");
	var text2 = document.getElementById("style_text2");
	var text3 = document.getElementById("style_text3");
	var text4 = document.getElementById("style_text4");
	var text5 = document.getElementById("style_text5");
	var text6 = document.getElementById("style_text6");
	var div = document.getElementById("style_div");
	var textarea = document.getElementById("style_textarea");
	var p = document.getElementById("style_p");
	var td = document.getElementById("style_td");
	var display_none = document.getElementById("style_display_none");
	var display_block = document.getElementById("style_display_block");
	var display_inline = document.getElementById("style_display_inline");
	var visibility_hidden = document.getElementById("style_visibility_hidden");
	var visibility_visible = document.getElementById("style_visibility_visible");
	var text7 = document.getElementById("style_text7");
	var text8 = document.getElementById("style_text8");
	var text9 = document.getElementById("style_text9");
	var position_static = document.getElementById("style_position_static");
	var position_absolute = document.getElementById("style_position_absolute");
	var position_relative = document.getElementById("style_position_relative");
	var position_fixed = document.getElementById("style_position_fixed");
	var text10 = document.getElementById("style_text10");
	var z_index1 = document.getElementById("style_z_index1");
	var z_index2 = document.getElementById("style_z_index2");
	var span1 = document.getElementById("style_span1");
	var span2 = document.getElementById("style_span2");

	text1.style.color = "red";
	text1.style.background = "green";
	text2.style.color = "red";
	text2.style.background = "green";
	text3.style.color = "red";
	text3.style.background = "green";
	text4.style.color = "red";
	text4.style.background = "green";

	text1.style.margin = "3em";
	text2.style.marginRight = "5px";
	text2.style.marginLeft = "10px";
	text2.style.marginTop = "15px";
	text2.style.marginBottom = "20px";

	text2.style.padding = "3em";
	text3.style.paddingRight = "5px";
	text3.style.paddingLeft = "10px";
	text3.style.paddingTop = "15px";
	text3.style.paddingBottom = "20px";

	text3.style.border = "3px solid black";
	text4.style.borderRight = "3px dotted black";
	text4.style.borderLeft = "3px dashed black";
	text4.style.borderTop = "3px double black";
	text4.style.borderBottom = "3px none black";

	text1.style.borderRadius = "10px";
	text2.style.borderRadius = "10px 20px 30px 40px";

	var ua = navigator.userAgent.toLowerCase();
	if (ua.indexOf("msie") == -1){
		text3.style.opacity = "0.7";
		text4.style.opacity = "0.9";
	}else{
		text3.style.filter = "alpha(opacity=" + (0.7 * 100) + ")";
		text4.style.filter = "alpha(opacity=" + (0.9 * 100) + ")";
	}

	text1.style.textAlign = "left";
	text2.style.textAlign = "right";
	text3.style.textAlign = "center";

	var ua = navigator.userAgent.toLowerCase();
	if (ua.indexOf("msie") == -1){
		text5.style.cssFloat = "left";
		text6.style.cssFloat = "right";
	}else{
		text5.style.styleFloat = "left";
		text6.style.styleFloat = "right";
	}
	div.style.clear = "both";

	text6.style.width = "20em";
	text6.style.height = "3em";

	textarea.cols = "50";
	textarea.rows = "5";

	textarea.style.resize = "none"; // both, virtical, horizontal

	p.style.textIndent = "5em";

	p.style.textDecoration = "line-through"; // none, underline, overline, blink

	td.style.emptyCells = "hide"; // show

	text6.style.imeMode = "active"; // IE only :( auto, inactive, disable

	text6.style.cursor = "crosshair"; // default, auto, ...

	display_none.onclick = function(e){
		text8.style.display = "none";
	}
	display_block.onclick = function(e){
		text8.style.display = "block";
	}
	display_inline.onclick = function(e){
		text8.style.display = "inline";
	}

	visibility_hidden.onclick = function(e){
		text8.style.visibility = "hidden";
	}
	visibility_visible.onclick = function(e){
		text8.style.visibility = "visible";
	}

	position_static.onclick = function(e){
		text10.style.position = "static";
	}
	position_absolute.onclick = function(e){
		text10.style.position = "absolute";
		text10.style.left = "20em";
		text10.style.top = "10em";
		text10.style.right = "";
		text10.style.bottom = "";
	}
	position_relative.onclick = function(e){
		text10.style.position = "relative";
		text10.style.left = "20em";
		text10.style.top = "10em";
		text10.style.right = "";
		text10.style.bottom = "";
	}
	position_fixed.onclick = function(e){
		text10.style.position = "fixed";
		text10.style.left = "40em";
		text10.style.top = "20em";
		text10.style.right = "";
		text10.style.bottom = "";
	}

	z_index1.onclick = function(e){
		span1.style.zIndex = 1;
		span2.style.zIndex = 0;
	}
	z_index2.onclick = function(e){
		span1.style.zIndex = 0;
		span2.style.zIndex = 1;
	}
	span1.style.position = "fixed";
	span1.style.right = "0em";
	span1.style.bottom = "0em";
	span1.style.background = "green";
	span2.style.position = "fixed";
	span2.style.right = "0.5em";
	span2.style.bottom= "0.5em";
	span2.style.background = "orange";
// -->
</script>

<h2>class</h2>
<input type="text" id="class_text1" />
<input type="text" id="class_text2" />
<input type="text" id="class_text3" />
<script type="text/javascript">
<!--
	var class_text1 = document.getElementById("class_text1");
	var class_text2 = document.getElementById("class_text2");
	var class_text3 = document.getElementById("class_text3");
	function inherit(o){
		if (Object.create){
			return Object.create(o);
		}
		var F = function(){};
		F.prototype = o;
		return new F();
	}
	function Parent(property1, property2){
		this.property1;
		this.property2;
		this.initParent(property1, property2);
	}
	Parent.prototype.initParent = function(property1, property2){
		this.property1 = property1;
		this.property2 = property2;
	}
	Parent.prototype.show1 = function(o){
		o.value = this.property1;
	}
	Parent.prototype.show2 = function(o){
		o.value = this.property2;
	}
	function Child(property1, property2, property3){
		Parent.call(this, property1, property2);
		this.property3;
		this.initChild(property3);
	}
	Child.prototype = inherit(Parent.prototype);
	Child.prototype.constructor = Child;
	Child.prototype.initChild = function(property3){
		this.property3 = property3;
	}
	Child.prototype.show3 = function(o){
		o.value = this.property3;
	}

	var child = new Child("arg1", "arg2", "arg3");
	child.show1(class_text1);
	child.show2(class_text2);
	child.show3(class_text3);
// -->
</script>

<h2>value</h2>
<input type="text" value="This is value_text1" id="value_text1" />
<input type="text" id="value_text2" />
<script type="text/javascript">
<!--
	document.getElementById("value_text2").value = "copy => " + document.getElementById("value_text1").value;
// -->
</script>

<h2>nodeValue</h2>
<span id="nodevalue_span1">This is span1</span>
<span id="nodevalue_span2">This is span2</span>
<script type="text/javascript">
<!--
	var max = document.getElementById("nodevalue_span2").childNodes.length;
	for (var i = 0; i < max; i++){
		document.getElementById("nodevalue_span2").removeChild(document.getElementById("nodevalue_span2").childNodes.item(0));
	}
	var str = "";
	max = document.getElementById("nodevalue_span1").childNodes.length;
	for (var i = 0; i < max; i++){
		str += document.getElementById("nodevalue_span1").childNodes.item(i).nodeValue;
	}
	document.getElementById("nodevalue_span2").appendChild(document.createTextNode("copy => " + str));
// -->
</script>

<h2>setAttribute</h2>
<input type="text" id="setattribute_text" />
<script type="text/javascript">
<!--
	document.getElementById("setattribute_text").setAttribute("value", "This is setattibute_text");
// -->
</script>

<h2>event</h2>
<input type="text" value="event onclick" id="event_onclick" /><br>
<input type="text" value="event ondblclick" id="event_ondblclick" /><br>
<input type="text" value="event onkeydown" id="event_onkeydown" /><br>
<input type="text" value="event onkeypress" id="event_onkeypress" /><br>
<input type="text" value="event onkeyup" id="event_onkeyup" /><br>
<input type="text" value="event onmouseup" id="event_onmouseup" /><br>
<input type="text" value="event onmousedown" id="event_onmousedown" /><br>
<input type="text" value="event onmouseover" id="event_onmouseover" /><br>
<input type="text" value="event onmouseout" id="event_onmouseout" /><br>
<textarea id="event_onmousemove" />event onmousemove</textarea><br>
<input type="text" value="event onfocus" id="event_onfocus" /><br>
<input type="text" value="event onblur" id="event_onblur" /><br>
<input type="text" value="event onchange" id="event_onchange" /><br>
<form id="event_form">
<input type="submit" value="event onsubmit" /><br>
<input type="reset" value="event onreset" /><br>
<!-- <input type="text" value="event onresize(windowのサイズを変えて下さい)" id="event_onresize" /><br> -->
</form>
<input type="text" value="event onselect" id="event_onselect1" />
<input type="text" id="event_onselect2" /><br>
window.onload<br>
window.onunload
<script type="text/javascript">
<!--
	document.getElementById("event_onclick").onclick = event_trap;
	document.getElementById("event_ondblclick").ondblclick = event_trap;
	document.getElementById("event_onkeydown").onkeydown = event_trap;
	document.getElementById("event_onkeypress").onkeypress = event_trap;
	document.getElementById("event_onkeyup").onkeyup = event_trap;
	document.getElementById("event_onmouseup").onmouseup = event_trap;
	document.getElementById("event_onmousedown").onmousedown = event_trap;
	document.getElementById("event_onmouseover").onmouseover = event_trap;
	document.getElementById("event_onmouseout").onmouseout = event_trap;
	document.getElementById("event_onmousemove").onmousemove = event_trap_onmousemove;
	document.getElementById("event_onfocus").onfocus = event_trap;
	document.getElementById("event_onblur").onblur = event_trap;
	document.getElementById("event_onchange").onchange = event_trap;
	document.getElementById("event_form").onsubmit = event_trap_with_false;
	document.getElementById("event_form").onreset = event_trap;
//	window.onresize = event_trap;
	document.getElementById("event_onselect1").onselect = event_trap_onselect;
	window.onload = event_trap;
	window.onunload = event_trap;
	function event_trap(e){
		if (!e){
			e = window.event;
		}
		event_show(e, "event_trap");
	}
	function event_trap_onmousemove(e){
		if (!e){
			e = window.event;
		}
		if (e.pageX){
			var abs_x = e.pageX;
		}else{
// 			var abs_x = e.clientX + document.body.scrollLeft; // for loose.dtd
			var abs_x = e.clientX + document.documentElement.scrollLeft; // for strict.dtd
		}
		if (e.pageY){
			var abs_y = e.pageY;
		}else{
//			var abs_y = e.clientY + document.body.scrollTop; // for loose.dtd
			var abs_y = e.clientY + document.documentElement.scrollTop; // for strict.dtd
		}
		var fix_x = e.clientX;
		var fix_y = e.clientY;
		document.getElementById("event_onmousemove").value =
			"absolute X = " + abs_x + "\n" +
			"absolute Y = " + abs_y + "\n" +
			"fixed X = " + fix_x + "\n" +
			"fixed Y = " + fix_y;
	}
	function event_trap_with_false(e){
		if (!e){
			e = window.event;
		}
		event_show(e, "event_trap_with_false");
		return false;
	}
	function event_trap_onselect(e){
		if (!e){
			e = window.event;
		}
		var text;
		if (window.getSelection){
			if (document.activeElement &&
				(document.activeElement.tagName.toLowerCase() == "textarea" ||
				 document.activeElement.tagName.toLowerCase() == "input")){
				text = document.activeElement.value.substring(
					document.activeElement.selectionStart,
					document.activeElement.selectionEnd
					);
			}else{
				text = window.getSelection().toString();
			}
		}else{
			text = document.selection.createRange().text;
		}
		document.getElementById("event_onselect2").value = text;
	}
	function event_show(e, arg){
		var str;

		str = "== " + arg + " ==\n";
		str += "event.type = " + e.type + "\n";
		str += "event.keyCode = " + e.keyCode + "\n";
		str += "event.shiftKey = " + e.shiftKey + "\n";
		str += "event.ctrlKey = " + e.ctrlKey + "\n";
		str += "event.altKey = " + e.altKey + "\n";
		str += "event.button = " + e.button + "\n";
		str += "event.screenX = " + e.screenX + "\n";
		str += "event.screenY = " + e.screenY + "\n";
		str += "event.clientX = " + e.clientX + "\n";
		str += "event.clientY = " + e.clientY + "\n";
		str += "event.x = " + e.x + "\n";
		str += "event.y = " + e.y + "\n";
		str += "event.offsetX = " + e.offsetX + "\n";
		str += "event.offsetY = " + e.offsetY + "\n";
		str += "event.srcElement = " + e.srcElement + "\n";
		str += "event.fromElement = " + e.fromElement + "\n";
		str += "event.target = " + e.target + "\n";
		str += "event.data = " + e.data + "\n";
		str += "event.which = " + e.which + "\n";
		str += "event.modifiers = " + e.modifiers + "\n";
		str += "event.pageX = " + e.pageX + "\n";
		str += "event.pageY = " + e.pageY + "\n";
		str += "event.width = " + e.width + "\n";
		str += "event.height = " + e.height + "\n";
		str += "event.layerX = " + e.layerX + "\n";
		str += "event.layerY = " + e.layerY + "\n";
		str += "document.body.scrollLeft = " + document.body.scrollLeft + "\n";
		str += "document.body.scrollTop = " + document.body.scrollTop + "\n";
		str += "\n";
		str += "== Other event ==\n";
		str += "imgタグ.onabort\n";
		str += "imgタグ.onerror\n";
		window.alert(str);
	}
// -->
</script>

<h2>ajax</h2>
<input type="text" id="ajax_text1" />
<input type="text" id="ajax_text2" />
<script type="text/javascript">
<!--
	var ajax;
	document.getElementById("ajax_text1").onchange = ajax_text1;
	function ajax_text1(e){
		if (!e){
			e = window.event;
		}
		eventHandler(document.getElementById("ajax_text1").value);
	}
	function eventHandler(arg1){
		ajax = new Ajax();

		var okArgHash = new Array();
		var ngArgHash = new Array();
		ajax.setCallBack(okFunc, okArgHash, ngFunc, ngArgHash)

		var msgHash = new Array();
		msgHash['arg1'] = arg1;
		ajax.send("./cgi-bin/ajax_test.cgi", msgHash, true);
	}
	function okFunc(obj, okArgHash){
		var recvHash = new Array();
		recvHash = obj.recv();

		document.getElementById("ajax_text2").value = recvHash['arg1'];
	}
	function ngFunc(obj, ngArgHash){
		var recvHash = new Array();
		recvHash = obj.recv();

		document.getElementById("ajax_text2").value = recvHash['arg1'];
	}
// -->
</script>
</body>
</html>

ajax.rb

# -*- coding: utf-8 -*-
#============================================================
#
# Ajaxサポートクラス(あぁ楽しき哉、車輪の再発明)
#
#============================================================
class Ajax
  #------------------------------------------------------------
  #
  # コンストラクタ
  #
  # 引数
  #
  #   nkf_param      : 入力パラメータの文字コード変換指定(for nkf)。省略可。
  #   nkf_param_send : 送信パラメータの文字コード変換指定(for nkf)。省略可。
  #
  # 戻値 : 無し
  #
  #------------------------------------------------------------
  def initialize(nkf_param = "-X -e", nkf_param_send = "-w")
    @nkf_param = nkf_param
    @nkf_param_send = nkf_param_send
    @cgi = CGI.new("html3")
  end
  #------------------------------------------------------------
  #
  # パラメータ取得
  #
  # 引数
  #
  #   name : 項目名称。省略可。
  #
  # 戻値
  #
  #   name指定時は、指定した項目の値を返す。
  #   name未指定は、全パラメータの[項目名、値]のセットをイテレータで返す。
  #
  #------------------------------------------------------------
  def get(name = "")
    if (name == "")
      @cgi.each do |key, val|
        yield(key, NKF.nkf(@nkf_param, val))
      end
    else
      return NKF.nkf(@nkf_param, @cgi[name])
    end
  end
  #------------------------------------------------------------
  #
  # レスポンス送信
  #
  # 引数
  #
  #   hash : 送信データ。ハッシュ形式。
  #   boolean_head : HTTPヘッダーを送信(true)/非送信(false)の指定。省略可。
  #   head_str     : HTTPヘッダーの内容。省略可。
  #
  # 戻値 : 無し
  #
  #------------------------------------------------------------
  def send(hash = {}, boolean_head = true, head_str = "Content-Type: text/html\n\n")
    if (boolean_head)
      print head_str
    end

    i = 0
    hash.each do |key, val|
      print "#{key}="
      print URI.escape(NKF.nkf(@nkf_param_send, val),/[^-_.!~*'()a-zA-Z\d]/n)
      i += 1
      if (i < hash.size)
        print "\t"
      end
    end
  end
end

ajax_test.cgi

#! /usr/local/bin/ruby -I.
# -*- coding: utf-8 -*-
require "cgi"
require "uri"
require "nkf"
require "ajax"
#============================================================
#
# Main
#
#============================================================
ajax = Ajax.new("-X -w", "-X -w")

arg1 = ajax.get("arg1")

hash = {
  "arg1" => "response=(" + arg1 + ")",
}

ajax.send(hash)

exit 0