홈 강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

마케팅 특별마케팅자료 다운로드마케팅자료 창업,경영 기획,카피 동기부여,성취 소스,유틸
자바스크립트의기본
작성자 : 99 단국강토
등록날짜 : 2009.02.10 10:01
1,438

데이타형과 변수 .............................................................

자바스크립트에서 사용할 수 있는 데이타형과 변수의 사용법을 알아보고 간단한 예제를 통해 자바스크립트와 친분을 쌓아보자!!!



■ 데이타형

정수형 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,...)와 함께 사용되기 때문에 여기서는 간단하게 종류와 의미만 살펴보고!!!

http://www.dragoneye.co.kr/ <--출처

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
☞​자세히보기

Comments

로그인한 회원만 댓글 등록이 가능합니다.
번호 제목 글쓴이 날짜 조회
3045 색깔별로 분류 99 단국강토 02.10 1960
3044 선택자(Selector) 99 단국강토 02.10 1646
3043 HTML 강좌 STYLE SHEET 문단제어 99 단국강토 02.10 1689
3042 문서내에 작은 스크롤상자 만들기(iframe 대신) 99 단국강토 02.10 2497
3041 이미지 정중앙 99 단국강토 02.10 1746
3040 마우스 커서 변경 99 단국강토 02.10 1592
3039 make flexible width(example) 99 단국강토 02.10 2251
3038 리스트 스타일 99 단국강토 02.10 1935
3037 테이블,이미지 테두리 스타일 99 단국강토 02.10 1975
3036 테이블 넓이보다 긴 텍스트 처리(자동 줄 바꿈) 99 단국강토 02.10 3423
3035 마우스 올렸을때 사각테두리 만드는 법 99 단국강토 02.10 2244
3034 서로 다르게 CSS소스 적용하는 방법 99 단국강토 02.10 2974
3033 마우스 On 시에 표 색상 바꾸기 99 단국강토 02.10 3351
3032 해상도 상관 없이 팝업 중앙에 위치시키기 99 단국강토 02.10 3418
3031 해상도 상관 없이 팝업 중앙에 위치시키기 99 단국강토 02.10 2349
3030 EclipseLink를 사용하여 JPA에서 반복 불가능한 읽기 방지 99 단국강토 02.10 2297
3029 EclipseLink를 사용하여 JPA에서 반복 불가능한 읽기 방지 99 단국강토 02.10 2694
열람중 자바스크립트의기본 99 단국강토 02.10 1439
3027 자바스크립트의기본 99 단국강토 02.10 2939
3026 table 태그를 알자 99 단국강토 02.10 1421
3025 table 태그를 알자 99 단국강토 02.10 2789
3024 레이어를 제대로알자 99 단국강토 02.10 2451
3023 레이어를 제대로알자 99 단국강토 02.10 1601
3022 다음부터..창띄우지않기[쿠키이용] 99 단국강토 02.10 2546
3021 다음부터..창띄우지않기[쿠키이용] 99 단국강토 02.10 2954
3020 프린트관련스크립 99 단국강토 02.10 1527
3019 프린트관련스크립 99 단국강토 02.10 2012
3018 원하는 창 크기 ,즐겨찾기등록하기 99 단국강토 02.10 1833
3017 원하는 창 크기 ,즐겨찾기등록하기 99 단국강토 02.10 2199
3016 새창,새창내려온후진동 99 단국강토 02.10 1342
마케팅
특별 마케팅자료
다운로드 마케팅자료
+ 마케팅 더보기
+ 특별 마케팅자료 더보기
+ 다운로드 마케팅자료 더보기
창업,경영
기획,카피,상품전략
동기부여,성취
+ 창업,경영 더보기
+ 기획,카피,상품전략 더보기
+ 동기부여,성취 더보기