|
자바스크립트.............................................................
자바스크립트는 네스케이프사가 개발한 객체지향 스크립트언어로 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 (표현식) {
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("취소를 선택")
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("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("가") 또는
stra="가"
escape(stra) |
unescape("%uAC00") 또는
inta="%uAC00"
unescape(inta) |
|
알파벳과 숫자 및 *, @, -, _ , + , ., / 를 제외한 문자를 모두 16진수 문자로 바꾸어 준다 |
왼쪽과 반대로 |
|
<script language="javascript">
document.write(escape("가"))
document.write(unescape("%uAC00")) // "가"
</script>
출처 : http://blog.naver.com/sungback/90004526170 | |
|
|
|
아침마당
