select ...........................................................
여러 항목중에 고를 수 있도록 한 목록 상자로 많이 사용된다. 보통 콤보 상자라고 많이 알고 있더라구. |
<select name="addr">
<option value="서울 마포구 드래곤">서울 마포구 드래곤아이
<option value="경기 군포시 드래곤">경기 군포시 드래곤아이
<option value="강원 원주시 드래곤">강원 원주시 드래곤아이
</select> |
select 태그에서 size=정수 속성으로 보여줄 리스트수를 설정할 수 있다.
select 태그에서 multiple 속성을 설정하여 여러개 선택을 할 수 있다.
option 태그에서 selected 속성으로 디폴트 선택을 줄 수 있다. |
| name |
태그 name 속성값 (addr) |
| length |
목록의 개수 (3) |
| selectedIndex |
선택한 목록 인덱스 번호 (0 부터) |
| options |
목록상자 값을 배열로 (익스플로러 지원안됨) |
| options[0].text |
0번째 목록의 문자 (서울 마포구 드래곤아이) |
| options[0].value |
0번째 목록의 value (서울 마포구 드래곤) |
| options[0].selected |
0번째 목록이 선택되면 true 아니면 false |
| options[0].defaultSelected |
0번째 목록이 기본으로 선택되어 있는지 |
| onChange |
현재 선택된 목록이 아닌 다른 목록을 선택시 |
■ select 객체 예제 : 주소 검색 결과를 선택하기
|
| |
<script language="javascript">
function Check(){
i =document.form1.addr.selectedIndex // 선택항목의 인덱스 번호
if (i<0) {
alert("주소를 선택!")
return
}
var address1 = document.form1.addr.options[i].value // 선택항목 value
var address2 = document.form1.addr.options[i].text // 선택항목 text
alert(address1) // value 확인
alert(address2) // text 확인
}
</script>
<form name="form1" action="ok.asp" method="post">
<select name="addr" size="3">
<option value="서울 마포구 드래곤">서울 마포구 드래곤아이
<option value="경기 군포시 드래곤">경기 군포시 드래곤아이
<option value="강원 원주시 드래곤">강원 원주시 드래곤아이
</select>
<input type="button" value="등록" onClick="Check()">
</form>
document.form1.addr.selectedIndex 선택항목의 인덱스 번호
==> 선택이 안되면 -1을 리턴
document.form1.addr.options[i].value 선택항목 value |
button, submit(image), reset, .................................................
버튼 ! 흔히 보는 자주 보는 버튼이지만 기능은 다 다르다. 자바스크립트로 접근하는
방법도 약간씩 다르다. |
■ HTML(생긴건 비슷해도 맛은 다 다르므로 조심해야...)
|
| name |
위의 name 속성 |
| value |
위의 vaule 속성 |
| type |
위의 type 속성 |
■ 버튼이 여러개일때 누른버튼 구분하기 (매개변수이용) |
| |
<script language="javascript">
function Check(i){
if(i=='1'){
alert("1번 버튼 오케이!")
return
}
if(i=='2'){
alert("2번 버튼 오케이!")
return
}
if(i=='3'){
alert("3번 버튼 오케이!")
return
}
if(i=='4'){
alert("4번 버튼 오케이!")
return
}
}
</script>
<form name="form1" action="ok.asp" method="post">
<input type="button" name="button1" value="버튼1" onClick="Check('1')">
<input type="button" name="button1" value="버튼2" onClick="Check('2')">
<input type="button" name="button1" value="버튼3" onClick="Check('3')">
<input type="button" name="button1" value="버튼4" onClick="Check('4')">
</form>
|
■ submit (image) 버튼 사용시 이벤트 핸들러 |
| |
<script language="javascript">
function Check(){
alert("1번 버튼 오케이!")
return false // 주의 !!! form 태그에 이벤트핸들러 return 함수(), return false
}
</script>
<form name="form1" action="ok.asp" method="post" onSubmit="return Check()">
<input type="submit" value="버튼1">
<input type="image" src="123.gif">
</form>
* 이미지버튼은 전송버튼과 자바스크립트 구문이 동일하다. |
| |
<script language="javascript">
function Check(i){
if(i=='1'){
alert("1번 버튼 오케이!")
return
}
if(i=='2'){
alert("2번 버튼 오케이!")
return
}
}
</script>
<form name="form1" action="ok.asp" method="post">
<a href="javascript:Check('1')"> <img src="123.gif" border="0"></a>
<a href="javascript:Check('2')"> <img src="123.gif" border="0"></a>
</form>
* 일반 이미지에 버튼기능을 부여하는 것은 button 사용법과 자바스크립트 구문은 동일하다. |
입력값 체크와 전송 예제 .................................................
* 게시판 입문자를 위한 내용입니다.
폼태그를 이용해서 서버로 전송을 하는 경우 여러가지 이유로 우리는 동일한 버튼을 사용할 수 없는 경우를 자주 만나게 된다. 몇가지 전송기능을 가진 버튼을 사용하는 방법을 알아보고 기나긴 브라우저 객체를 마칠까한다.
|
■ button 이나 <IMG> 태그 이용은 같은 방법으로!!! |
| |
<script language="javascript">
function Check1(){
var tel=document.form1.tel.value
if (tel=="") {
alert("전화번호는 꼬~옥!")
return // 호출한 쪽으로 제어권을 넘기므로 아래소스 실행를 막게된다
}
document.form1.submit() // button 자체에 submit() 기능이 없다
}
</script>
<form name="form1" action="ok.asp" method="post">
<input type="text" name="tel">
<input type="button" value="등록" onClick="Check1()">
<a href="javascript:Check1()"><img src="123.gif" border="0"></a>
</form>
|
■ submit 과 image 는 같은 방법으로 !!! |
| |
<script language="javascript">
function Check2(){
var tel=document.form1.tel.value
if (tel=="") {
alert("전화번호는 꼬~옥!")
return false // 자신의 submit() 기능을 행사하지 못하도록
}
return true // 자신의 submit() 기능을 행사하도록
}
</script>
<form name="form2" action="ok.asp" method="post" onSubmit="return Check2()">
<input type="text" name="tel">
<input type="submit" value="버튼1">
<input type="image" src="123.gif">
</form>
|
■ 매개변수를 이용하여 action 을 바꿀 수 있다. |
| |
<script language="javascript">
// 매개변수로 action바꾸기
function Check3(mtype){
var tel=document.form3.tel.value
if (tel=="") {
alert("전화번호는 꼬~옥!")
return
}
else {
if (mtype=="1") {
document.form3.action="ok1.asp" // 매개변수값이 "1" 일 때 action
document.form3.submit()
}
else if (mtype=="2") {
document.form3.action="ok2.asp" // 매개변수값이 "2" 일 때 action
document.form3.submit()
}
}
}
</script>
<form name="form3" method="post">
<input type="text" name="tel">
<input type="button" value="무료회원등록" onClick="Check3('1')">
<input type="button" value="유료회원등록" onClick="Check3('2')">
</form>
|
navigator 객체 .................................................
* 미리 공부할 필요는 없는 과정이다. 어떤 정보를 가졌는지 대~~충 살펴보고~~
첫 강좌 브라우저 객체 계층 구조에서 보듯이 얘는 window객체가 아닌 따로 독립된 객체로 사용자의 브라우저 정보를 가지고 있는 객체로 사용자의 브라우저 상황을 파악하여 거기에 맞는 서비스를 하는데 이용할 수 있다.
* 고급 웹사이트 제작시, 국제적인 사이트 제작시, 고려할 필요가 있으며...
* 가급적이면 사용자 브라우저에 영향을 받지 않는 스크립트를 사용하는 게 좋고...
* 국내 서비스용은 익스플로러를 기준으로 많이 작성하는데 버전을 낮춰 제작하는게... |
| appName |
브라우저 이름 |
| appVersion |
브라우저 버전 |
| appCodeName |
브라우저 코드명 |
| userAgent |
브라우저가 서버로 보내는 정보 |
| mimeType |
브라우저가 지원하는 MimeType (익스플로러 지원안함) |
| plugins |
브라우저가 지원하는 플러그인 정보 |
| language |
브라우저가 사용하는 언어 (익스플로러 지원안함) |
| platform |
시스템종류 |
| |
<script language="javascript">
document.write(navigator.appName) // Microsoft Internet Explorer
document.write(navigator.appVersion) // 4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)
</script>
| 출처 : http://blog.naver.com/sungback/90004526170 |
|
|
|
아침마당
