crongro/debug3.html

## debug3.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>1.html</title>
         <style>
        section{margin:50px}section ul{width:450px;margin:0 auto;overflow:hidden}section ul li{list-style:none;width:100px;height:100px;border:1px solid gray;line-height:100px;text-align:center;margin-right:5px;float:left}section ul li:nth-child(2){cursor:pointer}.log{width:100px;margin:0 auto}.log button{height:30px;width:100%;font-size:1em}.board{font-size:1.5em;font-weight:700;text-align:center;margin-top:10px}
        </style>
    </head>
    <body>
        <section>
            <ul>
                <li>1</li>
                <li>나를눌러봐</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </section>

<script>
var myObj = {
    str : "Hello, you did ",
    handlerPrintLog : function(result) {
        console.log('received data is "' + result + '"');
    },
    sendAjax : function(sAjaxURL) {
        var oReq = new XMLHttpRequest();
        oReq.addEventListener("load", function(e) {
            var htData = JSON.parse(oReq.responseText);
            this.handlerPrintLog(htData.title);
        });
        oReq.open("GET", sAjaxURL);
        oReq.send();
    }
}

var elSecondLI = document.querySelector("li:nth-child(2)");
var sAjaxURL = "http://jsonplaceholder.typicode.com/posts/2";
elSecondLI.addEventListener("click", myObj.sendAjax.bind(myObj, sAjaxURL), false);
 </script>

    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>1.html</title>
	<style>
	section{margin:50px}section ul{width:450px;margin:0 auto;overflow:hidden}section ul li{list-style:none;width:100px;height:100px;border:1px solid gray;line-height:100px;text-align:center;margin-right:5px;float:left}section ul li:nth-child(2){cursor:pointer}.log{width:100px;margin:0 auto}.log button{height:30px;width:100%;font-size:1em}.board{font-size:1.5em;font-weight:700;text-align:center;margin-top:10px}
	</style>
	</head>
	<body>
	<section>
	<ul>
	<li>1</li>
	<li>나를눌러봐</li>
	<li>3</li>
	<li>4</li>
	</ul>
	</section>

	<script>
	var myObj = {
	str : "Hello, you did ",
	handlerPrintLog : function(result) {
	console.log('received data is "' + result + '"');
	},
	sendAjax : function(sAjaxURL) {
	var oReq = new XMLHttpRequest();
	oReq.addEventListener("load", function(e) {
	var htData = JSON.parse(oReq.responseText);
	this.handlerPrintLog(htData.title);
	});
	oReq.open("GET", sAjaxURL);
	oReq.send();
	}
	}

	var elSecondLI = document.querySelector("li:nth-child(2)");
	var sAjaxURL = "http://jsonplaceholder.typicode.com/posts/2";
	elSecondLI.addEventListener("click", myObj.sendAjax.bind(myObj, sAjaxURL), false);
	</script>

	</body>
	</html>