개발자의 길/Javascript

자바스크립트 이벤트(Event) 03

모쿠 2017. 4. 7. 15:04

<자바스크립트 이벤트>


<29_event3.html>


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
 
<h1>HTML event</h1>
<input type="text" name="userid" id="userid" autofocus
    onfocus="changeBgColor(this)"
    onblur="resetBgColor(this)"
    onchange="toUpper(this)"/>
 
<br/>
 
<select onchange="select(this)">
    <option value="1">빨강</option>
    <option value="2">녹색</option>
    <option value="3">파랑</option>
</select>
 
<script type="text/javascript">
// onfocus: 포커스를 받았을 때
// -> 입력상자(input)의 배경색을 바꿈
function changeBgColor(input){
    input.style.backgroundColor = 'lightyellow';
}
 
// onblur: 포커스를 잃었을 때
// -> 입력상자(input)의 배경색을 원래대로 바꿈
function resetBgColor(input){
    input.style.backgroundColor = 'white';
}
 
// onchange: 입력 내용이 바꼈을 때(입력 후 엔터나 탭 키 입력했을 때)
// -> 입력 내용을 모두 대문자로 바꿈
function toUpper(input){
    input.value = input.value.toUpperCase();
    
}
 
function select(sel) {
    var color = sel.value;
    // document.body.style.backgroundColor = color;
    switch(color){
    case '1':
        document.body.style.backgroundColor = 'red';
        break;
    case '2':
        document.body.style.backgroundColor = 'green';
        break;
    case '3':
        document.body.style.backgroundColor = 'blue';
        break;
    default:
        document.body.style.backgroundColor = 'white';
    }
}
</script>
 
</body>
</html>
cs



<출력화면>


- 실행 전

- 실행 후


저작자표시 비영리