티스토리 뷰
출처 : http://namocom.tistory.com/
나모의 노트
기기에 브라우저 장치가 되는데 디스플레이 크기를 구해야 되었다.
처음에는 이미지를 표시해서 몇 픽셀인지 구하려다가 자바스크립트에 화면 크기를 구하는 방법이 있다는 것이 생각났다.
참고: http://stackoverflow.com/questions/2474009/browser-size-width-and-height
var size = {
width: window.innerWidth || document.body.clientWidth,
height: window.innerHeight || document.body.clientHeight }
이것을 바탕으로 HTML을 만들어보았다. 
di.html
전체화면 모드일 경우에는 모니터 해상도를 구할 수 있다.
1) HTML
HTML에 가로, 세로를 표시할 span 엘리먼트를 추가했다.
<body>
<h3>Current Display info</h3>
<div>w: <span id="dispWidth">widht</span>px / h: <span id="dispHeight">height</span>px</div>
</body>
2) JavaScript 1
stackoverflow에서 구한 코드를 바탕으로 화면 크기를 구해오는 함수로 래핑을 하였다.
function getDisplayInfo() {
var size = {
width: window.innerWidth || document.body.clientWidth,
height: window.innerHeight || document.body.clientHeight
}
return size;
}
3) JavaScript 2
HTML 로드가 완료 후, 크기를 구해서 HTML에 값을 설정하기 위한 함수를 만들었다.
onLoadHandler에서는 위에서 만든 getDisplayInfo 를 호출한다.
function setElementById(obj, value) {
var target = document.getElementById(obj);
target.innerHTML = value;
}
function onLoadHandler() {
var size = getDisplayInfo();
setElementById("dispWidth", size.width);
setElementById("dispHeight", size.height);
}
4) HTML 로드 이벤트를 핸들러 함수와 연결해준다.
window.onload = onLoadHandler;
전체 소스코드는 아래와 같다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Browser Size </title>
<script type="text/javascript">
<!--
function getDisplayInfo() {
var size = {
width: window.innerWidth || document.body.clientWidth,
height: window.innerHeight || document.body.clientHeight
}
return size;
}
function setElementById(obj, value) {
var target = document.getElementById(obj);
target.innerHTML = value;
}
function onLoadHandler() {
var size = getDisplayInfo();
setElementById("dispWidth", size.width);
setElementById("dispHeight", size.height);
}
window.onload = onLoadHandler;
//-->
</script>
</head>
<body>
<h3>Current Display info</h3>
<div>w: <span id="dispWidth">widht</span>px / h: <span id="dispHeight">height</span>px</div>
</body>
</html>
물론 처음부터 이렇게 모듈을 짠 것은 아니였다. 몇 번의 리팩토링을 거쳐서 이렇게 된 것이다.
처음 완성코드는 아래와 같이 단일 함수로 되어 있었다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Browser Size </title>
<script type="text/javascript">
<!--
function getDisplayInfo() {
var size = {
width: window.innerWidth || document.body.clientWidth,
height: window.innerHeight || document.body.clientHeight
}
var w = document.getElementById("dispWidth");
var h = document.getElementById("dispHeight");
w.innerHTML = size.width;
h.innerHTML = size.height;
}
window.onload = getDisplayInfo;
//-->
</script>
</head>
<body>
<h3>Current Display info</h3>
<div>w: <span id="dispWidth">widht</span>px / h: <span id="dispHeight">height</span>px</div>
</body>
</html>
getDisplayInfo 함수에 주석을 붙이다 보니 1) 크기를 구해오는 것과 2)화면 객체를 가져오는 것, 3)값을 설정하는 것 3가지 기능이 있다는 것을 알게되고 각 함수로 분리(method extract)를 하게 된 것이다.
결국 onload 이벤트의 함수 이름도 바뀌었고, 이 핸들러에서 크기를 구해오고, 화면 객체를 설정하는 역할로 바뀌게 되었다.
'javascript' 카테고리의 다른 글
| javascript 객체 리터럴 생성과 new 연산자를 이용한 객체생성의 차이점 (0) | 2016.12.21 |
|---|---|
| 함수호출 방식에 따른 this의 바인딩에 대해서...[출처:https://blog.outsider.ne.kr/439] (0) | 2016.09.16 |
| How to get selected tab index when clicking - jqueryUI - tabs (0) | 2016.08.22 |
| jQuery: data() 이해와 활용 (0) | 2016.07.13 |
| [jQuery] each 메소드 사용시 break, continue 사용 (0) | 2016.07.12 |