본문
연산자, 제어문, 예외처리(JavaScript)
프로그래밍/HTML&JavaScript 2016. 12. 29. 13:17
반응형
# 연산자, 제어문, 예외처리
# 산술연산자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!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> | cs |
# 대입연산자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!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> | cs |
# 비교연산자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!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를 반환합니다. // 참조형은 참조를 비교하는것이기 때문에 값이 같더라도 참조가 다르면 false반환 document.writeln('arr1 == arr2: ' + (arr1 == arr2) + '<br/>'); // arr1 == arr2: false </script> </body> </html> | cs |
# 논리연산자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!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> | cs |
# 비트연산자 & 기타연산자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!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> | cs |
# if문
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!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> | cs |
# switch문
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!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> | cs |
# &&와 ||을 이용한 조건문
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>03-08</title> </head> <body> <script type="text/javascript"> // &&와 ||을 이용한 조건문을 이용하여 if문과 같은 효과의 문장을 만들 수 있다. 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> | cs |
# while문
- while문은 기본적인 반복문으로, 표현식이 true로 평가되면 몸체에 해당하는 블록 내의 문장들을 실행
- 문장을 모두 실행한 뒤 다시 표현식을 평가하는데 이때 false로 평가되면 while문이 종료되고 프로그램의 다음 문장이 실행
- 주의힐 점은 평가식을 false로 만들 수 있는 종료 조건을 만드는 것
- 종료조건을 만들지 않으면 while문은 무한 루프에 빠짐
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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> | cs |
# do...while문
- 최소한 한번은 브록 내의 문장들을 실행
- do...while문 끝에 세미콜론(;)이 붙음
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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> | cs |
# for문
1 2 3 4 | for (초기식;조건식;증감식) { 문장들 } | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!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> | cs |
# for...in문
- for...in문은 객체의 프로퍼티나 배열의 원소에 대해 순서대로 반복처리를 실행
- 변수에는 객체로부터 취한 프로퍼티명이 저장되거나, 배열로부터 취한 인덱스 번호가 저장
1 2 3 | for (변수 in 객체 혹은 배열) { 문장들 } | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!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> | cs |
# 예외란
- 예외적인 상황이나 에러가 발생했음을 나타내는 객체
- 자바스크립트는 런타임에서 에러가 발생할 때마다 예외를 발생시킴
- 프로그램에서 throw문을 사용하여 명시적으로 예외를 발생시킬 수도 있음
- throw문에서 사용하는 표현식의 결과 타입은 대부분 Error 객체 혹은 Error 객체를 상속받은 객체지만,
- 에러메세지를 담은 문자열이나 에러코드를 나타내는 숫자값도 유용하게 사용
throw 표현식;
1 | throw new Error('에러메시지'); | cs |
# try...catch...finally
- 자바스크립트의 예외처리 기법
- 예외가 발생하면 자바스크립트 인터프리터는 정상적인 프로그램 실행을 즉시 중단하고 가장 가까운 예외처리기로 처리를 넘김
- 예외처리기는 try...catch...finally 블록의 catch 절을 사용해 작성
- 예외를 처리할 try...catch...finally 블록이 없는 함수에서 예외가 발생하면 함수를 호출했던 블록으로 예외가 전파되며,
- 어떠한 예외처리기도 찾지 못하면 이 예외는 에러로 취급
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | try { // 정상적으로 처리되어야 할 코드들을 기술한다. // 코드 실행 중 런타임에서 에러가 발생하여 예외가 발생하거나, // throw 문을 통해 예외를 직접 발생시킬 수도 있으며, // 호출한 함수를 통해 예외가 전파될 수도 있다. } catch (e) { // 예외가 발생할 경우에만 실행되는 블록으로 // 예외와 관련된 정보를 ()에 선언된 변수 e를 통해 참조한다. // 예외를 무시할 수도 있으며, // throw 문을 통해 예외를 다시 발생시킬 수도 있다. } finally { // try 블록이 모두 실행 완료되거나, // 예외가 발생하여 catch 블록이 실행된 후에도 // 무조건 실행이 필요한 코드를 이 블록에 기술한다. } | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!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/>'); // \u2460 은 유니코드 특수문자 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> | cs |
- 출처 : SK Planet 상생혁신센터 javascript 교육과정
반응형
댓글