2차원 배열의 개념을 이해 했으니 예제로 적용해 봅시다. 개념이 아직 잡히지 않았다면 이전 글을 참고하길 바란다.
이전 글보기: [문돌이의 IT]자바스크립트 2차원 배열 이해하기
화면의 특정 지역을 클릭 했을 때, 클릭 한 곳의 x,y 좌표를 구하는 예제이다. 배열을 선언하고 box[count]=[x,y]; 형태로 x,y의 좌표를 지정해 주는 게 핵심이다.
<script>
var box=new Array();
var count=0;
var xy;
function thisPos(){
var x=event.clientX;
var y=event.clientY;
box[count]=[x,y];
xy.innerHTML=xy.innerHTML+ "X좌표:" + box[count][0] + ", Y좌표:" + box[count][1] + "<br>";
}
→ box[count][0] 은 첫 번째 칸을, box[count][1]은 두 번째 칸을 나타낸다.
function init(){
xy=document.getElementById("xy");
}
</script>
<body onLoad="init()">
<div id="wrapper">
<div id="content" onClick="thisPos()"></div>
<div>
<div id="xy"></div>
</div>
</div>
</body>
화면을 클릭했을 때 우측 상단에 클릭한 화면의 좌표가 나오는 걸 확인할 수 있다.
'문돌이의 IT > JavaScript' 카테고리의 다른 글
| [문돌이의IT]자바스크립트 createElement(), createTextnode()로 요소 추가하기 (0) | 2016.01.22 |
|---|---|
| [문돌이의IT] 자바스크립트 id, name 속성의 차이점 (0) | 2016.01.20 |
| [문돌이의IT] 자바스크립트 Math객체로 랜덤효과 나타내기 (0) | 2016.01.19 |
| [문돌이의IT] 자바스크립트 Math객체 활용하기(Math.random(), Math.floor() 매서드) (0) | 2016.01.18 |
| [문돌이의 IT]자바스크립트 2차원 배열 이해하기 (0) | 2016.01.11 |