웹&컴퓨팅

자바스크립트

x2chi 2007. 8. 2. 15:22
반응형

자바스크립트.............................................................

자바스크립트는 네스케이프사가 개발한 객체지향 스크립트언어로 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=20
3 var strName
strName="홍길동"		 var intAge
intAge=20
  데이타형을 변수선언시 정의하지 않아도 되며,
변수의 내용에 따라 데이타형이 결정된다.



■ 간단한 예제

1 <script language="javascript">
document.write("웹스쿨 드래곤아이입니다~~")
</script>
2 <script language="javascript">
str1 = "웹스쿨 드래곤아이입니다~~"
document.write(str1)
</script>
3 <script language="javascript">
var str1 = "웹스쿨 드래곤아이입니다~~"
document.write(str1)
</script>
4 <script language="javascript">
var str1 = "웹스쿨 \"드래곤아이\"입니다~~"
document.write(str1)
</script>
5 <script language="javascript">
var str1 = "웹스쿨 드래곤아이입니다~~" ; document.write(str1)
</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 + "&nbsp;&nbsp;&nbsp;") // 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("취소를 선택")

else
document.write("확인를 선택")

</script>
<script language="javascript">

if(confirm("삭제됩니다")!=0)
document.write("확인를 선택")

else
document.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")) // false
document.write(isNaN("홍길동")) // true
document.write(isNaN(50)) // false (숫자일 경우 fasle!!!)

</script>



■ escape() / unescape()

escape("가") 또는

stra="가"
escape(stra)		 unescape("%uAC00") 또는

inta="%uAC00"
unescape(inta)

알파벳과 숫자 및 *, @, -, _ , + , ., / 를 제외한 문자를 모두 16진수 문자로 바꾸어 준다

 왼쪽과 반대로
<script language="javascript">

document.write(escape("가"))
document.write(unescape("%uAC00")) // "가"

</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
 문서 기준 누른 좌표의 left
event.y 문서 기준 누른 좌표의 top
event.clientX 문서 기준 누른 좌표의 left
event.clientY 문서 기준 누른 좌표의 top
event.screenX 콘테이너 기준 누른 좌표의 left
event.screenY 콘테이너 기준 누른 좌표의 top



■ 브라우저 객체별 이벤트 핸들러

선택 목록(SELECT)
onBlur, onChange, onFocus
문자 필드(TEXT) onBlur, onChange, onFocus, onSelect
문자 영역(TEXTAREA) onBlur, onChange, onFocus, onSelect
버튼(BUTTON) onClick
체크박스(CHECKBOX) onClick
라디오 버튼(RADID) onClick
링크 onClick, onMouseover
RESET 버튼(RESET) onClick
SUBMIT 버튼(BUTTON) onClick
DOCUMENT onLoad, onUnload
WINDOW onLoad, 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
   
   
   
document
frame
history
location




navigator
 
 
 
 
anchor
applet
area
form
image
layer
link
plugin
title
 
 
 
button
checkbox
file upload
hidden
password
radio
reset
select
submit
text
textarea
 
 
 
 
 
 
 
option

위의 각각은 모두 객체이름이다. 일단 숫자에 한번 놀라고!
또한 각각의 객체는 모두 자신만의 속성과 메서드와 이벤트 핸들러를 가지고 있다.
그 숫자 또한 엄청 많아서 또 한번 놀라야한다!!!

그러나 걱정할 일은 아니다. HTML 에서 만난적이 있는 안면있는 태그들을 전부 객체라고 부를 뿐이다.

브라우저 객체는 최상위 window객체로부터 파생되어 계층적인 구조를 가지고 있다.
window 객체의 메서드 open()을 사용한다면 window.open() 처럼 사용할 수 있다.
window객체는 최상위 객체로 생략하여 open() 처럼 사용할 수 있지만 같은 메서드를 다른 객체도 가질 수 있으므로 객체이름을 꼭 적어주는게 좋겠다

 

window 객체 .........................................................


아래는 최상위 window객체가 가진 속성과 메서드,이벤트 핸들러의 종류를 훓어보고 몇가지 예제를 해본다. 필요한 작업이 있을 때마다 객체를 찾아보고 속성이 있나, 메서드를 가졌나, 이벤트핸들러가 있는지를 찾아봄으로써 점점 내공이 깊어지는 것이다.


■ window 객체 프로퍼티
status 브라우저의 상태바에 문자열을 출력하는 경우에 사용
defaultStatus 브라우저의 상태바에 초기 문자열을 설정
length 창안의 프레임 수
name 창 이름
self 현재 창 자신, window와 같음
window 현재 창 자신, self와 같음
parent 프레임에서 현재프레임의 상위프레임
top 현재프레임의 최상위프레임
opener open()으로 열린 창에서 볼 때 자기를 연 창
document document 오브젝트
frames 창안의 모든 프레임에 대한 배열정보
history history 오브젝트 및 배열
location location 오브젝트
closed 창이 닫혀 있는 상태
locationbar location 바
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이 필요하죠. 새창에도 내용을 넣어야 하니까요.
둘째인수로 창이름, 이게 같은 경우엔 계속 창을 열 때 새로 열지 않고 이미 열린 창을 이용합니다.
세째인수는 새로 열릴 창의 너비,높이,툴바,상태바등을 지정하는거죠.


■ 창의특성
directories yes || no 익스플로러 연결도구모음, 익스플로러 전용
location yes || no 주소입력란
menubar yes || no 메뉴표시줄
scrollbars yes || no 스크롤바
status yes || no 상태표시줄
toolbar yes || no 도구모음
copyhistory yes || no 히스토리정보를 복사
resizable yes || 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.form1.address=addr
self.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 현재 문서의 URL
referer 이전 문서의 URL
cookie 쿠키파일의 정보
bgColor 창의 배경색을 설정
fgColor 글자색을 설정
lastModified 파일의 최종 변경 날짜를 알아냄
URL 현재의 URL
alinkColor 누르고 있는 동안의 링크문자열의 색을 설정
vlinkColor 이미 누른적이 있는 링크 문자열의 색을 설정
linkColor 링크색을 설정
anchors anchor 오브젝트 및 배열
forms form 오브젝트 및 배열
links 링크 오브젝트 및 배열
domain 현재 도메인 이름(tainting 상태일때만 사용가능)
applets applet 배열
area area 오브젝트
embeds plug in 배열정보
images 이미지 오브젝트 및 배열
layers layer 오브젝트 및 배열


■ 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/column2/list.asp#top?table=table30&page=2
href 문서의 URL 주소 위 주소 전체
host 호스트 이름과 포트 http://www.dragoneye.co.kr:80
hostname 호스트 컴퓨터이름 http://www.dragoneye.co.kr
hash 앵커이름 #top
pathname 디렉토리 이하 경로 /column2/list.asp
port 포트번호 부분 80
protocol 프로토콜 종류 http:
search URL 조회부분 table=table30&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 .frame1.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 이미지 URL
width 너비
height 높이
border 테두리선 두께
hspace 좌우여백
vspace 상하여백
align 텍스트 속의 정렬


■ image 객체 이벤트핸들러
onclick,onMouseOver,onMouseOut 정도를 이용하면 된다.


■ 이미지관련 예제 : <img>에 name을 설정해야 자바스크립트 객체롤 접근!
  <script language="javascript">
// 자신의 이미지 바꿔주기
function imgChange(){
document.img1.src="2.gif"
}
</script>

<img name="img1" src="1.gif" onClick="imgChange()">
<script language="javascript">
// 자신의 이미지 롤오버 효과
function imgOver(){
document.img1.src="2.gif"
}
function imgOut(){
document.img1.src="1.gif"
}
</script>

<img name="img1" src="1.gif" onMouseOver="imgOver()" onMouseOut="imgOut()">
<script language="javascript">
// 작은이미지 클릭시 큰이미지 보여주기(이미지쇼)
function imgChange(img){
document.img1.src=img
}
</script>

<!-- 큰이미지 초기 src는 1b.gif -->
<img name="img1" src="1b.gif">

<!-- 작은 이미지 -->
<img src="1s.gif" onMouseOver="imgChange('1b.gif')">
<img src="2s.gif" onMouseOver="imgChange('2b.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 에 폼태그 form1 이 있고, 폼요소 address 가 있는데
top.html 에서 위 페이지의 폼요소 address 에 접근하는 방법이다.

parent.frames[2].document.form1.address.value="서울" 또는
parent.main.document.form1.address.value="서울" 으로....
어느 특정 프레임파일에서 위의 index.html같은 프레임셋파일을 창 전체에 어떤 문서를 로딩하려면 top 이란 속성을 사용해야 한다.

document .top.location.href="index2.html"
어느 특정 프레임파일에서 부모창의 URL을 바꾸는 방법
parent.top 이나 parent.left 를 생략하면 self 가 적용되어 자기창에 실행이 된다.

parent .top.location.href="top2.html"
parent .left.location.href="left2.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="form1" action="ok.asp" method="post" target="_self" enctype="" >
<input type="text" name="tel">
</form>
<form name="form2" action="ok.asp" method="post" enctype="">
<input type="text" name="tel">
</form>
* 위의 폼태그에서 "tel" 에 접근하려면 아래처럼 배열 또는 이름을 이용할 수 있다.

document.form1.tel 또는 document.forms[0].elements[0]
document.form2.tel 또는 document.forms[1].elements[0]

* 배열정보를 이용할 때는 for 반복문을 통해 모든 폼/모든 요소에 접근할 때 유리하다


■ form 객체 속성
name <form> 태그의 name속성 값 위의 form1,form2
action <form> 태그의 action속성 값 ok.asp
method <form> 태그의 method속성 값 post || get
target <form> 태그의 target속성 값 _blank, _self, _top,_parent
encoding <form> 태그의 enctype속성 값 첨부파일 유무에 따라
elements <form> 태그내의 폼요소를 배열로 저장 tel 은 form1.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.form1.tel.value

if (tel=="") {
alert("전화번호는 꼬~옥!")
return // 호출한 쪽으로 돌려보냄(아래소스 실행을 막기 위해)
}


// 값이 있는 경우 submit() 메서드
document.form1.submit()
}
</script>

<form name="form1" action="ok.asp" method="post" target="_self">
<input type="text" name="tel">
<input type="button" value="등록" onClick="Check()">
</form>

  // 사용자 입력값 4자 미만인 경우
var tel=document.form1.tel.value
if (tel.length<4) {
alert("4자 이상 입력을!!")
}
// 사용자 입력값 4자 미만이거나 8자 이상인 경우
var tel=document.form1.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, 안되면 false
defaultChecked 버튼이 기본으로 체크되어 있는지 true ,false 로 리턴
type <input> 태그에 type에 설정한 값


■ radio, checkbox객체 이벤트핸들러
onClick 버튼 클릭시


■ radio객체 예제

radio 버튼은 항목이 여러개이므로 배열로 다뤄야...
아무 항목도 체크 안한 경우를 검사하는 스크립트

* radio는 디폴트 checked 를 준 경우는 체크 안된 경우는 없다.
* 한번이라도 한 항목이 체크되면 한 항목도 체크안될 수가 없다.

  <script language="javascript">

function Check(){

checkpoint=false // 체크안된 것으로 봄

// 배열이므로 반복문을 이용해서 배열요소에 접근
for(i=0 ; i<document.form1.sex.length ; i++){

if (document.form1.sex[i].checked==true) {
checkpoint=true // 체크된 것으로 만듬
}
}

// 반목문을 나온 checkpoint를 검사

if (checkpoint==false) {
alert("꼭 체크해 주세요!")
return
}

// 체크한 경우 submit() 메서드
document.form1.submit()
}
</script>

<form name="form1" 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.form1.sex.length radio 버튼 개수
document.form1.sex[i].checked==true i번째 버튼이 체크되었음


■ checkbox 객체 예제

checkbox 는 배열로 다룰 수도, 아닐 수도 있다.
name 속성을 같이 설정하면 배열로 다뤄야 한다.

  <script language="javascript">

function Check(){

if (document.form1.agree.checked==false) {
alert("약관에 동의하셔야!")
return
}

// 체크한 경우 submit() 메서드
document.form1.submit()
}
</script>

<form name="form1" action="ok.asp" method="post">
<input type="checkbox" name="agree" value="yes">약관에 동의
<input type="button" value="등록" onClick="Check()">
</form>
document.form1.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 아니면 false
options[0].defaultSelected 0번째 목록이 기본으로 선택되어 있는지


■ select 객체 이벤트핸들러
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(생긴건 비슷해도 맛은 다 다르므로 조심해야...)
<input type="button" name="button1" value="버튼">
<input type="submit" name="button2" value="전송버튼">
<input type="image" name="button3" value="이미지"src="123.gif">
<input type="reset" name="button4" 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="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>
* 이미지버튼은 전송버튼과 자바스크립트 구문이 동일하다.


■ <IMG> 태그를 버튼으로 사용시
  <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객체가 아닌 따로 독립된 객체로 사용자의 브라우저 정보를 가지고 있는 객체로 사용자의 브라우저 상황을 파악하여 거기에 맞는 서비스를 하는데 이용할 수 있다.

* 고급 웹사이트 제작시, 국제적인 사이트 제작시, 고려할 필요가 있으며...
* 가급적이면 사용자 브라우저에 영향을 받지 않는 스크립트를 사용하는 게 좋고...
* 국내 서비스용은 익스플로러를 기준으로 많이 작성하는데 버전을 낮춰 제작하는게...



■ navigator 객체 속성
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://cafe.naver.com/javaversusdotnet

반응형

'웹&컴퓨팅' 카테고리의 다른 글

crontab  (1) 2007.08.10
php.ini  (0) 2007.08.09
select 박스를 multiple 로 업다운  (2) 2007.07.28
OS 사용율  (2) 2007.06.21
태터툴즈 한글인식 문제  (1) 2007.06.19

'웹&컴퓨팅'의 다른글

  • 현재글자바스크립트

관련글

댓글



티스토리툴바