세로형
Notice
Recent Posts
Recent Comments
Link
04-23 14:36
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 이벤트(mouseover, mouseenter, onclick, over시 이미지 변경), 문자열 본문

javascript

자바스크립트 이벤트(mouseover, mouseenter, onclick, over시 이미지 변경), 문자열

이수진의 블로그 2017. 8. 16. 08:47
자바스크립트 이벤트


자바스크립트에는 onclick과 같은 여러 이벤트가 있다.

다음 표를 보자

이벤트 종류
설명
onclick
해당 객체를 클릭 했을 때 이벤트
onmouseover
해당 객체에 마우스가 올라왔을때 이벤트
onmouseout
해당 객체에서 마우스가 나갔을 때 이벤트
onload
브라우저가 페이지 load를 끝냈을 때
onchange
객체가 바뀌었을 때(select 같은 태그에서)


다양한 이벤트가 있지만 대표적인 것은 이렇게 있다.

여기서 onmouseover와 onmouseenter의 차이점이 존재한다. 다음 그림을 보자.

 

 

 

반응형


이게 onmouseenter와 onmouseover의 큰 차이점이다. 
mouseenter는 해당 영역에만 적용이 되고 mouseover는 영역을 넘어서 자식에 해당되는 영역에 접근해도 이벤트가 적용이 된다.

mouseout은 말 그대로 마우스가 out이 되면 나오는 이벤트이고 click은 마우스 클릭 했을 때 나오는 이벤트이다.

클릭과 over 예제를 봐보자

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>이미지갤러리</title>
</head>
<style>
    
    #imgGallery{
        border: 3px solid orange;
        width: 300px;
        overflow: hidden
    }
    
    #imgGallery img{
        width: 300px;
    }
    
    #smallImgs img{
        float:left;
        width: 100px;
    }
    
    hr{
        margin: 0;
        padding: 0;
        size:5px;
    }
    
    
</style>
 
<script>
    window.onload = function(){
        var big = document.getElementById('bigImg');   //위에 div 객체 생성하고
        var smallImgs = document.getElementById('smallImgs');   //smallImgs 아이디를 갖고 있는 객체 ㅐㅇ성
        
        //div 객체 아래에 있는 태그값 등을 가지고 올 수 있다.!
        var bigImg = big.getElementsByTagName('img')[0];  //tag는 컬렉션(배열) 처럼 같고온다.
        //bigImg 아래에는 img가 하나뿐이니까 0번째 객체를 가지고온다.
        var smallImgThumb = smallImgs.getElementsByTagName('img'); //배열리턴
        //여기에는 img가 여러개가 있으니 배열로 가지고 있다.
        //반복문으로 각 배열에 대해 접근해서 mouseover 기능을 추가해준다.
        for(var i = 0 ; i < smallImgThumb.length ; i++){
            
            smallImgThumb[i].onmouseover = function(){
                bigImg.src = this.src;   //this는 현재 마우스가 올라간 객체.
            }
        }
        
    }
    
</script>
 
<body>
   
   <div id="imgGallery">
       
       <div id="bigImg">
           <img src="../images/1.PNG" id="a">    
       </div>
       <hr>
       <div id="smallImgs">
           <img src="../images/1.PNG">    
           <img src="../images/2.PNG">    
           <img src="../images/3.PNG">  
           
       </div>
   </div>
    
</body>
</html>
Colored by Color Scripter
cs


위는 mouseover가 되면 이미지가 바뀌는 예제이다.
자세한 설명은 주석에 달아놨다. 

자바스크립트에서 TagName과 ClassName을 갖고 오는것이 햇갈릴 수도 있다. 이것들은 Id를 갖고 오는 것처럼 1개만 갖고 오는게 아니라 배열로 가지고 온다. 즉 여러개이기 때문이다.
id는 고유값이고 TagName(div, img 등), 클래스 이름은 여러개를 설정할 수 있기 때문에 이렇게 구성되어 있는 것 같다.

이러한 특징을 잘 이해하고 있어야한다. 이게 자바스크립트에서 많이 중요한부분이다. 

마우스 클릭 예제를 봐보자

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1>해당 월의 총 날짜</h1>
   월입력 : <input type="text" id="month"><br>
   <input type="button" id="okBtn" value="확인">
   <p id="result"> 월을 입력하고 확인 버튼을 누르시오. </p>
    
</body>
</html>
 
 
<script>
    var month = 0;
    var okBtn = document.getElementById("okBtn");
    var result = document.getElementById("result");
    
    okBtn.onclick = function(){  //버튼을 클릭하면
        month = parseInt(document.getElementById("month").value);   //text의 값을 가지고 온다.
        //숫자 변환 가능 -> 숫자변환
        //숫자 변환 불가능 -> NaN;
        if(isNaN(month)){
            result.innerHTML = "문자열은 불가능합니다.";
            return;
        }
        if(month < 0 || month > 12){
            result.innerHTML = "1~ 12월입니다.";
            return;
        }
        var date = new Date(2017, month, 0);
        result.innerHTML = month+"의 마지막 날은"+date.getDate();
 
    }
</script>
Colored by Color Scripter
cs
300x250


위 예제는 사용자가 input text에서 값을 적고 버튼을 누르면 value(값)을 가지고와 해당 월의 마지막 날짜를 보여주는 예제이다.
value는 input text의 값을 가지고 오는 방법이다.
해당 버튼을 클릭 이벤트는  onclick이라는 함수를 둬서 기능을 추가한다.

이렇게 여러 이벤트를 사용할 수 있다.


문자열

자바스크립트에서 var a = ""; 과같이 받아오면 문자열로 처리한다.
그리고 다음과 같은 특징이 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>Strings and objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
    var x ="John";              // x is a string
    var y =newString("John");  // y is an object
    document.getElementById("demo").innerHTML = (x==y);
    //true
document.getElementById("demo").innerHTML = (x===y);
//false
</script>
</body>
</html>
 
 
Colored by Color Scripter
cs

new 키워드를 사용하면 object 타입으로 생성이 된다.
그래서 값을 비교하면 true가 나오지만 타입까지 비교하게 되면 false가 나오게 된다.

또한 문자열에서 따옴표(') 같은 것을 넣을때 어떻게 해야할까?

아래 예제와 같이 하면 된다.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<pi d="demo"></p>
<script>
    var x ='It\'s alright';
    var y ="We are the so-called \"Vikings\" from the north.";
    document.getElementById("demo").innerHTML = x +"<br>"+ y; 
</script>
</body>
</html>
Colored by Color Scripter
cs
문자열 메소드

문자열에는 다양한 메소드 들이 있는데 바로 소스로 보면서
주석으로 설명하겠다
먼저 indexOf()메소드(인덱스 값 반환) length()메소드(길이 반환) substr(start, end) 메소드(문자열 자르기) 메소드이다

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
 
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The indexOf() method returns the position of the first occurrence of a specified text:</p>
<p id="demo"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
    var str ="Please locate where 'locate' occurs!";
    var pos = str.indexOf("where");
    document.getElementById("demo").innerHTML = pos;
    //0부터 시작해서 몇번째에 있는지.
    document.getElementById("demo2").innerHTML = str.lastIndexOf("'");
    //'가 마지막에 사용된 곳
    var str2 ="myfile.txt";
    document.getElementById("demo3").innerHTML = str2.indexOf(".");  // . 이 사용된 인덱스
    document.getElementById("demo3").innerHTML +="\n";
    document.getElementById("demo3").innerHTML += str2.length;   //길이
    document.getElementById("demo3").innerHTML +="\n";
    document.getElementById("demo3").innerHTML += str2.substr(0, str2.indexOf("."));  //0부터 .가 사용된 인덱스 전까지 
</script>
</body>
</html>
Colored by Color Scripter
cs



slice 메소드(문자열 자르기)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
 
<p id="demo"></p>
<script>
    var str ="Apple, Banana, Kiwi";
    var res = str.slice(7,13);
    document.getElementById("demo").innerHTML = res;    //banana만 나온다.
    //7부터 13전까지 자른다.
</script>
</body>
</html>
Colored by Color Scripter
cs



replace 메소드. 문자열을 대체해준다.
하나만 대체하는 방법과 여러개를 한번에 대체하는 방법 2가지가 있다.

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
 
<!DOCTYPE html>
<html>
<body>
 
<button onclick="myFunction()">실행</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
    var str =document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","W3Schools");
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
 
얘는 첫 번째 얘만 바뀌게 한다.
 
전부 다 바꾸고 싶으면? 아래와 같이 한다.
 
 
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Replace all occurrences of "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
    var str =document.getElementById("demo").innerHTML; 
    var txt = str.replace(/Microsoft/g,"W3Schools");
    //  /g를 추가하면 전부 대체가 된다.
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
 
Colored by Color Scripter
cs




split 메소드는 문자열을 어떤 기준에 따라 배열로 바꿔준다(잘라낸다).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE html>
<html>
<body>
 
<button onclick="myFunction()">클릭</button>
<p id="test"></p>
<script>
function myFunction() {
    var str ="a,b,c,d,e,f";
    var arr = str.split(",");
    document.getElementById("test").innerHTML = arr[0];
}
</script>
</body>
</html>
Colored by Color Scripter
cs

위와같이 , 를 기준으로 문자열을 쪼갠다.

또한 아래와 같은 예제를 보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
    var str ="Hello";
    var arr = str.split("");
    var text ="";
    var i;
    for (i =0; i < arr.length; i++) {
        text += arr[i] +"<br>"
    }
    document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Colored by Color Scripter
cs


 

위와 같은 결과가 나오게 된다.

여기까지 이번장 내용 정리이고
다음엔 Math()와 ParseInt, ParseFloat() 등을 봐보겠다.

 
 

 

반응형
그리드형
저작자표시

'javascript' 카테고리의 다른 글

자바스크립트 Number(), parseInt(), parseFloat(). 문자를 숫자로 변환  (0) 2017.08.16
자바스크립트 NaN, isNan() 메소드  (0) 2017.08.16
자바스크립트 계산기 만들기  (0) 2017.08.16
자바스크립트 object, null, undefined, 함수(function)  (0) 2017.08.16
자바스크립트 기초(연산, 변수, 비교(==, ===), innerText, innerHTML)  (0) 2017.08.16
공유하기 링크
'javascript' Related Articles more
Comments