『新人プログラマのための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>
写経ありがとうございました！自分もJavaScript勉強中なので、とても参考になりましたー
しかし、今現在、ダウンロードファイル、用意されているようですよ。
3-20もそれでOKだと思います♪