웹 개발/Javascript

[Javascript] 자바스크립트 HTML 태그 속성 제어, window onload 함수(BOM)

코딩하는흑구 2019. 4. 7. 14:18

HTML 태그의 속성 제어


- 자바스크립트 개발자의 접근성을 높이기 위해서 HTML 태그가 가지는 속성을 동일한 이름으로 자바스크립트에서도 제공하고 있다.(input value -> txt1.value)

- 속성의 대부분은 읽기/쓰기를 모두 지원한다.

- HTML의 속성명이 유효하지 않으면 캐멀표기법(readOnly)으로 제공한다.

- HTML의 속성값

a. 숫자 -> 숫자

b. 열거형 -> 문자열

c. 색상 -> 문자열

d. 플래그 -> 논리형(true,false)


예제보면서 공부하기!


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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/WebClientTest/css/css/basic.css">
<style>
    body{
        margin-bottom:200px;
    }
</style>
<script>
    
    var txt1, cb1, cb2, cb3, btn1;
    var cbAgree, btnNext;
    var name1,name2,cbCopy, address1,address2;
    var cbHobby, btnResult, txtResult;
    
    //<body onload="">와 동일한 역할
    window.onload = function() {
        
        // 태그들 선언.
        txt1 = window.document.form1.txt1;
        cb1 = window.document.form1.cb1;
        cb2 = window.document.form1.cb2;
        cb3 = window.document.form1.cb3;
        btn1 = window.document.form1.btn1;
        
        cbAgree = window.document.form1.cbAgree;
        btnNext = window.document.form1.btnNext;
        
        name1=window.document.form1.name1;
        name2=window.document.form1.name2;
        address1=window.document.form1.address1;
        address2=window.document.form1.address2;
        cbCopy=window.document.form1.cbCopy;
        
        cbHobby = window.document.form1.cbHobby;//체크박스 8개가 들어있는 배열이됨
        btnResult = window.document.form1.btnResult;
        txtResult = window.document.form1.txtResult;
        
        
        //click 이벤트는 마우스 관련 이벤트가 아니다.(***)
        btn1.onclick = function() {
                    
            alert(cb1.checked);
            alert(cb2.checked);
            alert(cb3.checked);
            
            
            var rb = window.document.form1.rb;//배열 반환
            //alert(rb.length);
            //alert(rb[0].checked);
            //alert(rb[1].checked);
            //alert(rb[2].checked);
            for (var i=0; i<rb.length; i++) {
                if (rb[i].checked) {
                    alert(i);
                    break;
                }
            }
            
            
        };//btn1.click
        
        
        
        //해당 컨트롤의 값이 변경될 때 발생
        //cbAgree.onclick = function() { alert("체크"); };
        cbAgree.onchange = function() { 
            //체크O, 체크X
            /* alert(cbAgree.checked); */
            
            if (cbAgree.checked) {
                btnNext.disabled = false;
            } else {
                btnNext.disabled = true;
            }
        };
        
        cbCopy.onchange = function(){
            if(cbCopy.checked){
                name2.value = name1.value;
                address2.value=address1.value;
            }else{
                //배송지를 다르게 입력하고 싶을 때
                name2.value= ""
                address2.value="";
                name2.focus(); // 활성화 이름에 포커스감
            }
        };
        
        
        btnResult.onclick = function ()     {
            txtResult.value=null;
            for (var i =0; i<cbHobby.length; i++){
                if(cbHobby[i].checked){
                    txtResult.value+=cbHobby[i].value+"\r\n";
                }else{
                    
                }
            }
        };
        
        
        
    };//window,onload
    
</script>
</head>
<body>
    <!-- ex12_attribute.htm -->
    
    <form name="form1">
        텍스트 박스 : <input type="text" name="txt1">
        <hr>
        
        <input type="checkbox" name="cb1"> 체크박스1
        <input type="checkbox" name="cb2"> 체크박스2
        <input type="checkbox" name="cb3"> 체크박스3
        <hr>
        
        <input type="radio" name="rb"> 라디오버튼1
        <input type="radio" name="rb"> 라디오버튼2
        <input type="radio" name="rb"> 라디오버튼3
        <hr>
        
        <button type="button" name="btn1">버튼</button>
        
        <hr>
        
        <h1>약관</h1>
        
        <div 
        style="width: 300px; height: 200px; border: 1px solid gray; overflow: auto; margin-bottom: 20px;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique numquam at alias nesciunt esse 
        doloribus beatae labore nobis! Nihil ex accusamus voluptate iste quasi rem possimus! Repellendus sapiente
        aperiam modi earum voluptate sunt nisi temporibus laborum unde. Repellendus velit et explicabo natus quae 
        quas distinctio ea sequi veniam voluptatibus modi provident dolores dignissimos cupiditate deleniti voluptate 
        </div>
        
        <input type="checkbox" name="cbAgree" id="cbAgree">
        <label for="cbAgree">약관에 동의합니다.</label>
        
        <input type="button" value="다음 단계로"
            name="btnNext" disabled 
            onclick="alert('다음으로...');">
        
        <hr />
        
        <h1>배송지</h1>
        <h2>회원 주소</h2>
        <input type="text" name="name1" value="홍길동" /><br />
        <input type="text" name="address1" value="서울시 강남구 역삼동" />
        
        <div style="margin-top:20px;">
            <input type="checkbox" name="cbCopy"  />
            회원과 받는분의 주소가 동일합니다.
        </div>
        
        <h2>배송 주소</h2>
        <input type="text" name="name2" placeholder="받는 분 성함" /><br />
        <input type="text" name="address2" placeholder="받는 분 주소"/>
        
        
        <hr />
        <h1>취미를 선택하세요.(중복체크 가능)</h1>
        <input type="checkbox" name= "cbHobby" value="수영"/>수영
        <input type="checkbox" name= "cbHobby" value="영화"/>영화
        <input type="checkbox" name= "cbHobby" value="독서"/>독서
        <input type="checkbox" name= "cbHobby" value="게임"/>게임
        <input type="checkbox" name= "cbHobby" value="코딩"/>코딩
        <input type="checkbox" name= "cbHobby" value="요리"/>요리
        <input type="checkbox" name= "cbHobby" value="낮잠"/>낮잠
        <input type="checkbox" name= "cbHobby" value="여행"/>여행
        
        <hr />
        
        <input type="button" value="결과보기" name="btnResult"/>
        
        <hr />
        
        <textarea name="txtResult" cols="40" rows="10"></textarea>
    </form>
    
</body>
</html>
cs