[目次]
JavaScript | Webプログラミング!(2021年度)
JavaScript
Chromeならでエラーを観察しながらやろう.
サンプル1
サンプル1index.html
<!doctype html>
<html lang="ja>
<head>
<meta charset="UTF-8">
<title>Test of JavaScript in body</title>
</head>
<body>
<p>
以下が九九の表.
</p>
<script type="text/javascript">
var i;
var j;
document.write("<ul>");
for(i=1;i<10;i++){
document.write("<li>");
for(j=1;j<10;j++){
document.write((i*j)+" ");
}
document.write("</li>\n");
}
document.write("</ul>");
</script>
<p>
以上が九九の表.
</p>
</body>
</html>
サンプル2
サンプル2index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="kukujs.js"></script>
<title>Test of JavaScript in an external file</title>
</head>
<body>
<p>
以下が九九の表.
</p>
<span id="kuku"></span>
<p>
以上が九九の表.
</p>
</body>
</html>
kukujs.js
window.onload = function(){
var kukutable="";
var i,j;
kukutable+="<ul>\n";
for(i=1;i<10;i++){
kukutable+="<li>";
for(j=1;j<10;j++){
kukutable+=""+(i*j)+ " ";
}
kukutable+="</li>\n";
}
kukutable+="</ul>";
document.getElementById('kuku').innerHTML=kukutable;
};
サンプル3
サンプル3index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="import.css" type="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="kukudom.js"></script>
<title>Test of DOM manipulation with JavaScript</title>
</head>
<body>
<p id="before">
以下が九九の表.
</p>
<span id="kuku"></span>
<p id="after">
以上が九九の表.
</p>
<p>
<span id="black">黒</span>
<span id="red">赤</span>
<span id="green">緑</span>
<span id="yellow">黄</span>
<span id="nine">9x9</span>
<span id="three">3x3</span>
</p>
</body>
</html>
kukudom.js
window.onload = function(){
document.getElementById('kuku').innerHTML=kukuhyo(9);
document.getElementById('black').onmouseover = function(){
document.getElementById('before').style.color="black";
document.getElementById('before').style.background="white";
};
document.getElementById('red').onmouseover= function(){
document.getElementById('before').style.color="red";
document.getElementById('before').style.background="blue";
};
document.getElementById('green').onmouseover = function(){
document.getElementById('after').className="gr";
};
document.getElementById('yellow').onmouseover= function(){
document.getElementById('after').className="ye";
};
document.getElementById('nine').onmouseover= function(){
document.getElementById('kuku').innerHTML=kukuhyo(9);
};
document.getElementById('three').onmouseover= function(){
document.getElementById('kuku').innerHTML=kukuhyo(3);
};
};
function kukuhyo(n){
var kukutable="";
var i,j;
kukutable+="<ul>\n";
for(i=1;i<=n;i++){
kukutable+="<li>";
for(j=1;j<=n;j++){
kukutable+="" +(i*j)+ " ";
}
kukutable+="</li>\n";
}
kukutable+="</ul>"
return kukutable;
}
import.css
.gr {
color:green;
font-size:xx-large;
}
.ye {
color:yellow;
font-size:xx-small;
}サンプル4
サンプル4index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="import.css" type="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="dom.js"></script>
<title>Test of DOM manipulation with JavaScript</title>
</head>
<span id="d1">表示</span><span id="d2">非表示</span>
<p id="p1">
段落1
</p>
<hr/>
<span id="d3">可視</span><span id="d4">非可視</span>
<p id="p2">
段落2
</p>
<span id="d5">ダイアログ</span>
</body>
</html>
dom.js
window.onload = function(){
document.getElementById('d1').onmouseover = function(){
document.getElementById('p1').style.setProperty("display","block");
};
document.getElementById('d2').onmouseover= function(){
document.getElementById('p1').style.setProperty("display","none");
};
document.getElementById('d3').onmouseover = function(){
document.getElementById('p2').className="vis";
"visible"
};
document.getElementById('d4').onmouseover= function(){
document.getElementById('p2').className="hid";
};
document.getElementById('d5').onmouseover= function(){
var i=3;
var status1=document.getElementById('p1').style.getPropertyValue("display");
window.alert("Result: "+status1+" " + i);
};
};
import.css
.vis{
visibility: visible;
}
.hid{
visibility: hidden;
}課題
- 九九の表を作ろう
参考
- Webアプリケーション構築入門（第2版） - 実践！Webページ制作からマッシュアップまで
p.30-50
- 奥村晴彦先生 JavaScript
