2013年03月08日 Javascript memo
_ Javascript memo
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
[ツッコミを入れる]