JavaScript | Webプログラミング!(0000年度)

Time-stamp: "2014-10-09 Thu 09:39 JST hig"

JavaScript

Chromeなら表示>開発/管理>ディベロッパーツールでエラーを観察しながらやろう.

サンプル1

サンプル1

index.html


<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <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

サンプル2

index.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

サンプル3

index.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

サンプル4

index.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;
 }

課題

  • 九九の表を作ろう

参考

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net