본문 바로가기
매일코딩/자바스크립트 개념

[자바스크립트 기초] 함수 이벤트 DOM을 이용한 초미니 프로젝트 1

by 인생여희 2017. 2. 28.
반응형

그동안 정리했던 자바스크립트 내용으로 아주 작고 작은 프로젝트를 만들어 보자!

이 시점에서 계속 이론만 배우면 지루하다.
작은 프로젝트로 흥미를 돋우기 위해서 배웠던 내용을 응용해서 만들 수 있는 과제(?)를 기획해 보았다.
아래코드를 보기 전에 한번 생각 해보세요~


<설명> 
테이블 칸에 있는 사진에 마우스를 올리면 해당 사진이 확대되어 나타난다.



<코드>


<!DOCTYPE>

<html>

<head>

<style>

<!-- 테이블 크기 및 테두리 설정 -->

table{width:500px;height:500px;}

td{border:solid 1px black;}

<!-- 레이아웃 설정 pic이 pic1, pic2를 깜싼다. -->

.pic:after{content:"",display:block; clear:both;}

.pic1{float:left;border:solid 1px black;}

.pic2{float:left;border:solid 1px black;

width:500px;height:500px;

}


</style>

</head>

<h1>[사진에 마우스를 올려보세요]</h1>

<body>

<div class="pic">

<div class="pic1">

<table id="table1">

<tr><td background="a1.jpg">1</td><td background="a2.jpg">2</td><td background="a3.jpg">3</td></tr>

<tr><td background="a4.jpg">4</td><td background="a5.jpg">5</td><td background="a6.jpg">6</td></tr>

<tr><td background="a7.jpg">7</td><td background="a8.jpg">8</td><td background="a9.jpg">9</td></tr>

</table>

</div>

<!-- 마우스 올린 사진이 크게 들어가는 곳 -->

<div class="pic2"><img id="imge" src="a2.jpg" width="500" height="500"></div>

</div>

<script>


//함수 선언

//매개변수 e 는 이벤트 객체이다.

function clickPic(e){

//target은 e 이벤트 객체의 속성이다.

//이벤트 발생한 요소를 구한다.

var target=e.target;

//이벤트 발생한 요소의 특성 값을 구한다.

//특성 값 a1.jpg...

//특성 종류 class, id, src, background 등

var backImg=target.getAttribute('background');


//id로 사진이 들어갈 요소 값을 구한다.

var imge=document.getElementById('imge');

//사진이 들어갈 요소값에 setAttribute 메서드를 이용해서 위에서 구한 사진 이름을 넣어준다.

imge.setAttribute('src',backImg);

}


 <!-- 각 칸의 요소 값을 구한다. -->

 var td = document.getElementsByTagName('td');

for(var a=0;td.length;a++){

<!-- 이벤트 리스너 사용 -->

<!-- 요소.addEventListener(‘노드에 바인딩될 이벤트’, 함수[, 이벤트 흐름]) -->

<!-- 각 칸에 mouseover 이벤트가 발생하면 clickPic 함수를 호출한다. -->

td[a].addEventListener('mouseover', clickPic, false);

}

</script>

</body>

</html>


<colorscripter>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE>
<html>
    <head>
    <style>
    
    <!-- 테이블 크기 및 테두리 설정 -->
     table{width:500px;height:500px;}
     td{border:solid 1px black;}
    
     <!-- 레이아웃 설정 pic이 pic1, pic2를 깜싼다. -->
    .pic:after{content:"",display:block; clear:both;}
    .pic1{float:left;border:solid 1px black;}
    .pic2{float:left;border:solid 1px black;
            width:500px;height:500px;
            }    
 
    </style>
    
    </head>
<h1>[사진에 마우스를 올려보세요]</h1>
    <body>
    <div class="pic">
        <div class="pic1">    
            <table id="table1">
            <tr><td background="a1.jpg">1</td><td background="a2.jpg">2</td><td background="a3.jpg">3</td></tr>
            <tr><td background="a4.jpg">4</td><td background="a5.jpg">5</td><td background="a6.jpg">6</td></tr>
            <tr><td background="a7.jpg">7</td><td background="a8.jpg">8</td><td background="a9.jpg">9</td></tr>
            </table>
        </div>
        
        <!-- 마우스 올린 사진이 크게 들어가는 곳 -->
        <div class="pic2"><img id="imge" src="a2.jpg" width="500" height="500"></div>    
    </div>
    
    
<script>
 
//함수 선언
//매개변수 e 는 이벤트 객체이다.
function clickPic(e){
    
    //target은 e 이벤트 객체의 속성이다.
    //이벤트 발생한 요소를 구한다.
    var target=e.target;
    
    //이벤트 발생한 요소의 특성 값을 구한다.
    //특성 값 a1.jpg...
    //특성 종류 class, id, src, background 등
    var backImg=target.getAttribute('background');
 
    //id로 사진이 들어갈 요소 값을 구한다.
    var imge=document.getElementById('imge');
    
    //사진이 들어갈 요소값에 setAttribute 메서드를 이용해서 위에서 구한 사진 이름을 넣어준다.
    imge.setAttribute('src',backImg);
                    
                    }    
 
 <!-- 각 칸의 요소 값을 구한다. -->
 var td = document.getElementsByTagName('td');
    
    for(var a=0;td.length;a++){
        
        <!-- 이벤트 리스너 사용 -->
        <!-- 요소.addEventListener(‘노드에 바인딩될 이벤트’, 함수[, 이벤트 흐름]) -->
        <!-- 각 칸에 mouseover 이벤트가 발생하면 clickPic 함수를 호출한다. -->
        
        td[a].addEventListener('mouseover', clickPic, false);
    
                                }
</script>
    </body>
</html>
cs






반응형
저작자표시

'매일코딩 > 자바스크립트 개념' 카테고리의 다른 글

[자바스크립트 기초]제이쿼리 1  (4) 2017.03.02
[자바스크립트 기초 ]이벤트의 종류와 개념 2  (2) 2017.03.01
[자바스크립트 기초 ]이벤트의 종류와 개념 1  (2) 2017.02.26
[자바스크립트 기초]DOM 문서객체모델의 이해 2  (2) 2017.02.25
[자바스크립트 기초]DOM 문서객체모델의 이해1  (4) 2017.02.24

관련글

댓글

티스토리툴바