|
자바스크립트란?
- 자바스크립트는 스크립트 언어로 한 줄씩 브라우저에 의해 실행된다.
- 자바스크립트는 HTML 페이지 내에 삽입되어 사용된다.
관련 내용 : ▶ 자바스크립트 기초 다지기 - 1과 : Hello! World - 개념 잡기
자바스크립트 동작 원리
- 자바스크립트가 삽입된 HTML 문서를 웹 브라우저가 읽어들일 때 삽입된 자바스크립트를 해석한다.
- 이 때 즉시 실행될 수도 있고, 어떤 이벤트가 발생해야지만 실행될 수도 있다.
자바스크립트를 HTML 문서에 삽입하려면?
HTML 문서 안에 다음과 같은 형식으로 <script> 태그를 통해 스크립트를 삽입할 수 있다.
|
<script language="xxjavascript">
작성하고 싶은 스크립트 내용 (자바스크립트 문법에 맞게 작성)
</script>
|
HTML 문서에서의 자바스크립트 위치
<head> 태그 안에 위치할 수 있다.
|
<html>
<head>
<script language="xxjavascript">
작성하고 싶은 스크립트 내용 (자바스크립트 문법에 맞게 작성)
</script>
</head>
...
...
|
<body> 태그 안에 위치할 수 있다.
|
<html>
<head>
</head>
<body>
<script language="xxjavascript">
작성하고 싶은 스크립트 내용 (자바스크립트 문법에 맞게 작성)
</script>
...
...
</body>
...
...
|
<head> 태그와 <body> 태그 모두에 올 수 있다.
|
<html>
<head>
<script language="xxjavascript">
작성하고 싶은 스크립트 내용 (자바스크립트 문법에 맞게 작성)
</script>
</head>
<body>
<script language="xxjavascript">
작성하고 싶은 스크립트 내용 (자바스크립트 문법에 맞게 작성)
</script>
...
...
</body>
...
...
|
이미 만들어져 있는 자바스크립트 소스를 불러올 수도 있다. 이 때 자바스크립트 소스 파일의 확장자는 .js이다. 이 파일 안에는 <script>태그가 들어있으면 안된다. 이 때 형식은 다음과 같다:
|
<script src="xxxxxxxx.js">
</script>
|
간단한 자바스크립트 예
다음은 화면에 "코리아인터넷닷컴에 오신 것을 환영합니다!"라는 파란색 글씨를 나타나게 하는 예이다.
관련 내용 : ▶ 자바스크립트 기초 다지기 - 1과 : Hello! World - 개념 잡기
|
<html>
<head>
</head>
<body>
<script language="xxjavascript">
document.write("<font color='blue'>코리아인터넷닷컴에 오신 것을 환영합니다!</font>");
</script>
</body>
</html>
|
이 예를 실행시켜보고 싶은 사람은 아래 있는 "소스 실행" 버튼을 클릭해 보기 바란다. 아래 소스 창에서 소스를 변형하여 몇 가지 실험을 해볼 수도 있을 것이다.
자바스크립트 문장 뒤에 세미콜론(;)을 붙여야 하나?
- C나 C++, 자바에 익숙한 사람은 습관적으로 자바스크립트 문장 뒤에 세미콜론(;)을 붙여 준다.
- 하지만 한 라인에 하나의 문장을 사용한다면 세미콜론(;)을 문장 뒤에 반드시 붙일 필요는 없다.
- 만일, 한 라인에 여러 문장을 사용할 때에는 반드시 문장 끝 마다 세미콜론(;)을 붙여줘야 한다.
- 문장 뒤에 세미콜론(;)을 붙여주면 명확하게 한 문장이 끝났음을 브라우저에게 알려 주는 역할을 한다.
자바스크립트를 지원하지 않는 브라우저를 위해...
거의 이런 브라우저를 사용하는 사람들은 없겠지만 혹시라도 있을 그런 사용자들을 위해 다음과 같은 처리를 해주는 것이 좋다.
관련 내용 : ▶ 자바스크립트 기초 다지기 - 9과 : 함수(Function) 만들기 - 개념 잡기
|
<script language="xxjavascript">
<!--
작성하고 싶은 스크립트 내용 (자바스크립트 문법에 맞게 작성)
//-->
</script>
|
대소문자 구분
자바스크립트에서 변수 이름, 개체 이름, 함수 이름을 처리할 때 대소문자 구분을 하므로 사용시 주의해야 한다.
문자열 내에서 한 줄 띄고 싶을 때
코드의 가독성을 위해 긴 문자열 중간에 라인을 바꾸고 싶은 경우가 있다. 이럴 경우 백슬래쉬(\)를 사용하면 된다. 다음은 그 예이다. 이 코드를 복사하여 위에 나와 있는 소스 창에 붙여 넣기 한 후 실행해 보기 바란다.
|
<html>
<head>
</head>
<body>
<script language="xxjavascript">
document.write("<font color='blue'>\
코리아인터넷닷컴에 오신 것을 환영합니다!\
</font>");
</script>
</body>
</html>
|
주의 : 문자열 내에서만 사용 가능하다.
특수 문자를 사용하고 싶을 때
자바스크립트에서 문자열 내에 더블 쿼테이션("), 싱글 쿼테이션('), 세미콜론(;), 앰퍼센드(&) 같은 문자들을 사용하면 예기치 않은 문제들이 종종 발생한다. 이런 문자를 사용하고 싶을 때에는 백슬래쉬(\)를 그 문자 앞에 붙여 주면 된다. 다음은 그 예이다. 이 코드를 복사하여 위에 나와 있는 소스 창에 붙여 넣기 한 후 실행해 보기 바란다.
|
<script language="xxjavascript">
document.write("<font color=\"blue\">\'코리아인터넷닷컴 \& 사이트\'에 \
오신 것을 환영합니다!</font>");
</script>
|
더블 쿼테이션 안에 또 다른 쿼테이션을 사용해야할 경우 싱글 쿼테이션을 사용하거나 이 예에서처럼 "앞에 백슬래쉬(\)를 붙여주도록 한다.
주석을 사용하고 싶을 때
자바스크립트에서 주석 처리할 수 있는 방법은 두 가지이다.
- 하나의 문장을 주석 처리할 때 : // 를 사용한다.
- 여러 문장을 한 번에 주석 처리할 때 : /* 로 시작하여 */로 끝낸다.
관련 내용1 : ▶ 자바스크립트 기초 다지기 - 3과 : Date 개체 - 개념 잡기
관련 내용2 : ▶ 자바스크립트 기초 다지기 - 6과 : 프롬프트와 변수 - 개념 잡기
관련 내용3 : ▶ 초보자를 위한 ASP 코딩 규칙 10가지 - 주석을 달아라
변수란?
- 변수는 데이터를 보관하는 장소이다. 즉, 어떤 저장하고 싶은 데이터를 보관하고 있다가 프로그램에서 필요할 때마다 사용하는 것이다.
- 변수 이름은 대소문자 구분을 한다.
- 변수 이름은 문자 또는 언더스코어(_)로 시작해야 한다.
- 변수 이름을 정할 때에는 의미 있는 이름을 사용하는 것이 좋다.
관련 내용 : ▶ 자바스크립트 기초 다지기 - 6과 : 프롬프트와 변수
변수를 선언하려면?
- 변수 선언은 두 가지 방법으로 할 수 있다.
- 첫 번째 방법은 var를 사용하여 변수를 선언하는 것이다 : var varName=someVal!ue;
- 두 번째 방법은 var 없이 사용하는 것이다 : varName=someVal!ue;
- 두 번째 방법 var 없이 사용하여 변수를 선언하면 이 변수는 전역 변수(global variable)가 된다.
- 첫 번째 방법 var를 사용하여 변수를 선언하면 이 변수는 전역 변수(global variable)로 사용될 수도 있고, 지역 변수(local variable)로 사용될 수도 있다.
변수의 범위(scope)
- 지역 변수(local variable) : 중괄호({와 })가 있는 명령어 즉, 함수, if...else 문 등에서 var 선언문과 함께 선언된 변수를 일컫는다. 함수나 if...else문이 끝나고 나면 그 변수는 자동 소멸된다. 아래 예에서 변수 varLocal은 지역 변수로, 함수가 끝나면 그 변수는 메모리에서 사라진다.
|
function newFunction()
{
var varLocal = 5;
...
}
|
- 전역 변수(global variable) : 중괄호({와 })가 있는 명령어 즉, 함수, if...else 문 등에서 var 선언문 없이 선언된 변수 또는 중괄호 밖에서 선언된 모든 변수를 자바스크립트에서 전역 변수라고 한다. 아래 예에서, varLocal1, varLocal2는 지역 변수이고, varGlobal1, varGlobal2, varGlobal3은 전역 변수이다.
|
<script language="xxjavascript">
varGlobal1 = 5;
function newFunction()
{
var varLocal1 = 5;
varGlobal2 = 5;
...
}
if (someCondition == 1)
{
var varLocal2 = 5;
varGlobal3 = 5;
}
</script>
|
이 개념을 확실히 알기 위해 다음 예를 한번 살펴보도록 하자.
1. 다음 예에서 strMsg는 함수 밖에서도 선언되었고 같은 이름으로 함수 안에서도 선언되었다. 그렇다면 함수 안에서 alert!문으로 strMsg를 출력하면 어떤 값을 나타낼까? "hello"가 나타날까? 아니면 "Daniel"이 나타날까? 함수 안에서는 지역 변수가 우선하므로 함수 안에서 strMsg를 참조하게 되면 지역 변수의 값인 "Daniel"이 사용된다. 즉, 같은 이름이라도 지역 변수와 전역 변수는 다른 메모리를 사용하는 것이다. 하지만 이 함수가 끝나면 지역 변수는 메모리에서 사라지고 함수 밖에서 strMsg란 이름을 참조하면 전역 변수의 값인 "hello"가 사용된다. 즉, 아래 예에서 newFunction()을 호출한 다음 alert!(strMsg)를 하면 "hello"가 출력되는 것이다.
2. 다음으로, 함수 안에서 var를 이용하여 변수를 선언하면 그 변수는 그 함수 안에서만 사용할 수 있는 지역 변수가 된다. 하지만 함수 안에서도 var 없이 변수를 선언하면 전역 변수가 되므로 함수가 끝난 다음에도 그 변수를 사용할 수 있다. 아래 예에서 함수 newFunction()을 호출한 다음 alert!(strGlobal), alert!(strLocal)을 순차적으로 호출해 보면 strGlobal 값은 나타나지만 alert!(strLocal)을 만나는 순간 에러가 발생할 것이다. 왜냐하면 그 변수는 함수가 끝나면서 이미 메모리에서 사라졌기 때문이다.
아래 스크립트의 결과는 차례대로 "Daniel", "hello", "전역변수입니다!"를 출력한 후 에러가 발생할 것이다.
|
<script language="xxjavascript">
strMsg = "hello"
function newFunction()
{
var strMsg = "Daniel";
var strLocal = "지역변수입니다!";
strGlobal = "전역변수입니다!";
alert!(strMsg);
}
</script>
<form>
<input type="button" value="이 버튼을 클릭하세요!" [안내]태그제한으로등록되지않습니다-xxonClick="newFunction();alert!(strMsg);alert!(strGlobal);alert!(strLocal);">
</form>
|
이 스크립트를 직접 실행해 보려면 아래 "소스 실행하기"버튼을 클릭해 보기 바란다.
데이터 타입
변수에 할당된 값은 어떤 데이터 타입을 가진다. 하지만 자바스크립트에서는 정확한 데이터 타입 체크를 하지 않는다. 즉, 어떤 변수를 선언할 때 그 데이터 타입을 굳이 선언하지 않아도 된다는 뜻이다. 왜냐하면 변수에 저장된 값에 맞게 적절한 데이터 타입으로 자동 변경되기 때문이다. 변수에 저장된 값에 따라 연산이 틀려질 수도 있다. 자바스크립트는 내부적으로 대략 다음과 같은 데이터 타입을 관리한다:
- Number : 3 또는 7.987과 같이 정수 또는 소수점 등을 표현할 수 있다. 정수는 10진수, 8진수, 16진수 모두 가능하다.
- Boolean : True 또는 False의 값을 가질 수 있다. 0이나 1로 대체할 수 있는 값이 아닌 특수한 값이다. 조건식에서 사용된다. 0으로 평가되면 false, 0이외의 어떤 값으로 평가되면 true의 값을 가진다.
- String : "Hello World"와 같이 싱글 쿼테이션(') 또는 더블 쿼테이션(")으로 감싸진 문자들의 집합을 의미한다. 만일 더블 쿼테이션 안에서 또 다시 더블 쿼테이션을 사용해야할 경우 더블 쿼테이션 대신 싱글 쿼테이션을 사용하도록 한다.
- Object : myDate = new Date();와 같이 어떤 개체가 생성된 다음 그 레퍼런스를 가진다.
- Null : 이것은 0이 아니다. 전혀 값이 없다는 뜻이다.
- Undefined : 변수가 생성된 이후 어던 초기 값을 갖지 않은 상태를 의미한다.
다음과 같은 예를 보면 자바스크립트에서 데이터 타입이 자동으로 어떻게 변하는지 알 수 있을 것이다.
|
<script language="xxjavascript">
strResult1 = "5" + "10";
strResult2 = 5 + 10;
strResult3 = "5" + 10;
strResult4 = 5 + "10";
document.write("\"5\" + \"10\" = " + strResult1);
document.write("<br>");
document.write("5 + 10 = " + strResult2);
document.write("<br>");
document.write("\"5\" + 10 = " + strResult3);
document.write("<br>");
document.write("5 + \"10\" = " + strResult4);
</script>
|
이 예를 직접 실행시키려면 아래 있는 "소스 실행하기"버튼을 클릭하기 바란다:
산술(Arithmetic) 연산자
산술 연산자는 숫자 값 (숫자로 보이는 문자, 변수도 가능)을 취하여 산술 연산을 한 후 그 결과를 숫자 값으로 반환한다. 표준 산술 연산자는 다음과 같다:
| 연산자 |
설명 |
예제 |
결과 |
| + |
더하기 |
5+5 |
10 |
| - |
빼기 |
10-3 |
7 |
| * |
곱하기 |
3*9 |
27 |
| / |
나누기 |
20/5
9/2 |
4
4.5 |
| % |
나눗셈의 나머지(Modulus).
예를 들어, 9/2는 몫이 4이고 나머지는 1이다.
|
11%2
12%9 |
1
3 |
| ++ |
증산 |
x=7
x++ |
x=8 |
| -- |
감산 |
x=8
x-- |
x=6 |
|
-
|
음수 값으로 변환
|
x=7
x=-x
|
x=-7
|
▶ 관련 내용 : 자바스크립트 기초 다지기 - 14과 : 산술연산 및 변수
비교(Comparison) 연산자
비교 연산자는 비교가 되는 양쪽 값을 비교한 후 그 비교가 참인지 거짓인지에 따른 논리 값을 반환한다. 비교가 되는 값은 숫자일 수도 있고, 문자열일 수도 있다. 비교 연산자는 다음과 같다:
| 연산자 |
설명 |
예제 |
>결과 |
| == |
~와 같다 |
3==5 |
false
|
| != |
~와 같지 않다 |
3!=5 |
true |
| > |
~보다 크다 |
3>5 |
false |
| < |
~보다 작다 |
3<5 |
true |
| >= |
~보다 크거나 같다 |
3>=5 |
false |
| <= |
~보다 작거나 같다 |
3<=5 |
true |
▶ 관련 내용 : 자바스크립트 기초 다지기 - 21과 : IF문과 조건 분기
대입(Assignment) 연산자
대입 연산자(=)는 어떤 값을 변수에 저장할 수 있도록 해준다. 또한 여기에는 몇가지 단축 대입 연산자(예: +=)도 포함된다.
| 연산자 |
예제 |
결과 |
|
=
|
x=3
|
x=3
|
| += |
x=7
x+=5 (x=x+5) |
x=12 |
| -= |
x=7
x-=5 (x=x-5) |
x=2 |
| *= |
x=7
x*=5 (x=x*5) |
x=35 |
| /= |
x=7
x/=5 (x=x/5) |
x=1.4 |
| %= |
x=7
x%=5 (x=x%5) |
x=2 |
|
&=
|
x=7
x&=5 (x=x&5) |
x=5 (7과 5를 이진수로 변환하여 논리곱(and)으로 결과 반환)
|
|
|=
|
x=7
x|=5 (x=x|5) |
x=7 (7과 5를 이진수로 변환하여 논리합(or)으로 결과 반환)
|
논리(Logical) 연산자
논리 연산자는 조건식에서 여러 개의 조건을 묶어주는 역할을 한다. 예를 들어 (total>100) AND (cityTax=true)와 같은 조건식을 표현하고 싶을 것이다. 이 연산자는 두 개의 값을 취하여 그 결과를 true 또는 false로 반환한다. 논리 연산자는 다음과 같다:
| 연산자 |
설명 |
예제 |
결과 |
| && |
and |
x=7
y=3
(x < 10 && y > 1)
|
true
|
| || |
or |
x=7
y=3
(x==5 || y==5)
|
false
|
| ! |
not |
x=7
y=3
x != y
|
true
|
문자열(String) 연산자
문자열 연산자는 두 개의 문자열을 하나로 합쳐준다. 문자열 연산자로는 플러스(+) 기호를 사용한다. 산술 연산자와 기호는 같으나 데이터 타입에 따라 산술 연산자 또는 문자열 연산자로 사용된다.
txt1="안녕하세요! "
txt2="반갑습니다..."
txt3=txt1+txt2 txt3에 들어 있는 결과 : "안녕하세요! 반갑습니다..." |
조건(Conditional) 연산자
드물게 사용되지만 유용한 연산자이다. 정리하면 다음과 같다:
| 연산자 |
설명 |
예제 |
결과 |
조건 연산자
...?...:... |
(조건)?(조건이 참일 때의 값):(조건이 거짓일 때의 값) |
x=7
y=3
x=(x > y)?10:0
|
x=10
(x가 y보다 크면 x에는 10이 저장되고, 작으면 0이 저장된다)
|
실습
위에서 보여준 각종 연산자들을 아래 소스 테스트 창을 통해 실습해 보기 바란다:
함수(Function)란?
- 함수는 실행될 수 있는 코드들의 집합이다.
- 함수를 호출하려면 먼저 그 함수의 내용이 정의되어 있어야 한다.
- 주로 이벤트 핸들러에서 함수를 호출하지만, 일반 스크립트에서도 호출할 수 있다.
- 함수를 사용하는 이유는 자주 사용하는 코드를 다시 사용하기 위해서이고, 프로그래밍 코드를 좀 더 블록화 시킬 수 있기 때문이다.
- 함수를 호출하는 쪽에서 파라미터를 넘겨줄 수 있다.
- 함수는 함수를 호출한 쪽에 결과 값을 반환할 수 있다.
▶ 관련 내용 : 자바스크립트 기초 다지기 - 9과 : 함수(Function) 만들기
함수(Function)를 정의하는 방법
함수를 정의하려면 우선 그 이름을 붙여줘야 한다. 자바스크립트에서의 함수 형식을 살펴 보면 다음과 같다:
|
function myfunction(parameter1, parameter2, ........)
{
자바스크립트 문장1;
자바스크립트 문장2;
자바스크립트 문장3;
자바스크립트 문장4;
........;
........;
}
|
- 위 예에서 함수 이름은 myfunction이다. 함수 이름은 변수 이름을 만들어 주는 것과 같이 만들어 주면 된다.
- 만일 함수를 호출하는 쪽에서 이 함수에 어떤 값을 넘겨주고 싶다면 그 갯수만큼 함수 이름 옆 괄호 안에 써주면 된다(위 예에서 parameter1, parameter2, ........ 부분). 그 이름은 변수 이름을 만들어 주는 것과 같이 만들어 주면 되고 함수 안에서 사용할 때도 변수 처럼 사용하면 된다.
- 함수는 <head> 태그 안에 위치시키는 것이 좋다.
- 만일 함수 안에서의 결과를 함수를 호출한 쪽에 반환하려면 return이란 키워드를 사용한다. 예를 들어 두 수의 합을 함수에서 구한 후 그 결과를 함수를 호출한 쪽에 반환하기 위한 예는 다음과 같다:
|
function sumnumbers(num1, num2)
{
nResult = num1 + num2;
return nResult;
}
|
함수(Function)를 호출하는 방법
함수는 호출하지 않으면 실행되지 않는다. 그러므로 함수를 사용하려면 어디선가 반드시 그 함수를 호출해줘야 한다.
- 파라미터가 없는 경우 그냥 함수의 이름만 써주면 된다:
|
함수 부분:
function myfunction()
{
alert!("안녕하세요!");
}
이벤트 핸들러에서 호출:
<form>
<input type="button" [안내]태그제한으로등록되지않습니다-xxonClick="myfunction()">
</form>
또는, 일반 자바 스크립트에서 호출:
<script language="xxjavascript">
........
myfunction();
........
</script>
|
- 파라미터가 있는 경우 함수의 이름과 그 괄호 안에 원하는 실제 값을 써준다:
|
함수 부분:
function sumnumbers(num1, num2)
{
nResult = num1 + num2;
return nResult;
}
이벤트 핸들러에서 호출:
<form>
<input type="button" [안내]태그제한으로등록되지않습니다-xxonClick="sumnumbers(10, 20)">
</form>
또는, 일반 자바 스크립트에서 호출:
<script language="xxjavascript">
........
nSum = sumnumbers(10, 20);
........
</script>
|
함수(Function)의 결과를 받는 방법
함수의 결과를 반환하려면 return이란 키워드를 사용한다. 함수를 호출한 쪽에서는 그 결과 값을 다음과 같은 방식으로 받는다:
|
함수 부분:
function sumnumbers(num1, num2)
{
nResult = num1 + num2;
return nResult;
}
함수 호출 부분:
<script language="xxjavascript">
........
nSum = sumnumbers(10, 20);
........
</script>
|
위 예의 경우 sumnumbers란 함수에 10과 20을 파라미터로 넘겨주고, sumnumbers는 그 두 값의 합을 계산한 후 return 키워드를 이용해 함수를 호출한 쪽에 넘겨 준다. 함수를 호출한 쪽에서는 nSum이란 변수로 그 결과 값을 받아 사용하면 된다.
함수(Function) 예제
좀 더 자세한 내용은 자바스크립트 기초 다지기 - 9과 : 함수(Function) 만들기를 참조하기 바란다.
위에서 다룬 내용들을 실행시키려면 아래 자바스크립트 소스 테스트 창을 활용하기 바란다. 원하는 함수를 만들어 본 후 "소스실행하기"버튼을 클릭하면 된다.
조건문 종류
- if ... else ...문 : 조건 비교 후 두 개중 하나를 선택해야할 때 주로 사용
- switch 문 : 조건 비교 후 여러 개중 하나를 선택해야할 때 사용
- (조건)?(값1):(값2) 연산자 : 간단한 조건문일 때 사용
▶ 관련 내용1 : 자바스크립트 기초 다지기 - 21과 : IF문과 조건 분기
▶ 관련 내용2 : 자바스크립트 기초 다지기 - 22과 : IF/ELSE문
IF...ELSE... 문
흔히 사용되는 IF...ELSE...문의 구조 몇 가지는 다음과 같다:
- 첫 번째 구조:
if (조건) {
문장1조건)이 참이면 문장1 실행
}
- 두 번째 구조:
if (조건) {
문장1조건)이 참이면 문장1 실행
}
else {
문장2조건)이 거짓이면 문장2 실행
}
- 세 번째 구조:
if (조건1) {
문장1조건1)이 참이면 문장1 실행
}
else if (조건2) {
문장2조건2)가 참이면 문장2 실행
}
else if (조건3) {
문장3조건3)이 참이면 문장3 실행
}
.....
.....
else {
문장n문장n 실행
}
- 네 번째 구조:
네 번째 구조는 정형화된 것이 아니고 if...else...문 안에 또 다른 if...else문이 들어간 구조이다.
if (조건1) {
.....
if (조건2) {
.....
}
else {
.....
}
.....
}
▶ 사용 예 : 자바스크립트 기초 다지기 - 22과 : IF/ELSE문
SWITCH 문
SWITCH문은 실행될 코드가 많이 있고 그 중 하나를 선별해야할 때 사용한다. 흔히 switch 다음에 나오는 (조건)에는 변수가 많이 사용되며 이 변수의 값을 읽은 후 case에 있는 각 값들과 비교를 한 후 적절한 코드를 실행시킨다. 여기서 주의해야할 것은 case 에 원하는 코드를 다 작성한 다음 break를 꼭 넣어야 한다는 것이다. 그렇지 않으면 현재 수행된 case의 바로 다음에 나오는 case에 있는 코드들도 실행되게 되어 있다. switch문에 대한 사용 방법은 다음과 같다:
switch (조건)
{
case 값1:
(조건)이 값1과 같으면 수행될 코드;
break;
case 값2:
(조건)이 값2와 같으면 수행될 코드;
break;
.....
.....
case 값n:
(조건)이 값n과 같으면 수행될 코드;
break;
default:
(조건)과 같은 값이 없을 경우 수행될 코드;
} |
사용 예:
<SCRIPT LANGUAGE="xxJavaScript">
<!--
i = 1;
while(i < 8) {
switch(i) {
case 1 :
document.write("변수 값 : 1<BR>");
break;
case 2 :
document.write("변수 값 : 2<BR>");
break;
case 3 :
document.write("변수 값 : 3<BR>");
break;
default :
document.write("변수 값이 1, 2, 3이 아닙니다<BR>");
}
i++;
}
// -->
</SCRIPT> |
조건 연산자
자바스크립트에서는 어떤 조건에 따라 변수에 값을 할당할 때 사용되는 조건 연산자를 지원한다. 문법은 다음과 같다:
어떤 (조건)이 참이면 값1이 변수에 저장되고 거짓이면 값2가 변수에 저장된다.
사용 예는 다음과 같다:
<SCRIPT LANGUAGE="xxJavaScript">
<!--
isMale = 1;
strMale = (isMale==1) ? "남성" : "여성";
alert!(strMale);
// -->
</SCRIPT> |
실습
위에서 다룬 내용들을 실행시키려면 아래 자바스크립트 소스 테스트 창을 활용하기 바란다. 원하는 조건문을 만들어 본 후 "소스실행하기"버튼을 클릭하면 된다.
반복문 종류
- for 문
- while 문
- do...while 문
▶ 관련 내용1 : 자바스크립트 기초 다지기 - 24과 : 반복문-FOR
▶ 관련 내용2 : 자바스크립트 기초 다지기 - 25과 : 반복문-WHILE
반복문을 제어하는 문장
객체를 다루는 문장
▶ 관련 내용 : 자바스크립트에서 with를 사용하자
for 문
for문은 어떤 조건이 만족될 때까지 자바스크립트 코드 블록을 반복시킨다. 보통 반복될 횟수가 정해져 있을 때 for문을 사용한다. for문에 대한 문법은 다음과 같다:
for (초기값 설정조건증감식) {
문장;
.......
} |
"초기값 설정"은 제일 처음 단 한 번만 실행된다. 보통 이 값은 반복 횟수를 결정짓는 카운터에 해당하는 변수를 초기화 시킬 때 사용한다. "조건" 부분에는 자바스크립트 문장을 반복시킬지 말지를 결정하는 조건식이 들어간다. "증감식"에는 카운터 변수가 얼마큼씩 증가하거나 감소할지를 적어준다. 예를 들어, 1부터 10까지의 제곱을 구하는 스크립트를 작성한다면 다음과 같다:
<script language="xxjavascript">
<!--
for (i=1i<11i++) {
document.write(i + "*" + i + " = " + i*i + "<br>");
}
//-->
</script> |
while 문
while문도 어떤 조건이 만족될 때까지 자바스크립트 코드 블록을 반복시킨다. 보통 for문이 반복될 횟수를 짐작할 수 있을 때 사용한다면 while문은 반복될 횟수를 짐작하기 어려울 때 사용한다. while문에 대한 문법은 다음과 같다:
while (조건) {
문장;
.......
} |
while문은 "조건"이 참(true)일 때만 자바스크립트 문장을 실행시킨다. 앞에서 살펴본 for문의 예제, 1부터 10까지의 제곱을 구하는 스크립트를 while문을 이용하여 작성한다면 다음과 같다:
<script language="xxjavascript">
<!--
i=1;
while (i<11) {
document.write(i + "*" + i + " = " + i*i + "<br>");
i++;
}
//-->
</script> |
do...while 문
do...while문도 while문과 동일하다. 먼저 do...while문의 문법을 먼저 살펴 보고 while문과의 차이점을 살펴 보자:
do {
문장;
.......
} while (조건) |
do...while문과 while문의 차이점은 do...while문은 자바스크립트 문장을 무조건 한 번 수행하고 나서 반복 조건식을 조사하는 반면, while문은 조건식을 일단 조사한 후 자바스크립트 문장을 실행시킬지 말지를 결정한다는 것이다. 또한 while문은 모든 자바스크립트 버전에서 지원하지만 do...while문은 넷스케이프 및 익스플로러 4 이상에서 지원한다. 앞에서 살펴본 예제, 1부터 10까지의 제곱을 구하는 스크립트를 do...while문을 이용하여 작성한다면 다음과 같다:
<script language="xxjavascript">
<!--
i=1;
do {
document.write(i + "*" + i + " = " + i*i + "<br>");
i++;
} while (i<11)
//-->
</script> |
break/continue 문
break와 continue는 반복문의 흐름을 변경시킬 수 있는 문장이다. 이 두 문장은 반복문 안에서 사용된다. break와 continue의 차이점은 다음과 같다:
- break : 반복문 실행을 중단하고 반복문이 다 끝나고 나오는 문장으로 흐름을 이동시키는 역할을 한다.
- continue : 반복문이 실행되다가 continue를 만나면 continue 이후의 문장은 실행시키지 않고 반복문의 제일 처음으로 그 흐름을 이동시키는 역할을 한다.
다음 예는 앞에서 나온 예에서 i가 3일 때 continue를 실행시키고, i가 5일 때 break를 실행시키는 예이다:
<script language="xxjavascript">
<!--
for (i=1i<11i++) {
if (i == 3)
continue; // i가 3일 때는 아래 문장들이 실행 안된다.
if (i == 5)
break; // i가 5일 때 반복문은 중단된다.
document.write(i + "*" + i + " = " + i*i + "<br>");
}
alert!("반복문이 끝났습니다!!");
//-->
</script> |
for...in 문
for...in 문을 이해하려면 객체에 대한 개념을 먼저 이해해야 한다. 이 장에서는 for...in 문을 어떻게 사용하는지 정도를 살펴 보고 나중에 객체에 대한 공부를 마친 후 다시 for...in 문을 살펴 보기 바란다.
for...in 문은 참조하는 객체 속에 있는 속성들의 갯수를 몰라도 모두 참조할 수 있도록 해준다. 다음은 사각형 객체를 하나 생성하여 생성자를 통해 속성들을 초기화한 후 for...in 문을 통해 rectanle 객체에 있는 모든 속성들을 출력하는 예이다:
<script language="xxjavascript">
<!--
// rectangle은 생성자 역할을 한다
function rectangle(width, height, innercolor) {
this.width = width;
this.height = height;
this.innercolor = innercolor;
}
myRectangle = new rectangle(50, 30, "red");
for (var prop in myRectangle) {
document.write(myRectangle[prop]+"<br>");
}
//-->
</script> |
with 문
개체의 메소드나 속성을 반복해서 사용할 때 with 문을 사용하면 코드의 가독성을 높일 수 있다. 다음은 with문의 문법이다:
with (개체명) {
메소드명 또는 속성명;
} |
with 문을 사용한 간단한 예는 다음과 같다:
|
with (document) {
write("with 문 안에서 write를 사용하고 있습니다!");
bgColor="#efefef";
write("물론 이것은 아주 간단한 예입니다");
}
|
실습
위에서 다룬 내용들을 실행시키려면 아래 자바스크립트 소스 테스트 창을 활용하기 바란다. 원하는 조건문을 만들어 본 후 "소스실행하기"버튼을 클릭하면 된다.
▶ 계속: 객체(Objects)
객체(Objects)란?
- 객체는 속성(properties)과 메쏘드(methods)로 이루어져 있다.
- 잘 아는 개념으로 보자면 속성은 변수(variable)로, 메쏘드는 함수(function) 정도로 생각할 수 있다.
- 흔히 속성은 명사/형용사로, 메쏘드는 동사로 표현한다.
- 예를 들어, car라는 객체가 있다고 가정한다면 객체 car는 년식, 색상, 모델명 등의 속성이 있고, 전진하다(), 후진하다(), 멈추다() 등의 메쏘드가 있다고 볼 수 있다.
- 자바스크립트에는 여러 가지 기능을 갖고 있는 내장 객체를 이미 갖고 있다.
- 이렇게 미리 존재하는 객체는 흔히 DOM(Document Object Model)으로 알려져 있다.
- 내장 객체가 아닌 자신만의 객체를 만들 수도 있다.
DOM(Document Object Model)이란?
- DOM - 자바스크립트에 내장 되어있는 모든 객체에 대한 계층 구조이다.
- 이 객체의 대부분은 웹 페이지 또는 브라우저의 특성과 직접 관련이 있다.
- DOM은 기술적인 관점에서 보면 자바스크립트 자체와는 분리되어 있다.
- ECMA에 의해 표준화된 자바스크립트 언어 스펙에는 DOM에 대한 특성이 기술되어 있지 않다.
- 그렇기 때문에 넷스케이프 및 마이크로소프트는 각각 DOM을 자체 개발하였고 이 각각은 서로 호환되지 않는다.
아래 차트는 넷스케이프의 DOM에 대한 개괄적인 구조도이다. 마이크로소프트의 DOM은 실제 넷스케이프의 DOM을 포괄한다고 보면 된다.
속성(Properties)
- 어느 한 객체의 속성을 사용하는 방식 : objectName.propertyName (가령 객체이름이 car이고 속성 이름이 color라면 car 객체의 color란 속성을 접근할 때 car.color과 같은 방식으로 접근한다.)
- 객체 이름과 속성 이름 모두 대소문자 구분이 있다.
- 속성은 기본적으로 변수이므로 값을 할당함으로써 새로운 속성을 쉽게 만들 수 있다.
- carObj란 객체가 이미 있고 그 객체의 속성으로 make, model, year 란 것을 만들고 싶을 때 다음과 같이 하면 된다:
carObj.make="Toyota";
carObj.model="Camry";
carObj.year=1990;
document.write(carObj.year); |
- 자바스크립트 객체는 기본적으로 배열과 비슷하다. 그렇다면 다음과 같은 방식으로 속성을 사용할 수도 있다.
carObj["make"]="Toyota";
carObj["model"]="Camry";
document.write(carObj["year"]); |
메쏘드(Methods)
- 객체는 함수를 포함할 수 있다. 이 점이 일반 배열과는 틀린 점이다.이 객체 내에 있는 함수를 메쏘드라고 부른다.
- 객체 내에 있는 메소드 호출 방법 : objectName.methodName() (가령 객체이름이 car이고 메쏘드 이름이 go()라면 car 객체의 go()란 메쏘드를 호출할 때 car.go()와 같은 방식으로 접근한다.)
- 메소드를 호출할 때 필요하다면 괄호 안에 파라미터를 넘겨줄 수 있다. (예: car.go(3))
객체 생성하는 방법
- 객체를 생성할 때 거의 대부분 자바스크립트에 내장되어 있는 객체를 생성한다.
- 하지만 자신이 직접 만든 객체도 얼마든지 생성할 수 있다.
- 새로운 객체를 생성하는 방법은 여러 가지가 있다. 이 중 두 가지 경우만 살펴볼 것이다
직접 인스턴스를 생성하는 방법:
애완견과 관련된 객체를 만든다고 가정하면, myPetDog이란 객체를 다음과 같은 방법으로 생성할 수 있다:
myPetDog=new Object();
myPetDog.name="Barney";
myPetDog.breed="beagle";
myPetDog.year=1981; |
새로운 객체에 메쏘드를 하나 추가하는 것도 간단하다. 예를 들어 사운드를 통해 짓는 소리를 내는 woof라는 함수를 이미 만들어 놨다고 하면 다음과 같은 방식으로 이 객체의 메쏘드를 만드렁 낼 수 있다:
때때로 객체의 템플릿(template) 또는 프로토타입(prototype)을 만들어 놓은 후 마치 스탬프 찍듯 그 틀에 맞는 객체를 생성하고 싶을 때가 있다. 이 틀 또는 템플릿은 실제 객체의 인스턴스는 아니지만 객체의 구조를 정의하고 있는 부분이다. 이 템플릿을 사용하면 필요할 때마다 객체에 대한 인스턴스를 빨리 생성해낼 수 있다. 위에서 살펴본 예제를 이용하여 petDog이란 템플릿용 객체를 만들어 보자. 이를 위해 먼저 petDog 객체의 구조를 정의한 함수를 다음과 같이 만들어야 한다:
myPetDog=new petDog("barney","beagle",1981);
yourPetDog=new petDog("max","terrier",1990); |
실습
위에서 다룬 내용들을 실행시키려면 아래 자바스크립트 소스 테스트 창을 활용하기 바란다. 원하는 객체를 만들어 본 후 "소스실행하기"버튼을 클릭하면 된다.
▶ 계속: 내장 객체
자바스크립트에 내장되어 있는 객체 중 일부를 정리하면 다음과 같다:
Boolean 객체
| 메쏘드 |
설명 |
NN |
IE |
| toString() |
불린 값을 문자열 형태로 반환 (true 또는 false) |
3.0 |
3.0 |
| valueOf() |
지정한 객체의 값을 반환 |
4.0 |
4.0 |
String 객체
| 메쏘드 |
설명 |
NN |
IE |
| length |
문자열의 길이를 반환 |
2.0 |
3.0 |
| anchor() |
문자열에 <a> 태그를 단 형태로 반환: <a>문자열</a> |
2.0 |
3.0 |
| big() |
문자열에 <big> 태그를 단 형태로 반환: <big>문자열</big> |
2.0 |
3.0 |
| blink() |
문자열에 <blink> 태그를 단 형태로 반환: <blink>문자열</blink> |
2.0 |
|
| bold() |
문자열에 <b> 태그를 단 형태로 반환: <b>문자열</b> |
2.0 |
3.0 |
| charAt() |
지정한 인덱스에 있는 문자 반환 |
2.0 |
3.0 |
| charCodeAt() |
지정한 인덱스 문자의 유니코드 반환 |
4.0 |
4.0 |
| concat() |
두 문자열을 연결시킨 결과를 반환 |
4.0 |
4.0 |
| fixed() |
문자열에 <tt> 태그를 단 형태로 반환: <tt>문자열</tt> |
2.0 |
3.0 |
| fontColor() |
문자열을 지정한 색상으로 반환: <font color="navy">문자열</font> |
2.0 |
3.0 |
| fontSize() |
문자열을 지정한 폰트 크기로 반환: <font size="4">문자열</font> |
2.0 |
3.0 |
| fromCharCode() |
charCodeAt과 반대 역할. 지정한 유니코드의 문자열 반환 |
4.0 |
4.0 |
| indexOf() |
지정한 문자가 처름 나타나는 인덱스 반환. 만일 나타나지 않으면 -1 반환. |
2.0 |
3.0 |
| italics() |
문자열에 <i> 태그를 단 형태로 반환: <i>문자열</i> |
2.0 |
3.0 |
| lastIndexOf() |
indexOf와 비슷하지만 오른 쪽에서부터 찾기 시작 |
2.0 |
3.0 |
| link() |
문자열에 링크를 지정하여 반환: <a href="url">문자열</a> |
2.0 |
3.0 |
| match() |
indexOf와 lastIndexOf와 비슷하지만 인덱스 대신 문자열 반환. |
4.0 |
4.0 |
| replace() |
특정 문자열을 새롭게 지정한 문장열로 대치 |
4.0 |
4.0 |
| search() |
문자열이 지정한 문자를 포함하고 있으면 정수 값 반환, 그렇지 않으면 -1 반환 |
4.0 |
4.0 |
| slice() |
지정한 문자 인덱스를 포함한 문자열 반환 |
4.0 |
4.0 |
| small() |
R문자열에 <small> 태그를 단 형태로 반환: <small>문자열</small> |
2.0 |
3.0 |
| split() |
지정한 문자를 컴마(,)로 대치 |
4.0 |
4.0 |
| strike() |
문자열에 <strike> 태그를 단 형태로 반환: <strike>문자열</strike> |
2.0 |
3.0 |
| sub() |
문자열에 <sub> 태그를 단 형태로 반환: <sub>문자열</sub> |
2.0 |
3.0 |
| substr() |
지정한 문자 반환. 예를 들어 substr(5, 3)은 5번째 문자로부터 3문자를 가지고 온다. |
4.0 |
4.0 |
| substring() |
지정한 문자 반환. 예를 들어 substring(5, 3)은 3번째와 5번째 사이에 있는 문자를 가지고 온다. |
2.0 |
3.0 |
| sup() |
문자열에 <sup> 태그를 단 형태로 반환: <sup>문자열</sup> |
2.0 |
3.0 |
| toLowerCase() |
문자열을 소문자 형태로 반환 |
2.0 |
3.0 |
| toUpperCase() |
문자열을 대문자 형태로 반환 |
2.0 |
3.0 |
Array 객체
| 메쏘드 |
설명 |
NN |
IE |
| length |
배열에 있는 요소의 갯수를 반환 |
3.0 |
4.0 |
| concat() |
두 배열을 연결시켜 하나의 배열로 반환 |
4.0 |
4.0 |
| join() |
배열에 있는 모든 요소를 하나로 합쳐 하나의 문자열로 반환 |
3.0 |
4.0 |
| reverse() |
배열의 내용을 뒤집어서 반환 |
3.0 |
4.0 |
| slice() |
배열의 특정 부분을 반환 |
4.0 |
4.0 |
| sort() |
정렬된 배열 반환 |
3.0 |
4.0 |
Date 객체
| 메쏘드 |
NN |
설명 |
IE |
| Date() |
Date 객체 반환 |
2.0 |
3.0 |
| getDate() |
Date 객체의 날짜 반환 (1-31 사이의 값) |
2.0 |
3.0 |
| getDay() |
Date 객체의 요일에 해당하는 숫자 값 반환 (0-6 사이의 값. 0=일요일, 1=월요일, ...) |
2.0 |
3.0 |
| getMonth() |
Date 객체의 "월" 반환 (0-11 사이의 값. 0=1월, 1=2월, ...) |
2.0 |
3.0 |
| getFullYear() |
Date 객체의 연도 반환 (4자리 숫자) |
4.0 |
4.0 |
| getYear() |
Date 객체의 연도 반환 (낮은 브라우저에서는 두 자리수 연도 반환) getFullYear를 사용하는 것이 더 바람직함. |
2.0 |
3.0 |
| getHours() |
Date 객체의 시간 반환 (0-23 사이의 값) |
2.0 |
3.0 |
| getMinutes() |
Date 객체의 분 반환 (0-59 사이의 값) |
2.0 |
3.0 |
| getSeconds() |
Date 객체의 초 반환 (0-59 사이의 값) |
2.0 |
3.0 |
| getMilliseconds() |
Date 객체의 밀리세컨드 값 반환 (0-999 사이의 값) |
4.0 |
4.0 |
| getTime() |
1970.1.1 자정 이후의 밀리세컨드 값 반환 |
2.0 |
3.0 |
| getTimezoneOffset() |
사용자 컴퓨터와 GMT 사이의 시간 차이 반환 |
2.0 |
3.0 |
| getUTCDate() |
Date 객체의 날짜를 UTC 형태로 반환 |
4.0 |
4.0 |
| getUTCDay() |
Date 객체의 요일 값을 UTC 형태로 반환 |
4.0 |
4.0 |
| getUTCMonth() |
Date 객체의 월 값을 UTC 형태로 반환 |
4.0 |
4.0 |
| getUTCFullYear() |
Date 객체의 년도를 UTC 형태로 반환 |
4.0 |
4.0 |
| getUTCHourc() |
Date 객체의 시간을 UTC 형태로 반환 |
4.0 |
4.0 |
| getUTCMinutes() |
Date 객체의 분을 UTC 형태로 반환 |
4.0 |
4.0 |
| getUTCSeconds() |
Date 객체의 초를 UTC 형태로 반환 |
4.0 |
4.0 |
| getUTCMilliseconds() |
Date 객체의 밀리세컨드를 UTC 형태로 반환 |
4.0 |
4.0 |
| parse() |
1970년 1월 1일 자정 이후의 밀리세컨를 갖고 있는 문자열로된 데이트 값 반환 |
2.0 |
3.0 |
| setDate() |
Date 객체에 날짜 설정 (1-31 사이의 값) |
2.0 |
3.0 |
| setFullYear() |
Date 객체에 연도 설정 |
4.0 |
4.0 |
| setHours() |
Date 객체에 시간 설정 (0-23 사이의 값) |
2.0 |
3.0 |
| setMilliseconds() |
Date 객체에 밀리세컨드 설정 (0-999 사이의 값) |
4.0 |
4.0 |
| setMinutes() |
Date 객체에 분 설정 (0-59 사이의 값) |
2.0 |
3.0 |
| setMonth() |
Date 객체에 월 설정 (0-11사이의 값. 0=1월, 1=2월) |
2.0 |
3.0 |
| setSeconds() |
Date 객체에 초 설정 (0-59 사이의 값) |
2.0 |
3.0 |
| setTime() |
1970.1.1 이후의 밀리세컨드 설정 |
2.0 |
3.0 |
| setYear() |
Date 객체에 연도 설정 (00-99 사이의 값) |
2.0 |
3.0 |
| setUTCDate() |
Date 객체에 날짜를 UTC 형태로 설정 |
4.0 |
4.0 |
| setUTCDay() |
Date 객체에 요일을 UTC 형태로 설정 |
4.0 |
4.0 |
| setUTCMonth() |
Date 객체에 월을 UTC 형태로 설정 |
4.0 |
4.0 |
| setUTCFullYear() |
Date 객체에 년도를 UTC 형태로 설정 |
4.0 |
4.0 |
| setUTCHour() |
Date 객체에 시간을 UTC 형태로 설정 |
4.0 |
4.0 |
| setUTCMinutes() |
Date 객체에 분을 UTC 형태로 설정 |
4.0 |
4.0 |
| setUTCSeconds() |
Date 객체에 초를 UTC 형태로 설정 |
4.0 |
4.0 |
| setUTCMilliseconds() |
Date 객체에 밀리세컨드를 UTC 형태로 설정 |
4.0 |
4.0 |
| toGMTString() |
Date객체를 문자열 형태로 반환 (GMT) |
2.0 |
3.0 |
| toLocaleString() |
Date객체를 문자열 형태로 반환 (로컬 시간) |
2.0 |
3.0 |
| toString() |
Date객체를 문자열 형태로 반환 |
2.0 |
4.0 |
Math 객체
| 속성 |
설명 |
NN |
IE |
| E |
오일러 상수, 자연 로그의 밑으로 사용 |
2.0 |
3.0 |
| LN2 |
밑이 e인 2의 자연 로그 |
2.0 |
3.0 |
| LN10 |
밑이 e인 10의 자연 로그 |
2.0 |
3.0 |
| LOG2E |
밑이 2인 E의 로그 |
2.0 |
3.0 |
| LOG10E |
밑이 10인 E의 로그 |
2.0 |
3.0 |
| PI |
파이(PI) 값 반환 |
2.0 |
3.0 |
| SQRT1_2 |
1/2의 제곱근 |
2.0 |
3.0 |
| SQRT2 |
2의 제곱근 |
2.0 |
3.0 |
| 메쏘드 |
설명 |
NN |
IE |
| abs(x) |
x의 절대 값 반환 |
2.0 |
3.0 |
| acos(x) |
x의 arccosine 값 반환 |
2.0 |
3.0 |
| asin(x) |
x의 arcsine 값 반환 |
2.0 |
3.0 |
| atan(x) |
x의 arctangent 값 반환 |
2.0 |
3.0 |
| atan2(x,y) |
x 축에서 어떤 지점까지의 각도 반환 |
2.0 |
3.0 |
| ceil(x) |
x보다 크거나 같은 가장 가까운 정수 값 반환 |
2.0 |
3.0 |
| cos(x) |
x의 cosine 값 반환 |
2.0 |
3.0 |
| exp(x) |
x의 exponent 값 반환 |
2.0 |
3.0 |
| floor(x) |
x보다 작거나 같은 가장 가까운 정수 값 반환 |
2.0 |
3.0 |
| log(x) |
x의 자연 로그 값 반환 |
2.0 |
3.0 |
| max(x,y) |
x와 y 중 큰 값 반환 |
2.0 |
3.0 |
| min(x,y) |
x와 y 중 작은 값 반환 |
2.0 |
3.0 |
| pow(x,y) |
x의 y승 반환 |
2.0 |
3.0 |
| random() |
0과 1 사이의 난수 값 반환 |
2.0 |
3.0 |
| round(x) |
x와 가장 가까운 정수로 반올림 |
2.0 |
3.0 |
| sin(x) |
x의 sine 값 반환 |
2.0 |
3.0 |
| sqrt(x) |
x의 제곱근 반환 |
2.0 |
3.0 |
| tan(x) |
x의 tangent 값 반환 |
2.0 |
3.0 |
▼ 명령어 사용법
|
