개발 공부/Javascript
웹브라우저 Javascript - 이벤트, 네트워크 통신, 활용
maxlafe
2021. 1. 5. 15:37
웹브라우저 Javascript (자바스크립트)
8. 문서의 기하학적 특성
8.1 문서의 기하학적 특성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding:0;
margin:0;
}
#target{
width:100px;
height:100px;
border:50px solid #1065e6;
padding:50px;
margin:50px;
}
</style>
</head>
<body>
<div id="target">
Coding
</div>
<script>
var t = document.getElementById('target');
console.log(t.getBoundingClientRect());
</script>
</body>
</html>
9. 이벤트
9.1 이벤트
이벤트는 어떤 사건을 의미한다. 브라우저에서 사건이란 사용자가 클릭을 했을 때, 스크롤을 했을 때, 필드의 내용을 바꿨을 때와 같은 것을 의미한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" onclick="alert(window.location)" value="alert(window.href)"/>
<input type="button" onclick="window.open('bom.html')" value="window.open('bom.html')"/>
<input type="text" onchange="alert(this.value)") />
</body>
</html>button 태그가 event target(event가 발생하는 대상)
click이 event type.
event가 발생할 때의 코드를 event handler라고 함
9.2 등록방법 & inline
inline 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" />
<!-- 자기 자신을 참조하는 불편한 방법 -->
<input type="button" onclick="alert('Hello world, ' + this.value);" value="button"/>
<!-- this로 간단하게 참조할 수 있다 -->
</body>
</html>getElementById는 한 개의 개체만 return한다.
id 중복일 경우 return x
9.3 프로퍼티 리스너
이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다.
event의 target 프로퍼티는 그 이벤트가 어디서 발생한 것인지를 알려주는 프로퍼티이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="target" value="button"/>
<script>
var t = document.getElementById('target');
t.onclick = function() {
alert('Hello World, ' + event.target.value);
}
</script>
</body>
</html>console.dir()은 안에 들어오는 객체의 property들을 쉽게 볼 수 있도록 해 준다.
console.dir(event)로 속성들을 알 수 있다(이벤트가 발생한 시기의 여러 속성을 알 수 있다)
internet explorer 8 이하에서는 event 객체를 받을 수 없다.
window.event라고 접근해야 받아올 수 있다.
이것을 해결할 수 있는 방법
var event = event || window.event;
event가 있다면 event를 받아 오고, 만약 없다면 || 기호 뒤의 인자를 사용한다.
비슷하게 var target = event.target || event.srcElement; 로 크로스 브라우징 문제를 해결할 수 있다.
9.4 addEventListener()
이벤트를 등록하는 가장 권장되는 방식이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="target" value="button">
<input type="button" id="target2" value="button">
<script>
var t = document.getElementById('target');
t.addEventListener('click', function(event) {
alert('Hello World, ' + event.target.value);
});
//크로스 브라우징 이슈
var t2 = document.getElementById('target2');
if(t2.addEventListener) {
//이렇게 t2 안에 해당 프로퍼티가 있는지 검사한다.
//없다면 undefined로 나올 것이다.
t2.addEventListener('click', function(event) {
alert('Hello World, ' + event.target.value);
});
} else if(t2.attachEvent) {
t2.attachEvent('onclick', function(event) {
alert('Hello World, ' + event.target.value);
});
}
</script>
</body>
</html>
attachEvent는 꼭 onclick을 붙여줘야 한다.
최근에는 라이브러리들이 알아서 다 해 주긴 한다.
중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 것이다.
property 방식은 단 하나의 event handler만을 사용할 수 있지만
add 방식은 list를 추가하는 것이기 때문에 여러 가지를 넣을 수 있다.
<input type="button" id="target3" value="button3">
<script>
var t3 = document.getElementById('target3');
t3.addEventListener('click', function(event) {
alert(1);
});
t3.addEventListener('click', function(event) {
alert(2);
});
t3.addEventListener('click', function(event) {
alert(3);
});
</script>
<input type="button" id="t1" value="button1"/>
<input type="button" id="t2" value="button2"/>
<script>
var c1 = document.getElementById('t1');
var c2 = document.getElementById('t2');
function btn_listener(event) {
switch(event.target.id) {
case 't1':
alert(1);
break;
case 't2':
alert(2);
break;
}
}
c1.addEventListener('click', btn_listener);
c2.addEventListener('click', btn_listener);
</script>하나의 event handler를 여러 개의 event target에 등록할 수 있다.
(재활용 가능)
9.5 이벤트 전파(버블링과 캡쳐링)
여러 태그들이 중첩되어 있을 때
상위 태그부터 아래 태그로 evnet handler가 호출되는 것을 capturing이라고 한다.
(부모 event -> 자식 evnet handler)
반대로 가장 깊숙한 곳에서부터 event handler 호출이 진행되는 것을 bubbling이라고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {border:5p solid red; padding:30px;}
body {border: 5px solid green; padding: 30px; }
fieldset {border: 5px solid blue; padding: 30px;}
input {border: 5px solid black; padding: 30px;}
</style>
</head>
<body>
<fieldset>
<legend>event propagation</legend>
<input type="button" id="target" value="target">
</fieldset>
<script>
function handler(event) {
var phases = ['capturing', 'target', 'bubbling']
console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
//event.target.nodeName의 값은 항상 깊은 곳에 있는 element
//this.nodeName은 현재 evnet가 호출된 element
}
document.getElementById('target').addEventListener('click', handler, true);
document.querySelector('fieldset').addEventListener('click', handler, true);
document.querySelector('body').addEventListener('click', handler, true);
document.querySelector('html').addEventListener('click', handler, true);
</script>
</body>
</html>
<script>
function handler(event) {
var phases = ['capturing', 'target', 'bubbling']
console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
//event.target.nodeName의 값은 항상 깊은 곳에 있는 element
//this.nodeName은 현재 evnet가 호출된 element
}
document.getElementById('target').addEventListener('click', handler, false);
document.querySelector('fieldset').addEventListener('click', handler, false);
document.querySelector('body').addEventListener('click', handler, false);
document.querySelector('html').addEventListener('click', handler, false);
</script>
세번째 인자는 capturing이나 bubbling 기법 사용 유무이다.
기본은 false이다.
capturing은 과거의 브라우저에서는 많이 지원하지 않는다.
이벤트 전파에 대한 규약이다.
event propagation을 막는 방법으로는
event.stopPropagation();이다.
9.6 기본동작의 취소
웹브라우저의 구성 요소들은 각각 기본적인 동작 방법들을 가지고 있다.
이러한 기본동작들을 기본 이벤트라고 하는데, 사용자가 만든 이벤트를 이용해 이러한 기본 동작을 취소할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<label for="">prevent event on</label>
<input type="checkbox" id="prevent" name="eventprevent" value="on"/>
</p>
<p>
<a href="http://opentutorials.org" onclick="if(document.getElementById('prevent').checked) return false;">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org" onsubmit="if(document.getElementById('prevent').checked) return false;">
<input type="submit"/>
</form>
</p>
</body>
</html>return false를 해 주면, 브라우저가 기본적으로 가지고 있는 동작을 취소할 수 있게 되는 것(인라인 방식의 경우)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<label for="">prevent event on</label>
<input type="checkbox" id="prevent" name="eventprevent" value="on"/>
</p>
<p>
<a href="http://opentutorials.org">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org">
<input type="submit"/>
</form>
</p>
<script>
document.querySelector('a').onclick=function(event) {
if(document.getElementById('prevent').checked)
return false;
};
document.querySelector('form').onclick = function(event) {
if(document.getElementById('prevent').checked)
return false;
};
</script>
<!--
<script>
document.querySelector('a').addEventListener('click', function(event) {
if(document.getElementById('prevent').checked)
event.preventDefault();
})
documetn.querySelector('form').addEventListener('submit', function(event) {
if(document.getElementById('prevent').checked)
event.preventDefault();
})
// 이런 방법도 존재한다.
// ie9이하에선 event.returnValue를 false를 해야 한다.
-->
</body>
</html>
9.7 폼
submit : 폼의 정보를 서버로 전송하는 명령인 submit 시에 일어난다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="result.html" id="target">
<label for="name">name</label>
<input type="name" id="name">
<input type="submit">
</form>
<script>
var t = document.getElementById('target');
t.addEventListener('submit', function(event) {
if(document.getElementById('name').value.length===0) {
alert('Name 픨드 값이 누락되었습니다');
event.preventDefault();
}
});
</script>
</body>
</html>change : 폼 컨트롤 값이 변경되었을 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="result"></p>
<input type="name" id="target">
<script>
var t = document.getElementById('target');
t.addEventListener('change', function(event) {
document.getElementById('result').innerHTML = event.target.value;
});
</script>
</body>
</html>
blur, focus : focus는 엘리먼트에 포커스가 생겼을 때, blur는 포커스가 나갔을 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="name" id="target">
<script>
var t = document.getElementById('target');
t.addEventListener('blur', function(event) {
alert('blur');
});
t.addEventListener('focus', function(event) {
alert('focus');
});
</script>
</body>
</html>
9.8 문서 로딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//html은 위에서 아래로 문서를 읽기 때문에
//head에 javascript를 넣는다면 body의 target element를 찾지 못한다
var t = document.getElementById('target');
console.log(t);
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//html은 위에서 아래로 문서를 읽기 때문에
//head에 javascript를 넣는다면 body의 target element를 찾지 못한다
//var t = document.getElementById('target');
//console.log(t);
window.addEventListener('load', function() {
var t = document.getElementById('target');
console.log(t);
});
//window.onload = function() 으로도 실행 가능
//모든 리소스가 다 다운로드 될 때까지 어플리케이션 실행이 지연될 수도 있다
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.addEventListener('DOMContentLoaded', function() {
var t = document.getElementById('target');
console.log(t);
});
</script>
</head>
<body>
<p id="target">Hello</p>
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" alt="">
</body>
</html>목적은 웹페이지 로딩이기 때문에,
DOM에 관련된 content들이 로드되고 나면 즉 이미지들이 다운로드 되는 것을 기다리지 않고
모든 html 태그가 ready되게 되면, 화면에 렌더링이 끝나면 이 이벤트가 발생하게 된다.
9.9 마우스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: black;
color: white;
}
#target {
width:200px;
height: 200px;
background-color: green;
margin:10px;
}
table {
border-collapse: collapse;
margin: 10px;
float: left;
width: 200px;
}
td, th {
padding: 10px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="target"></div>
<table>
<tr>
<th>event type</th>
<th>info</th>
</tr>
<tr>
<td>click</td>
<td id="elmclick"></td>
</tr>
<tr>
<td>dbclick</td>
<td id="elmdblclick"></td>
</tr>
<tr>
<td>mousedown</td>
<td id="elmmousedown"></td>
</tr>
<tr>
<td>mouseup</td>
<td id="elmmouseup"></td>
</tr>
<tr>
<td>mousemove</td>
<td id="elmmousemove"></td>
</tr>
<tr>
<td>mouseover</td>
<td id="elmmouseover"></td>
</tr>
<tr>
<td>mouseout</td>
<td id="elmmouseout"></td>
</tr>
<tr>
<td>contextmenu</td>
<td id="elmcontextmenu"></td>
</tr>
</table>
<table>
<tr>
<th>key</th>
<th>info</th>
</tr>
<tr>
<td>event.altKey</td>
<td id="elmaltkey"></td>
</tr>
<tr>
<td>event.ctrlKey</td>
<td id="elmctrlkey"></td>
</tr>
<tr>
<td>event.shiftKey</td>
<td id="elmshiftkey"></td>
</tr>
</table>
<table>
<tr>
<th>position</th>
<th>info</th>
</tr>
<tr>
<td>event.clientX</td>
<td id="elemclientx"></td>
</tr>
<tr>
<td>event.clientY</td>
<td id="elemclienty"></td>
</tr>
</table>
<script>
var t = document.getElementById('target');
function handler(event) {
var info = document.getElementById('elm'+event.type);
var time = new Date();
var timestr = time.getMilliseconds();
info.innerHTML = (timestr);
if(event.altKey) {
document.getElementById('elmaltkey').innerHTML = timestr;
}
if(event.ctrlKey) {
document.getElementById('elmctrlkey').innerHTML = timestr;
}
if(event.shiftKey) {
document.getElementById('elmshiftkey').innerHTML = timestr;
}
document.getElementById('elemclientx').innerHTML = event.clientX;
document.getElementById('elemclienty').innerHTML = event.clientY;
}
t.addEventListener('click', handler);
t.addEventListener('dblclick', handler);
t.addEventListener('mousedown', handler);
t.addEventListener('mouseup', handler);
t.addEventListener('mousemove', handler);
t.addEventListener('mouseover', handler);
t.addEventListener('mouseout', handler);
t.addEventListener('contextmenu', handler);
</script>
</body>
</html>
9.10 jQuery 이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="pure" value="pure"/>
<input type="button" id="jquery" value="jQuery"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var target = document.getElementById('pure');
if(target.addEventListener) {
target.addEventListener('click', function(event) {
alert('pure');
});
} else {
target.attachEvent('onclick', function(event) {
alert('pure');
});
}
$('#jquery').on('click', function(event) {
alert('jQuery');
})
</script>
</body>
</html>jQuery가 좀 더 사용자 친화적이라고 할 수 있다.
9.11 onAPI 사용법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('ul').on('click', 'a, li', function(event) {
console.log(this.tagName);
})
//ul에 이벤트를 설치했지만 selector로 필터링 했으므로
//실제로는 ul 내부에 있는 a와 li 태그에만 이벤트가 발생한다!
</script>
</body>
</html>
script가 위에 있는 경우 이렇게 설치하여 아직 존재하지 않는 element에 대해서도 event를 설치할 수 있다.
(이미 존재하는 이벤트에 설치하여 나중에 필터링되도록 함)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="target">
<p id="status"></p>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var handler = function(e) {
$('#status').html(e.type);
}
$('#target').on {
{
'focus':handler,
'blur': handler
}
}
//$('#target').on('focus', handler).on('blur', handler);
/*
$('#target').on('focus blur', function(e) {
$('#status').html(e.type);
}) */ //이것도 가능
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="target">
<input type="text" id="remove" value="remove"/>
<p id="status"></p>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var handler = function(e) {
$('#status').text(e.type + Math.random());
};
$('#target').on('focus blur', handler)
$('#target').on('focus', function(e) {
alert(1);
});
$('#remove').on('click', function(e) {
$('#target').off('focus', handler);
})
</script>
</body>
</html>remove로 저장된 이벤트를 제거할 수 있다. 별다른 이벤트 파라미터를 넣지 않으면
지정된 모든 이벤트가 사라진다.
10. 네트워크 통신
10.1 Ajax
Ajax는 Asynchronous Javascript and XML의 약자이다.
자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다.
원래 웹브라우저는 대단히 정적인 시스템이다. 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했다.
그러다 Ajax 개념이 도입되었다. 웹브라우저와 웹서버가 내부적으로 데이터 통신을 할 수 있게 된 것이다.
변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지 로딩 없이 서비스를 사용할 수 있게 한다.
XMLHttpRequest
time.php
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone("asia/seoul"));
echo $d->format('H:i:s');demo1.html이 time.php의 정보를 가져오게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>time : <span id="time"></span></p>
<input type="button" id="execute" value="execute"/>
<script>
document.querySelector('input').addEventListener('cick', function(event) {
var xhr = new XMLHttpRequest();
xhr.open('GET', './time.php');
//GET 방식으로 time.php resource와 통신한다.
//각각 form의 method, action attrivute와 비슷한 방식의 parameter
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
document.querySelector('#time').innerHTML = xhr.responseText;
}
//readyState는 상태 체크(4번이 모든 통신이 끝났을 때를 의미)
//status는 communication의 결과로 200은 성공을 의미한다.
} //각각의 상태 변화마다 onreadystatechange 이벤트 핸들러가 작동한다.
xhr.send(); //Ajax의 객체가 통신을 시작한다.
});
</script>
</body>
</html>
POST 방식
demo2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p> timem : <span id="time"></span></p>
<select name="" id="timezone">
<option value="Asia/Seoul">asia/seoul</option>
<option value="America/New_York">America/New_York</option>
</select>
<select name="" id="format">
<option value="Y-m-d H:i:s">Y-m-d H:i:s</option>
<option value="Y-m-d">Y-m-d</option>
</select>
<input type="button" id="execute">
<script>
document.querySelector('input').addEventListener('click', function(event) {
var xhr = new XMLHttpRequest();
xhr.open('POST', './time2.php');
xhr.onreadystatechange = function() {
document.querySelector('#time').innerHTML = xhr.responseText;
}
var data = '';
data += 'timezone=' + document.getElementById('timezone').value;
data += '&format=' + document.getElementById('format').value;
xhr.sentRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //html의 form을 통해 전송한 정보처럼 다룰 수 있다.
xhr.send(data);
});
</script>
</html>
time2.php
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($_POST['timezone]));
echo $d1->format($_POST['format']);
?>
10.2 JSON
Javscript Object Notation의 약자로 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
JSON.pare(info);
라고 하면 javascript에서 제어할 수 있는 format으로 바꿀 수 있다.
for(var name in infoobj {
console.log(name, infoobj[name]);
}var infostr = JSON.stringify(infoobj);
라고 하면 객체를 JSON format으로 바꾼 String을 결과로 받게 된다.
time.php
<?php
$timezones = ['Asia/Seoul", "Amirica/New_York'];
echo implode(',', $timezones);
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #272822;
color: #8f908a;
font-size: 200%;
font-family: georgia;
}
</style>
</head>
<body>
<p id="timezones"></p>
<input type="button" id="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event) {
var xhr = ne wXMLHttpRequest();
xhr.open('GET', './time.php');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4&& xhr.status ===200) {
var _tzs = xhr.responseText;
var tzs = _tzs.split(',');
//문자열 객체를 , 마다 쪼개 하나의 배열에 담는다.
var _str = '';
for(var i = 0; i<tzs.length; i++) {
_str += '<li>' + tzs[i] + '</li>';
}
_str = '<ul>' + _str + '</ul>';
document.querySelector('#timezones').innerHTML = _str;
}
}
xhr.send();
});
</script>
</body>
</html>
위의 예제는 JSON을 사용하지 않을 때 php와 javascript 간의 통신이다.
php의 데이터를 문자열로 받아온 뒤, 그것을 받아서 split으로 배열화를 해 주어야 한다.
다차원 배열일수록, 데이터가 복잡할수록 이것을 다시 배열화 해 주는 것은 기하급수적으로 복잡해진다.
time_advance.php
<?php
$timezones = ["Asia/Seoul", "America/New_York"];
echo jso_encode($timezones);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #272822;
color: #8f908a;
font-size: 200%;
font-family: georgia;
}
</style>
</head>
<body>
<p id="timezones"></p>
<input type="button" id="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event) {
var xhr = ne wXMLHttpRequest();
xhr.open('GET', './time_advance.php');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4&& xhr.status ===200) {
var _tzs = xhr.responseText;
var tzs = JSON.parse(_tzs);
var _str = '';
for(var i = 0; i<tzs.length; i++) {
_str += '<li>' + tzs[i] + '</li>';
}
_str = '<ul>' + _str + '</ul>';
document.querySelector('#timezones').innerHTML = _str;
}
}
xhr.send();
});
</script>
</body>
</html>
10.3 jQuery Ajax
jQuery를 이용해 Ajax를 사용하게 되면 크로스브라우징 문제를 jQuery가 알아서 해결해준다.
jQuery.ajax([setting])
setting는 Ajax의 통신을 위한 옵션을 담고 있는 객체가 들어간다.
- data : 서버로 데이터를 전송할 때
- dataType : 서버 측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정
- success : 성공했을 때 호출할 콜백 함수 지정
- type : 데이터 전송 방법(get, post)
위의 time2.php를 이용한 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<select name="" id="timezone">
<option value="Asia/Seoul">asia/seoul</option>
<option value="America/New_York">America/New_York</option>
</select>
<select name="" id="format">
<option value="Y-m-d H:i:s">Y-m-d H:i:s</option>
<option value="Y-m-d">Y-m-d</option>
</select>
</form>
<input type="button" id="execute">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#execute').click(function() {
$.ajax({
url: './time2.php',
type: 'post',
data: $('form').serialize(),
success: function(data) {
$('#time').text(data);
}
})
})
</script>
</body>
</html>
10.4 Youtube 재생시간 구하기
var times = document.querySelectorAll('.pl-video .pl-video-time .timestamp span');
var duration = 0;
for(var i = 0; i<times.length; i++) {
var t = times[i];
t = t.innerText;
t = t.split(':');
min = t[0];
sec = t[1];
duration = duration + parseInt(sec) + parseInt(min) * 60;
}
console.log(duration/60/60);