1. 산술 연산자
03-01.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-01</title>
</head>
<body>
<script type="text/javascript">
// 산술연산자
var num = 20;
var str = '20';
var bool = true;
var obj = {};
// 피연산자가 숫자일 경우 덧셈 연산을 행합니다.
document.writeln('num + 13: ');
document.writeln(num + 13); // 33
document.writeln('<br/>');
// 피연산자가 불리언일 경우 true는 1로, false는 0으로 변환되어
// 덧셈연산을 행합니다.
document.writeln('bool + 1: ');
document.writeln(bool + 1); // 2
document.writeln('<br/>');
// 피연산자의 한 쪽이 문자열일 경우 나머지 피연산자도 문자열로 변환되어
// 문자열 접합연산을 행합니다.
document.writeln('str + 13: ');
document.writeln(str + 13); // 2013
document.writeln('<br/>');
// 피연산자의 한 쪽이 객체일 경우 객체는 문자열로 변환돠고,
// 나머지 피연산자도 문자열로 변환되어 문자열 접합연산을 행합니다.
document.writeln('obj + 10: ');
document.writeln(obj + 10); // [object Object]10
document.writeln('<br/>');
document.writeln('<br/>');
// 후치증가연산은 먼저 피연산자의 값을 반환하고, 피연산자의 값을 1 증가시킵니다.
var x = 3;
var y = x++;
document.writeln('x: ' + x + '<br/>'); // x: 4
document.writeln('y: ' + y + '<br/>'); // y: 3
document.writeln('<br/>');
// 전치증가연산은 먼저 피연산자의 값을 1 증가시키고, 피연산자의 값을 반환합니다.
x = 3;
y = ++x;
document.writeln('x: ' + x + '<br/>'); // x: 4
document.writeln('y: ' + y + '<br/>'); // y: 4
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
2. 대입 연산자
03-02.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-02</title>
</head>
<body>
<script type="text/javascript">
// 대입연산자
var x = 5;
// 대입연산자와 산술연산자를 함께 사용하는 복합대입연산자
x += 3;
document.writeln('x += 3: ' + x + '<br/>'); // x += 3: 8
x = 5;
x -= 3;
document.writeln('x -= 3: ' + x + '<br/>'); // x -= 3: 2
x = 5;
x *= 3;
document.writeln('x *= 3: ' + x + '<br/>'); // x *= 3: 15
x = 5;
x /= 3;
document.writeln('x /= 3: ' + x + '<br/>'); // x /= 3: 1.6666666666666667
x = 5;
x %= 3;
document.writeln('x %= 3: ' + x + '<br/>'); // x %= 3: 2
document.writeln('<br/>');
// 대입연산자와 비트연산자를 함께 사용하는 복합대입연산자
x = 5;
x &= 2; // 비트 AND연산을 통해 x가 짝수인지 검사가 가능합니다.
document.writeln('x &= 2: ' + x + '<br/>'); // x &= 2: 0
x = 5;
x |= 2;
document.writeln('x |= 2: ' + x + '<br/>'); // x |= 2: 7
x = 5;
x ^= 2;
document.writeln('x ^= 2: ' + x + '<br/>'); // x ^= 2: 7
x = 5;
x <<= 2;
document.writeln('x <<= 2: ' + x + '<br/>'); // x <<= 2: 20
x = 5;
x >>= 2;
document.writeln('x >>= 2: ' + x + '<br/>'); // x >>= 2: 1
x = 5;
x >>>= 2;
document.writeln('x >>>= 2: ' + x + '<br/>'); // x >>>= 2: 1
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
3.비교연산자
===은 동치 연산자라고함
03-03.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-03</title>
</head>
<body>
<script type="text/javascript">
// 비교연산자
var x = 5;
var y = 3;
var z = '5';
document.writeln('x == y: ' + (x == y) + '<br/>'); // x == y: false
// == 연산자에서 문자열과 숫자를 비교할 경우 숫자가 문자열로 변환되어 비교연산을 수행합니다.
document.writeln('x == z: ' + (x == z) + '<br/>'); // x == z: true
document.writeln('x != y: ' + (x != y) + '<br/>'); // x != y: true
document.writeln('x != z: ' + (x != z) + '<br/>'); // x != z: false
document.writeln('x < y: ' + (x < y) + '<br/>'); // x < y: false
document.writeln('x <= y: ' + (x <= y) + '<br/>'); // x <= y: false
document.writeln('x > y: ' + (x > y) + '<br/>'); // x > y: true
document.writeln('x >= y: ' + (x >= y) + '<br/>'); // x >= y: true
// === 연산자에서는 비교연산 시 데이터 타입 변환을 수행하지 않습니다.
document.writeln('x === z: ' + (x === z) + '<br/>'); // x === z: false
document.writeln('x !== y: ' + (x !== y) + '<br/>'); // x !== y: true
document.writeln('x !== z: ' + (x !== z) + '<br/>'); // x !== z: true
document.writeln('<br/>');
var arr1 = ['홍길동', '이순신', '강감찬'];
var arr2 = ['홍길동', '이순신', '강감찬'];
// == 연산자에서 참조형을 비교하는 경우 참조값이 같을 경우에만 true를 반환합니다.
document.writeln('arr1 == arr2: ' + (arr1 == arr2) + '<br/>'); // arr1 == arr2: false
</script>
</body>
</html>
출력화면
4.논리연산자
03-04.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-04</title>
</head>
<body>
<script type="text/javascript">
// 논리연산자
var calculator;
// &&연산에서 좌측 표현식이 undefined값을 가지면 false로 평가되어 우측 평가식을 실행하지 않습니다.
calculator && document.writeln('calculator.add(2,3): ' + calculator.add(2,3));
calculator = {
add : function(op1, op2) {
return op1 + op2;
}
};
// &&연산에서 좌측 표현식이 0, undefined, null, NaN, "" 이외의 값을 가지면 true로 평가되어
// 우측 평가식을 실행합니다.
calculator && document.writeln('calculator.add(2,3): ' + calculator.add(2, 3));
// ||연산에서 좌측 표현식이 undefined값을 가지면 false로 평가되어 우측 평가식을 실행합니다.
calculator.subtract || (calculator.subtract = function(op1, op2) { return op1 - op2; });
document.writeln('<br/>');
calculator.subtract && document.writeln('calculator.subtract(2,3): ' + calculator.subtract(2, 3));
</script>
</body>
</html>
출력화면
5. 비트연산자 및 기타연산자
03-05.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-05</title>
</head>
<body>
<script type="text/javascript">
// 기타 연산자
// 배열 객체에 숫자, 문자열, 불리언, Date 객체, 배열 객체들을 원소로 담습니다.
var arr = [1, '홍길동', '010-1234-5678', true, new Date(), [10, 20, 30]];
document.writeln('typeof arr[0]: ' + typeof arr[0] + '<br/>'); // number
document.writeln('typeof arr[1]: ' + typeof arr[1] + '<br/>'); // string
document.writeln('typeof arr[2]: ' + typeof arr[2] + '<br/>'); // string
document.writeln('typeof arr[3]: ' + typeof arr[3] + '<br/>'); // boolean
document.writeln('typeof arr[4]: ' + typeof arr[4] + '<br/>'); // object
document.writeln('typeof arr[5]: ' + typeof arr[5] + '<br/>'); // object
document.writeln('<br/>');
document.writeln('arr[4] instanceof Date: ' + (arr[4] instanceof Date) + '<br/>'); // true
document.writeln('arr[4].constructor: ' + (arr[4].constructor) + '<br/>'); // function Date() { }
document.writeln('arr[5] instanceof Array: ' + (arr[5] instanceof Array) + '<br/>'); // true
document.writeln('arr[5].constructor: ' + (arr[5].constructor) + '<br/>'); // function Array() { }
document.writeln('<br/>');
document.writeln('arr: ' + arr + '<br/>');
document.writeln('<br/>');
document.writeln('delete arr[2]: ' + delete arr[2] + '<br/>'); // true
document.writeln('arr[2]: ' + arr[2] + '<br/>'); // undefined
document.writeln('<br/>');
document.writeln('arr: ' + arr + '<br/>');
document.writeln('<br/>');
var point = {
x : 20,
y : 30,
toString : function() {
return '{ x: ' + this.x + ', y: ' + this.y + " }";
}
};
// point 객체 출력 시 에 point 객체 내에 정의한 toString 메소드를 호출합니다.
document.writeln('point: ' + point + '<br/>');
// point 객체의 y 프로퍼티를 제거합니다.
document.writeln('delete point.y: ' + delete point.y + '<br/>');
document.writeln('point: ' + point + '<br/>');
// point 객체의 toString 메소드를 제거합니다.
document.writeln('delete point.toString: ' + delete point.toString + '<br/>');
document.writeln('point: ' + point + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
6. if문
03-06.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-06</title>
</head>
<body>
<script type="text/javascript">
// if 문
var score = 88;
var level;
// if 문의 조건식은 상호 배타적으로 동작하므로,
// 조건을 중복해서 작성하실 필요가 없으며,
// 조건을 만족했을 경우 실행할 문장이 하나일 경우 블록을 생략할 수 있습니다.
if (score >= 90) { // 90점이상 100점 이하
level = 'A';
} else if (score >= 80) { // 80점이상 90점 미만
level = 'B';
} else if (score >= 70) { // 70점이상 80점 미만
level = 'C';
} else if (score >= 60) { // 60점이상 70점 미만
level = 'D';
} else { // 60점 미만
level = 'F';
}
document.writeln(score + '점은 ' + level + ' 학점입니다.<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
7. switch문
03-07.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-07</title>
</head>
<body>
<script type="text/javascript">
// switch 문
var month = 2;
var days;
switch (month) {
case 4:
case 6:
case 9:
case 11: // 4, 6, 9, 11월의 경우
days = 30;
break;
case 2: // 2월의 경우
days = 28;
break;
default: // 1, 3, 5, 7, 8, 10, 12월의 경우
days = 31;
break;
}
document.writeln(month + '월의 날짜는 ' + days + '일까지입니다.<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
출력 화면
8. &&와 ||를 이용한 조건문
03-08.html 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-08</title>
</head>
<body>
<script type="text/javascript">
// &&와 ||을 이용한 조건문
var arr;
// arr이 undefined일 경우 비어있는 배열 객체를 대입합니다.
arr = arr || [];
arr[0] = '홍길동';
arr[1] = '이순신';
arr[2] = '강감찬';
// arr이 배열객체가 존재할 경우 arr 배열의 길이를 출력합니다.
arr && document.writeln('arr.length: ' + arr.length + '<br/>');
document.writeln('<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
출력 화면
9. while문
03-09.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-09</title>
</head>
<body>
<script type="text/javascript">
// while 문
var count = 0;
// while 문의 조건식을 만족하는 동안 블록 내의 문장들을 반복 실행합니다.
while (count < 10) {
document.writeln(count + '<br/>');
count++;
}
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
10. do-while문
03-10.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-10</title>
</head>
<body>
<script type="text/javascript">
// do...while 문
var count = 0;
// do...while 문의 조건식을 만족하는 동안 블록 내의 문장들을 반복 실행합니다.
do {
document.writeln(count + '<br/>');
count++;
} while (count < 10);
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
11. for문
03-11.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-11</title>
</head>
<body>
<script type="text/javascript">
// for 문
var arr2d = [
['을지문덕', '연개소문'],
['광개토대왕', '세종대왕'],
['김유신', '계백']
];
for (var i = 0; i < arr2d.length; i++) {
for (var j = 0; j < arr2d[i].length; j++) {
document.writeln(arr2d[i][j] + '<br/>');
}
}
document.writeln('<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
11. for-in문
03-12.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-12</title>
</head>
<body>
<script type="text/javascript">
// for...in 문
// 배열 객체를 선언하고 name과 age 프로퍼티를 가진 객체를 원소로 초기화 합니다.
var arr = [
{ name : '을지문덕', age: 50 },
{ name : '연개소문', age: 35 },
{ name : '광개토대왕', age: 28 },
{ name : '세종대왕', age: 38 },
{ name : '김유신', age: 46 },
{ name : '계백', age: 36 }
];
// 바깥 for...in 반복문에서는 배열의 인덱스를 취해 idx에 저장합니다.
for (var idx in arr) {
document.writeln('{ ');
// 안쪽 for...in 반복문에서는 배열의 원소인 객체의 프로퍼티명를 취해 prop에 저장합니다.
for (var prop in arr[idx]) {
// 인덱스 idx의 배열 원소인 객체에 접근해 prop에 담겨있는 프로퍼티명을 사용해 프로퍼티값을 출력합니다.
document.writeln(prop + ' : ' + arr[idx][prop]);
if (prop == 'age')
break;
document.writeln(', ');
}
document.writeln(' }<br/>');
}
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
12. try-catch-finally문
03-13.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-13</title>
</head>
<body>
<script type="text/javascript">
// try...catch...finally
var x = 5;
var result;
try {
document.writeln('\u2460 <br/>');
result = x * y; // y는 정의되어 있지 얺은 변수이므로 런타임에서 에러가 발생합니다.
document.writeln('\u2461 ' + result + '<br/>');
} catch (e) { // try 블록에서 발생한 에러에 대한 예외를 catch 블록에서 처리합니다.
document.writeln('\u2462 ' + e + '<br/>');
} finally { // funally 블록은 예외 발생과 상관없이 무조건 수행됩니다.
document.writeln('\u2463 <br/>');
}
document.writeln('<br/>');
try {
document.writeln('\u2460 <br/>');
result = x / 0;
document.writeln('\u2461 ' + result + '<br/>');
throw new Error('0으로 나눌 수 없습니다.'); // 예외 객체를 만들어 던집니다.
} catch (e) { // try 블록에서 발생한 에러에 대한 예외를 catch 블록에서 처리합니다.
document.writeln('\u2462 ' + e + '<br/>');
} finally { // funally 블록은 예외 발생과 상관없이 무조건 수행됩니다.
document.writeln('\u2463 <br/>');
}
</script>
</body>
</html>
출력화면
쉽게 이해가능하다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - 로또 번호 생성기 만들기 (0) | 2015.01.23 |
|---|---|
| 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 |