| parseInt(string[, radix]) - string: 정수로 바꿀 대상 문자열 - radix: 문자열을 바꿀때 사용할 기수(optional) - returns: 문자열을 parsing한 정수값(10진수) 또는 NaN |
| var strNum = "07"; parseInt(strNum, 10); //명시적으로 10진수 변환이란걸 지정하도록 하자. |
[출처] function MM_swapImgRestore() 외 설명|작성자 빛의여행
문서객체모델(Document Object Model, DOM)은 HTML과 XML 문서에 대한 프로그래밍 인터페이스
문서에 대한 구조적 정보를 제공하고 문서 구조나 외양 및 내용을 프로그램에서 접근할수 있는 방법 제공
DOM 노드의 유형
1. Node.ELEMENT_NODE는 엘리먼트 노드 유형에 대한 상수
2. Node.ATTRIBUTE_NODE는 애트리뷰트 노드 유형에 대한 상수
3. Node.TEXT_NODE는 텍스트 노드 유형에 대한 상수
4. Node.DOCUMENT_NODE는 문서 노드 유형에 대한 상수
다른 노드 유형들도 많이 있지만 주로 이 네가지 유형을 다루기 때문에 예시 하지 않는다.
nodeType 속성
DOM 노드 유형에 대해 상수로 정의 되어 있으므로 모든 노드에서 사용할수 있는 nodeType 속성을
사용하여 위 상수와 비교 함으로서 노드 타입을 알수 있다.
Internet Explorer는 자바스크립트에서 Node 상수를 사용할때 에러를 보고 한다.
Internet Explorer 7.0부터 이러한 문제를 정정했다 하지만 보편적으로 사용하는 6.0에서는 정상작동 하지 않는다.
따라서 Node 사용을 피해야 할것이다. 그냥 이런 것이 있다고만 알아 두도록 하자.
' http://www.meadroid.com의 ScriptX 공개 프린트 컴포넌트로 상당히 많은 기능이 있으나
무료로 사용할수 있은 기능은 아래와 같고. 그 외의 기능은 라이센스가 필요하다.
|
<script language="javascript"> function printWindow() {
<input type="button" name="print" value="프린트" onClick="printWindow();"> |
- 프린터 팁 : 웹페이지를 다음 페이지에 인쇄
<p style="page-break-before:always">
리스트박스를 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Select 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다
| 속성 | 의미 |
|---|---|
| name | 리스트박스의 이름지정 |
| size | 리스트박스에서 밖으로 보이는 목록의수 |
| value | 리스트 박스의 목록에 설정할 값 지정 |
| selected | 목록이 선택된 상태로 만든다. |
| multiple | 리스트 박스에서 하나이상 선택할 것인지를 지정 |
| 특성 | 의미 |
|---|---|
| name | 리스트박스의 이름 |
| length | 리스트박스에 포함되어 있는 목록의수 |
| type | type에 입력된값(select) |
| selectedIndex | 리스트 박스에서 현재 선택된 목록의 인덱스 |
| options | 리스트박스에 포함된 목록 정보의 배열 |
| options[i].index | 각 목록의 인덱스 |
| options[i].text | 각 목록의 문자열 |
| options[i].value | 각 목록에 할당되어 있는 값 |
| options[i].prototype | 옵션 메뉴에 새로운 특성을 만들기 위한 것 |
| options[i].selected | 각 목록이 현재 선택되어 있는지의 여부 |
| options[i].defaultSelected | 각 목록이 처음 선택되어 있는지의 여부 |
| 이벤트 핸들러 | 의미 |
|---|---|
| onChange | 다른 목록을 선택 했을때 발생하는 이벤트 핸들러 |
| 예제1 | 실행화면 |
|---|---|
| <script> function foods(mira) { var sel = "선택된 음식 \n\n" for(i = 0;i sel += mira.food.options[i].text + "\n" } } alert(sel) } </script> <form> 좋아하는 음식을 선택해 주세요. <select name="food" size=6 multiple> <option value="김치찌게">김치찌게 <option value="된장찌게">된장찌게 <option value="해물탕">해물탕 <option value="짜장면">짜장면 <option value="짬뽕">짬뽕 <option value="피자">피자 <option value="냉면">냉면 </select> <input type="button" value="선택" onclick="foods(this.form)"> </form> |
<FORM>좋아하는 음식을 선택해 주세요. <INPUT onclick="foods(this.form)" type="button" value="선택"> </FORM> |
| 예제2 | 실행화면 |
|---|---|
| <script> function colch(mirage) { document.bgColor = mirage.color.options[mirage.color.selectedIndex].value } </script> <form> 배경색바꾸기 <select name="color" size=5 onChange=colch(this.form)> <option value="white">화이트 <option value="ivory">아이보리 <option value="lavender">라벤더 <option value="pink">핑크 <option value="lightblue">라이트블루 <option value="gold">골드 <option value="aqua">아쿠아 </select> </form> |
<FORM>배경색바꾸기 </FORM> |
option_name = new Option( optionText , optionValue , defaultSelected , selected )
optionText : 옵션 메뉴에 나타날 문자열
optionValue : 옵션 메뉴를 선택했을때 리턴되는 값
defaultSelected : 옵션 메뉴를 초기에 선택된 상태로 만들 것인지 아닌지를 지정
selected : 옵션 메뉴가 선택되어 있는지 아닌지를 가리킨다.
| 예제3 | 실행화면 |
|---|---|
| <script> function mirage8(form) { var option1 = new Option("자두","optiontest1",true) form.test2.options[form.test2.length] = option1 } function mirage9(form) { if(form.test2.value != "") { form.test2.options[form.test2.selectedIndex] = null } else { alert("제거할 대상을 선택하세요") } } </script> <form> <select name="test2" size=7> <option value="optiontest1"> 사과 <option value="optiontest2"> 앵두 <option value="optiontest3"> 감 <option value="optiontest4"> 수박 </select> <input type="button" value="추가" onclick="mirage8(this.form)"> <input type="button" value="제거" onclick="mirage9(this.form)"> </form> |
<FORM> <INPUT onclick="mirage8(this.form)" type="button" value="추가"> <INPUT onclick="mirage9(this.form)" type="button" value="제거"> </FORM> |
| 특성 | 의미 |
|---|---|
| name | 파일업로드 입력양식 이름 |
| value | 파일업로드 입력양식에 입력된 파일이름 |
| 예제4 | 실행화면 |
|---|---|
| <script> function fileinfor(form) { if(form.fileup.value != "") { mirage = window.open("","","status=no,scrollbars=yes") mirage.document.write("<img src=" + form.fileup.value + ">" ) } else { alert("이미지를 선택하세요") } } </script> <form name=form6> 이미지 파일보기<input type="file" name="fileup"> <input type="button" value="보기" onclick="fileinfor(this.form)"> </form> |
<FORM name="form6">이미지 파일보기<INPUT type="file" name="fileup"> <INPUT onclick="fileinfor(this.form)" type="button" value="보기"> </FORM> |
Button 객체
버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Button 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다
Button 객체의 특성
특성 의미
name 버튼 입력양식의 이름
value 버튼 입력양식에 입력한 값
type type택에 입력된값(button)
Button 객체의 메소드
메소드 의미
click() 버튼을 클릭시키는 메소드
Button 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick 버튼을 클릭하는 순간 실행되는 이벤트 핸들러
onMouseDown 마우스 버튼을 눌렀을때 실행되는 이벤트 핸들러
onMouseUp 마우스 버튼을 놓았을때 실행되는 이벤트 핸들러
Submit 객체
데이터 보내기 버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Submit 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다
Submit 객체의 특성
특성 의미
name 데이터 보내기 버튼 입력양식의 이름
value 데이터 보내기 버튼 입력 양식에 입력한 값
type type에 입력된 값(submit)
Submit 객체의 메소드
메소드 의미
click() 데이터 보내기 버튼을 클릭시키는 메소드
Submit 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick 데이터 보내기 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러
Reset 객체
리셋 버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Reset 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다
Reset 객체의 특성
특성 의미
name 리셋 버튼 입력양식의 이름
value 리셋 버튼 입력양식에 입력한 값
type type에 입력된 값(reset)
Reset 객체의 메소드
메소드 의미
click() 리셋 버튼을 클릭시키는 메소드
Reset 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick 리셋 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러
Checkbox 객체
체크박스를 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Checkbox 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다
Checkbox 객체의 특성
특성 의미
name 체크박스의 이름
value 체크박스에 할당할 값
type type에 입력된 값(checkbox)
checked 체크박스가 체크 되었는지의 여부
defaultChecked 체크박스가 처음 체크 되었는지의 여부
Checkbox 객체의 메소드
메소드 의미
click() 체크박스를 클릭시키는 메소드
Checkbox 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick 체크박스를 클릭하는 순간에 실행되는 이벤트 핸들러
Radio 객체
라디오 버튼을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Radio 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다
Radio 객체의 특성
특성 의미
name 라디오 버튼의 이름
value 라디오 버튼에 할당할 값
type type에 입력된 값(radio)
checked 라디오 버튼이 체크 되었는지의 여부
defaultChecked 라디오 버튼이 처음 체크 되었는지의 여부
length 그룹안에 포함되어 있는 라디오 버튼의 수
Radio 객체의 메소드
메소드 의미
click() 라디오 버튼을 클릭시키는 메소드
Radio 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick 라디오 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러
예제1 실행화면
<script language="javascript">
function sel(mirage) {
ans = mirage.value
alert(ans + "를 선택했습니다")
}
</script>
선택하세요
<form name=form5 action="">
<input type="radio" name="color1" value="사과" onClick="sel(this)">사과
<input type="radio" name="color1" value="배" onClick="sel(this)">배
<input type="radio" name="color1" value="앵두" onClick="sel(this)">앵두
</form>
선택하세요
<FORM name="form5" action=""><INPUT onclick="sel(this)" type="radio" value="사과" name="color1">사과
<INPUT onclick="sel(this)" type="radio" value="배" name="color1">배
<INPUT onclick="sel(this)" type="radio" value="앵두" name="color1">앵두
</FORM>
[출처] [15]입력양식2|작성자 붉은매
form택을 자바스크립트에서 접근하기 위한 객체로 document객체 하위에 속한다.
| 특성 | 의미 |
|---|---|
| target | 데이터를 서버로 보낸후 받아보는 결과를 어느 윈도우에서 받아 볼지를 지정 |
| action | 압력한 데이터를 처리할 CGI 프로그램의 URL지정 |
| method | 데이터를 어떤 HTTP 프로토콜로 보낼 것인지 지정한다 |
| encoding | CGI 프로그램에 보내질 데이터 타입을 지정한다 |
| elements | form택안에 있는 모든 입력양식을 배열로 저장 |
| 메소드 | 의미 |
|---|---|
| submit() | 입력된 데이터를 서버로 보내기 위한 메소드 |
| reset() | 입력양식을 리셋 시키는 메소드 |
| 이벤트 핸들러 | 의미 |
|---|---|
| onSubmit | 데이터를 서버에 보내라는 명령을 내렸을때 실행되는 이벤트 핸들러 |
| onReset() | 리셋버튼을 눌렀을때 실행되는 이벤트 핸들러 |
| 예제1 | 실행화면 |
|---|---|
| <script language="javascript"> <!-- function forminfor() { var mirage = "Action : " + document.form1.action + "\n" mirage += "Target : " + document.form1.target + "\n" mirage += "Method : " + document.form1.method + "\n" mirage += "encoding : " + document.form1.encoding + "\n" alert(mirage) } //--> </script> <form name="form1" action="http://mirage728.com.ne.kr" |
<FORM name="form1" action="http://mirage728.com.ne.kr" method="post" target=" _blank"><INPUT onclick="forminfor()" type="button" value="form 정보"> <INPUT type="submit" value="submit"> </FORM> |
| 예제2 | 실행화면 |
|---|---|
| <script> function chform() { mirage = document.form2.elements[0].value if(mirage != "") alert(mirage + "님 홈 방문을 환영 합니다.\n\n좋은 시간 되세요..^^") else alert("이름을 입력해 주세요") } </script> <form name=form2> |
<FORM name="form2">이름을 입력해 주세요 <INPUT> <INPUT onclick="chform()" type="button" value="확인"> <INPUT type="reset" value="취소"> </FORM> |
한줄짜리 문자열을 입력 받기 위한 형식으로 form 객체의 하위에 속한다.
| 특성 | 의미 |
|---|---|
| name | 텍스트 입력양식의 이름 |
| value | 텍스트 입력양식에 입력한 값 |
| defaultValue | 처음 input 택의 value에 입력했던 값 |
| type | input 택에서 type에 입력된 값 |
| 메소드 | 의미 |
|---|---|
| select() | 텍스트 입력필드에 있는 모든 값 선택하기 |
| focus() | 텍스트 입력필드안에 커서 넣기 |
| blur() | 텍스트 입력필드안의 커서 제거하기 |
| 이벤트 핸들러 | 의미 |
|---|---|
| onSelect | 마우스로 입력필드의 문자열을 선택했을 때 |
| onFocus | 마우스나 탭으로 커서가 입력필드 안에 들어갔을 때 |
| onBlur() | 마우스나 탭으로 커서가 입력필드 에서 나갔을때 |
| onChange | 텍스트 입력양식의 값을 바꾸었을 때 |
| 예제3 | 실행화면 |
|---|---|
| <script> function mirage5(mir) { test = mir.tex1.value if(test == "") { alert("답을 입력해 주세요") mir.tex1.focus() } else if(test == "3" || test == "3번" || test == "삼" || test == "신기루") { alert("정답입니다.\n\n상품은 아직 마련하지 못했습니다..^^;" ) } else { alert("틀렸습니다.\n다시선택해 주세요.") mir.tex1.focus() mir.tex1.select() } } </script> 문제1) mirage는 무슨 뜻일까요..? |
문제1) mirage는 무슨 뜻일까요..? 1 바보 2 미꾸라지 3 신기루 4 신발 <FORM name="form4">정답: <INPUT name="tex1"> ※ 간단해석 input 버튼을 클릭하면 mirage5함수를 호출하는데 매개변수로 this.form을 함께 넘겨주고 있다. this란 객체 자기 자신을 가리키는 말로 this.form은 form객체 자신을 가리킨다. 위에있는 스크립트를 보면 mirage5함수의 매개변수에 this.form 이 아닌 mir로 되어있다. 위에있는 mir은 this.form을 담은 하나의 변수이다 |
객체에 접근 할때는 매개변수에 들어있는(mir) 이름으로 접근하면 된다.
mir(mirage5함수에 들어있는 매개변수로 this.form을 담고있는 form객체 자신이다).text1.value
객체에 접근 할때는 상위 객체부터 하위객체로 . 을 구분으로 해서 써주면 된다.
보통 최상위객체는 생략해도 상관없다.[(window.document.)mir.text1.value]
여러줄을 입력할 수 있는 양식이다.
텍스트 영역을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Textarea 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다
| 속성 | 설명 |
|---|---|
| name | 텍스트 영역의 이름지정 |
| rows | 텍스트 영역의 높이 |
| cols | 텍스트 영역의 너비 |
| wrap | 글자가 우측 끝까지 갔을때 자동 줄바꿈할 것인지의 여부 |
| 특성 | 설명 |
|---|---|
| name | 텍스트 영역의 이름 |
| value | 텍스트 영역에 입력한 값 |
| defaultValue | <textarea> </textarea> 사이에 들어간 글자 |
| type | input 택에서 type에 입력된값(textarea) |
| 메소드 | 설명 |
|---|---|
| select() | 텍스트 영역 안에 있는 모든값 선택하기 |
| focus() | 텍스트 영역안에 커서 넣기 |
| blur() | 텍스트 영역안에서 커서 제거하기 |
| 이벤트 핸들러 | 설명 |
|---|---|
| onSelect | 마우스로 텍스트 영역에서 글을 선택했을 때 |
| onFocus | 마우스나 탭으로 커서가 텍스트안에 들어갔을 때 |
| onBlur | 마우스나 탭으로 커서가 텍스트 영역을 나갔을 때 |
| onChange | 텍스트 영역의 값을 바꿨을 때 |
| onKeyDown | 입력필드에서 키를 눌렀을때 |
| onKeyPress | 입력필드에서 키를 눌렀을때 |
| onKeyUp | 입력필드에서 키를 놓았을때 |
글내용을 * 표시로 나타내서 주위의 다른 사람이 글내용을 볼수없게 하는 기능이다.
암호 입력 양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Password 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다
| 속성 | 설명 |
|---|---|
| name | 암호 입력 양식의 이름지정 |
| value | 암호 입력 양식에 미리입력할 문자열 지정 |
| type | password |
| size | 암호 입력양식의 가로 길이지정 |
| 특성 | 설명 |
|---|---|
| name | 암호 입력 양식의 이름지정 |
| value | 암호 입력 양식에 입력한 값 |
| defaultValue | 처음 value속성에 설정된 값 |
| type | type에 입력된값(password) |
| 메소드 | 설명 |
|---|---|
| select() | 암호 입력양식에 있는 모든값 선택하기 |
| focus() | 암호 입력 양식안에 커서넣기 |
| blur() | 암호 입력 양식안에서 커서 제거하기 |
숨겨진 입력양식으로 사용자가 브라우저를 통해 볼수가 없다.
숨겨진 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Hidden 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다
| 속성 | 설명 |
|---|---|
| type | hidden |
| value | 숨겨진 입력양식에 저장할 문자열 지정 |
| name | 숨겨진 입력양식의 이름지정 |
| 특성 | 설명 |
|---|---|
| name | 숨겨진 입력양식 이름 |
| value | 숨겨진 입력양식에 입력한 값 |
| defaultValue | 처음 value속성에 설정된 문자열 |
| type | type에 입력된값(hidden) |
