4. JavaScript를 HTML 파일에 집어넣기 - <script> 태그
스크립트 코드 외부화
<script type="text/javascript“ src=“파일명” [charset=“문자코드”]>
</script>
자바스크립트 코드는 별도의 외부파일로도 정의가 가능하다.
helloEx.html
…
<script type="text/javascript“ src=“helloEx.js”></script>
…
helloEx.js
document.writeln('Hello World!');
2-1JavaScript의 기본적인표기
5. JavaScript를 HTML 파일에 집어넣기 - <script> 태그
<script> 태그를 기술하는 장소
(1) <body>태그 아래 임의의 위치
실행결과를 문서 내에 포함 시키고 싶을 때
(2) </body>태그 직전에
함수를 정의하고 싶을 때
(3) <head>태그 아래
<body>밑에서 직접 호출하기 위한 함수를 정의하고 싶을 때
(2)와 (3)의 패턴이 기본이며, (1)은 실제 어플리케이션에서 사용하는 일은 거의 없다.
2-1JavaScript의 기본적인표기
6. JavaScript를 HTML 파일에 집어넣기 - <script> 태그
Anchor 태그에 스크립트를 집어넣기
<a href=“JavaScript : 스크립트코드”>링크 텍스트</a>
Anchor의 href 속성에 JavaScript : ~ 의 형식으로 마치 URL인 것처럼 JavaScript를 집어넣을 수 있다.
ex)링크 클릭 시 다이얼로그 상자를 표시하고 싶은 경우
<a href="JavaScript : window.alert('Hello World!');">다이얼로그 상자 표시</a>
2-1JavaScript의 기본적인표기
7. (1) 문장의 맨 끝에 세미콜론( ; )을 붙인다
(2) 문장의 도중에 공백이나 개행, 탭을 포함할 수 있다
(3) 대문자/소문자가 엄밀히 구별된다
문장(Statement)의 규칙
한 행으로 끝나는 주석을 기술할 경우 → //
복수 행에 걸친 주석을 기술할 경우 → /* … */
주석 넣기
2-1JavaScript의 기본적인표기
8. 변수 선언하기
var명령
var 변수명; 또는 var 변수명 = 값;
식별자의 명명규칙
(1) 첫 번째 문자는 영문자/ _ / $ 중 하나이다
(2) 두 번째 문자 이후에는 첫 번째에서 사용할 수 있는 문자 또는 숫자여야 한다
(3) 변수명에 포함된 영문자의 대문자/소문자는 구별된다
(4) Javascript에서 의미를 갖는 예약어가 아니어야 한다 (break, case, else, continue, if, … )
2-2변수
9. 기본형과 참조형의 두 가지로 나누어져 있다
기본형 – 수치형(number), 문자열형(string), 논리형(boolean), 특수형(null/undefined)
참조형 – 배열(array), 객체(object), 함수(function)
기본형의 변수에는 값 그 자체가 직접 보관된다
참조형의 변수는 값을 실제로 보관하고 있는 메모리의 어드레스를 보관한다
2-3데이터형
10. 리터럴
리터럴 : 데이터형에 보관되는 값 그 자체, 또는 값의 표현방법
숫자 리터럴(number) – 정수 리터럴, 부동소수점 리터럴
문자열 리터럴(string) – 작은따옴표, 큰따옴표로 감싸서 표현한다
이스케이프 시퀀스 : 특수한 의미를 가진 문자를 [＼+문자]의 형식으로 표현한다
2-3데이터형
＼b 백 스페이스 ＼f 새로운 페이지
＼n 개행 ＼r 복귀
＼t 탭 문자 ＼＼ ＼
＼’ 작은따옴표 ＼” 큰따옴표
11. 리터럴
배열 리터럴(array) – 데이터의 집합을 말한다
하나의 변수에 대해 복수의 값을 보관할 수 있다
ex) var ary = [ ‘JavaScript’ , ‘Ajax’ , ‘ASP.NET’ ] ;
document.writeln(ary[0]); // JavaScript
배열은 내부에 별도의 배열을 가질 수도 있다
ex) var ary = [ ‘JavaScript’ , [ ‘jQuery’ , ‘prototype.js’ ] , ‘ASP.NET’ ] ;
document.writeln(ary[1][0]); // jQuery
객체 리터럴(object) – 각 요소에 문자열 키로 접근 가능한 배열을 말한다(해시, 연상배열)
객체 내의 개별 데이터는 ‘프로퍼티’라고 불린다
ex) var obj = { x : 1, y : 2, z : 3 };
document.writeln(obj . x ); //1
document.writeln(obj [ ‘x’ ]); //1
2-3데이터형
12. 리터럴
함수 리터럴(function) – 입력 값이 주어짐에 따라 미리 정해진 처리를 행하여 결과를 반환해주는 구조
미정의 값(undefined) – 어떤 변수가 선언완료 상태에서 값을 부여하지 않은 경우
미정의 된 프로퍼티를 참조하려고 하는 경우
2-3데이터형
13. 연산자의 기본
연산자(Operator)
x = a + b ;
연산자에 의해 처리되는 변수/리터럴, 피연산자(Operand)
연산자란 부여된 변수/리터럴에 대하여 미리 결정된 어떠한 처리를 행하기 위한 기호이다
2-4연산자
14. 산술 연산자
2-4연산자
가산 연산자(+) – 오퍼랜드가 둘 다 수치인 경우는 덧셈, 한쪽이 문자열인 경우는 연결 연산자가 된다
ex) document.writeln( ‘10’ + 1 ); //101
증가 연산자(++)와 감소 연산자(--) – 오퍼랜드에 대해서 1을 가산/감산한다
오퍼랜드의 전후 어느 쪽에 놓는가에 따라 결과가 다르게 된다
소수점을 포함하는 계산 – 값을 일단 정수로 바꾼 뒤에 연산을 행하고 그 결과를 다시 소수로 바꾼다
비교 연산자
좌변/우변의 값을 비교하여 그 결과를 true/false로 반환한다 (==, !=, <, <=, ===, ?:, …)
조건 연산자( ?: ) – 「조건식 ? 식1 : 식2」 조건식이 true인 경우는 식1, false인 경우는 식2를 취한다
15. 대입 연산자
지정된 변수에 값을 대입하는 연산자
복합 대입 연산자 : 좌변에 우변의 값을 연산한 결과를 대입한다
ex) x+=y ↔ x=x+y
기본형과 참조형에 따른 대입의 차이
: 기본형은 값 자체를 전달하므로 원래 변수의 값을 변경해도 복사한 변수에 영향을 미치지 않지만
참조형은 값을 보관하는 주소를 전달하므로 한쪽의 변경이 다른 쪽에도 영향을 준다
ex) var x=1;
var y=x;
var x=2;
document.writeln(y); //1
var ary1=[0,1,2];
var ary2=ary1;
ary1[0]=5;
document.writeln(ary2); //5,1,2
2-4연산자
16. 논리 연산자
2-4연산자
복수의 조건식을 논리적으로 결합하여 결과를 true/false로 반환한다 (&&, ||, ! )
공백문자열, 숫자 0 , NaN(Not a Number), null, undefined 등의 값 → false
그 외 연산자
delete – 객체의 프로퍼티나 배열의 요소를 삭제한다
삭제에 성공했을 경우 true, 실패한 경우에는 false를 되돌린다.
typeof – 오퍼랜드의 데이터형을 반환한다
17. 프로그램의 세 가지 구조
2-5제어명령
1) 기술된 순서대로 처리를 행하는 순차 구조
2) 조건에 따라 처리를 분기하는 선택 구조
3) 특정의 처리를 반복 실행하는 반복 구조
18. 단순 분기를 기술하기 – if 명령
2-5제어명령
주어진 조건식이 true/false 어느 쪽인지에 따라서 대응하는 명령을 실행한다
var x=15;
if(x>=10){
document.writeln('변수 x는 10 이상이다.');
}else if(x>=5){
document.writeln('변수 x는 5 이상이다.');
}else{
document.writeln('변수 x는 5 미만이다.');
} // 변수 x는 10 이상이다.
복수의 조건이 들어맞는 경우에도 처음 한 개의 블록만 실행된다
내부에서 if문을 중첩해서 보다 복잡한 조건분기를 표현할 수 있다
블록 내의 명령이 한 줄인 경우 중괄호는 생략이 가능하다
19. 여러 분기를 기술하기 – switch 명령
2-5제어명령
선두의 식이 우선 평가되고 일치하는 case 블록을 실행한다
일치하는 case 블록이 없을 경우 마지막의 default 블록을 호출한다
var rank='B';
switch(rank){
case 'A' : document.writeln('A랭크이다.');
break;
case 'B' : document.writeln('B랭크이다.');
break;
case 'C' : document.writeln('C랭크이다.');
break;
default : document.writeln('랭크이외다.');
} //B랭크이다.
switch명령에서는 자동으로 블록에서 빠져 나오지 못하므로 break 명령을 이용한다
20. 조건식에 따라 루프 제어하기 – while, do while 명령
2-5제어명령
미리 부여된 조건식이 true인 동안은 루프를 반복한다
do…while 명령의 끝부분에는 문장의 종료를 나타내는 ; 이 필요하다
var x=10;
while(x<10){
document.writeln('x의 값은 ' + x);
x++;
}
var x=10;
do{
document.writeln('x의 값은 ' + x);
x++;
}while(x<10);
전치판단, 조건에 따라서 루프를
한번도 실행하지 않는다
후치판단, 조건에 상관없이
최소 1회는 루프를 실행한다
21. 지정횟수만큼만 루프를 처리하기 – for 명령
2-5제어명령
미리 지정된 횟수만큼만 반복 처리를 행한다
괄호 내의 초기화식, 루프 계속 조건식, 증감식의 세가지 식으로 루프를 제어한다
for(var i=1,j=1; i<5; i++,j++){
document.writeln(‘ i * j 의 값은 ' + i * j );
}
22. 배열 내의 요소를 순서대로 처리하기 – for in 명령
2-5제어명령
지정된 배열/연상배열이나 객체 내의 요소/멤버에 대해 선두부터 순서대로 반복 처리를 행한다
var member =['A','B','C'];
for(var i in member){
document.writeln('이름은 ' + member[i]);
}
var book=new Object();
book.title='javascript';
book.price='3000';
for(var k in book){
document.writeln(k + '는 ' + book[k]);
}
For…in루프를 이용하는 것은 연상배열, 객체의 키를 조회할 경우에 한하며, 일반 배열을 조회할 경우는
원칙적으로 for루프를 이용하도록 한다
23. 루프를 도중에 skip/중단하기 – break/ continue 명령
2-5제어명령
특정조건을 만족하는 경우에 루프를 강제적으로 중단하고 싶을 때 – break 명령
현재의 루프만을 건너뛰고 다음 루프를 계속해서 실행하고 싶을 때 – continue 명령
var result = 0;
for(var i=0; i<100; i++){
if(i%2==0){continue;}
result +=i;
}
document.writeln('합계 = '+result);
중첩된 루프에서 break, continue 명령을 사용한 경우에는 가장 안쪽의 루프를 빠져 나온다
빠져 나오고자 하는 루프의 선두에 레이블을 지정하면 레이블이 부여된 루프를 빠져 나올 수 있다
24. 예외 처리 – try, catch, finally 명령
2-5제어명령
try {
예외가 발생할지 모르는 처리
}
catch(e) {
예외가 발생했을 경우 실행되는 처리
}
finally {
예외의 유무에 상관없이 실행하는 처리
}
예외는 직접 발생시키는 것도 가능하다 – throw 명령
throw new Error (에러 메시지)
지정된 예외를 발생시켜 처리를 catch 블록에 인계한다
