OPPANIHA: 2. サンプルコード１

2010年6月5日土曜日

2. サンプルコード１

<pre> <next>
まずは、以下のコードを見てください。このコードはファイルにしてSafariでローカルに実行できます。

実行すると灰色の四角が表示され、表示された灰色の四角をクリックするとクリックした位置のX座標と四角の左端の座標、そしてmyRectオブジェクトのメンバであるmyVarの"this is myVar"がアラートボックスに表示されます。

view plain print ?

<html>
<head>
<style>
.myCSS {
background-color: rgb(240, 240, 240);
height: 250px;
width: 200px;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script>
function MyObject() {
var self = this;
this.myVar = "this is myVar";
var myObject = document.createElement('div');
myObject.className = 'myCSS';
myObject.addEventListener('mousedown', function(e) { self.myHandler(e) }, false);
this.myObject = myObject;
document.body.appendChild(myObject);
}
MyObject.prototype.myHandler = function(e) {
alert(e.clientX);
alert(this.myObject.offsetLeft);
alert(this.myVar);
}
function loaded() {
myRect = new MyObject;
}
</script>
</head>
<body onload="loaded()">
</body>
</html>

<html>
<head>
<style>
.myCSS {
  background-color: rgb(240, 240, 240);
  height: 250px;
  width: 200px;
  position: absolute;
  left: 200px;
  top: 200px;
}
</style>
<script>
function MyObject() {
 var self = this;
 this.myVar = "this is myVar";
 var myObject = document.createElement('div');
 myObject.className = 'myCSS';
 myObject.addEventListener('mousedown', function(e) { self.myHandler(e) }, false);
 this.myObject = myObject;
 document.body.appendChild(myObject);
}

MyObject.prototype.myHandler = function(e) {
 alert(e.clientX);
  alert(this.myObject.offsetLeft);
  alert(this.myVar);
}

function loaded() {
 myRect = new MyObject;
}
</script>
</head>
<body onload="loaded()">
</body>
</html>

0 件のコメント:

コメントを投稿

OPPANIHA

2010年6月5日土曜日

2. サンプルコード１

0 件のコメント:

This site use "Blogger Syntax Highlighter" tools. Thanks

自己紹介

2010年6月5日土曜日

2. サンプル コード１

0 件のコメント:

2. サンプルコード１