자바 스크립트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 자바 스크립트 는 네 스케이프 사 가 개발 한 객체 지향 스크립트 언어 로 HTML 문서 내 에 작성 하 고 웹 브라우저 에 의해 실행 된다 . 웹 브라우저 가 가진 객체 도 이용 한다 . 넷 스케이프 네 비게 이터 2 . 0 / 익스플로러 3 . 0 이상 이 면 자바 스크립트 를 사용 할 수 있 다 . 지금 의 브라우저 상황 에서 는 별로 해당 되 지 않 겠 지만 . .. 다만 브라우저 마다 조금 씩 지원 하 지 않 는 것 과 지원 하 는 게 조금 차이 가 있 다 . 자바 스크립트 는 작성자 의 입장 에서 보 면 HTML 이 버전 업 된 것 처럼 자연 스럽 게 받아들여도 무방 할 듯 싶 다 . HTML 과 달리 에디터 가 도와 주 지 않 는 게 흠 이 지만 . ...■ 웹 문서 에 꼭 필요 한 자바 스크립트 의 기능 을 살펴보 면 • 새창 을 다룰 줄 알 아야 하 고 • 함수 를 이용 해서 매개변수 넘기 기 • 폼 전송 에서 폼 요소 입력 값 체크 하 기 • 프레임 간 , 브라우저 간 url 이동과 값 넘기 기 • 레이어 다루 기 위 의 기능 을 자연 스럽 게 사용 하 려면 자바 스크립트 의 이용 측면 에서 정리 를 하 는 것 으로 언어 적 인 , 이론 적 인 부분 은 많이 생략 한다 ! !! 처음 시작 인 분 은 10 일 정도 투자 하 여 함수 부분 까지 만 하 고 asp 로 넘어가 는 게 좋 겠 다 . asp 에서 다시 필요 한 부분 은 되돌아와서 하 도록 ! ! 항시 밥 먹 듯 코딩 하 는 언어 는 아니 므로 마스트 하 려고 덤비 는 건 피하 는 게 좋 겠 다 . 변수 , 배열 , 연산 , 조건문 , 반 복문 , 객체 와 메 서드 , 프로 퍼티 , 이벤트 에 대한 기초 를 닦 아야 할지니 . ...■ 자바 스크립트 생김새 • HTML 문서 내 에 작성 할 때 < SCRIPT LANGUAGE =“ JavaScript ” > 자바 스크립트 코드 </ SCRIPT > • HTML 문서 외부 에 따로 둘 때 < SCRIPT LANGUAGE =“ JavaScript ” SRC =“ aaa . js ” ></ SCRIPT > *** 확장자 는 js 이 고 텍스트 문서 이 다 다른 사이트 의 js 파일 도 가능 하 다 ( http : / / www . dragoneye . co . kr / aaa . js ) 웹 문서 를 간결 하 게 해 주 고 여러 문서 가 공통 으로 js 파일 을 사용 할 수 있 다 . • 자바 스크립트 를 이해 하 지 못하 는 브라우저 를 위해 <!-- --> < SCRIPT LANGUAGE =“ JavaScript ” ><!-- 자바 스크립트 코드 --> </ SCRIPT >* 요즘 브라우저 상황 에서 는 거의 사문 화 된 것 이 지만 습관 적 으로 ! • 주석 처리 < SCRIPT LANGUAGE =“ JavaScript ” ><!-- 자바 스크립트 코드 1 / / 자바 스크립트 코드 2 자바 스크립트 코드 3 / / 설명 을 단다 --> </ SCRIPT >* / / 이하 부터 주석 이 된다 ■ 자바 스크립트 위치 • HEAD 태그 내 에 < HEAD >< title >~~</ title >< SCRIPT LANGUAGE =“ JavaScript ” > 자바 스크립트 코드 </ SCRIPT ></ HEAD > • BODY 태그 위 에 < HEAD >< title >~~</ title ></ HEAD > < SCRIPT LANGUAGE =“ JavaScript ” > 자바 스크립트 코드 </ SCRIPT >< BODY > • 필요시 문서 내 적당 한 곳 에 ( 나중 에 실행 되 는 차이 가 . ..) </ table >< SCRIPT LANGUAGE =“ JavaScript ” ><!-- 자바 스크립트 코드 --> </ SCRIPT >< table >* 예 : 먼저 테이블 이 끝나 고 다음 테이블 시작 하 기 전 에 데이 타형 과 변수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 자바 스크립트 에서 사용 할 수 있 는 데 이타 형 과 변수 의 사용법 을 알아보 고 간단 한 예제 를 통해 자바 스크립트 와 친분 을 쌓 아 보 자 ! !!■ 데이 타형 정수형 10 진수 , 16 진수 , 8 진수 의 3 가지 형태 ( 양수 나 음수 ) 실수 형 부동소수점 형 20 . 5 , - 30 . 5 와 같이 소수 부분 이 있 는 10 진수 와 지수 로 표현 된 숫자 Boolean true 와 false 의 두 가지 값 만 을 가지 며 주로 함수 의 리턴 값 이나 관계 연산자 의 결과 값 으로 사용 Null 아무것 도 없 다는 것 을 의미 , 예외 처리 에 자주 사용 한다 문자열 따옴표 ( “ ” , ‘ ‘) 에 들어가 는 모든 데 이 타 는 문자열 데이 타가 된다 특수 문자 \ n 다음 라인 으로 이동 \ b 백스 페이지 \ t 탭 의 크기 만큼 이동 \' 작 은 따옴표 \" 큰 따옴표 \\ 역 슬래시 ■ 변수 에 대해 변수 프로그램 에서 자료 형 의 값 을 가지 고 있 는 저장 장소 변수 의 규칙 변수 는 영어 알파벳 문자 로 시작 하 면 된다 예약어 는 변수 로서 사용 하 지 않 으면 된 다변수 의 선언 1 strName =" 홍길동 " / / 문자열 intAge = 20 / / 숫자 2 var srtName =" 홍길동 " var intAge = 203 var strName strName =" 홍길동 " var intAgeintAge = 20 데이 타형 을 변수 선언 시 정의 하 지 않 아도 되 며 , 변수 의 내용 에 따라 데이 타형 이 결정 된다 . ■ 간단 한 예제 1 < script language =" javascript "> document . write ( " 웹 스쿨 드래곤 아이 입니다 ~~")</ script > 2 < script language =" javascript "> str 1 = " 웹 스쿨 드래곤 아이 입니다 ~~" document . write ( str 1 ) </ script > 3 < script language =" javascript "> var str 1 = " 웹 스쿨 드래곤 아이 입니다 ~~" document . write ( str 1 ) </ script > 4 < script language =" javascript "> var str 1 = " 웹 스쿨 \" 드래곤 아이 \" 입니다 ~~" document . write ( str 1 ) </ script > 5 < script language =" javascript "> var str 1 = " 웹 스쿨 드래곤 아이 입니다 ~~" ; document . write ( str 1 ) </ script > * document . write ( ) 는 ( ) 속 의 내용 을 브라우저 에 출력 하 라는 메 서드 1 . 변수 사용 없이 문자열 을 출력 2 . 변수 를 이용 하 여 변수 값 을 출력 3 . var 을 사용 : {} 블럭 내 에서 지역 변수 가 됨 4 . 큰 따옴표 속 의 문자열 에 큰 따옴표 를 포함 시키 고자 할 때 5 . 다른 구문 을 줄 바꾸 지 않 고 연속 해서 코딩 하 고 자 할 때 ; 를 사용 해서 구분 표시 를 . ..■ 변수 로 사용 할 수 없 는 예약어 abstract boolean break byte case catch char class const continue default do double else extend false final finally float for function goto if implements import ! in instanceof intinterface long native new null package private protected public return short static super switch synchronized this throw thorws transient true try var void while with 연산자 와 연산 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 연산 은 프로그램 에서 가장 흔하 게 일어나 는 일 이 다 . 연산자 의 종류 와 연산 의 의미 를 알 아 둬야 한다 . ■ 산술 연산자 - 부호 변환 +,-,*,/ 사칙 연산 % 나머지 < script language =" javascript "> inta = 10 document . write ( - inta ) </ script > < script language =" javascript "> inta = 10 document . write ( inta + 10 ) / / 사칙 연산 중 덧셈 만 해본다 </ script > < script language =" javascript "> inta = 10 document . write ( inta % 4 ) </ script > ■ 관계 연산자 ( 조건문 , 반 복문 과 함께 많이 사용 ) > 보다 크 다 >= 보다 크 거나 같 다 < 보다 작 다 <= 보다 작 거나 같 다 == 서로 같 다 ! = 같 지 않 다 < script language =" javascript "> inta = 10 intb = 20 document . write ( inta > intb ) / / false </ script > < script language =" javascript "> inta = 10 intb = 20 document . write ( inta < intb ) / / true </ script > < script language =" javascript "> inta = 10 intb = 20 document . write ( inta == intb ) / / false </ script > < script language =" javascript "> inta = 10 intb = 20 document . write ( inta ! = intb ) / / true </ script > ■ 논리 연산자 ( 참 , 거짓 에 대한 연산 ) ! 논리 부정 ( 여집합 ) * 참 이 면 거짓 , 거짓 이 면 참 && 논리 곱 ( 교집합 ) * 둘 다 참 일 때 만 참 || 논리 합 ( 합집합 ) * 둘 중 하나 라도 참 이 면 참 ^ XOR ( 배타 적 논리합 ) * 예제 생략 ? 조건 표현식 에 사용 * 예제 생략 < script language =" javascript "> inta = 10 intb = 20 document . write ( inta == 10 ) / / true </ script > < script language =" javascript "> inta = 10 intb = 20 document . write ( ! ( inta == 10 ) ) / / flase </ script > < script language =" javascript "> inta = 10 intb = 20 document . write ( ( inta < 30 ) &&( intb < 30 ) ) / / true </ script > < script language =" javascript "> inta = 10 intb = 20 document . write ( ( inta > 10 ) ||( intb > 10 ) ) / / true </ script > ■ 대입 ( 할당 ) 연산자 ( 값 을 할당 할 ? ) = 가장 많이 사용 하 는 연산자 inta = 10 , strName =" 홍길동 "+= inta = inta + 10 과 같 음 -= inta = inta - 10 과 같 음 *= inta = inta * 10 과 같 음 / = inta = inta / 10 과 같 음 %= inta = inta % 10 과 같 음 ■ 증감 연산자 ( 값 을 할당 할 ? ) ++ 1 씩 증가 ( 사전 증가 , 사후 증가 ) -- 1 씩 감소 ( 사전 감소 , 사후 감소 ) < script language =" javascript "> inta = 10 document . write ( inta ++) / / 10 사후 증가 </ script > < script language =" javascript "> inta = 10 document . write ( ++ inta ) / / 11 사전 증가 </ script > < script language =" javascript "> inta = 10 document . write ( inta --) / / 10 사후 감소 </ script > < script language =" javascript "> inta = 10 document . write ( -- inta ) / / 9 사전 감소 </ script > ■ 비트 연산자 가 있 지만 생략 함 조건문 IF , SWITCH . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 조건문 은 반 복문 과 함께 프로그램 의 흐름 을 제어 하 는 제 어문 으로 이게 없 다면 고삐 풀린 망아지 처럼 엉망 이 되 고 만 다 . 모든 프로그램 언어 에서 도 비슷 하 게 사용 되 므로 처음 인 시 람 은 착실히 공부 해야 하 는 부분 이 다 . ■ IF 문 * else if 는 필요 한 경우 계속 추가 를 . ..* else 는 위 의 모든 조건 을 만족 하 지 않 을 경우 if ( 조건 ) { 명령문 } if ( 조건 ) { 명령문 1 } else { 명령문 2 } if ( 조건 1 ) { 명령문 1 } else if ( 조건 2 ) { 명령문 2 } if ( 조건 1 ) { 명령문 1 } else if ( 조건 2 ) { 명령문 2 } else { 명령문 3 }< script language =" javascript "> inta = 10 if ( inta == 10 ) { document . write ( " 10 이 네요 ")}</ script > < script language =" javascript "> inta = 100 if ( inta == 10 ) { document . write ( " 10 이 네요 ")} else { document . write ( " 10 이 아니 군 ")} </ script > < script language =" javascript "> inta = 100 if ( inta == 10 ) { document . write ( " 10 이 네요 ")} else if ( inta == 100 ) { document . write ( " 100 이 네요 ")} </ script > < script language =" javascript "> inta = 200 if ( inta == 10 ) { document . write ( " 10 이 네요 ")} else if ( inta == 100 ) { document . write ( " 100 이 네요 ")} else { document . write ( " 10 도 아니 고 100 도 아니 네 ")} </ script > ■ SWITCH 문 switch ( 표현식 ) { case 값 1 : 문장 1 ; break ; case 값 2 : 문장 2 ; break ; case 값 3 : 문장 3 ; break ; … … default : 문장 n ; } 표현식 의 경우 의 수 가 일치 할 때 준비 된 명령 문장 을 수행 한다 . 해당 하 는 경우 가 없 을 때 디폴트 를 사용 할 수 있 다 . * 탈출 을 위해 꼭 break 를 ! !!< script language =" javascript "> inta = 10 switch ( inta ) { case 5 : document . write ( " 5 이 네요 "); break ; case 10 : document . write ( " 10 이 네요 "); break ; default : document . write ( " 잘 모르 겠 군요 ")}</ script > 반 복문 FOR , WHILE , DO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 반 복문 은 조건 을 동반 하 여 조건 을 만족 하 는 경우 준비 된 명령문 을 수행 하 고 조건 에 맞 지 않 으면 다음 명령 을 수행 한다 . 얘 도 모든 프로그램 에서 비슷 하 게 사용 되 므로 잘 익혀 두 면 다른 언어 를 배울 때 누운 소 타기 다 . !!!■ FOR 반 복문 for ( 초기 값 ; 종료 조건 ; 증감 식 ) { 명령문 } 상수 ( 변수 ) 를 정의 하 고 이 상수 의 시작 과 끝 을 정해 두 고 정해진 간격 으로 준비 된 명령 을 반복 수행 시킴 < script language =" javascript "> for ( k = 1 ; k <= 10 ; k ++ ) { document . write ( k + "< br >") / / 1 - 10 까지 }</ script > < script language =" javascript "> for ( k = 2 ; k <= 10 ; k = k + 2 ) { document . write ( k + " < br >") / / 1 - 10 까지 짝수 }</ script > < script language =" javascript "> for ( k = 1 ; k <= 10 ; k ++ ) { if ( k % 2 == 0 ) { document . write ( k + " < br >") / / 1 - 10 까지 짝수 }}</ script > < script language =" javascript "> for ( i = 1 ; i < 10 ; i ++ ) { for ( k = 1 ; k < 10 ; k ++ ) { document . write ( i + "*" + k + "=" + i * k + " ") / / 1 - 10 까지 } document . write ( "< br >") / / 구구단 1 단 마다 줄 바꾸 기 } </ script > ■ WHILE , DO ~~ WHILE 반 복문 * for 문 과 달리 조건 변경 을 해 줘야 한다 while ( 조건 ) { 명령문 } 조건 이 참인 경우 명령문 을 반복 수행 do { 명령문 } while ( 조건 ) 일단 명령문 을 한번 수행 후 조건 을 검토 하 여 참 이 면 반복 수행 < script language =" javascript "> k = 1 / / 초기 값 while ( k <= 10 ) { document . write ( k + "< br >") / / 1 - 10 까지 k ++ / / 조건 변경 이 필요 함 }</ script > < script language =" javascript "> k = 1 / / 초기 값 do { document . write ( k + "< br >") / / 1 - 10 까지 k ++ / / 조건 변경 이 필요 함 } while ( k <= 10 ) </ script > ■ break , continue 문 ( for , while , do 문 속 에서 ) continue 아래 수행 을 중지 하 고 조건 검토 로 이동 break 반 복문 자체 를 완전 탈출 함 < script language =" javascript "> k = 0 / / 초기 값 while ( k <= 10 ) { k ++ / / continue 이전 에 조건 변경 이 필요 함 if ( k == 5 ) { continue / / 위 조건 식 으로 이동 } document . write ( k + "< br >") / / 5 는 제외 됨 }</ script > < script language =" javascript "> k = 0 / / 초기 값 while ( k <= 10 ) { k ++ / / 조건 변경 이 필요 함 if ( k == 5 ) { break / / 반 복문 완전 탈출 } document . write ( k + "< br >") / / 4 까지 출력 됨 }</ script > 대화 상자 ( alert ! , confirm ! ) … … … … … … … … … … … … … … . . 얘 는 나중 에 나올 브라우저 객체 의 메 서 드 지만 앞 으로 예제 에 사용 될 것 이 므로 미리 좀 알 아 두 자 ! !! alert ! ( ) 은 가급적 웹 문서 를 따로 만들 어 메시지 를 전하 는 게 좋 은 방법 이 고 confirm ! ( ) 은 중요 한 처리 를 앞두 고 한번 더 확인 할 필요 가 있 을 경우 는 꼭 사용 하 여야 할 것 같 다 ■ alert ! ( ) : 웹 문서 를 따로 만들 지 않 고 도 간단히 메시지 를 전할 수 있 다 . alert ! ( " 얼 랏 입니다 ") 또는 str = " 드래곤 " alert ! ( str ) 경고 메시 지창 을 띄우 기 < script language =" javascript ">// 권한 이 없 는 경우 를 알리 고자 할 때 alert ! ( " 얼 랏 입니다 ") </ script > < script language =" javascript ">// 축하 메시지 를 띄울 경우 alert ! ( " 회원 가입 을 축하 합니다 ! ") </ script > < script language =" javascript ">// 코딩 중 어떤 값 을 확인 해 보 고자 할 때 intsum = 50 + 50 alert ! ( intsum ) </ script > ■ confirm ! ( ) : 확인 시 true 이 고 1 이 라는 것 ! if ( confirm ! ( " 진짜 삭제 ? ")!= 0 ) { 명령문 / / 0 이 아니 면 1 이 니까 확인 } 또는 message =" 진짜 삭제 ? " if ( ! confirm ! ( message ) ) { 명령문 } 확인 상자 로 " 확인 " 과 " 취소 " 둘 중 선택 을 할 수 있 다 . 확인 을 누르 면 confirm ! ( " 진짜 삭제 ? ") 는 true ( 1 ) 을 취소 을 누르 면 confirm ! ( " 진짜 삭제 ? ") 는 fasle ( 0 ) 을 갖 는다 < script language =" javascript ">// 중요 한 처리 를 앞두 고 한번 더 확인 을 하 도록 유도 할 때 ( 주로 삭제 의 경우 ) if ( confirm ! ( " 삭제 됩니다 ")== 0 ) document . write ( " 취소 를 선택 ") elsedocument . write ( " 확인 를 선택 ") </ script > < script language =" javascript "> if ( confirm ! ( " 삭제 됩니다 ")!= 0 ) document . write ( " 확인 를 선택 ") elsedocument . write ( " 취소 를 선택 ") </ script > < script language =" javascript ">// 어떤 값 을 리턴 하 는 확인 해 보 기 document . write ( confirm ! ( " 삭제 됩니다 ")) / / true </ script > ■ prompt ( ) : 입력 값 을 받 아 처리 할 수 있 다 * 많이 사용 하 지 않 을 것 같 아서 생략 하 는 게 . . 내장 함수 … … … … … … … … … … … … … … … … … … … 내장 함수 란 자바 스크립트 언어 자체 에서 지원 하 는 함수 로 자주 사용 할 것 으로 예상 되 는 것 들 을 함수 로 만들 어 둔 것 을 얘기 한다 . 다음 은 사용 자 입력 값 을 가지 고 계산 을 할 때 꼭 필요 한 함수 들 이 다 . !!! ■ eval ! ( ) eval ! ( " 50 ")+ 50 또는 inta =" 50 " eval ! ( inta ) + 50 숫자 형태 를 가진 문자열 이나 표현식 을 숫자 로 바꿔 준다 . * 사용 자 입력 값 을 계산 을 위해 사용 한다면 꼭 필요 한 조치 이 다 . < script language =" javascript "> document . write ( " 50 "+ 50 ) / / 계산 이 안 되 고 문자열 결합 이 됨 , 5050 document . write ( eval ! ( " 50 ")+ 50 ) / / 100 으로 계산 됨 </ script > ■ parseInt ( ) / parseFloat ( ) paresInt ( " 10 . 5 ")+ 50 또는 inta =" 10 . 5 " parseInt ( inta ) + 50 숫자 형태 를 가진 문자열 이나 표현식 을 정수 나 실수 로 바꿔 준다 . * 사용 자 입력 값 을 계산 을 위해 사용 한다면 꼭 필요 한 조치 이 다 . < script language =" javascript "> document . write ( " 10 . 5 "+ 50 ) / / 계산 이 안 되 고 문자열 결합 이 됨 document . write ( parseInt ( " 10 . 5 ")+ 50 ) / / 60 으로 계산 됨 document . write ( parseFloat ( " 10 . 5 ")+ 50 ) / / 60 . 5 으로 계산 됨 </ script > ■ isNaN ( ) isNaN ( " 10 . 5 ") 또는 inta =" 10 . 5 " isNaN ( inta ) / / NaN : Not a Number 표현식 이나 값 이 숫자 가 아닌지 를 true / false 로 리턴 함 . * 숫자 가 아니 면 true 를 ! !! ( 주의 ) * 사용 자 입력 값 이 숫자 가 아닌지 / 인지 를 판단 하 고자 할 때 ! !!< script language =" javascript "> document . write ( isNaN ( " 0050 ")) / / falsedocument . write ( isNaN ( " 홍길동 ")) / / truedocument . write ( isNaN ( 50 ) ) / / false ( 숫자 일 경우 fasle ! !!)</ script > ■ escape ( ) / unescape ( ) escape ( " 가 ") 또는 stra =" 가 " escape ( stra ) unescape ( "% uAC 00 ") 또는 inta ="% uAC 00 " unescape ( inta ) 알파벳 과 숫자 및 *, @, -, _ , + , . , / 를 제외 한 문자 를 모두 16 진수 문자 로 바꾸 어 준다 왼쪽 과 반 대로 < script language =" javascript "> document . write ( escape ( " 가 ")) document . write ( unescape ( "% uAC 00 ")) / / " 가 " </ script > 사용 자 정의 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 가장 일반 적 인 자바 스크립트 사용 방법 으로 일련 의 실행 과정 을 자바 스크립트 코드 로 묶 어서 이름 을 주 고 필요 할 경우 얘 의 이름 을 불러서 실행 되 도록 하 는 방법 이 다 . 이름 을 불러 주 지 않 으면 실행 을 하 지 않 는다 ! !!■ function ( 소문자 로 ! ) 1 . 매개변수 없 는 경우 function 함수 이름 ( ) { 자바 스크립트 코드 } 함수 이름 뒤 에 는 꼭 ( ) 를 . .. 이 함수 가 수행 할 범위 는 {} 로 . ..< script language =" javascript "> function TEST ( ) { document . write ( " 안녕 ! ") }</ script > < script language =" javascript "> TEST ( ) / / 호출 하 기 ( 이름 을 불러 줘야 실행 ! )</ script > 2 . 매개변수 있 는 경우 function 함수 이름 ( 변수 1 , 변수 2 , ...) { 자바 스크립트 코드 } 함수 이름 뒤 에 는 ( ) 속 에 매개변수 를 지정 * 호출 하 는 쪽 에서 매개 해 줘야 ! !< script language =" javascript "> function TEST ( sname , sage ) { document . write ( " 이름 은 " + sname +" 이 고 , 나이 는 " + sage ) }</ script > < script language =" javascript "> TEST ( " 홍길동 ", 25 ) / / 호출 하 기 ( 이름 을 불러 줘야 실행 ! )</ script > 3 . return 값 이 있 는 경우 function 함수 이름 ( 변수 1 , 변수 2 , ...) { 자바 스크립트 코드 } 함수 실행 결과 리턴 값 을 호출 한 쪽 \ 에 넘겨 줄 수 있 다 . < script language =" javascript "> function TEST ( inta , intb ) { return inta + intb / / 호출 한 쪽 에 값 을 넘겨 줌 ! }</ script > < script language =" javascript "> returnV = TEST ( 50 , 25 ) / / 실행 결과 리턴 값 을 returnV 라는 변수 에 대입 ! document . write ( returnV ) </ script > ■ function 호출 하 기 1 . 다른 자바 스크립트 구문 에서 ( 위 의 경우 ) * 다른 자바 스크립트 구문 이 실행 될 때 2 . 링크 에 의해 < a href =" javascript : TEST ( ) "> 실행 </ a > 3 . body 태그 에서 < body onLoad =" TEST ( ) "> * 페이지 로딩 시 실행 4 . 기타 나중 에 나올 다양 한 이벤트 에 의해 ( onClick , onMouseOver 등등 등등 . ..) 위 의 경우 는 . .. 첫째 자바 스크립트 구문 은 함수 이 기 때문 에 호출 을 받 아야 실행 됩니다 . 둘 ? 자바 스트립 트 구문 은 함수 가 아니 므로 자동 으로 실행 됩니다 . 내장 객체 Arrary ( ) : 배열 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 자바 스크립트 에서 사용 할 수 있 는 객체 는 자바 스크립트 언어 자체 에서 지원 하 는 객체 와 자기 것 은 아니 지만 브라우저 에 포함 된 객체 를 사용 할 수 있 다 . * 메 서드 , 함수 , 프로 퍼티 , 객체 에 대한 얘기 는 나중 에 기회 가 있 을 때 하 기 로 하 고 처음 인 분 은 당장 중요 한 아닐 것 같 다 . 이 개념 을 모르 고 도 사용 하 다 보 면 나중 에 는 저절로 알 게 되 는 날 이 온다 . 결국 모르 면 안 된다는 얘기 같 기 도 . .. 자주 사용 하 는 중요 한 객체 위주 로 메 서드 와 프로 퍼티 를 살펴보 자 ! !!■ Array 객체 ( 배열 을 사용 할 수 있 다 ) * 아주 중요 함 myary = new Array ( ) 또는 myary = new Array ( 5 ) 배열 이름 만 선언 배열 이름 과 배열 크기 를 선언 ( 총 5 개 요소 ) 속성 length 배열 의 크기 ( 배열 요소 의 개수 ) 메 서드 join ( ) 배열 요소 들 을 하나 의 문자열 로 만들 어 줌 reverse ( ) 배열 요소 의 값 의 순서 를 역순 으로 바꿈 sort ( ) 배열 요소 의 값 을 정렬 concat ( 제 2 의 배열 ) 두 개 의 배열 을 하나 로 만들 기 slice ( s , e ) s 첨자 의 배열 요소 값 부터 e 미만 의 배열 요소 값 가져와서 새로운 배열 만들 기 < script language =" javascript "> myary = new Array ( 5 ) / / 배열 선언 myary [ 0 ] = 1 / / 배열 요소 에 값 을 할당 myary [ 1 ] = 2 myary [ 2 ] = 3 myary [ 3 ] = 4 myary [ 4 ] = 5 document . write ( myary . length ) / / 배열 의 크기 ( 배열 요소 의 개수 ) 5 </ script > < script language =" javascript "> myary = new Array ( 5 ) myary [ 0 ] = 1 myary [ 1 ] = 2 myary [ 2 ] = 3 myary [ 3 ] = 4 myary [ 4 ] = 5 / / 배열 크기 를 반 복문 에 사용 하 면 각 배열 요소 값 에 접근 을 쉽 게 ! !! for ( k = 0 ; k < myary . length ; k ++) { document . write ( myary [ k ] + "< br >")}</ script > 내장 객체 String ( ) : 문자열 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 문자열 은 무조건 잘 다뤄야 한다 . 특히 길 이 , 특정 문자 찾 기 , 특정 문자 포함 여부 등 을 체크 할 때 많이 사용 하 는 객체 이 다 . 예 제 를 꼭 해 볼 것 ! !■ String 객체 ( 문자열 관련 ) * 아주 중요 함 문자열 . 프로 퍼티 또는 문자열 . 메 서드 사용자 입력 값 을 체크 하 는 중요 한 객체 ! !! 속성 length 문자열 의 길이 ( 한글 한 문자 도 1 로 ) 메 서드 charAt ( 숫자 ) 숫자 위치 에 해당 하 는 문자 indexOf ( 문자 또는 문자열 ) 문자 또는 문자열 이 나오 는 위치 를 숫자 로 * 왼쪽 부터 substring ( 숫자 1 , 숫자 2 ) * 소문자 로 위치 로 숫자 1 에서 숫자 2 - 1 사이 문자열 split ( 대상 , " 기준 문자 ") 대상 문자열 을 기준 문자 로 분리 => 배열 로 * 기타 많 지만 자주 사용 하 는 것 만 ! < script language =" javascript "> str = " 안녕 하 세요 ! DRAGONEYE 입니다 ~~" document . write ( str . length + "< br >") document . write ( str . charAt ( 5 ) + "< br >") document . write ( str . indexOf ( "!") + "< br >") document . write ( str . substring ( 7 , 16 ) + "< br >") </ script >< script language =" javascript "> str = " 안녕 하 세요 ! DRAGONEYE 입니다 ~~"// 반복 적 으로 모든 문자 를 하나 씩 검사 하 여 "!" 포함 여부 를 알아내 기 for ( k = 0 ; k < str . length ; k ++) { if ( str . charAt ( k ) =="!") { document . write ( "! 가 있 군요 ")}}</ script > < script language =" javascript "> str = " 안녕 하 세요 ! DRAGONEYE 입니다 ~~" if ( eval ! ( str . indexOf ( "!"))> 0 ) { document . write ( "! 가 있 군요 ")}// str . indexOf ( ) 는 포함 시 0 보다 큰 숫자 , 못 찾 으면 - 1 을 </ script > < script language =" javascript ">// 드라군 님 제공 소스 var s = " 1 , 2 , 3 , 4 "; var buff = s . split ( ","); for ( i = 0 ; i < buff . length ; i ++) { document . write ( buff [ i ] + "< BR >");}</ script > 내장 객체 Screen ( ) , Date ( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 아래 는 있 다는 것 만 알 아 두 자 . ■ Screen 객체 ( 사용자 컴퓨터 의 화면 관련 ) screen . 프로 퍼티 브라우저 의 크기 와 관련 된 정보 를 얻 을 수 있 다 . ( * new 연산자 없이 ) availWidth 브라우저 에서 내용 을 보여 는 부분 의 너비 availHeight 브라우저 에서 내용 을 보여 는 부분 의 높이 height 전체 화면 의 height 값 width 전체 화면 의 width 값 < script language =" javascript "> document . write ( screen . availWidth + "< br >") document . write ( screen . availHeight + "< br >") document . write ( screen . width + "< br >") document . write ( screen . height + "< br >") </ script > ■ Date 객체 ( 사용자 컴퓨터 의 시스템 시간 을 참조 ) strdate = new Date ( ) 메 서드 , 프로 퍼티 사용 Date 객체 의 인 스턴스 생성 Date 객체 와 같 은 기능 을 가진 객체 를 하나 만들 면 ( strdate ) 얘 를 통해서 Date 객체 가 가진 메 서드 와 프로 퍼티 를 사용 할 수 있 다 . * 이 때 만들 어 진 strdate 같 은 걸 객체 의 인 스턴스 라고 부른다 . 똑 같 은 샘플 ! !! 값 가져오 는 값 메 서 드 getYear ( ) 1970 년 이후 의 연도 1970 ~ 1999 년 도 사이 는 0 ~ 99 그 이후 는 네 자리 숫자 의 년 도 getMonth ( ) 월 0 ( 1 월 ) - 11 ( 12 월 ) getDay ( ) 요일 , 0 ( 일 ) - 6 ( 토 ) getHours ( ) 시간 , 0 - 23 getMinutes ( ) 분 , 0 - 59 getSeconds ( ) 초 , 0 - 59 값 설정 하 는 메 서드 setYear ( ) 1970 년 이상 을 설정 setMonth ( ) 월 을 설정 setDay ( ) 요일 을 설정 setHours ( ) 시간 을 설정 setMinutes ( ) 분 을 설정 setSeconds ( ) 초 를 설정 < script language =" javascript "> sdate = new Date ( ) syear = sdate . getYear ( ) document . write ( syear ) / / 2003 </ script > * 기타 Number , Event 등등 이 있 지만 이 정도 면 충분 할 것 으로 본다 . * 수학 관련 각종 계산 을 하 려면 Math ( ) 를 따로 살펴 보 시 도록 자바 스크립트 이벤트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 아주 중요 한 이벤트 ! !! 이벤트 란 모든 행위 를 말 하 는 것 으로 프로그램 에서 는 미리 사용 자 의 행위 를 예측 하 여 미리 사용 할 수 있 도록 이벤트 를 많이 준비 해 놓 고 있 다 . 예 를 들 어 사용 자 가 마우스 를 클릭 할 것 이 다 . ... 이건 click 이벤트 로 준비 ! 이게 없 다면 우리 는 사용 자 가 마우스 를 클릭 했 는지 부터 알아내 야 다음 일 을 할 수 있 을 것 이 다 . 고맙 게 도 click 이 일어났 다는 걸 자동 으로 알 수 있 으니 얼마나 고마운 일 인가 . ..( Click , MouseOver , MouseOut , Submit . ..) 이벤트 핸들러 란 ? 이러 한 이벤트 와 우리 가 준비 한 프로그램 을 연결 해 주 는 구실 을 한다 ( onClick , onMouseOver , onMouseOut , onSubmit . ..)* 그래서 우리 가 할 일 은 이벤트 가 일어났 을 때 할 일 을 준비 하 고 이벤트 핸들러 에게 그 일 을 하 도록 연결 해 두 면 되 는 것 이 다 ~~~* 익스플로러 와 네비 게이트 사이 에 약간 의 차이 가 있 어 익스플로러 기준 으로 ! !!■ 이벤트 의 종류 와 의미 ( 이벤트 핸들러 는 이벤트 에 on 을 붙여 준다 ) blur 포커스 를 다른 곳 으로 옮길 경우 click 링크 나 폼 의 구성원 을 클릭 할 때 change 선택 값 을 바꿀 경우 focus 포커스 가 위치 할 경우 mouseover 마우스 가 올라올 경우 mouseout 마우스 가 떠날 경우 mousedown 마우스 를 누를 경우 mousemove 마우스 를 움직일 경우 mouseup 마우스 를 눌렀 다 놓 을 경우 select 입력 양식 의 하나 가 선택 될 때 submit 폼 을 전송 하 는 경우 load 페이지 , 윈도우 가 브라 우 져 로 읽혀질 때 unload 현재 의 브라우저 , 윈도우 를 떠날 때 error 문서 나 이미지 에서 에러 를 만났 을 때 reset 리셋 버튼 이 눌렸 을 때 dbclick 더블클릭 시 dragdrop 마우스 누르 고 움직일 경우 keydown 키 입력 시 keypress 키 누를 때 keyup 키를 누르 고 놓 았 을 때 move 윈도우 나 프레임 을 움직일 때 resize 윈도우 나 프레임 사이즈 를 움직일 때 ■ 메 서드 blur ( ) 입력 포커스 를 다른 곳 으로 이동 시킴 click ( ) 마우스 버튼 이 눌러진 것 처럼 해줌 focus ( ) 입력 포커스 를 준 것 처럼 해줌 submit ( ) 폼 의 submit 버튼 을 누른 것 처럼 해줌 select ( ) 메소드 폼 의 특정 입력 필드 를 선택 함 ■ 속성 event . keyCode 누른 키 의 ASCII 정수 값 event . x 문서 기준 누른 좌표 의 leftevent . y 문서 기준 누른 좌표 의 topevent . clientX 문서 기준 누른 좌표 의 leftevent . clientY 문서 기준 누른 좌표 의 topevent . screenX 콘테 이너 기준 누른 좌표 의 leftevent . screenY 콘테 이너 기준 누른 좌표 의 top ■ 브라우저 객체 별 이벤트 핸들러 선택 목록 ( SELECT ) onBlur ! , onChange , onFocus 문자 필드 ( TEXT ) onBlur ! , onChange , onFocus , onSelect 문자 영역 ( TEXTAREA ) onBlur ! , onChange , onFocus , onSelect 버튼 ( BUTTON ) onClick 체크 박스 ( CHECKBOX ) onClick 라디오 버튼 ( RADID ) onClick 링크 onClick , onMouseoverRESET 버튼 ( RESET ) onClickSUBMIT 버튼 ( BUTTON ) onClick DOCUMENTonLoad , onUnloadWINDOWonLoad , onUnload 폼 ( FORM ) onSubmit < script language =" javascript "> function TEST ( ) { alert ! ( " 페이지 로딩 시 자동 호출 ! ")}</ script >< body onLoad =" TEST ( ) ">< script language =" javascript "> function TEST ( ) { alert ! ( " Click 했 군요 ! ")}</ script >< font onClick =" TEST ( ) "> Click ! </ font >< script language =" javascript "> function TEST ( ) { alert ! ( " 마우스 를 올리 지 마세 욤 ! ")}</ script >< font onMouseOver =" TEST ( ) "> MouseOver </ font >< script language =" javascript "> function TEST ( ) { alert ! ( " 현재 좌표 는 " + event . x + "/" + event . y ) }</ script >< font onClick =" TEST ( ) "> Click 좌표 </ font >* 브라우저 객체 ( window , document , form , image , layer , ...) 와 함께 사용 되 기 때문 에 여기 서 는 간단 하 게 종류 와 의미 만 살펴보 고 ! !! 브라우저 내장 객체 계층 구조 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 익스플로러 나 네 비게 이터 등 의 브라우저 가 내장 하 고 있 는 객체 를 자바 스크립트 를 이용 하 여 이용 할 수 있 다 . 이 부분 이 자바 스크립트 의 상당 부분 을 차지 할 정도 로 중요 하 고 이용빈 도 또한 아주 높 다 . ■ 객체 구성 ( 테이블 태그 로 만든 도표 ) window d o c u m e n t f r a m ehistorylocationnavigator anchorapplet ! a r e a f o r m imagelayerlinkplugintitle buttoncheckboxfile u p l o a d h i d d e n p a s s w o r d r a d i o r e s e tselectsubmittexttextarea option 위 의 각각 은 모두 객체 이름 이 다 . 일단 숫자 에 한 번 놀 라고 ! 또한 각각 의 객체 는 모두 자신 만 의 속성 과 메 서드 와 이벤트 핸들러 를 가지 고 있 다 . 그 숫자 또한 엄청 많 아서 또 한 번 놀라 야 한다 ! !! 그러나 걱정 할 일 은 아니 다 . HTML 에서 만난 적 이 있 는 안 면 있 는 태그 들 을 전부 객체 라고 부를 뿐 이 다 . 브라우저 객체 는 최상위 window 객체 로부터 파생 되 어 계층 적 인 구조 를 가지 고 있 다 . window 객체 의 메 서드 open ( ) 을 사용 한다면 window . open ( ) 처럼 사용 할 수 있 다 . window 객체 는 최상위 객체 로 생략 하 여 open ( ) 처럼 사용 할 수 있 지만 같 은 메서 드 를 다른 객체 도 가질 수 있 으므로 객체 이름 을 꼭 적 어 주 는 게 좋 겠 다 window 객체 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 아래 는 최상위 window 객체 가 가진 속성 과 메 서드 , 이벤트 핸들러 의 종류 를 ? 어 보 고 몇 가지 예제 를 해본다 . 필요 한 작업 이 있 을 때 마다 객체 를 찾아보 고 속성 이 있 나 , 메서 드 를 가졌 나 , 이벤트 핸들러 가 있 는지 를 찾 아 봄 으로써 점점 내공 이 깊 어 지 는 것 이 다 . ■ window 객체 프로 퍼티 status 브라우저 의 상태 바 에 문자열 을 출력 하 는 경우 에 사용 defaultStatus 브라우저 의 상태 바 에 초기 문자열 을 설정 length 창안 의 프레임 수 name 창 이름 self 현재 창 자신 , window 와 같 음 window 현재 창 자신 , self 와 같 음 parent 프레임 에서 현재 프레임 의 상위 프레임 top 현재 프레임 의 최상위 프레임 openeropen ( ) 으로 열린 창 에서 볼 때 자기 를 연 창 documentdocument 오브젝트 frames 창안 의 모든 프레임 에 대한 배열 정보 historyhistory 오브젝트 및 배열 locationlocation 오브젝트 closed 창 이 닫혀 있 는 상태 locationbarlocation 바 menubar 창 메뉴 바 innerHeight 창 표시 영역 의 높이 ( 픽셀 ) , 익스플로러 지원 되 지 않 음 innerWidth 창 표시 영역 의 너비 ( 픽셀 ) , 익스플로러 지원 되 지 않 음 outerHeight 창 바깥쪽 둘레 의 높이 , 익스플로러 지원 되 지 않 음 outerWidth 창 바깥쪽 둘레 의 너비 , 익스플로러 지원 되 지 않 음 pageXOffset 현재 나타나 는 페이지 의 X 위치 , 익스플로러 지원 되 지 않 음 pageYOffset 현재 나타나 는 페이지 의 Y 위치 , 익스플로러 지원 되 지 않 음 personalbar 창 의 퍼스널 바 scrollbar 창 의 스크롤 바 statusbar 창 의 상태 바 toolbar 창 의 툴 바 ■ window 객체 메 서 드 alert ! ( ) 경고 용 대화 상자 를 보여줌 clearTimeout ( ) setTimeout 메소드 를 정지 confirm ! ( ) 확인 , 취소 를 선택 할 수 있 는 대화 상자 를 보여줌 open ( ) 새로운 창 을 오픈 prompt ( ) 입력 창 이 있 는 대화 상자 를 보여줌 setTimeout ( ) 일정 간격 으로 함수 를 호출 하 여 수행 , millisecond 단위 로 지정 eval ! ( ) 문자열 을 숫자 로 바꿈 toString ( ) 오브젝트 를 문자열 로 바꿈 blur ( ) focus 를 이동 focus ( ) focus 를 줌 scroll ( ) 창 을 스크롤 함 valueOf ( ) 오브젝트 값 을 반환 back ( ) 한 단계 전 URL ( 이전 화면 ) 로 돌아감 . 익스플로러 지원 안함 find ( ) 창안 에 지정 된 문자열 이 있 는지 확인 , 있 다면 true 없 으면 false . 익스 플 러 러 지원 안함 forward ( ) 한 단계 뒤 의 URL ( 다음 화면 ) 로 이동 . 익스플로러 지원 안함 home ( ) 초기 화 홈페이지 로 이동 . 익스플로러 지원 안함 moveby ( ) 창 을 상대 적 인 좌표 로 이동 . 수평 방향 과 수직 방향 의 이 동량 을 픽셀 로 지정 moveto ! ( ) 창 을 절대 적 인 좌표 로 이동 . 창 의 왼쪽 상단 모서리 를 기준 으로 픽셀 을 지정 resizeby ( ) 창 의 크기 를 상대 적 인 좌표 로 재 설정 . 밑변 의 모서리 를 기준 으로 수평 방향 , 수직 방향 을 픽셀 로 지정 resizeto ! ( ) 창 의 크기 를 절대 적 인 좌표 로 재 설정 . 창 크기 를 픽셀 로 지정 scrollby ( ) 창 을 상대 적 인 좌표 로 스크롤 . 창 의 표시 영역 의 수평 방향 과 수직 방향 에 대해 픽셀 로 지정 scrollto ( ) 창 을 절대 적 인 좌표 를 스크롤 . 창 의 왼쪽 상단 모서리 를 기준 으로 픽셀 로 지정 stop ( ) 불러오 기 를 중지 . 익스플로러 는 지원 안함 captureEvents ( ) 모든 타입 의 이벤트 를 판단 setInterval ( ) 일정 시간 마다 지정 된 처리 를 반복 clearInterval ( ) setInterval 메소드 의 정지 handleEvent ( ) 이벤트 취급자 를 정함 print ( ) 화면 에 있 는 내용 을 프린터 로 출력 releaseEvent ( ) 다른 계층 의 이벤트 로 이벤트 를 넘김 routeEvent ( ) 판단 한 이벤트 와 같 은 계층 의 이벤트 toSource ( ) 오브젝트 값 을 문자열 로 반환 ■ window 객체 이벤트 핸들러 onBlur ! 브라우저 가 포커스 를 잃 을 때 발생 onDragDrop 사용 자 가 다른 곳 에서 객체 를 브라우저 안 에 넣 으려고 할 때 발생 . 익스플로러 는 지원 안함 onError 문서 를 읽 는 중 에 에러 가 생길 때 발생 onFocus 브라우저 에 포커스 를 얻 을 때 발생 onLoad 문서 를 읽 을 때 발생 onMove 브라우저 의 위치 를 변경 했 을 때 발생 . 익스플로러 는 지원 안함 onResize 창 의 크기 를 변경 했 을 때 발생 . 익스플로러 는 지원 안함 onUnload 현재 문서 를 지울 려고 할 때 발생 ■ 새창 열기 open ( ) 메 서드 window . open ( " 문서 url "," 창 이름 "," 창 의 특성 ") 웹 여행 중 에 많이 본 것 일 텐데 링크 나 , 버튼 , 이미지 를 누를 때 많이 뜨 죠 ! 첫째 인수 로 url 이 필요 하 죠 . 새창 에 도 내용 을 넣 어야 하 니까요 . 둘째 인수 로 창 이름 , 이게 같 은 경우 엔 계속 창 을 열 때 새로 열 지 않 고 이미 열린 창 을 이용 합니다 . 세째 인 수 는 새로 열릴 창 의 너비 , 높이 , 툴바 , 상태 바 등 을 지정 하 는 거 죠 . ■ 창 의 특성 directoriesyes || no 익스플로러 연결 도 구모 음 , 익스플로러 전용 locationyes || no 주소 입력 란 menubaryes || no 메뉴 표시줄 scrollbarsyes || no 스크롤바 statusyes || no 상태 표시 줄 toolbaryes || no 도구 모음 copyhistoryyes || no 히스토리 정보 를 복사 resizableyes || no 창 크기 조절 가능 여부 width 픽셀 창 의 너비 height 픽셀 창의 높이 < script language =" javascript ">// 페이지 로 딩시 새창 열기 function winOpen ( ) { window . open ( " 123 . html "," newWin "," width = 300 , height = 200 , toolbar = no ")} </ script > < body onLoad =" winOpen ( ) "> < script language =" javascript ">// 클릭 시 새창 열기 function winOpen ( ) { window . open ( " 123 . html "," newWin "," width = 300 , height = 200 , toolbar = no ")} </ script > < font onClick =" winOpen ( ) "> < script language =" javascript ">// 클릭 시 새창 열기 , 링크 에서 function winOpen ( ) { window . open ( " 123 . html "," newWin "," width = 300 , height = 200 , toolbar = no ")} </ script > < font onClick =" winOpen ( ) "> 클릭 열기 </ font >< a href =" javascript : winOpen ( ) "> 링크 열기 </ a > < script language =" javascript ">// 매개변수 를 이용 하 기 function winOpen ( url , winname , winhow ) { window . open ( url , winname , winhow ) } </ script > < a href = " javascript : winOpen ( ' 123 . html ',' newWin ',' width = 300 , height = 200 , toolbar = no ')"> 매개 열기 </ a > ■ 새창 열기 close ( ) 메 서드 < script language =" javascript "> function winClose ( ) { window . close ( ) } </ script > < a href = " javascript : winClose ( ) "> 함수 이용 해서 닫 기 </ a > < a href = " javascript : window . close ( ) "> 메 서드 이용 닫 기 </ a > ■ 새로 열린 창 에서 연 창 을 컨트롤 하 기 < script language =" javascript ">// 창 닫 기 전 에 연 창 의 폼 요소 에 값 넘기 기 function winClose ( addr ) { opener . form 1 . address = addrself . close ( ) } </ script > < a href = " javascript : winClose ( ' 서울 종로구 ')"> 종로구 </ a > < a href = " javascript : winClose ( ' 서울 마포구 ')"> 마포구 </ a > < script language =" javascript ">// 창 닫 기 전 에 연 창 을 리 로드 하 기 function winClose ( ) { opener . location ! . reload ( ) self . close ( ) } </ script > < a href = " javascript : winClose ( ) "> 함수 이용 해서 닫 기 </ a > ■ 새로 열린 창 에서 크기 조절 하 기 window . resizeTo ! < script language =" javascript ">// 페이지 로 딩시 크기 조절 function winSize ( ) { window . resizeTo ! ( 300 , 200 ) / / 너비 , 높이 } </ script > < body onLoad =" winSize ( ) "> ■ 새로 열린 창 에서 위치 조절 하 기 window . moveTo ! < script language =" javascript ">// 페이지 로 딩시 위치 조절 function winMove ( ) { window . moveTo ! ( 200 , 200 ) / / X , Y 좌표 } </ script > < body onLoad =" winMove ( ) "> window 객체 에서 가장 많이 사용 되 는 필수 기능 인 새창 관련 만 살펴보 았 다 . 나머지 는 필요 할 때 검색 을 통해 많 은 예제 소스 를 접할 수 있 을 것 이 다 ! !! document 객체 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 최상위 window 객체 에서 파생 된 것 으로 < body >~</ body > 태그 속 의 내용 과 관련 된 처리 를 할 수 있 다 . 많 은 기능 이 있 지만 이 객체 는 범위 가 넓 어서 직접 다루 는 일 은 별로 없 고 실제 이용 은 이 객체 에서 파생 된 하위 객체 ( Layer , Link , Image , Area , Anchor , Applet ! , Form ) 를 통해 세세 한 접근 을 할 수 있 다 . 상위 객체 인 window 를 생략 하 고 사용 한다 ! !!■ document 객체 프로 퍼티 title 문서 의 제목 을 설정 하 거나 반환 location 현재 문서 의 URLreferer 이전 문서 의 URLcookie 쿠키 파일 의 정보 bgColor 창 의 배 경색 을 설정 fgColor 글 자색 을 설정 lastModified 파일 의 최종 변경 날짜 를 알아냄 URL 현재 의 URLalinkColor 누르 고 있 는 동안 의 링크 문자열 의 색 을 설정 vlinkColor 이미 누른 적 이 있 는 링크 문자열 의 색 을 설정 linkColor 링크 색 을 설정 anchorsanchor 오브젝트 및 배열 formsform 오브젝트 및 배열 links 링크 오브젝트 및 배열 domain 현재 도메인 이름 ( tainting 상태 일 때 만 사용 가능 ) applet ! sapplet ! 배열 areaarea 오브젝트 embedsplug in 배열 정보 images 이미지 오브젝트 및 배열 layerslayer 오브젝트 및 배열 ■ document 객체 메 서 드 open ( ) 문서 에 내용 입력 준비 됨 , 기존 내용 삭제 됨 close ( ) 문서 에 내용 입력 이 끝났 음 clear ( ) 문서 의 내용 을 삭제 write ( ) 문서 에 내용 을 출력 writeln ( ) 줄 바꾸 기 를 포함 문서 에 내용 을 출력 eval ! ( ) 문자열 을 수치 로 변경 toString ( ) 오브젝트 를 문자열 로 변경 valueOf ( ) 오브젝트 값 을 표시 getSelection ( ) 선택 범위 안 에 포함 되 어 있 는 문자열 을 반환 captureEvent ( ) 모든 타입 의 이벤트 를 판단 releaseEvent ( ) 다른 계층 의 이벤트 로 이벤트 를 넘김 routeEvent ( ) 판단 한 이벤트 와 같 은 계층 의 이벤트 toSource ( ) 오브젝트 값 을 문자열 로 표시 ■ document 객체 이벤트 핸들러 onBlur ! 문서 가 비활성 화 될 경우 onFocus 문서 가 활성 화 될 경우 onClick 문서 가 클릭 될 때 onDBClick 문서 가 더블클릭 될 때 onKeyDown 키를 누를 때 발생 onKeyPress 키를 누르 고 있 을 때 발생 onKeyUp 키를 눌렀 다 놓 을 때 발생 onMouseDown 아 우스 를 누를 때 발생 onMouseUp 마우스 를 눌렀 다 놓 을 때 발생 ■ 현재 문서 의 URL < script language =" javascript "> alert ! ( document . location ! )</ script > ■ 이전 문서 의 URL < script language =" javascript "> alert ! ( document . referer ) / / 이 파일 을 링크 한 페이지 에서 넘어와야 값 이 있 음 ! </ script > 기타 : 문서 를 구성 하 는 이미지 , 링크 , 폼 태그 , 레이어 의 배열 정보 를 얻 을 수 있 다 . history 객체 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... window 객체 에서 파생 된 것 으로 window 를 생략 한다 . 방문자 가 최근 에 방문 한 URL 을 웹 브라우저 가 저장 해 둔 히스토리 정보 를 이용 해서 앞 으로 , 뒤 로 갈 수 있 다 . URL 자체 를 알아내 지 는 못한다 ! 어떤 일 처리 를 하 고 나 서 원래 의 페이지 로 보낼 때 ! 이용 하 겠 죠 ! !!* 새로 서버 의 문서 를 요청 하 지 않 고 보관 하 고 있 던 페이지 를 보여 준다는 것 ! !!■ history 객체 프로 퍼티 length 저장 된 URL 개수 ■ history 객체 메 서 드 back ( ) 히스토리 목록 에서 한 단계 뒤 로 forward ( ) 히스토리 목록 에서 한 단계 앞 으로 go ( 정수 ) 히스토리 목록 에서 한 단계 앞 으로 , 뒤 로 ( 음 의 정수일 경우 ) back ( ) 는 go ( - 1 ) 과 같 음 ■ 뒤 로 돌아가 기 < script language =" javascript "> alert ! ( " 암호 가 다르 군요 ") history . back ( ) / / history . go ( - 1 ) 과 동일 </ script > < a href =" javascript : history . back ( ) "> 뒤 로 </ a > location 객체 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... window 객체 에서 파생 된 것 으로 window 를 생략 한다 . 현재 열려 있 는 문서 의 URL 정보 를 얻 을 수 있 고 . .. 이 보다 는 앞 으로 이동 할 문서 의 URL 을 설정 하 는 데 아주 중요 하 게 사용 됩니다 ! !!■ location 객체 프로 퍼티 아래 URL 샘플 을 가지 고 URL 에 대한 이해 를 하 시 길 . .. http : / / www . dragoneye . co . kr : 80 / column 2 / list . asp # top ? table = table 30 & page = 2 href 문서 의 URL 주소 위 주소 전체 host 호스트 이름 과 포트 http : / / www . dragoneye . co . kr : 80 hostname 호스트 컴퓨터 이름 http : / / www . dragoneye . co . krhash 앵커 이름 # toppathname 디렉 토리 이하 경로 / column 2 / list . aspport 포트 번호 부분 80 protocol 프로토콜 종류 http : searchURL 조회 부분 table = table 30 & page = 2 ■ location 객체 메 서 드 eval ! ( ) 문자열 을 숫자 로 바꿈 toString ( ) 오브젝트 를 문자열 로 바꿈 reload ( ) 현재 문서 를 다시 읽 어 옴 replace ( ) 현재 문서 를 다른 URL 문서 로 바꿈 valueOf ( ) 오브젝트 값 을 표시 toSource ( ) 오브젝트 값 을 문자열 로 표시 ■ 열릴 문서 의 URL 설정 하 기 < script language =" javascript ">// URL 을 이동 시킴 location . href = " http : / / www . dragoneye . co . kr "// location . href = " login . html " </ script > < script language =" javascript "> alert ! ( " 회원 가입 을 하 시 겠 습니까 ? ") location . href = " member . html "</ script > < script language =" javascript ">// 연 창의 URL 이동 opener . location ! . href = " member . html "</ script > < script language =" javascript ">// 부모 창 지정 프레임 의 URL 이동 parent . frame 1 . location ! . href = " member . html "</ script > < script language =" javascript ">// 전체 창 에 새 페이지 열기 top . location ! . href = " index . html "</ script > ■ 문서 새로 열 기 < a href =" javascript : location . reload ( ) "> 새로 열 기 </ a > < script language =" javascript ">// 연 창의 URL 새로 열 기 opener . location ! . reload ( ) </ script > image 객체 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... document 객체 소속 으로 문서 내 모든 이미지 에 정보 를 가지 고 있 고 또한 설정 도 가능 하 다 . 기존 < img > 태그 의 모든 속성 을 컨트롤 할 수 있 다 ! 실제 사용 시 에 는 문서 내 의 이미지 에 대한 설정 을 변경 하 고자 할 때 사용 됩니다 ! !!■ image 객체 프로 퍼티 < img > 태그 에서 의 각종 속성 이 그대로 객체 의 속성 으로 되 어 있 음 을 알 수 있 다 . 아래 객체 속성 을 이용 하 면 이미지 의 모든 속성 을 바꿀 수 있 다 . name 이미지 객체 의 이름 src 이미지 URLwidth 너비 height 높이 border 테두리 선 두께 hspace 좌우 여백 vspace 상하 여백 align 텍스트 속 의 정렬 ■ image 객체 이벤트 핸들러 onclick , onMouseOver , onMouseOut 정도 를 이용 하 면 된다 . ■ 이미지 관련 예제 : < img > 에 name 을 설정 해야 자바 스크립트 객체 롤 접근 ! < script language =" javascript ">// 자신 의 이미지 바꿔 주 기 function imgChange ( ) { document . img 1 . src =" 2 . gif "}</ script >< img name =" img 1 " src =" 1 . gif " onClick =" imgChange ( ) ">< script language =" javascript ">// 자신 의 이미지 롤 오버 효과 function imgOver ( ) { document . img 1 . src =" 2 . gif "} function imgOut ( ) { document . img 1 . src =" 1 . gif "} </ script >< img name =" img 1 " src =" 1 . gif " onMouseOver =" imgOver ( ) " onMouseOut =" imgOut ( ) ">< script language =" javascript ">// 작 은 이미지 클릭 시 큰 이미지 보여 주 기 ( 이미지 쇼 ) function imgChange ( img ) { document . img 1 . src = img }</ script ><!-- 큰 이미지 초기 src 는 1 b . gif --> < img name =" img 1 " src =" 1 b . gif "><!-- 작 은 이미지 -->< img src =" 1 s . gif " onMouseOver =" imgChange ( ' 1 b . gif ')">< img src =" 2 s . gif " onMouseOver =" imgChange ( ' 2 b . gif ')">* 레이어 및 새창 과 도 연결 해 사용 할 수 있 다 . frame 객체 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... window 객체 소속 으로 브라우저 내 의 모든 프레임 에 대해 정보 를 가지 고 있 다 . 실제 사용 시 에 는 문서 내 의 이미지 에 대한 설정 을 변경 하 고자 할 때 사용 됩니다 ! !! 이 객체 의 속성 , 메 서드 , 이벤트 핸들러 는 window 객체 와 동일 하 다 . frame 객체 에서 중요 한 건 여러 개 의 프레임 으로 나뉜 경우 어느 프레임 에서 다른 프레임 에 어떻게 접근 할 수 있 는가 하 는 것 이 다 . * 프레임 나누 기 와 이름 주기 는 HTML 에서 먼저 약간 의 공부 를 필요 로 한다 . 아래 소스 는 HTML 프레임 만들 기 의 예제 소스 이 다 . index . html < html >< head >< title > 드래곤 아이 입니다 ~~ ASP , HTML </ title >< meta http - equiv =" Content - Type " content =" text / html ; charset = euc - kr "></ head >< frameset rows =" 100 , *" frameborder =" NO " border =" 0 ">< frame src =" top . html " name =" top " scrolling =" NO " noresize marginwidth =" 0 " >< frameset cols =" 200 , *" frameborder =" NO " border =" 0 ">< frame src =" left . html " name =" left " scrolling =" NO " noresize marginwidth =" 0 " marginheight =" 0 ">< frame src =" main . html " name =" main " scrolling =" auto " noresize ></ frameset ></ frameset >< noframes >< body ></ body ></ noframes ></ html >■ parent 속성 위 와 같 은 프레임 구조 에서 어느 프레임 파일 에서 다른 프레임 파일 에 접근 하 는 방법 은 frames [ 0 ] , frames [ 1 ] , frames [ 2 ] 배열 정보 를 이용 할 수 있 고 또는 top , left , main 프레임 이름 으로 접근 할 수 도 있 다 . ■ parent , top , self main . html 에 폼 태그 form 1 이 있 고 , 폼 요소 address 가 있 는데 top . html 에서 위 페이지 의 폼 요소 address 에 접근 하 는 방법 이 다 . parent . frames [ 2 ] . document . form 1 . address . value =" 서울 " 또는 parent . main . document . form 1 . address . value =" 서울 " 으로 . ... 어느 특정 프레임 파일 에서 위 의 index . html 같 은 프레임 셋 파일 을 창 전체 에 어떤 문서 를 로딩 하 려면 top 이 란 속성 을 사용 해야 한다 . document . top . location ! . href =" index 2 . html " 어느 특정 프레임 파일 에서 부모 창의 URL 을 바꾸 는 방법 parent . top 이나 parent . left 를 생략 하 면 self 가 적용 되 어 자기 창 에 실행 이 된다 . parent . top . location ! . href =" top 2 . html " parent . left . location ! . href =" left 2 . html " 어느 특정 프레임 파일 에서 부모 창의 URL 을 리 로 딩 하 기 parent . top 이나 parent . left 를 생략 하 면 self 가 적용 되 어 자기 창 에 실행 이 된다 . parent . top . location ! . reload ( ) parent . left . location ! . reload ( ) * open ( ) 메서 드 로 열린 자식 창 과 연 창 에서 나오 는 opener 와 혼동 하 지 않 도록 ! form 객체 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... document 객체 소속 으로 html 의 < form > 태그 에 접근 하 는 정보 를 제공 합니다 . 웹 프로그래밍 에서 아주 중요 한 전송 과 관련 하 여 필수 로 애용 해야 하 는 객체 입니다 . asp 기초 부분 의 request 객체 의 form 컬렉션 부분 을 먼저 하 고 나 서 보완 차원 에서 공부 를 해야 한다 . 간단 한 폼 태그 로 폼 과 폼 요소 에 접근 하 는 방법 을 살펴봅니다 . < form > ~ </ form > 사이 는 한 건 의 폼 전송 으로 취급 되 며 한 문서 에 는 여러 개 폼 이 올 수 있 고 , 폼 속 에 는 여러 개 의 폼 요소 ( 입력 상자 ) 가 올 수 있 습니다 . 각각 은 name 을 지정 하 여 자바 스크립트 에서 접근 할 수 있 도록 합니다 . 아래 는 간단 한 폼 태그 로 자바 스크립트 에서 어떻게 접근 하 는지 를 보 려고 한 것 입니다 < form name =" form 1 " action =" ok . asp " method =" post " target ="_ self " enctype ="" >< input type =" text " name =" tel "></ form >< form name =" form 2 " action =" ok . asp " method =" post " enctype ="">< input type =" text " name =" tel "></ form > * 위 의 폼 태그 에서 " tel " 에 접근 하 려면 아래 처럼 배열 또는 이름 을 이용 할 수 있 다 . document . form 1 . tel 또는 document . forms [ 0 ] . elements [ 0 ] document . form 2 . tel 또는 document . forms [ 1 ] . elements [ 0 ] * 배열 정보 를 이용 할 때 는 for 반 복문 을 통해 모든 폼 / 모든 요소 에 접근 할 때 유리 하 다 ■ form 객체 속성 name < form > 태그 의 name 속성 값 위 의 form 1 , form 2 action < form > 태그 의 action 속성 값 ok . aspmethod < form > 태그 의 method 속성 값 post || gettarget < form > 태그 의 target 속성 값 _ blank , _ self , _ top , _ parentencoding < form > 태그 의 enctype 속성 값 첨부 파일 유무 에 따라 elements < form > 태그 내 의 폼 요소 를 배열 로 저장 tel 은 form 1 . elements [ 0 ] 1 . name 은 자바 스크립트 에서 폼 이름 으로 접근 하 기 이해 설정 이 필요 2 . action 은 이 폼 을 전송 에 사용 하 고자 할 경우 이 전송 을 받 아 처리 할 페이지 를 설정 3 . method 는 전송 의 방법 으로 post 를 주로 사용 한다 ( asp 의 request 부분 참조 ) 4 . target 은 링크 관련 태그 와 마찬가지 이 다 . 생략 하 면 _ self 가 적용 된다 . 5 . encoding 은 전송 데 이타 를 encode 하 는 방법 으로 첨부 파일 이 있 다면 multipart / form - data 를 . .. 첨부 가 없 다면 생략 하 면 된다 . * 자바 스크립트 속성 을 이용 하 면 html 에서 는 고정 시킨 속성 값 을 조건 에 따라 유연 하 게 변화 를 줄 수 있 다 . 즉 html 에서 정한 속성 값 을 변경 시킬 수 가 있 다 . ■ form 객체 메 서 드 submit ( ) 서버 로 데 이타 전송 submit 버튼 을 누른 효과 reset ( ) 폼 요소 의 값 을 모두 초기 화 reset 버튼 을 누른 효과 ■ form 객체 이벤트 핸들러 onSubmit ( ) submit 버튼 을 누르 거나 submit ( ) 메서 드가 실행 될 때 onReset ( ) reset 버튼 을 누르 거나 reset ( ) 메서 드가 실행 될 때 form 객체 의 사용법 은 하위 객체 인 폼 요소 를 마치 고 종합 하 는 단원 에서 실제 사용 례 를 보 는 게 순서 에 맞 을 것 같 아서 여기 서 는 생략 합니다 . text , password , hidden , textarea . . . . . . . . . . . . . . . . . . . . . ......................... 사용 자 입력 값 을 잘 콘트롤 하 기 위해서 는 HTML 태그 의 속성 , 객체 의 속성 , 메 서드 , 이벤트 핸들러 를 잘 이해 하 고 있 어야 겠다 . ■ html 태그 1 . size = 20 이면 20 문자 를 입력 받 을 수 있 다 . ( 공백 도 1 한글 도 1 ) < input type =" text " name =" tel " size =" 20 " maxlength =" 15 "> 2 . 공간 이 부족 하 면 사이즈 는 작 게 최대 입력 문자 는 크 게 할 수 있 다 . < input type =" password " name =" pass " size =" 10 " maxlength =" 20 "> 3 . 미리 초기 값 을 줄 수 있 다 . ( 화면 에 보이 지 않 음 대체로 초기 값 이 있 어야 한다 . )< input type =" hidden " name =" name " value =" 홍길동 "> 4 . 사용자 가 입력 하 는 걸 막 으려면 readonly 속성 을 사용 할 수 있 다 . * textarea 에 는 value 속성 이 없 다 . 값 은 시작 태그 마감 태그 사이 에 넣 어 주 면 된다 . < textarea name =" content " cols =" 40 " rows =" 5 " readonly ></ textarea >< textarea name =" content " cols =" 40 " rows =" 5 "> 초기 값 </ textarea > * 자바 스크립트 에서 입력 해 줄 수 있 다 . text 는 한 줄 입력 상자 로 가장 많이 사용 된다 . textarea 는 여러 줄 입력 상자 로 cols ( 가로 입력 문자 수 ) , rows ( 세로 라인수 ) 속성 이 있 다 . hidden 은 사용 자 에겐 보여 주 지 않 으면서 미리 값 을 가지 고 있 다가 서버 로 전 송시 사용 password 는 암호 같 은 보안 이 필요 한 사용자 입력 값 을 받 을 때 사용 되 며 *** 표시 로 입력 값 을 모르 도록 해둔 것 이 며 브라우저 에서 뒤 로 가 기 를 할 경우 사라진다 . ■ 객체 속성 name < input > 태그 의 이름 설정 , 자바 스크립트 , asp 에서 이름 을 사용 함 value 이 상자 에 사용 자 가 입력 한 값 defaultValue < input > 태그 에 기본 적 으로 든 값 value =" 홍길동 " 처럼 한 경우 type < input > 태그 에 type 에 설정 한 값 ( text 를 리턴 ) ■ 객체 메 서 드 focus ( ) 지정 한 입력 상자 에 커서 를 둔다 ( * 자주 이용 ) blur ( ) 지정 한 입력 상자 에 커서 를 없앤다 select ( ) 지정 한 입력 상자 에 든 모든 값 을 선택 한다 ■ 객체 이벤트 핸들러 ( password 에 는 없 다 ) onFocus 지정 한 입력 상자 에 커서 를 둔 경우 onBlur ! 지정 한 입력 상자 에 커서 를 뺄 경우 onSelect 지정 한 입력 상자 에 든 값 을 선택 할 때 onChange 지정 한 입력 상자 에 든 값 을 바꿀 때 < script language =" javascript "> function Check ( ) { / / 사용 자 입력 값 빈값 인 경우 var tel = document . form 1 . tel . value if ( tel =="") { alert ! ( " 전화 번호 는 꼬 ~ 옥 ! ") return / / 호출 한 쪽 으로 돌려 보냄 ( 아래 소스 실행 을 막 기 위해 ) }// 값 이 있 는 경우 submit ( ) 메 서드 document . form 1 . submit ( ) }</ script >< form name =" form 1 " action =" ok . asp " method =" post " target ="_ self ">< input type =" text " name =" tel ">< input type =" button " value =" 등록 " onClick =" Check ( ) "></ form > / / 사용 자 입력 값 4 자 미만 인 경우 var tel = document . form 1 . tel . value if ( tel . length < 4 ) { alert ! ( " 4 자 이상 입력 을 ! !")} / / 사용 자 입력 값 4 자 미만 이 거나 8 자 이상 인 경우 var tel = document . form 1 . tel . value if ( tel . length < 4 || tel . length > 9 ) { alert ! ( " 4 자 이상 8 자 까지 입력 을 ! !")} radio , checkbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 사용 자 로 부 터 입력 을 받 기 도 하 지만 어떤 데 이 타 는 체크 를 통해서 입력 을 대신 할 수 있 다 . 이것 도 자주 사용 하 는 것 으로 HTML 이 가진 속성 과 자바 스크립트 객체 가 가진 속성 , 메 서드 , 이벤트 핸들러 를 다 줄 줄 알 아야 한다 ■ radio ( HTML ) < input type =" radio " name =" sex " value =" 남 " checked > 남자 < input type =" radio " name =" sex " value =" 여 "> 여자 radio 버튼 은 여러 개 중 에서 하나 만 을 고를 수 있 는 경우 에 사용 하 여야 하 며 동일 한 name 값 을 설정 한다 . 위 의 경우 화면 에 보이 는 부분 인 " 남자 " 를 선택 하 면 value 는 " 남 " 이 된다 . 화면 상 의 라벨 과 value 가 반드시 같 을 필요 는 없 다 . 사용자 의 편의 를 위해 하나 는 checked 속성 으로 선택 되 어 있 도록 할 수 도 있 다 . 다른 항목 을 체크 하 면 이전 의 체크 는 자동 으로 빠진다 . ■ checkbox ( HTML ) < input type =" checkbox " name =" hoby " value =" 등산 "> 등산 < input type =" checkbox " name =" hoby " value =" 낚시 "> 낚시 < input type =" checkbox " name =" hoby " value =" 채팅 "> 채팅 checkbox 버튼 은 여러 개 중 에서 여러 개 를 고를 수 있 는 경우 에 사용 할 수 있 고 동일 한 name 값 을 설정 해도 되 고 안 해도 된다 . 위 의 경우 화면 에 보이 는 부분 인 " 등산 " 를 선택 하 면 value 는 " 등산 " 이 된다 . 화면 상 의 라벨 과 value 가 반드시 같 을 필요 는 없 다 . radio 와 달리 checked 속성 으로 선택 되 어 있 도록 하 는 것 은 좀 이상 하 다 . ■ radio , checkbox 객체 속성 name < input > 태그 의 이름 설정 , 자바 스크립트 , asp 에서 이름 을 사용 함 value 태그 안 의 value 속성 값 length 버튼 의 개수 checked 체크 된 경우 true , 안 되 면 falsedefaultChecked 버튼 이 기본 으로 체크 되 어 있 는지 true , false 로 리턴 type < input > 태그 에 type 에 설정 한 값 ■ radio , checkbox 객체 이벤트 핸들러 onClick 버튼 클릭 시 ■ radio 객체 예제 radio 버튼 은 항목 이 여러 개 이 므로 배열 로 다뤄야 . .. 아무 항목 도 체크 안 한 경우 를 검사 하 는 스크립트 * radio 는 디폴트 checked 를 준 경우 는 체크 안 된 경우 는 없 다 . * 한 번 이라도 한 항목 이 체크 되 면 한 항목 도 체크 안 될 수 가 없 다 . < script language =" javascript "> function Check ( ) { checkpoint = false / / 체크 안 된 것 으로 봄 / / 배열 이 므로 반 복문 을 이용 해서 배열 요소 에 접근 for ( i = 0 ; i < document . form 1 . sex . length ; i ++){ if ( document . form 1 . sex [ i ] . checked == true ) { checkpoint = true / / 체크 된 것 으로 만 듬 } } / / 반 목문 을 나온 checkpoint 를 검사 if ( checkpoint == false ) { alert ! ( " 꼭 체크 해 주 세요 ! ") return }// 체크 한 경우 submit ( ) 메 서드 document . form 1 . submit ( ) }</ script > < form name =" form 1 " action =" ok . asp " method =" post ">< input type =" radio " name =" sex " value =" 남 "> 남자 < input type =" radio " name =" sex " value =" 여 "> 여자 < input type =" button " value =" 등록 " onClick =" Check ( ) "></ form > document . form 1 . sex . length radio 버튼 개수 document . form 1 . sex [ i ] . checked == true i 번 째 버튼 이 체크 되 었 음 ■ checkbox 객체 예제 checkbox 는 배열 로 다룰 수 도 , 아닐 수 도 있 다 . name 속성 을 같이 설정 하 면 배열 로 다뤄야 한다 . < script language =" javascript "> function Check ( ) { if ( document . form 1 . agree . checked == false ) { alert ! ( " 약관 에 동의 하 셔야 ! ") return }// 체크 한 경우 submit ( ) 메 서드 document . form 1 . submit ( ) }</ script > < form name =" form 1 " action =" ok . asp " method =" post ">< input type =" checkbox " name =" agree " value =" yes "> 약관 에 동의 < input type =" button " value =" 등록 " onClick =" Check ( ) "></ form > document . form 1 . agree . checked == true 버튼 이 체크 되 었 음 * 동일 한 name 을 설정 하 고 다중 선택 , 다중 삭제 하 는 예제 는 asp TIP 을 참조 ! select . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ......................... 여러 항목 중 에 고를 수 있 도록 한 목록 상자 로 많이 사용 된다 . 보통 콤 보 상자 라고 많이 알 고 있 더라구 . ■ select ( HTML ) < select name =" addr ">< option value =" 서울 마포구 드래곤 "> 서울 마포구 드래곤 아이 < option value =" 경기 군포시 드래곤 "> 경기 군포시 드래곤 아이 < option value =" 강원 원주시 드래곤 "> 강원 원주시 드래곤 아이 </ select > select 태그 에서 size = 정수 속성 으로 보여 줄 리스트 수 를 설정 할 수 있 다 . select 태그 에서 multiple 속성 을 설정 하 여 여러 개 선택 을 할 수 있 다 . option 태그 에서 selected 속성 으로 디폴트 선택 을 줄 수 있 다 . ■ select 객체 속성 name 태그 name 속성 값 ( addr ) length 목록 의 개수 ( 3 ) selectedIndex 선택 한 목록 인덱스 번호 ( 0 부 터 ) options 목록 상자 값 을 배열 로 ( 익스플로러 지원 안 됨 ) options [ 0 ] . text 0 번 째 목록 의 문자 ( 서울 마포구 드래곤 아이 ) options [ 0 ] . value 0 번 째 목록 의 value ( 서울 마포구 드래곤 ) options [ 0 ] . selected 0 번 째 목록 이 선택 되 면 true 아니 면 falseoptions [ 0 ] . defaultSelected 0 번 째 목록 이 기본 으로 선택 되 어 있 는지 ■ select 객체 이벤트 핸들러 onChange 현재 선택 된 목록 이 아닌 다른 목록 을 선택 시 ■ select 객체 예제 : 주소 검색 결과 를 선택 하 기 < script language =" javascript "> function Check ( ) { i = document . form 1 . addr . selectedIndex / / 선택 항목 의 인덱스 번호 if ( i < 0 ) { alert ! ( " 주소 를 선택 ! ") return } var address 1 = document . form 1 . addr . options [ i ] . value / / 선택 항목 valuevar address 2 = document . form 1 . addr . options [ i ] . text / / 선택 항목 textalert ! ( address 1 ) / / value 확인 alert ! ( address 2 ) / / text 확인 }</ script >< form name =" form 1 " 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 . form 1 . addr . selectedIndex 선택 항목 의 인덱스 번호 ==> 선택 이 안 되 면 - 1 을 리턴 document . form 1 . addr . options [ i ] . value 선택 항목 value button , submit ( image ) , reset , . . . . . . . . . . . . . . . . . . . . . . . . ......................... 버튼 ! 흔히 보 는 자주 보 는 버튼 이 지만 기능 은 다 다르 다 . 자바 스크립트 로 접근 하 는 방법 도 약간 씩 다르 다 . ■ HTML ( 생긴 건 비슷 해도 맛 은 다 다르 므로 조심 해야 . ..)< input type =" button " name =" button 1 " value =" 버튼 "> < input type =" submit " name =" button 2 " value =" 전송 버튼 "> < input type =" image " name =" button 3 " value =" 이미지 " src =" 123 . gif "> < input type =" reset " name =" button 4 " value =" 초기 화 "> 버튼 : 아무 기능 을 내장 하 고 있 지 않 은 것 으로 onClick 이벤트 핸들러 와 자바 스크립트 로 기능 을 줘야 한다 . 전송 버튼 : 전송 기능 을 내장 하 고 있 는 것 으로 자바 스크립트 의 submit ( ) 기능 을 내장 하 고 있 으므로 따로 submit ( ) 을 설정 하 면 드 번 전송 이 된다 . 이미지 버튼 은 기능 이 위 의 전송 버튼 과 같이 전송 기능 을 내장 하 고 있 으므로 주의 를 ! !! 리셋 버튼 은 누르 는 순간 입력 상자 의 모든 값 을 초기 상태 로 만들 어 준다 . ■ 객체 속성 name 위 의 name 속성 value 위 의 vaule 속성 type 위 의 type 속성 ■ select 객체 이벤트 핸들러 onClick 버튼 을 누른 순간 발생 ■ 버튼 이 여러 개 일 때 누른 버튼 구분 하 기 ( 매개변수 이용 ) < 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 =" form 1 " action =" ok . asp " method =" post "> < input type =" button " name =" button 1 " value =" 버튼 1 " onClick =" Check ( ' 1 ')">< input type =" button " name =" button 1 " value =" 버튼 2 " onClick =" Check ( ' 2 ')"> < input type =" button " name =" button 1 " value =" 버튼 3 " onClick =" Check ( ' 3 ')"> < input type =" button " name =" button 1 " value =" 버튼 4 " onClick =" Check ( ' 4 ')"> </ form >■ submit ( image ) 버튼 사용 시 이벤트 핸들러 < script language =" javascript "> function Check ( ) { alert ! ( " 1 번 버튼 오케이 ! ") return false / / 주의 ! !! form 태그 에 이벤트 핸들러 return 함수 ( ) , return false }</ script >< form name =" form 1 " action =" ok . asp " method =" post " onSubmit =" return Check ( ) ">< input type =" submit " value =" 버튼 1 ">< input type =" image " src =" 123 . gif "> </ form > * 이미지 버튼 은 전송 버튼 과 자바 스크립트 구문 이 동일 하 다 . ■ < IMG > 태그 를 버튼 으로 사용 시 < script language =" javascript "> function Check ( i ) { if ( i ==' 1 '){ alert ! ( " 1 번 버튼 오케이 ! ") return } if ( i ==' 2 '){ alert ! ( " 2 번 버튼 오케이 ! ") return }}</ script >< form name =" form 1 " 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 Check 1 ( ) { var tel = document . form 1 . tel . valueif ( tel =="") { alert ! ( " 전화 번호 는 꼬 ~ 옥 ! ") return / / 호출 한 쪽 으로 제어 권 을 넘기 므로 아래 소스 실행 를 막 게 된다 } document . form 1 . submit ( ) / / button 자체 에 submit ( ) 기능 이 없 다 }</ script >< form name =" form 1 " action =" ok . asp " method =" post ">< input type =" text " name =" tel ">< input type =" button " value =" 등록 " onClick =" Check 1 ( ) ">< a href =" javascript : Check 1 ( ) ">< img src =" 123 . gif " border =" 0 "></ a ></ form >■ submit 과 image 는 같 은 방법 으로 ! !! < script language =" javascript "> function Check 2 ( ) { var tel = document . form 1 . tel . valueif ( tel =="") { alert ! ( " 전화 번호 는 꼬 ~ 옥 ! ") return false / / 자신 의 submit ( ) 기능 을 행사 하 지 못하 도록 } return true / / 자신 의 submit ( ) 기능 을 행사 하 도록 }</ script >< form name =" form 2 " action =" ok . asp " method =" post " onSubmit =" return Check 2 ( ) ">< input type =" text " name =" tel ">< input type =" submit " value =" 버튼 1 ">< input type =" image " src =" 123 . gif "> </ form > ■ 매개변수 를 이용 하 여 action 을 바꿀 수 있 다 . < script language =" javascript ">// 매개변수 로 action 바꾸 기 function Check 3 ( mtype ) { var tel = document . form 3 . tel . valueif ( tel =="") { alert ! ( " 전화 번호 는 꼬 ~ 옥 ! ") return } else { if ( mtype ==" 1 ") { document . form 3 . action =" ok 1 . asp " / / 매개변수 값 이 " 1 " 일 때 actiondocument . form 3 . submit ( ) } else if ( mtype ==" 2 ") { document . form 3 . action =" ok 2 . asp " / / 매개변수 값 이 " 2 " 일 때 actiondocument . form 3 . submit ( ) }} }</ script >< form name =" form 3 " method =" post ">< input type =" text " name =" tel ">< input type =" button " value =" 무료 회원 등록 " onClick =" Check 3 ( ' 1 ')">< input type =" button " value =" 유료 회원 등록 " onClick =" Check 3 ( ' 2 ')"></ form > navigator 객체 . . . . . . . . . . . . . . . . . . . . . . . . . ........................* 미리 공부 할 필요 는 없 는 과정 이 다 . 어떤 정보 를 가졌 는지 대 ~~ 충 살펴보 고 ~~ 첫 강좌 브라우저 객체 계층 구조 에서 보 듯이 얘 는 window 객체 가 아닌 따로 독립 된 객체 로 사용 자 의 브라우저 정보 를 가지 고 있 는 객체 로 사용 자 의 브라우저 상황 을 파악 하 여 거기 에 맞 는 서비스 를 하 는데 이용 할 수 있 다 . * 고급 웹 사이트 제작 시 , 국제 적 인 사이트 제작 시 , 고려 할 필요 가 있 으며 . ..* 가급적 이 면 사용 자 브라우저 에 영향 을 받 지 않 는 스크립트 를 사용 하 는 게 좋 고 . ..* 국내 서비스 용 은 익스플로러 를 기준 으로 많이 작성 하 는 데 버전 을 낮춰 제작 하 는 게 . ..■ navigator 객체 속성 appName 브라우저 이름 appVersion 브라우저 버전 appCodeName 브라우저 코드 명 userAgent 브라우저 가 서버 로 보내 는 정보 mimeType 브라우저 가 지원 하 는 MimeType ( 익스플로러 지원 안함 ) plugins 브라우저 가 지원 하 는 플러그인 정보 language 브라우저 가 사용 하 는 언어 ( 익스플로러 지원 안함 ) platform 시스템 종류 ■ 몇 가지 정보 알아내 기 < script language =" javascript "> document . write ( navigator . appName ) / / Microsoft Internet Explorerdocument . write ( navigator . appVersion ) / / 4 . 0 ( compatible ; MSIE 6 . 0 ; Windows NT 5 . 0 ; . NET CLR 1 . 0 . 3705 ) </ script >