crongro/test code for debugging learning

## test code for debugging learning
<!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"
    }
  ];

  function registerEvents() {
    var elBase = document.querySelector(".testButton");
    elBase.addEventListener("click", function(e){
      toggleLayer();
    });
  }

  function toggleLayer() {
    var elTarget = document.querySelector(".showLayer");
    var sCurDisplayStyle = elTarget.style.display;

    if(sCurDisplayStyle) {
      elTarget.style.display = "block";
      insertMessage(elTargets);
    } else  {
      elTarget.style.display = "none";
    }
  }

  function insertMessage(elParent) {
    var sResult = null;

    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(){
    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"
	}
	];

	function registerEvents() {
	var elBase = document.querySelector(".testButton");
	elBase.addEventListener("click", function(e){
	toggleLayer();
	});
	}

	function toggleLayer() {
	var elTarget = document.querySelector(".showLayer");
	var sCurDisplayStyle = elTarget.style.display;

	if(sCurDisplayStyle) {
	elTarget.style.display = "block";
	insertMessage(elTargets);
	} else {
	elTarget.style.display = "none";
	}
	}

	function insertMessage(elParent) {
	var sResult = null;

	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(){
	registerEvents();
	},false);



	</script>
	</body>

	</html>