crongro/0316_2

## 0316_2
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>testcode</title>
    <style type="text/css" media="screen">
      .testButton{width:400px;height:50px;}
      .showLayer{width:400px;height:400px;background:pink}
      .showLayer > div {padding: 10px; box-sizing: border-box; }
    </style>
</head>

<body>
  <div class="container">
    <button class="testButton">
    </button>
  </div>
  <div class="showLayer" style="display:none;">
  </div>

  <script>
    var sDATA = [
    {
      "name"  : "NHN NEXT",
      "age" : 4,
      "location"  : "seongNam city pangyo dong"
    },
    {
      "name"  : "KAIST",
      "age" : 29,
      "location"  : "daejeon"
    },
    {
      "name"  : "SDS MULTICAMPUS",
      "age" : 10,
      "location"  : "seoul kangNam gu"
    }
  ];

  var myObj = {
    registerEvents : function() {
      var elBase = document.querySelector(".testButton");
      elBase.addEventListener("click", function(e){
        this.toggleLayer();
      });
    },
    toggleLayer : function(){
      var elTarget = document.querySelector(".showLayer");
      var sCurDisplayStyle = elTarget.style.display;

      if(sCurDisplayStyle ==="none") {
        elTarget.style.display = "block";
        insertMessage(elTarget);
      } else  {
        elTarget.style.display = "none";
      }
    },
    insertMessage : function(elParent) {
      var sResult = "";
      for (var i = 0 , len = sDATA.length; i < len; i++) {
        sResult += "<div><h3>" + sDATA[i].name + "</h3>" +
              "<span>" + sDATA[i].location + "</span></div>";
      }
      elParent.innerHTML = sResult;
    }
  };

  window.addEventListener("load", function(){
    myObj.registerEvents();
  },false);


  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>testcode</title>
	<style type="text/css" media="screen">
	.testButton{width:400px;height:50px;}
	.showLayer{width:400px;height:400px;background:pink}
	.showLayer > div {padding: 10px; box-sizing: border-box; }
	</style>
	</head>

	<body>
	<div class="container">
	<button class="testButton">
	</button>
	</div>
	<div class="showLayer" style="display:none;">
	</div>

	<script>
	var sDATA = [
	{
	"name" : "NHN NEXT",
	"age" : 4,
	"location" : "seongNam city pangyo dong"
	},
	{
	"name" : "KAIST",
	"age" : 29,
	"location" : "daejeon"
	},
	{
	"name" : "SDS MULTICAMPUS",
	"age" : 10,
	"location" : "seoul kangNam gu"
	}
	];

	var myObj = {
	registerEvents : function() {
	var elBase = document.querySelector(".testButton");
	elBase.addEventListener("click", function(e){
	this.toggleLayer();
	});
	},
	toggleLayer : function(){
	var elTarget = document.querySelector(".showLayer");
	var sCurDisplayStyle = elTarget.style.display;

	if(sCurDisplayStyle ==="none") {
	elTarget.style.display = "block";
	insertMessage(elTarget);
	} else {
	elTarget.style.display = "none";
	}
	},
	insertMessage : function(elParent) {
	var sResult = "";
	for (var i = 0 , len = sDATA.length; i < len; i++) {
	sResult += "<div><h3>" + sDATA[i].name + "</h3>" +
	"<span>" + sDATA[i].location + "</span></div>";
	}
	elParent.innerHTML = sResult;
	}
	};

	window.addEventListener("load", function(){
	myObj.registerEvents();
	},false);


	</script>
	</body>

	</html>