인라인 스크립트 방식 : <script>안에 씀
외부 스크립트 방식 : .js에 만들어서 씀
동시에 쓰면 인라인 방식이 무시된다.
02-01.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-01</title>
</head>
<body>
<script type="text/javascript">
document.writeln('<script> 태그 아래의 인라인 스크립트에 의한 출력입니다.<br/>');
</script>
<script type="text/javascript" src="02-01.js">
document.writeln('외부 스크립트를 사용할 때는 <script> 태그 아래 내용이 무시됩니다.<br/>');
</script>
</body>
</html>
02-01.js
document.writeln('src 속성에 기술된 외부 스크립트에 의한 출력입니다.<br/>');
document.writeln('안녕하세요! 자바스크립트입니다!<br/>');
출력화면
변수 선언과 var
변수선언시 초기값을 저장하지 않을 경우 값을 저장할때까지 undefined 상태이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-02</title>
</head>
<body>
<script type="text/javascript">
// 변수 선언
var a;
var b, c;
var d = 0;
var e = 2, f = 4;
var g = 6, h;
var i, j = 8;
document.writeln('a: ' + a + '<br/>'); // a: undefined
document.writeln('b: ' + b + '<br/>'); // b: undefined
document.writeln('c: ' + c + '<br/>'); // c: undefined
document.writeln('d: ' + d + '<br/>'); // d: 0
document.writeln('e: ' + e + '<br/>'); // e: 2
document.writeln('f: ' + f + '<br/>'); // f: 4
document.writeln('g: ' + g + '<br/>'); // g: 6
document.writeln('h: ' + h + '<br/>'); // h: undefined
document.writeln('i: ' + i + '<br/>'); // i: undefined
document.writeln('j: ' + j + '<br/>'); // j: 8
var k = 10;
var l = '문자열';
document.writeln('k: ' + k + '<br/>'); // k: 10
document.writeln('l: ' + l + '<br/>'); // l: 문자열
l = 12;
document.writeln('l: ' + l + '<br/>'); // l: 12
</script>
</body>
</html>
출력화면
//기본형 데이터 타입
var num = 10;
var str = ‘자바스크립트’;
//참조형 데이터 타입
var point = {x : 300, y: 400};
var arr = [10, 20, 30, 40];
02-03.html파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-03</title>
</head>
<body>
<script type="text/javascript">
// 데이터 타입
var num = 10; // 숫자형
var str = '자바스크립트'; // 문자열형
var point = { x : 300, y : 400 }; // 객체
var arr = [ 10, 20, 30, 40 ]; // 배열
// 함수
var add = function(op1, op2) {
return op1 + op2;
};
document.writeln('num: ' + num + '<br/>'); // num: 10
document.writeln('str: ' + str + '<br/>'); // str: 자바스크립트
document.writeln('point.x: ' + point.x + '<br/>'); // point.x: 300
document.writeln('point["y"]: ' + point["y"] + '<br/>'); // point["y"]: 400
document.writeln('arr[0]: ' + arr[0] + '<br/>'); // arr[0]: 10
document.writeln('arr[3]: ' + arr[3] + '<br/>'); // arr[3]: 40
document.writeln('add: ' + add + '<br/>'); // add: function (op1, op2) { return op1 + op2; }
document.writeln('add(2, 3): ' + add(2, 3) + '<br/>'); // add(2, 3): 5
</script>
</body>
</html>
결과화면
리터널 : 프로그램의 코드 상에 데이터의 값을 표현하는 방식
1. 숫자 리터럴
1) 16진수 리터널은 ‘0x’ 또는 ‘0X’로 시작 하고 뒤에 16진수
2) 8진수는 0으로 시작하고 0~7사이의 숫자를 씀
3) Infinity, NaN를 포함한 모든 숫자 데이터는 typeof 연산의 결과는 number를 반환함
02-04.html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-04</title>
</head>
<body>
<script type="text/javascript">
var a = 10;
document.writeln('a: ' + a + '<br/>'); // a: 10
document.writeln('typeof a: ' + typeof a + '<br/>'); // typeof a: number
document.writeln('isFinite(a): ' + isFinite(a) + '<br/>'); // isFinite(a): true
document.writeln('isNaN(a): ' + isNaN(a) + '<br/>'); // isNaN(a): false
document.writeln('<br/>');
var b = 1 / 0;
document.writeln('b: ' + b + '<br/>'); // b: Infinity
document.writeln('typeof b: ' + typeof b + '<br/>'); // typeof b: number
document.writeln('isFinite(b): ' + isFinite(b) + '<br/>'); // isFinite(b): false
document.writeln('isNaN(b): ' + isNaN(b) + '<br/>'); // isNaN(b): false
document.writeln('<br/>');
var c = 5 * "4times";
document.writeln('c: ' + c + '<br/>'); // c: NaN
document.writeln('type of c: ' + typeof c + '<br/>'); // typeof c: number
document.writeln('isFinite(c): ' + isFinite(c) + '<br/>'); // isFinite(c): false
document.writeln('isNaN(c): ' + isNaN(c) + '<br/>'); // isNaN(c): true
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
2. 문자열 리터널
문자열 리터널은 유니코드 문자들을 작은 땅모표 또는 큰 따옴표로 둘러싸서 표현
다음은 이스케이프 시퀀스이다.
02-05.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>02-05</title>
</head>
<body>
<script type="text/javascript">
// 문자열 리터럴
var str1 = '문자열 리터럴';
var str2 = '작은따옴표로 만든 문자열에는 큰따옴표(")를 포함할 수 있습니다.';
var str3 = "큰따옴표로 만든 문자열에는 작은따옴표(')를 포함할 수 있습니다.";
document.writeln(str1 + '<br/>');
document.writeln('<br/>');
document.writeln(str2 + '<br/>');
document.writeln(str3 + '<br/>');
document.writeln('<br/>');
var str4 = '작은따옴표로 만든 문자열에 \\\'를 통해 작은따옴표(\')를 포함할 수 있습니다.';
var str5 = "큰따옴표로 만든 문자열에 \\\"를 통해 큰따옴표(\")를 포함할 수 있습니다.";
var str6 = '이 문자열은 줄바꿈을 통해 첫번째 행을 출력하고,\n이어 두번째 행을 출력합니다.';
var str7 = '원주율 \u03c0는 원의 둘레와 지름의 비율입니다.';
document.writeln(str4 + '<br/>');
document.writeln(str5 + '<br/>');
document.writeln(str6 + '<br/>');
document.writeln(str7 + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
줄바꿈 문자는 실제로 브라우저 상에서는 적용이 안되는 것을 유의하자
3. 배열리터럴
배열 : 데이터 값들의 모음
배열의 원소인 데이터값은 배열명 다음에 대괄호로 둘러싼 인덱스를 써서 그 값을 가져오거나 변경할 수 있음
02-06.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-06</title>
</head>
<body>
<script type="text/javascript">
// 배열 리터럴
// 빈 배열
var arr1 = [];
document.writeln('arr1[0]: ' + arr1[0] + '<br/>'); // arr1[0]: undefined
document.writeln('arr1[1]: ' + arr1[1] + '<br/>'); // arr1[1]: undefined
document.writeln('arr1[2]: ' + arr1[2] + '<br/>'); // arr1[2]: undefined
document.writeln('arr1[3]: ' + arr1[3] + '<br/>'); // arr1[3]: undefined
document.writeln('arr1.length: ' + arr1.length + '<br/>'); // arr1.length: 0
document.writeln('<br/>');
arr1[0] = 95;
arr1[2] = 100;
document.writeln('arr1[0]: ' + arr1[0] + '<br/>'); // arr1[0]: 95
document.writeln('arr1[1]: ' + arr1[1] + '<br/>'); // arr1[1]: undefined
document.writeln('arr1[2]: ' + arr1[2] + '<br/>'); // arr1[2]: 100
document.writeln('arr1[3]: ' + arr1[3] + '<br/>'); // arr1[3]: undefined
document.writeln('arr1.length: ' + arr1.length + '<br/>'); // arr1.length: 3
document.writeln('<br/>');
// 1차원 배열
var arr2 = [ '홍길동', '이순신', '강감찬' ];
document.writeln('arr2[0]: ' + arr2[0] + '<br/>'); // arr2[0]: 홍길동
document.writeln('arr2[1]: ' + arr2[1] + '<br/>'); // arr2[1]: 이순신
document.writeln('arr2[2]: ' + arr2[2] + '<br/>'); // arr2[2]: 강감찬
document.writeln('arr2[3]: ' + arr2[3] + '<br/>'); // arr2[3]: undefined
document.writeln('arr2.length: ' + arr2.length + '<br/>'); // arr2.length: 3
document.writeln('<br/>');
// 배열을 원소로 하는 배열(2차원 배열)
var arr2d = [
['을지문덕', '연개소문'],
['광개토대왕', '세종대왕'],
['김유신', '계백']
];
document.writeln('arr2d[0]: ' + arr2d[0] + '<br/>'); // arr2d[0]: 을지문덕, 연개소문
document.writeln('arr2d[1]: ' + arr2d[1] + '<br/>'); // arr2d[1]: 광개토대왕, 세종대왕
document.writeln('arr2d[2]: ' + arr2d[2] + '<br/>'); // arr2d[2]: 김유신, 계백
document.writeln('arr2d[3]: ' + arr2d[3] + '<br/>'); // arr2d[3]: undefined
document.writeln('arr2d.length: ' + arr2d.length + '<br/>'); // arr2d.length: 3
document.writeln('<br/>');
document.writeln('arr2d[0][0]: ' + arr2d[0][0] + '<br/>'); // arr2d[0][0]: 을지문덕
document.writeln('arr2d[0][1]: ' + arr2d[0][1] + '<br/>'); // arr2d[0][1]: 연개소문
document.writeln('arr2d[0].length: ' + arr2d[0].length + '<br/>'); // arr2d[0].length: 2
document.writeln('arr2d[1][0]: ' + arr2d[1][0] + '<br/>'); // arr2d[1][0]: 광개토대왕
document.writeln('arr2d[1][1]: ' + arr2d[1][1] + '<br/>'); // arr2d[1][1]: 세종대왕
document.writeln('arr2d[1].length: ' + arr2d[1].length + '<br/>'); // arr2d[1].length: 2
document.writeln('arr2d[2][0]: ' + arr2d[2][0] + '<br/>'); // arr2d[2][0]: 김유신
document.writeln('arr2d[2][1]: ' + arr2d[2][1] + '<br/>'); // arr2d[2][1]: 계백
document.writeln('arr2d[2].length: ' + arr2d[2].length + '<br/>'); // arr2d[2].length: 2
document.writeln('arr2d[3][0]: ' + arr2d[3][0] + '<br/>'); // arr2d[3]이 undefined이므로 에러 발생
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
4. 객체 리터럴
객체 : 이름이 붙어있는 데이터 값들의 모음
프로퍼티:
-이름이 붙어있는 값
- 배열, 함수, 객체 등 어떠한 값을 담을수 있음
메소드:
-함수가 프로퍼티에 저장되면 프로퍼티명이 메소드명이 된다.
-객체명 다음에 점을 붙이고 메소드를 호출 할 수 있음.
-중괄로로 전체를 감싸고, 프로퍼티명과 프로퍼티 값을 콜론으로 구분하며, 각각의 프로퍼티들을 콤마로 분리해 작성
-객체 리터러르이 프로퍼티명을 식별자 뿐만 아니라 문자열로도 기술 할 수 있음
02-07.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-07</title>
</head>
<body>
<script type="text/javascript">
// 객체 리터럴
var p1 = { x : 300, y : 200 }; // (x, y)좌표가 (300, 200)인 객체 생성
var p2 = { x : 350, y : 280 }; // (x, y)좌표가 (350, 280)인 객체 생성
var rect = {
topLeft : p1, // 사각형의 좌측상단 좌표 정보 => 초기값으로 p1 객체 참조
bottomRight : p2, // 사각형의 우측하단 좌표 정보 => 초기값으로 p2 객체 참조
size : function() { // 사각형의 면적 계산 메소드
return (this.bottomRight.x - this.topLeft.x) * (this.bottomRight.y - this.topLeft.y);
}
};
document.writeln('위치 변경 전 사각형의 넓이: ' + rect.size() + '<br/>');
document.writeln('<br/>');
p1 = { x : 200, y : 300 };
p2 = { x : 300, y : 400 };
rect.topLeft = p1; // 사각형의 좌측상단 좌표 정보 => 좌표가 변경된 p1 객체 참조
rect.bottomRight = p2; // 사각형의 우측하단 좌표 정보 => 좌표가 변경된 p2 객체 참조
document.writeln('위치 변경 후 사각형의 넓이: ' + rect.size() + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
결과화면
5. 함수리터럴
함수 : 어떤 입력 값을 이용해 미리 정의된 로직을 처리하여 결과를 반환하는 구조
객체 프로퍼티에 저장된 함수를 객체의 메소드라고 부름
02-08.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-08</title>
</head>
<body>
<script type="text/javascript">
// 함수 리터럴
var add = function(op1, op2) {
return op1 + op2;
};
document.writeln('add(5, 3): ' + add(5, 3) + '<br/>'); // add(5, 3): 8
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
6. 불리언리터럴
-참/거짓의 진리 값 두가지를 표현
-true또는 false인데 true는 숫자 1 false 는 숫자 0이다.
02-09.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-09</title>
</head>
<body>
<script type="text/javascript">
// 불리언 리터럴
var score = 88;
var message = '불합격';
// score 값이 70이상일 경우 비교의 결과로 true를 반환하고,
// message 변수에 '합격' 문자열 값을 저장합니다.
if (score >= 70) {
message = '합격';
}
document.writeln(score + '점은 ' + message + '입니다.<br/>');
document.writeln('<br/>');
// 0, undefined, null, NaN, "" 은 논리연산에서 false로 변환되어 평가됩니다.
var a = 0;
var b = undefined;
var c = null;
var d = NaN;
var e = "";
document.writeln('!0 => ' + !a + '<br/>'); // true
document.writeln('!undefined => ' + !b + '<br/>'); // true
document.writeln('!null => ' + !c + '<br/>'); // true
document.writeln('!NaN => ' + !d + '<br/>'); // true
document.writeln('!"" => ' + !e + '<br/>'); // true
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
7. undefined와 null
undefined : 변수가 선언은 되었지만 값이 할당되지않음 또는 존재하지않은 객체 프로퍼티에 접근할 경우 반환되는 값
null : 예약어, 참조 타입과 함께 쓰여 어떠한 객체도 나타내지 않은 특수한 값으로 사용
02-10.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-10</title>
</head>
<body>
<script type="text/javascript">
// undefined와 null
var a; // 변수 초기값 미지정 시 undefined 값이 할당됩니다.
var obj = {}; // 프로퍼티가 없는 빈 객체를 생성합니다.
document.writeln('a: ' + a + '<br/>'); // a: undefined
document.writeln('obj: ' + obj + '<br/>'); // obj: [object Object]
document.writeln('obj.prop: ' + obj.prop + '<br/>'); // obj.prop: undefined
obj = null; // 객체 참조를 제거합니다.
document.writeln('obj: ' + obj + '<br/>'); // obj: null
document.writeln('<br/>');
if (!a) // !undefined
document.writeln('변수 a는 초기화가 필요합니다.<br/>');
if (!obj) // !null
document.writeln('변수 obj는 참조하는 객체가 없습니다.<br/>');
</script>
</body>
</html>
출력화면
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - 객체 (0) | 2015.01.23 |
|---|---|
| Javascript - 함수의 이해 (0) | 2015.01.22 |
| Javascript - 함수 유효범위와 클로저 (0) | 2015.01.22 |
| Javascript - 연산자, 제어문, 예외처리 (0) | 2015.01.21 |
| 자바스크립트 - EJS 형식에서 forEach문 의미 및 사용법 (0) | 2015.01.06 |
| 자바스크립트 - for...in 문 (0) | 2015.01.06 |
| 자바스크립트 - DOM level2 이벤트 모델 (0) | 2014.09.09 |
| 자바스크립트 - 이벤트 버블링과 버블링 막는 방법 (0) | 2014.09.07 |