프로그래밍/자바스크립트

Javascript - 연산자, 제어문, 예외처리

가카리 2015. 1. 21. 22:29
반응형

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>


출력화면



쉽게 이해가능하다.

반응형