form 태그
JavaScript 의 체계
window[브라우저에 해당하는 최상위 객체] document[브라우저에서 보여지고 있는 html에 해당] 이름[html 안에 있는 form] 이름[form 안에 있는 input] .value[form에 입력된 내용]window는 생략하는 경우가 많다.
alert() 도 원래는 window.alert() , document 도 window.document
<!doctype html> <html> <head> <script language="javascript"> function abcd() { var t = window.document.banana.apple.value; window.alert( t ); /* id 속성은 어느 요소에서든지 지정가능 : 영문으로 시작 - 겹쳐선 안되는 ( PK 역할 ) 위의 방법으로 찾아내는 것과 동일한 대상을 찾아낸다. */ var it = document.getElementById("it"); alert( it.value ); // 두 포인터가 가리키는 대상은 같은 대상이 된다. alert( document.banana.apple == it ); } </script> </head> <body> <form name="banana"> <input id="it" type="text" name="apple"/> <button onclick="abcd();">Click</button> </form> </body> </html>
var t = window.document.banana.apple.value;
var it = document.getElementById("it");banana라는 이름을 가진 form 태그의 apple 이라는 이름을 가진 input 태그에 입력된 내용은 it 라는 id 값을 가진 input 태그에 입력된 내용과 같다.
form 필수 입력사항 체크
<!doctype html> <html> <head> <script language="javascript"> /* form의 필수 입력사항을 체크하는 javascript */ function abcd() { if( document.banana.uid.value == '' ) { alert('uid는 반드시 입력되어야 합니다'); } else if( document.banana.pwd.value == '' ) { alert('암호는 반드시 입력되어야 합니다'); } else { /* form 안의 submit 버튼 눌렀을때와 같은 역할을 수행한다. form 의 action 에 지정된 페이지로 뛴다. > 입력된 내용을 물고 간다 > key=value 형태로 , name 이 key 값 입력값이 value */ document.banana.submit(); } } </script> </head> <body> <form method="GET" name="banana" action="xxyy.html"> <input type="text" name="uid"/> <input type="password" name="pwd"/> <input type="button" value="Click" onclick="abcd();"/> </form> </body> </html>
SELECT 태그
<!doctype html> <html> <head> <script language="javascript"> function abcd() { document.banana.submit(); } function abcd2() { // options 는 orange 안에 선언된 option 들에 대한 배열이다 var len = document.banana.orange.options.length; for( var i = 0 ; i < len ; i++ ) { alert( document.banana.orange.options[i].value ); } // 배열의 요소를 삭제하고, 이것이 select 에 반영되어 같이 삭제되어진다. /* one <- [0] 을 날릴때 이게 날아감 two three <- [1] 을 날릴때 이게 날아감 four for( var i = 0 ; i < len ; i++ ) { document.banana.orange.options[i] = null; } */ // 뒤에서 부터 지워야 깨끗하게 다 지워지게 된다. for( var i = len-1 ; i >= 0 ; i-- ) { document.banana.orange.options[i] = null; } } </script> </head> <body> <form name="banana"> <select name="orange"> <!-- /test_339.html?orange=4 와 같이 보여지는 것은 four 가 보여지지만 실제로 전달되는 것은 4 가 전달된다. key 값은 name 값 --> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> </select> <input type="button" value="Click" onclick="abcd();"/> <input type="button" value="Click2" onclick="abcd2();"/> </form> </body> </html>
select 배열 요소 접근
document.banana.orange.options[i].value
select 배열 요소 삭제
document.banana.orange.options[3] = null;
전체 삭제 시 배열의 뒤에서부터 지워준다.
for( var i = len-1 ; i >= 0 ; i-- )
select 배열 요소 추가
document.banana.orange.options[3] = new Option("hundred",100);
checkbox
모두 체크기능
<!doctype html> <html> <head> <script language="javascript"> function abcd() { document.banana.submit(); /* /test_340.html?fruits=apple&fruits=kiwi 주소로 정보를 전달할때 하나의 key 값으로 여러개의 value 를 전달하는 건 가능하다. */ } function abcd2() { var all = document.getElementById("all"); /* alert( all.checked ); alert( document.banana.fruits.length ); */ var len = document.banana.fruits.length; for( var i = 0 ; i < len ; i++ ) { document.banana.fruits[i].checked = all.checked; } } </script> </head> <body> <!-- form 밖에 있는 input은 정보를 전달하지 않는다. 다만 UI를 제공한다. --> <input type="checkbox" id="all" onclick="abcd2()"/> <form name="banana"> <input type="checkbox" name="fruits" value="apple"/> <input type="checkbox" name="fruits" value="banana"/> <input type="checkbox" name="fruits" value="orange"/> <input type="checkbox" name="fruits" value="kiwi"/> <input type="button" value="Click" onclick="abcd();"/> </form> </body> </html>
체크박스가 체크되어 있는지 확인(제어)하는 방법
.checked의 true / false 로 확인(제어)할 수 있다.
모두 체크 기능 구현 하기
맨위의 all 아이디를 가진 체크박스 클릭 시 아래의 fruits 체크 박스를
document.banana.fruits[i] 로 배열을 이용해 .checked 값에 all.checked 값을 대입해준다.
textarea
금칙어 체크하기
<!doctype html> <html> <head> <script language="javascript"> var blackList = ['바보','멍청']; /* '바보' 는 금칙어라서 입력이 불가능합니다 ... 를 alert() 으로 띄우려면 */ function abcd() { var content = document.banana.content.value; // alert( content.indexOf('바보') ); // alert( content.indexOf('멍청') ); for( var i = 0 ; i < blackList.length ; i++ ) { if( content.indexOf( blackList[i] ) != -1 ) { alert( "'" + blackList[i] + "'은 금칙어라서 사용할 수 없습니다." ); } } } </script> </head> <body> <form name="banana"> <textarea name="content" rows="5" cols="50"></textarea> <input type="button" value="Click" onclick="abcd();"/> </form> </body> </html>
금칙어를 배열로 선언해두고 content 라는 이름을 가진 textarea 의 value 값에서 .indexOf( blackList[i] ) 이 -1 이 아니면 해당 금칙어가 있는 것으로 판단하여 알림을 뜨게한다.
div 태그
<!DOCTYPE html> <html> <head> <script language="javascript"> function abcd() { var dv = document.getElementById("dv"); dv.innerHTML = "Banana Orange"; } </script> </head> <body> <div id="dv" onclick="abcd();">HelloWorld</div> </body> </html>
div는 만능태그이며, 어떤 내용이든 담아낸다.
innerHTML : 동적으로 내용을 변경할 수 있다.
css
padding & border & margin
<!DOCTYPE html><html><head> <style type="text/css"> .apple { background-color: skyblue; padding: 20px; margin: 10px; } #dv { background-color: yellow; } </style></head> <body> <div class="apple">HelloWorld</div> <div class="apple">HelloWorld</div> <div id="dv">BananaWorld</div> </body> </html>
style 안에서는 디자인적인 요소를 묶어서 이름을 붙이고 ( apple )
이렇게 붙여진 이름은 class 라는 속성으로 요소에 적용된다.
이러한 것을 stylesheet / css 라고 부른다.
div 는 별다른 지정이 없으면 가로로 꽉 채우는 형태가 된다.
#으로 시작하는 이름은 id, .으로 시작하는 이름은 class 로 적용한다.
<!DOCTYPE html> <html> <head> <style type="text/css"> div { background-color: skyblue; color: #aa0000; padding-top: 20px; padding-left: 0px; padding-bottom: 20px; padding-right: 0px; border-width: 5px; border-style: solid; border-color: #000000; } </style></head> <body> <div>HelloWorld</div> </body> </html>
앞에 . # 없는 경우에는 태그 이름을 찾아서 해당 요소에 적용한다.
#aa0000; : RGB 값을 각각 16진수로 표기한다 ( RED:aa , GREEN:00 , BLUE:00 )
padding : 선과 내용 사이의 공백
padding-top | right | bottom | left
padding : 10px 20px 30px 40px;
border : 테두리 설정
border-width | style | color
border-radius : 테두리 둥글게
border: 5px solid #000000;
<!DOCTYPE html> <html> <head> <style type="text/css"> .abcd { /* 때로는 마이너스 값을 쓸 수도 있다.*/ margin: 0px -2px 0px -2px; padding: 14px; /* div 안에 div를 넣고 가로 형태로 채워서 보여주려고 할때 사용 */ display: inline-block; /* 퍼센테지로 주게되면 브라우저의 폭에 맞추어서 늘어나고 줄어든다*/ width: calc( 20% + 10px ); /* width: 200px; width: 20%; */ } .apple { background-color: lime; } .banana { background-color: yellow; } .orange { background-color: skyblue; } </style></head> <body> <!-- style 태그에서 정하고 적용하는 방법도 있고, 직접 부여하는 방법도 있다. --> <div style="margin:20px 30px 20px 30px;"> <!-- style 은 겹쳐서 사용하는 것도 허용된다 --> <div class="abcd apple">apple</div> <div class="abcd banana">banana</div> <div class="abcd orange">orange</div> </div> </body> </html>
margin : 선과 바깥과의 여백
margin-top | right | bottom | left
style 우선순위
<!DOCTYPE html> <html> <head> <style type="text/css"> .banana { background-color: skyblue !important; } .apple { background-color: yellow; } </style> </head> <body> <div style="background-color: lime;" class="banana apple">안녕하세요?</div> </body> </html>
동일한 디자인이 2군데 이상에서 적용된 경우
.banana { background-color: skyblue !important; }
.apple { background-color: yellow; }
style="background-color: lime;"!important 가 우선 순위를 가진다. 그리고 속성에서 정하는 것과 style 태그안에서 정하는 것은 속성이 우선순위를 갖는다.
우선순위 순서 : !important > style 속성 > 나중에 정한 것
