タグ別アーカイブ: jQuery

Eclipseが起動しないよぉ～Capter1『新人プログラマのためのjQuery Webアプリケーション開発講座』

投稿日: 作成者:
返信

本のとおりやってもEclipseが起動しません。。。
WindowsXPを使っています。

ぐぐっても分からなかったので、Dreamweaverでやってきますｗ


新人プログラマのためのjQuery Webアプリケーション開発講座

ゆい版サンプルソースコード『新人プログラマのためのjQuery Webアプリケーション開発講座』

投稿日: 作成者:
1

『新人プログラマのためのjQuery Webアプリケーション開発講座』の写経！

本のなかと帯に「サンプルソースコードのダウンロードのURL

http://www.rutles.net/books/258.html

を書いておきながら、ファイルすら存在しない！ので（笑）、アップされるまで、わたくしゆいの写経を公開していきます。
コピペしてご利用ください。

現在、Chapter4まで写経しています。
※リスト3-20でつまっています、動きません。分かる方教えて欲しいです。

  • Chapter2サンプルソースコード
  • Chapter3サンプルソースコード
  • Chapter3サンプルソースコード

    • ☆Chapter2

    [リスト2-1]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
</head>
<body>
<h1>サンプル</h1>
<p>ここに→
<script type="text/javascript">
<!--
alert("こんにちわ！");
//-->
</script>
←スクリプトがある。</p>
</body>
</html>

    [リスト2-2]

    
<script type="text/javascript">
<!--
var y = 2010;
var result = false;
if (y % 4 == 0){
	if (y % 4 == 0){
		if (y % 400){
			result = true;
		} else {
			result = false;
		}
	} else {
		result = true;
	}
} else {
	result = false;
}
if (result){
	alert(y + "は、閏年です。");
} else{
	alert(y + "は、閏年ではありません。");
}
//-->
</script>

    [リスト2-3]

    
<script type="text/javascript">
<!--
var num = 5;
var total = 0;
switch(num){
	case 5:
		total += 5;
	case 4:
		total += 4;
	case 3:
		total += 3;
	case 2:
		total += 2;
	case 1:
		total += 1;
}
alert(num + "までの合計は、" + total);
//-->
</script>

    [リスト2-4]

    
<script type="text/javascript">
<!--
var num = 10;
var count = 1;
var result = "";
while (count != num){
	result += count++ + "枚、";
}
alert(result + "……１枚足りない！");
//-->
</script>

    [リスト2-5]

    注）「これは先ほどのwhileのサンプルを書き直したものです。」とあるので、
    「var i = 0」→「var i = 1」に修正しています。

    
<script type="text/javascript">
<!--
var num = 10;
var result = "";
for (var i = i;i < num;i++){
	result += i + "枚、";
}
alert(result + "……１枚足りない！");
//-->
</script>

    [リスト2-6]

    
<script type="text/javascript">
<!--
var name_str = "太郎";
getMsg(name_str);

name_str = "花子";
getMsg(name_str);

function getMsg(str){
	alert("こんにちわ、" + str + "さん！");
}
//-->
</script>

    [リスト2-7]

    
<script type="text/javascript">
<!--
var msg1 = getMsg("太郎");
var msg2 = getMsg("花子");

alert(msg1 + "\n" + msg2);

function getMsg(str){
	return "こんにちわ、" + str + "さん！";
}
//-->
</script>

    [リスト2-8]

    
<script type="text/javascript">
<!--
var getmsg = function(str){
	return "こんにちわ、" + str + "さん！";
}

var msg = getmsg("太郎");
alert(msg);
//-->
</script>

    [リスト2-9]

    
<script type="text/javascript">
<!--
function showMsg(func,str){
	alert(func(str));
}

var helo = function(str){
	return "こんにちわ、" + str + "さん！";
}
var bye = function(str){
	return "さようなら、" + str + "さん！";
}

var msg = "太郎";
showMsg(helo,msg);
showMsg(bye,msg);
//-->
</script>

    [リスト2-10]

    
<script type="text/javascript">
<!--
var val = "a";
try {
	alert(getCalc(val));
} catch(e){
	alert(e.message);
}

function getCalc(n){
	if (isNaN(n)){
		throw new Error("数字ではありません。");
	}
	var res = 0;
	for (var i = 0;i < n;i++){
		res += i;
	}
	return res;
}
//-->
</script>

    [リスト2-11]

    
<script type="text/javascript">
<!--
var arr = [99,50,38,76,89,14,63];
var total = 0;
for(var i=0;i < arr.length;i++){
	total += arr[i];
}
var ave = Math.floor(total / arr.length);
alert("平均：" + ave);
//-->
</script>

    [リスト2-12]

    
<script type="text/javascript">
<!--
var arr = [99,50,38,76,89,14,63];
var total = 0;
for(var val in arr){
	total += arr[val];
}
var ave = Math.floor(total / arr.length);
alert("平均：" + ave);
//-->
</script>

    [リスト2-13]

    
<script type="text/javascript">
<!--
var arr = {"国語":98,"数学":72,"理科":65,"社会":89,"英語":54};
var res = "";
for(var key in arr){
	res += key + ":" + arr[key] + "\n";
}
alert(res);
//-->
</script>

    [リスト2-14]

    
<script type="text/javascript">
<!--
var person = new Array();
person["name"] = "山田太郎";
person["data"] = {"kokugo":98,"sansu":72,"rika":65,"syakai":89,"eigo":54};

person["total"] = function(){
	var total = 0;
	var arr = person["data"];
	for(var key in arr){
		total += arr[key];
	}
	return total;
}
person["average"] = function(){
	return Math.floor(person["total"]() / 5);
}
person["report"] = function(){
	var n = "名前:" + person["name"];
	var t = "合計:" + person["total"]();
	var a = "平均:" + person["average"]();
	return n + "\n" + t + "\n" + a;
}

alert(person["report"]());
//-->
</script>

    [リスト2-15]

    
<script type="text/javascript">
<!--
var person = new Array();
person["name"] = "山田太郎";
person["data"] = {"kokugo":98,"sansu":72,"rika":65,"syakai":89,"eigo":54};

person.total = function(){
	var total = 0;
	var arr = person.data;
	for(var key in arr){
		total += arr[key];
	}
	return total;
}
person.average = function(){
	return Math.floor(person.total() / 5);
}
person.report = function(){
	var n = "名前:" + person.name;
	var t = "合計:" + person.total();
	var a = "平均:" + person.average();
	return n + "\n" + t + "\n" + a;
}

alert(person.report());
//-->
</script>

    [リスト2-16]

    
<script type="text/javascript">
<!--
function Person(name,data){
	this.name = name;
	this.data = data;
	this.total = function(){
		var total = 0;
		var arr = this.data;
		for(var key in arr){
			total += arr[key];
		}
		return total;
	}
	this.average = function(){
		return Math.floor(this.total() / 5);
	}
	this.report = function(){
		var n = "名前:" + this.name;
		var t = "合計:" + this.total();
		var a = "平均:" + this.average();
		return n + "\n" + t + "\n" + a;
	}
}

var p1 = new Person("太郎",{"kokugo":98,"sansu":72,"rika":65,"syakai":89,"eigo":54});
alert(p1.report());
var p2 = new Person("花子",{"kokugo":71,"sansu":93,"rika":89,"syakai":46,"eigo":37});
alert(p2.report());
//-->
</script>

    [リスト2-17]

    
<script type="text/javascript">
<!--
function Person(name,data){
	var name = name;
	var data = data;
	this.total = function(){
		var total = 0;
		var arr = data;
		for(var key in arr){
			total += arr[key];
		}
		return total;
	}
	this.average = function(){
		return Math.floor(this.total() / 5);
	}
	this.report = function(){
		var n = "名前:" + name;
		var t = "合計:" + this.total();
		var a = "平均:" + this.average();
		return n + "\n" + t + "\n" + a;
	}
}

var p1 = new Person("太郎",{"kokugo":98,"sansu":72,"rika":65,"syakai":89,"eigo":54});
alert(p1.report());
var p2 = new Person("花子",{"kokugo":71,"sansu":93,"rika":89,"syakai":46,"eigo":37});
alert(p2.report());
//-->
</script>

    [リスト2-18]

    
<script type="text/javascript">
<!--
function Person(name,data){
	this.name = name;
	this.data = data;
	this.total = function(){
		var total = 0;
		var arr = this.data;
		for(var key in arr){
			total += arr[key];
		}
		return total;
	}
	this.average = function(){
		return Math.floor(this.total() / 5);
	}
	this.report = function(){
		var n = "名前:" + this.name;
		var t = "合計:" + this.total();
		var a = "平均:" + this.average();
		return n + "\n" + t + "\n" + a;
	}
}

var p1 = new Person("太郎",{"kokugo":98,"sansu":72,"rika":65,"syakai":89,"eigo":54});
alert(p1.report());

var p2 = new Person("花子",{"kokugo":71,"sansu":93,"rika":89,"syakai":46,"eigo":37});
alert(p2.report());

Person.prototype.getData = function(){
	var arr = this.data;
	var res = "";
	for (var key in arr){
		res += key + ":" + arr[key] + " ";
	}
	return res;
}
Person.prototype.showMsg = function(){
	alert(this.report() + "\n" + this.getData());
}
p1.showMsg();
p2.showMsg();
//-->
</script>

    [リスト2-19]

    
<script type="text/javascript">
<!--
function Person(name,data){
	this.name = name;
	this.data = data;
	this.total = function(){
		var total = 0;
		var arr = this.data;
		for(var key in arr){
			total += arr[key];
		}
		return total;
	}
	this.average = function(){
		return Math.floor(this.total() / 5);
	}
	this.report = function(){
		var n = "名前:" + this.name;
		var t = "合計:" + this.total();
		var a = "平均:" + this.average();
		return n + "\n" + t + "\n" + a;
	}
}

function UltraPerson(name,data){
	Person.call(this,name,data);
	this.getData = function(){
		var arr = this.data;
		var res = "";
		for (var key in arr){
			res += key + ":" + arr[key] + " ";
		}
		return res;
	}
	this.showMsg = function(){
		alert(this.report() + "\n" + this.getData());
	}
}

var p1 = new UltraPerson("太郎",{"kokugo":98,"sansu":72,"rika":65,"syakai":89,"eigo":54});
p1.showMsg();
//-->
</script>

    [リスト2-20]

    
<script type="text/javascript">
<!--
function Person(name,data){
	this.name = name;
	this.data = data;
}
function PersonUtil(){}
PersonUtil.total = function(arr){
	var total = 0;
	for(var key in arr){
		total += arr[key];
	}
	return total;
}
PersonUtil.average = function(arr){
	return Math.floor(PersonUtil.total(arr) / 5);
}
PersonUtil.report = function(p){
	var n = "名前:" + p.name;
	var t = "合計:" + PersonUtil.total(p.data);
	var a = "平均:" + PersonUtil.average(p.data);
	return n + "\n" + t + "\n" + a;
}

var p1 = new Person("太郎",{"kokugo":98,"sansu":72,"rika":65,"syakai":89,"eigo":54});
alert(PersonUtil.report(p1));
//-->
</script>

    [リスト2-21]

    
<script type="text/javascript">
<!--
function Person(name,data){
	this.name = name;
	this.data = data;
	this.report = function(){
		var arr = this.data;
		function total(){
			var total = 0;
			for(var key in arr){
				total += arr[key];
			}
			return total;
			}
		function average(){
			return Math.floor(total(arr) / 5);
		}
		var n = "名前:" + this.name;
		var t = "合計:" + total(this.data);
		var a = "平均:" + average(this.data);
		return n + "\n" + t + "\n" + a;
	}
}
var p1 = new Person("太郎",{"kokugo":98,"sansu":72,"rika":65,"syakai":89,"eigo":54});
alert(p1.report(p1));
//-->
</script>

    ☆Chapter3

    [リスト3-1]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
</head>
<body>
<h1>サンプル</h1>
<p>
<script type="text/javascript">
<!--
document.write("これはDOMを使って出力したものです。");
//-->
</script>
</p>
</body>
</html>

    [リスト3-2]

    
<body>
<h1>サンプル</h1>
<p>
<script type="text/javascript">
<!--
document.write("これはDOMを使って出力したものです。");
//-->
</script>
</p>
</body>

    [リスト3-3]

    
<body>
<h1>サンプル</h1>
<p>
これはDOMを使って出力したものです。
</p>
</body>

    [リスト3-4]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
</head>
<script type="text/javascript">
<!--
document.title = "新しいタイトル";
//-->
</script>
<body>
<h1>サンプル</h1>
<p>サンプルページです。</p>
</body>
<script type="text/javascript">
<!--
document.body.innerHTML = "<h1>スクリプトで設定した内容</h1><p>新しいテキストです。</p>";
//-->
</script>
</html>

    [リスト3-5]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
</head>
<body>
<h1 id="title">サンプル</h1>
<p>※これは変更されません。</p>
<p id="content">サンプルページです。</p>
</body>
<script type="text/javascript">
<!--
document.getElementById("title").innerHTML = "新タイトルです";
document.getElementById("content").innerHTML = "pにテキストを追加します。";
//-->
</script>
</html>

    [リスト3-6]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--
function setup(){
	document.getElementById("title").innerHTML = "新タイトルです";
	document.getElementById("content").innerHTML = "pにテキストを追加します。";
}
//-->
</script>
</head>
<body onLoad="setup();">
<h1 id="title">サンプル</h1>
<p id="content">サンプルページです。</p>
</body>
</html>

    [リスト3-7]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--
function doAction(){
	document.getElementById("content").innerHTML = "クリックしましたね！";
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="content">サンプルページです。</p>
<a href="javascript:void(0);" onclick="doAction();">クリック！</a>
</body>
</html>

    [リスト3-8]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--
function doAction(){
	var input = document.getElementById("input");
	var res = "入力したテキスト：" + input.value;
	document.getElementById("content").innerHTML = res;
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="content">サンプルページです。</p>
<input type="text" id="input" />
<br />
<a href="javascript:void(doAction());">クリック！</a>
</body>
</html>

    [リスト3-9]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--
var sel_radio = null;

function doAction(){
	var msg = null;
	if (document.getElementById("check1").checked){
		msg = "あなたは、成人です。";
	} else {
		msg = "あなたは、未成年です。";
	}
	msg += "<br />";
	if (sel_radio != null){
		msg += "性別は、" + sel_radio.value + "です。";
	} else {
		msg += "性別は、不明です。";
	}
	document.getElementById("content").innerHTML = msg;
}

function selectRadio1(obj){
	sel_radio = document.getElementById(obj);
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="content">サンプルページです。</p>
<input type="checkbox" id="check1" />
<label for="check1">成人</label>
<br />
<input type="radio" name="radio1" id="radio1"
  value="男性" onclick="selectRadio1('radio1');" />
<label for="radio1">男性</label><br />
<input type="radio" name="radio1" id="radio2"
  value="女性" onclick="selectRadio1('radio2');" />
<label for="radio2">女性</label><br />
<input type="button" onclick="doAction();" value="クリック！" />
</body>

    [リスト3-10]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--
function doAction(){
	var msg = "";
	var sel1 = document.getElementById("select1");
	var ops = sel1.options;
	for(var i = 0;i < ops.length;i++){
		if (ops[i].selected){
			msg += ops[i].value + " ";
		}
	}
	document.getElementById("content").innerHTML = msg;
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="content">サンプルページです。</p>
<select id="select1" size="5" multiple="multiple">
	<option value="アジア">アジア</option>
	<option value="アメリカ">アメリカ</option>
	<option value="アフリカ">アフリカ</option>
	<option value="ヨーロッパ">ヨーロッパ</option>
	<option value="オセアニア">オセアニア</option>
</select>
<input type="button" onclick="doAction();" value="クリック！" />
</body>
</html>

    [リスト3-11]

    
<select id="select1" size="5" multiple="multiple" onchange="doAction();">
	<option value="アジア">アジア</option>
	<option value="アメリカ">アメリカ</option>
	<option value="アフリカ">アフリカ</option>
	<option value="ヨーロッパ">ヨーロッパ</option>
	<option value="オセアニア">オセアニア</option>
</select>

    [リスト3-12]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--
function doAction(){
	var text1 = document.getElementById("text1");
	if (text1.value == ""){
		document.getElementById("content").innerHTML = "未入力です。";
	} else {
		document.forms["form1"].submit();
	}
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="content">サンプルページです。</p>
<form method="get" action="sample.html" id="form1" onsubmit="return false;">
<input type="text" id="text1" />
<input type="submit" onclick="doAction();" />
</form>
</body>
</html>

    [リスト3-13]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--
function doAction(){
	var obj = document.getElementById("content");
	var val = obj.innerHTML;
	obj.innerHTML = val + "<div>追加したタグです。</div>";
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="content">サンプルページです。</p>
<input type="button" value="実行" onclick="doAction();" />
</body>
</html>

    [リスト3-14]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--
function doAction(){
	var div = document.createElement("div");
	div.innerHTML ="★追加したDIVタグ★";
	var obj = document.getElementById("content");
	obj.appendChild(div);
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="content">サンプルページです。</p>
<input type="button" value="実行" onclick="doAction();" />
</body>
</html>

    [リスト3-15]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--
function doAction(){
	var input = document.getElementById("input");
	var val = input.value;
	var content = document.getElementById("content");
	content.style.background = val;

}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="content">サンプルのタグです。</p>
<input type="text" id="input" />
<input type="button" value="実行" onclick="doAction();" />
</body>
</html>

    [リスト3-16]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--
function doAction(){
	var input = document.getElementById("input");
	var val = input.value;
	var content = document.getElementById("content");
	content.style.left = val + "px";
	content.style.top = val + "px";
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="content" style="position:absolute;background:#FF6600;width=200px;height:20px;">サンプルのタグです。</p>
<br /><br />
<input type="text" id="input" />
<input type="button" value="実行" onclick="doAction();" />
</body>
</html>

    [リスト3-17]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
#content {
	position:absolute;
	background:#FF6600;
	width:200px;
	heigth:50px;
}
</style>
<script type="text/javascript">
<!--
var mouseflg = false;
var pointerflg = false;

function doAction(){
	var content = document.getElementById("content");
	if (pointerflg){
		content.style.background = "#FF0000";
		if (mouseflg){
			content.style.left = (event.clientX -100) + "px";
			content.style.top = (event.clientY -25) + "px";
		}
	} else {
		content.style.background = "#FF6600";
	}
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="content"
	onmouseover="pointerflg = true;";
	onmouseout="pointerflg = false;doAction(event);"
	onmousedown="mouseflg = true;"
	onmouseup="mouseflg = false;"
	onmousemove="doAction(event);">サンプルのタグです。</p>
<br /><br />
</body>
</html>

    [リスト3-18]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
#content {
	position:absolute;
	background:#FF6600;
	width:200px;
	heigth:50px;
}
</style>
<script type="text/javascript">
<!--
var count = 0;

function doAction(event){
	var obj = document.createElement("div");
	obj.style.background = "FFAA00";
	obj.innerHTML = "No," + count++;
	if (obj.addEventListener != undefined){
		obj.addEventListener("click",click,false);
	} else {
		if (obj.attachEvent){
			obj.attachEvent("onclick",click);
		}
	}
	document.body.appendChild(obj);
}

function click(event){
	obj = null;
	if (event.target != undefined){
		obj = event.target;
	} else {
		obj = event.srcElement;
	}
	obj.style.background = "red";
	obj.innerHTML = "クリックしました。";
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<br /><br />
<input type="button" onclick="doAction();" value="クリック">
</body>
</html>

    [リスト3-19]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
#back {
	background:#FFAA66;
	position:absolute;
	left:100px;
	top:100px;
	width:300px;
	height:300px;
}
#front {
	background:#FF0000;
	position:absolute;
	left:250px;
	top:250px;
	width:20px;
	height:20px;
}
</style>
<script type="text/javascript">
<!--
var dx = 0;
var dy = 0;
var x = 150;
var y = 150;
var timer = setInterval(doAction,100);

function setMove(){
	dx = Math.floor(Math.random() * 21 - 10);
	dy = Math.floor(Math.random() * 21 - 10);
}

function doAction(){
	if (x < 0) dx *= -1;
	if (x > 280) dx *= -1;
	if (y < 0) dy *= -1;
	if (y > 280) dy *= -1;
	x += dx;
	y += dy;
	var front = document.getElementById("front");
	front.style.left = x + "px";
	front.style.top = y + "px";
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="back" onclick="setMove();">
<div id="front"></div>
</div>
</body>
</html>

    ☆Chapter4

    [リスト4-1]

    
<script src="jquery-xxx.min.js"></script>

    [リスト4-2]

    
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");
//-->
</script>

    [リスト4-3]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script type="text/javascript">
<!--

function doAction(){
	document.getElementById("msg").innerHTML = "クリックしました。";
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="msg">ボタンをクリックしてください。</p>
<br /><br />
<input type="button" onclick="doAction()" value="クリック" />
</body>
</html>

    [リスト4-4]

    
<script src="jquery-1.3.2.min.js"></script>

    [リスト4-5]

    
function doAction(){
	$("#msg").text("クリックしました！");
}

    [リスト4-6]

    
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

function doAction(){
	$("#msg").text("クリックしました！");
}
//-->

    [リスト4-7]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

function doAction(){
	var res = "あなたは、" + $("#input").val() + "と書きました。";
	$("#msg").text(res);
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="msg">ボタンをクリックしてください。</p>
<br /><br />
<input type="text" id="input" />
<input type="button" onclick="doAction()" value="クリック" />
</body>
</html>

    [リスト4-8]

    
<p id="msg">ボタンをクリックしてください。</p>
<input type="checkbox" id="c1" />
	<label for="c1">チェックボックス</label><br />
<input type="button" onclick="doAction()" value="クリック" />

    [リスト4-9]

    
function doAction(){
	var res = $("#c1").attr("checked") + "を選択しました。";
	$("#msg").text(res);
}

    [リスト4-10]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

function doAction(){
	var val = $("input@radio:checked").val();
	if(val != undefined){
		$("#msg").text(val + "を選択しました。");
	} else {
		$("#msg").text("未選択です。");
	}
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="msg">ボタンをクリックしてください。</p>
<br /><br />
<input type="radio" name="radio" id="r1" value="Windows" />
	<label for="r1">Windows</label><br />
<input type="radio" name="radio" id="r2" value="Mac OS X" />
	<label for="r2">Mac OS X</label><br />
<input type="radio" name="radio" id="r3" value="Linux" />
	<label for="r3">Linux</label><br />
<input type="button" onclick="doAction()" value="クリック" />
</body>
</html>

    [リスト4-11]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

function doAction(){
	var res = "";
	var val = $("#sel option:selected").each(function(){
		res += $(this).val() + "<br />";
	});
	$("#msg").html(res);
}

//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="msg">ボタンをクリックしてください。</p>
<br /><br />
<select id="sel" multiple="multiple">
	<option value="Windows">Windows</option>
	<option value="Linux">Linux</option>
	<option value="Mac OS X">Mac OS X</option>
	<option value="Android">Android</option>
	<option value="Chorome OS">Chorome OS</option>
	<option value="Windows">Windows</option>
</select><br />
<input type="button" onclick="doAction()" value="クリック" />
</body>
</html>

    [リスト4-12]

    
<body>
<h1 id="title">サンプル</h1>
<p id="msg0">1つ目のPタグです。</p>
<p id="msg1">2つ目のPタグです。</p>
<p id="msg2">3つ目のPタグです。</p>
<br /><br />
<input type="text" id="input" />
<input type="button" onclick="doAction()" value="クリック" />
</body>

    [リスト4-13]

    
function doAction(){
	var val = $("#input").val();
	$("p").text(val);
}

    [リスト4-14]

    
<body>
<h1 id="title">サンプル</h1>
<p id="msg0">これは変わらない。</p>
<p id="msg1" class="action">これは変わる。その１</p>
<p id="msg2" class="action">これは変わる。その２</p>
<br /><br />
<input type="text" id="input" />
<input type="button" onclick="doAction()" value="クリック" />
</body>

    [リスト4-15]

    
function doAction(){
	var val = $("#input").val();
	$("#msg1,#msg2").text(val);
}

    [リスト4-16]

    
function doAction(){
	var val = $("#input").val();
	$(".action").text(val);
}

    [リスト4-17]

    
<body>
<h1 id="title">サンプル</h1>
<p id="msg">スタイルを操作する。</p>
<br /><br />
<input type="text" id="input" />
<input type="button" onclick="doAction()" value="クリック" />
</body>

    [リスト4-18]

    
function doAction(){
	var val = $("#input").val();
	$("#msg").css("background",val);
}

    [リスト4-19]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
.red { background-color:red; }
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

function doAction(){
	$("p").toggleClass("red");
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="msg0" class="red">スタイルを操作する。</p>
<p id="msg1">スタイルを操作する。</p>
<p id="msg2" class="red">スタイルを操作する。</p>
<p id="msg3">スタイルを操作する。</p>
<br /><br />
<input type="button" onclick="doAction()" value="クリック" />
</body>
</html>

    [リスト4-20]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
.red { background-color:red; }
.blue { background-color:blue; }
.green { background-color:green; }
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

function doAction(){
	if ($("p").hasClass("green")){
		$("p").removeClass("green");
	} else {
		$("p").addClass("green");
	}
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<p id="msg0" class="red">スタイルを操作する。</p>
<p id="msg1" class="blue">スタイルを操作する。</p>
<p id="msg2" class="red">スタイルを操作する。</p>
<p id="msg3" class="blue">スタイルを操作する。</p>
<br /><br />
<input type="button" onclick="doAction()" value="クリック" />
</body>
</html>

    [リスト4-21]

    
<body>
<h1 id="title">サンプル</h1>
<ul id="outline">
</ul>
<br /><br />
<input type="text" id="input" />
<input type="button" onclick="doAction()" value="クリック" />
</body>

    [リスト4-22]

    
function doAction(){
	var msg = $("#input").val();
	var obj = $("<li>" + msg + "</li>");
	$("#outline").append(obj);
}

    [リスト4-23]

    
function doAction(){
	var msg = $("#input").val();
	$("<li>" + msg + "</li>").appendTo($("#outline"));
}

    [リスト4-24]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
.inner {
	border-style:solid;
	border-bottom-width:5px;
	border-color:#FFAAAA;
	padding: 5px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

function doAction(){
	var obj = $("<div class=\"inner\"></div>");
	$("#msg").wrap(obj);
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg">メッセージ</div>
<br /><br />
<input type="button" onclick="doAction()" value="クリック" />
</body>
</html>

    [リスト4-25]

    
<body>
<h1 id="title">サンプル</h1>
<div id="msg0" class="msg">メッセージ1</div>
<div id="msg1" class="msg">メッセージ2</div>
<div id="msg2" class="msg">メッセージ3</div>
<br /><br />
<input type="button" onclick="doAction()" value="クリック" />
</body>

    [リスト4-26]

    
function doAction(){
	var obj = $("<div class=\"inner\"></div>");
	$(".msg").wrapAll(obj);
}

    [リスト4-27]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

function doAction(){
	var obj = $("<div>" + $("#input").val() + "</div>");
	if ($("#before").attr("checked")){
		$("#msg").before(obj);
	}
	if ($("#after").attr("checked")){
		$("#msg").after(obj);
	}
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg" class="msg">メッセージ</div>
<br /><br />
<input type="text" id="input" /><br />
<input type="radio" name="add" id="before">前へ</input><br />
<input type="radio" name="add" id="after">後へ</input><br />
<input type="button" onclick="doAction()" value="クリック" />
</body>
</html>

    [リスト4-28]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
#msg {
	background-color:#FFAAAA;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");
var timer = null;

function change(){
	var n = $("#msg").data("count");
	if (n == null){ n = 0; }
	var data = $("#msg").data("info");
	if (++n == data.length){ n = 0; }
	$("#msg").text(data[n]);
	$("#msg").data("count",n);
}

function doAction(){
	var data = $("#msg").data("info");
	if (data == null){
		data = new Array();
		timer = setInterval(change,3000);
	}
	data.push($("input").val());
	$("#msg").data("info",data);
}
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg" class="msg">メッセージ</div>
<br /><br />
<input type="text" id="input" /><br />
<input type="button" onclick="doAction()" value="クリック" />
</body>
</html>

    [リスト4-29]

    
bb<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
#msg {
	background-color:#FFAAAA;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
function setup(){
	$("#msg").text("新しいテキスト。");
}

//-->
</script>
</head>
<body onLoad="setup()">
<h1 id="title">サンプル</h1>
<div id="msg">メッセージ</div>
<br /><br />
</body>
</html>

    [リスト4-30]

    
$(document).ready(function setup(){
	$("#msg").text("新しいテキスト。");
});

    [リスト4-31]

    １７行目の「var obj = $(“#msg”);」いらない、たぶん

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
#msg {
	background-color:#FFAAAA;
}
</style>
<script src="http://google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

$("#msg").text("新しいテキスト。");
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg">メッセージ</div>
<br /><br />
</body>
</html>

    [リスト4-32]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
#msg {
	background-color:#FFAAAA;
}
</style>
<script src="http://google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

google.setOnLoadCallback(function(){
	$("#msg").text("新しいテキスト。");
});
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg">メッセージ</div>
<br /><br />
</body>
</html>

    [リスト4-33]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
#msg {
	background-color:#FFAAAA;
}
</style>
<script src="http://google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

google.setOnLoadCallback(function(){
	$("#msg").data("info",["こんにちは","こんばんは","さようなら"]);
	$("#msg").data("count",-1);
	$("#msg").click(function(event){
		var n = $("#msg").data("count");
		var arr = $("#msg").data("info");
		n = (n + 1) % (arr.length);
		$("#msg").text(arr[n]);
		$("#msg").data("count",n);
		}
	);
});
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg">メッセージ</div>
</body>
</html>

    [リスト4-34]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
.msg {
	background-color:#FFAAAA;
	margin:5px;
}
</style>
<script src="http://google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

google.setOnLoadCallback(function(){
	$(".msg").each(function(){
		$(this).data("info",["こんにちは","こんばんは","さようなら"]);
		$(this).data("count",-1);
	});
	$(".msg").click(function(event){
		var n = $(this).data("count");
		var arr = $(this).data("info");
		n = (n + 1) % (arr.length);
		$(this).text(arr[n]);
		$(this).data("count",n);
	});
});
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg0" class="msg">メッセージ</div>
<div id="msg1" class="msg">メッセージ</div>
<div id="msg2" class="msg">メッセージ</div>
</body>
</html>

    [リスト4-35]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
.msg {
	background-color:#FFAAAA;
	margin:5px;
}
.hovermsg {
	background-color:#FF6666;
}
</style>
<script src="http://google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

google.setOnLoadCallback(function(){
	$(".msg").each(function(){
		$(this).data("info",["こんにちは","こんばんは","さようなら"]);
		$(this).data("count",-1);
	});
	$(".msg").click(function(event){
		var n = $(this).data("count");
		var arr = $(this).data("info");
		n = (n + 1) % (arr.length);
		$(this).text(arr[n]);
		$(this).data("count",n);
	});
	$(".msg").hover(function(event){
		$(this).addClass("hovermsg");
	},function(event){
		$(this).removeClass("hovermsg");
	});
});
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg0" class="msg">メッセージ</div>
<div id="msg1" class="msg">メッセージ</div>
<div id="msg2" class="msg">メッセージ</div>
</body>
</html>

    [リスト4-36]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
.msg {
	background-color:#FFAAAA;
	margin:5px;
}
.hovermsg {
	background-color:#FF6666;
}
</style>
<script src="http://google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

google.setOnLoadCallback(function(){
	$("#img").data("list",["image1.jpg","image2.jpg","image3.jpg"]);
	$("#img").data("count",-1);
	$("#btn").click(
		function(event){
			var list = $("#img").data("list");
			var n = $("#img").data("count");
			n = ++n % list.length;
			$("#img").attr("src",list[n]);
			$("#img").data("count",n);
		});
	$("#img").error(
		function(event){
			alert("エラーが起こりました。");
	});
});
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<img id="img" src="">
<br /><br />
<input type="button" id="btn" value="クリック" />
</body>
</html>

    [リスト4-37]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
.msg {
	background-color:#FFAAAA;
	margin:5px;
}
.hovermsg {
	background-color:#FF6666;
}
</style>
<script src="http://google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

google.setOnLoadCallback(function(){
	$("#msg1").data("flg",false);
	$("#msg0").click(
		function(event){
			var f = $("msg1").data("flg");
			f = !f;
			if (f){
				$("#msg1").bind("click",doclick);
				$("#msg1").hover(m_in,m_out);
			} else {
				$("#msg1").unbind("click");
				$("#msg1").unbind("hover");
			}
			$("#msg").data("flg",f);
	});

function doclick(event){
	alert("クリックしました。");
}
function m_in(event){
	$(this).addClass("hovermsg");
}
function m_out(event){
	$(this).removeClass("hovermsg");
}
});
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg0" class="msg">メッセージ1</div>
<div id="msg1" class="msg">メッセージ2</div>
<br /><br />
</body>
</html>

    [リスト4-38]

    
			if (f){
				$("#msg1").bind("click",doclick);
				$("#msg1").hover(m_in,m_out);
				$("#msg1").hover(m_in,m_out);
			} else {
				$("#msg1").unbind("click");
				$("#msg1").unbind("mouseover");
				$("#msg1").unbind("mouseout");
			}

    [リスト4-39]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
.msg {
	background-color:#AAAAAA;
	margin:5px;
}
.msg_r {
	background-color:#FFAAAA;
	margin:5px;
}
.msg_g {
	background-color:#AAFFAA;
	margin:5px;
}
.msg_b {
	background-color:#AAAAFF;
	margin:5px;
}
</style>
<script src="http://google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

google.setOnLoadCallback(function(){
	$(".msg").toggle(
		function(event){
			$(this).addClass("msg_r");
			$(this).removeClass("msg_g");
			$(this).removeClass("msg_b");
		},
		function(event){
			$(this).removeClass("msg_r");
			$(this).addClass("msg_g");
			$(this).removeClass("msg_b");
		},
		function(event){
			$(this).removeClass("msg_r");
			$(this).removeClass("msg_g");
			$(this).addClass("msg_b");
		}
	);
});
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg0" class="msg">メッセージ1</div>
<div id="msg1" class="msg">メッセージ2</div>
<br /><br />
</body>
</html>

    [リスト4-40]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
.msg {
	background-color:#FFAAAA;
	margin:5px;
}
.msg_end {
	background-color:#AAAAAA;
	margin:5px;
}
</style>
<script src="http://google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

google.setOnLoadCallback(function(){
	$(document).data("count",0);
	$(document).bind("reset_now",allzero);
	$(".msg").data("counter",10);
	$(".msg").bind("click",clickMsg);
	$(".msg").bind("zero",zero);

	function allzero(event){
		alert("すべてゼロです。リセットします。");
		$(".msg").removeClass("msg_end");
		$(document).data("count",0);
		$(".msg").data("counter",10);
		$(".msg").unbind("click");
		$(".msg").bind("click",clickMsg);
		$(".msg").data("counter",10);
		$(".msg").text("再スタート");
	}

	function clickMsg(event){
		var n = $(this).data("counter");
		n--;
		$(this).data("counter",n);
		$(this).text("あと、" + n + "です。");
		if (n == 0) { $(this).trigger("zero"); }
	}

	function zero(event){
		var c = $(document).data("count");
		c++;
		$(document).data("count",c);
		if (c == $(".msg").length){
			$(document).trigger("reset_now");
			return;
		}
		$(this).addClass("msg_end");
		$(this).unbind("click");
		$(this).bind("click",
					 function(event){
						 alert("ゼロです。");
					 }
		);
	}
});
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msg0" class="msg">スタート</div>
<div id="msg1" class="msg">スタート</div>
<div id="msg2" class="msg">スタート</div>
<br /><br />
</body>
</html>

    [リスト4-41]

    「return;」の一文もいらない、たぶん

    
	function zero(event){
		var c = $(document).data("count");
		c++;
		$(document).data("count",c);
		if (c == $(".msg").length){
			$(document).trigger("reset_now");
		}
		$(this).addClass("msg_end");
		$(this).unbind("click");
		$(this).one("click", // ★
					 function(event){
						 alert("ゼロです。");
					 }
		);
	}

    [リスト4-42]

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<style type="text/css">
.msg {
	background-color:#FFAAAA;
	margin:5px;
}
.msg_in {
	background-color:#FF6666;
}
</style>
<script src="http://google.com/jsapi"></script>
<script type="text/javascript">
<!--
google.load("jquery", "1.3");

google.setOnLoadCallback(function(){
	$(".msg").live("mouseover",in_it);
	$(".msg").live("mouseout",out_it);
	$(".msg").live("click",count_it);
	$("#btn").live("click",doAction);

	function count_it(event){
		var n = $(this).data("counter");
		var msg = $(this).data("msg");
		n++;
		$(this).text("クリック数" + n + ":" + msg);
		$(this).data("counter",n);
	}

	function in_it(event){
		$(this).addClass("msg_in");
	}

	function out_it(event){
		$(this).removeClass("msg_in");
	}

	function doAction(event){
		var str = $("#input").val();
		var obj = $("<div>" + str + "</div>");
		obj.addClass("msg");
		obj.data("counter",0);
		obj.data("msg",str);
		$("#msgs").append(obj);
	}
});
//-->
</script>
</head>
<body>
<h1 id="title">サンプル</h1>
<div id="msgs">スタート</div>
<br /><br />
<input type="text" id="input" />
<input type="button" id="btn" value="クリック" />
</body>
</html>


    新人プログラマのためのjQuery Webアプリケーション開発講座

ゆい版正誤表『新人プログラマのためのjQuery Webアプリケーション開発講座』

投稿日: 作成者:
1

2010-03-10時点
随時更新していきます。

該当ページ 誤 正
P10 http://www.rutles.net/books/258.htmll ページが存在しません
P10 var i = 0 var i = 1
P62
上から2行目		 for(var key in arr)というようにして各要素のキーを変数valに取り出し、 for(var key in arr)というようにして各要素のキーを変数keyに取り出し、
P89
下から2行目～最後の行		 簡単なチェック僕ストラジオボタン 簡単なチェックボックスとラジオボタン
P103
下から11行目		 それぞれ、「マウスボタンがエリアの外に出たとき」 それぞれ、「マウスボタンがエリア内のとき」「マウスボタンがエリアの外に出たとき」
P105
[リスト3-18]の034行目		 var obj = null var obj = null;
P157
[リスト4-31]の017行目		 var obj = $(“#msg”); いらない
P175
文章のはじめ		 修正したのは、★マークの１行だけです。 修正したのは★マークの１行で、if内の「return」を削除しています。


新人プログラマのためのjQuery Webアプリケーション開発講座

『新人プログラマのためのjQuery Webアプリケーション開発講座』買ったんですけど、公式ページでサンプルソースがダウンロードできないんですけど、、、

投稿日: 作成者:
返信


新人プログラマのためのjQuery Webアプリケーション開発講座