기기에 브라우저 장치가 되는데 디스플레이 크기를 구해야 되었다.
처음에는 이미지를 표시해서 몇 픽셀인지 구하려다가 자바스크립트에 화면 크기를 구하는 방법이 있다는 것이 생각났다.
참고: 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 이벤트의 함수 이름도 바뀌었고, 이 핸들러에서 크기를 구해오고, 화면 객체를 설정하는 역할로 바뀌게 되었다.
'Programing > 웹' 카테고리의 다른 글
| [HTML] IMG 엘리먼트에 base64를... (0) | 2014.11.11 |
|---|---|
| [CSS] CSS 스프라이트(CSS Sprites) (0) | 2014.10.17 |
| [JavaScript] 시각화(visualization) 라이브러리(그래픽, 차트 등) (2) | 2013.12.03 |
| [JavaScript] 부동소수점의 오류 예 (0) | 2013.10.28 |
| [JavaScript] null 값과 비교할 때는 반드시 비교 연산자로 === 또는 !==를 사용 (0) | 2013.10.17 |
