[Javascript] 자바스크립트 HTML 태그 속성 제어, window onload 함수(BOM)
- 웹 개발/Javascript
- 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 |
'웹 개발 > Javascript' 카테고리의 다른 글
| [Javascript] 자바스크립트, location, history 객체 (1) | 2019.04.15 |
|---|---|
| [Javascript] 자바스크립트, window 객체로 새창 띄우기(자식창 띄우기) (0) | 2019.04.15 |
| [Javascript] 자바스크립트 키보드 관련 이벤트(onkeydown, onkeyup, onkeypress) (0) | 2019.04.07 |
| [Javascript] 자바스크립트 마우스 이벤트(mouse event) (0) | 2019.04.06 |
| [Javascript] 자바스크립트 이벤트(Event) (0) | 2019.04.06 |