Jqueryと素Javascriptでtipsツールを作ってみる。

まず、Jqueryですぱぱぱーんと書いてみる。

```html:jquery.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="HTML5">
<meta name="description" content="HTML5の解説">
<title>HTML5リファレンス</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
<!--
	li{
		width: 150px;
		height:50px;
		margin:20px;
		background-color: #F9F9F9;
		display: block;
	}
-->
</style>
<script type="text/javascript">
//<!--
	
	//documentのロード
	$(function(){
		var obj = $("li");
		obj.each(function (index){
			var newObj = $("<div>");
			$(this).mouseover(function(e){
				var x = e.clientX;
				var y = e.clientY;
				var message = $("input").eq(index).val();
				newObj.css({
					"width" : "250px",
					"height" : "50px",
					"top" : y + 10,
					"left" : x + 10,
					"position" : "absolute",
					"background-color" : "#FFCCCC"
				});
				newObj.html(message);
				$(this).append(newObj);
			});
			
			$(this).mouseout(function(e){
				newObj.remove();
			});	
		});
	});

//-->
</script>
</head>
<body>
	<ul>
		<li alt="あいうえお"><input type="hidden" value="あいうえお" />サンプル00</li>
		<li alt="かきくけこ"><input type="hidden" value="かきくけこ" />サンプル01</li>
		<li alt="さしすせそ"><input type="hidden" value="さしすせそ" />サンプル02</li>
		<li alt="たちつてと"><input type="hidden" value="たちつてと" />サンプル03</li>
		<li alt="なにぬねの"><input type="hidden" value="なにぬねの" />サンプル04</li>
		<li alt="はひふへほ"><input type="hidden" value="はひふへほ" />サンプル05</li>
		<li alt="まみむめも"><input type="hidden" value="まみむめも" />サンプル06</li>
	</ul>
</body>
</html>
```

楽！すごい楽。
偉大だなあ。

次に、間違った素のjavascriptをかいてみた。

```html:plain.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="HTML5">
<meta name="description" content="HTML5の解説">
<title>HTML5リファレンス</title>
<style type="text/css">
<!--
	li{
		width: 150px;
		height:50px;
		margin:20px;
		background-color: #F9F9F9;
		display: block;
	}
-->
</style>
<script type="text/javascript">
//<!--
	
	window.onload = function (e){
		try{
			var obj = document.getElementsByTagName("li");
			
			for(var i = 0; i < obj.length; i++){
				
				var textNode = document.createTextNode(document.getElementsByTagName("input").item(i).value);
				var newObj = document.createElement("div");
				obj.item(i).onmouseover = function (e){
					var x = e.clientX;
					var y = e.clientY;

					newObj.style.position = "absolute";
					newObj.style.width = "250px";
					newObj.style.height = "50px";
					newObj.style.top = y + 10 + "px";
					newObj.style.left = x + 10 + "px";
					newObj.style.backgroundColor = "#FFCCCC";
					newObj.appendChild(textNode);
					this.property = newObj;
					this.appendChild(this.property);
				};
				obj.item(i).onmouseout = function (e){
					this.removeChild(this.property);
				}
			}
		}catch(e){
			alert(e.stack);
		}
	};

//-->
</script>
</head>
<body>
	<ul>
		<li alt="あいうえお"><input type="hidden" value="あいうえお" />サンプル00</li>
		<li alt="かきくけこ"><input type="hidden" value="かきくけこ" />サンプル01</li>
		<li alt="さしすせそ"><input type="hidden" value="さしすせそ" />サンプル02</li>
		<li alt="たちつてと"><input type="hidden" value="たちつてと" />サンプル03</li>
		<li alt="なにぬねの"><input type="hidden" value="なにぬねの" />サンプル04</li>
		<li alt="はひふへほ"><input type="hidden" value="はひふへほ" />サンプル05</li>
		<li alt="まみむめも"><input type="hidden" value="まみむめも" />サンプル06</li>
	</ul>
</body>
</html>
```

まあ、もちろんあれですよ。
イベント発火してるときには、for文のiは既に限界突破してるってやつ。
次に、みんな大好きクロージャーで書いたもの。

```html:closure.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="HTML5">
<meta name="description" content="HTML5の解説">
<title>HTML5リファレンス</title>
<style type="text/css">
<!--
	li{
		width: 150px;
		height:50px;
		margin:20px;
		background-color: #F9F9F9;
		display: block;
	}
-->
</style>
<script type="text/javascript">
//<!--
	
	window.onload = function (e){
		try{
			var obj = document.getElementsByTagName("li");
			
			for(var i = 0; i < obj.length; i++){
				
				obj.item(i).onmouseover = (function (index){
					var newObj = document.createElement("div");	
					var textNode = document.createTextNode(document.getElementsByTagName("input").item(index).value);
					return function (e){
						var x = e.clientX;
						var y = e.clientY;
		
						newObj.style.position = "absolute";
						newObj.style.width = "250px";
						newObj.style.height = "50px";
						newObj.style.top = y + 10 + "px";
						newObj.style.left = x + 10 + "px";
						newObj.style.backgroundColor = "#FFCCCC";
						newObj.appendChild(textNode);
						this.property = newObj;
						this.appendChild(this.property);
					}
				}(i))
				obj.item(i).onmouseout = (function (index){
					return function (e){
						this.removeChild(this.property);
					}
				}(i));
			}
		}catch(e){
			alert(e.stack);
		}
	};

//-->
</script>
</head>
<body>
	<ul>
		<li alt="あいうえお"><input type="hidden" value="あいうえお" />サンプル00</li>
		<li alt="かきくけこ"><input type="hidden" value="かきくけこ" />サンプル01</li>
		<li alt="さしすせそ"><input type="hidden" value="さしすせそ" />サンプル02</li>
		<li alt="たちつてと"><input type="hidden" value="たちつてと" />サンプル03</li>
		<li alt="なにぬねの"><input type="hidden" value="なにぬねの" />サンプル04</li>
		<li alt="はひふへほ"><input type="hidden" value="はひふへほ" />サンプル05</li>
		<li alt="まみむめも"><input type="hidden" value="まみむめも" />サンプル06</li>
	</ul>
</body>
</html>

```
うん。ご存知、親スコープのiをローカルスコープのindexで閉じ込めちゃってます。
これがやりたかった。
以上。