javascript each Closure 확장

computer programming 2009. 8. 31. 13:34

<html><head>
<script>
(function () {
  var swapper = function (a,r,e) {
   var x = a[e];
   a[e] = a[r];
   a[r] = x;
  };
  Array.prototype.shuffle = function () {
   var i,L;
   i = L = this.length;
   while (i--) swapper(this,Math.floor(Math.random()*L),i);
  };
  Array.prototype.each = function(fun)
  {
   if (typeof(fun) != "function") throw new TypeError();
   var thisp = arguments[1];
   for (var key in this){
    if(typeof(this[key])=="function") continue;
    fun.call(thisp, key, this[key]);
   }
  };
})();

var words = new Array();
var fid=document.getElementById;
var BORDER_STYLE_CLEAR="2px solid #FFFFFF";
var BORDER_STYLE_OVER="2px solid #FFCC00";

onload=function(){
initImage();
doProcess();
}

function initImage(){
  words.push("bend.jpg");
  words.push("carry.jpg");
  words.push("catch.jpg");
  words.push("climb.jpg");
  words.push("crawl.jpg");
  words.shuffle();
}

function clearMemo(imgObj){
fid("MEMO").innerHTML="";
imgObj.style.border = BORDER_STYLE_CLEAR;
}

function printMemo(imgObj){
  var fileNameArr=imgObj.src.split("/");
  var fileName=fileNameArr[fileNameArr.length-1];
  var name=fileName.split(".")[0].replace(".*/","");
  fid("MEMO").innerHTML=name+"<img src='"+fileName+"' align=top>";
  imgObj.style.border = BORDER_STYLE_OVER;

// style="background: url(http://source.img) no-repeat; margin-left: 20px; padding: 10px; width:300px; height:200px;" >
}

function doProcess(){
var str = "";

words.each( function(key, value){

   str = str + "<img src='" + value + "' " +
    " onmouseover='printMemo(this)' " +
    " onmouseout='clearMemo(this)' " +
    " style='border:"+BORDER_STYLE_CLEAR+";height:64px;'>";

});

// 참고: http://www.w3schools.com/tags/tag_IMG.asp

fid("SUMNAIL").innerHTML = str;
}

</script>
</HEAD>