반응형
자바스크립트에 미리 정의되어 내장된 객체들을 말한다.
  1. 이벤트와 이벤트 핸들러

    이벤트란 특정한 동작이 발생했다는 신호를 가리키고 이벤트 핸들러란 이벤트가 발생할 때마다 처리하는 함수 혹은 메소드이다

    • 이벤트 종류

      이벤트 의미
      focus 입력양식 필드로 포커스가 들어왔을때
      blur 입력양식 필드에서 포커스가 다른 곳으로 이동했을때
      change 입력양식 필드에 있는 값을 바꾸었을때
      click 입력양식이나 링크를 마우스로 클릭했을때
      dblclick 마우스를 더블클릭 했을때
      mousedown 마우스버튼을 눌렀을때
      mouseup 마우스버튼을 눌렀다 놓았을 때
      mousemove 마우스를 움직였을 때
      mouseout 마우스가 링크나 특정 영역 안에 있다가 나갔을때
      mouseover 링크 위로 마우스가 지나갔을때
      dragdrop 마우스를 클릭한 상태에서 움직였을때
      keydown 키를 입력했을때
      keypress 키를 눌렀을 때
      keyup 키를 눌렀다 놓았을 때
      load 문서가 읽혀졌을 때
      unload 문서가 없어질 때
      abort 이미지를 읽다가 중단시켰을 때
      error 문서나 이미지를 읽다가 에러가 발생했을 때
      select 입력양식의 한필드를 선택했을 때
      submit 입력양식을 서버로 보낼 때
      reset 입력 양식에서 리셋 시켰을 때
      resize 윈도우나 프레임의 크기를 바꾸었을때
      move 윈도우나 프레임을 움직였을 때

    • 이벤트 핸들러 지정

      이벤트핸들러는 html속성으로 지정할수 있다.
      사용하는 방법은 각 이벤트 앞에 on을 붙여 주기만 하면 된다.
      예)onclick,onload,onmousedown...등

      예제1 실행화면
      <script language="javascript">
      <!--
      function mouse1() {
      alert("마우스가 링크로 올라왔습니다")
      }
      //-->
      </script>
      <a onmouseover=mouse1() >마우스를 올려보세요</a>
      마우스를 올려보세요

  2. Event 객체

    • Event 객체의 특성

      특성 의미
      type 이벤트종류
      which 마우스버튼의 종류,입력키의 아스키값
      modifiers 마우스와 키 이벤트 발생시 함께눌러진 Modifier키 (alt,shift,ctrl,*,?..)
      data dragdrop 이벤트로 선택된 객체의 URL주소
      target 이벤트가 전달될 객체
      layerX 이벤트가 발생한 위치의 X 좌표(레이어기준)
      layerY 이벤트가 발생한 위치의 Y 좌표(레이어기준)
      pageX 이벤트가 발생한 위치의 X 좌표(페이지 기준)
      pageY 이벤트가 발생한 위치의 Y 좌표(페이지 기준)
      screenX 이벤트가 발생한 위치의 X 좌표(화면 기준)
      screenY 이벤트가 발생한 위치의 Y 좌표(화면 기준)

  3. 이벤트 잡아내기

    이벤트가 대상 객체에 전달 되기전에 먼저 이벤트를 잡아내어 처리할수가 있다.

    • Event를 잡아내기 위한 메소드

      메소드 의미
      captureEvents 웹 페이지에서 잡아낼 이벤트 지정
      releaseEvents captureEvents로 지정된 이벤트를 해제
      routeEvent 잡아낸 이벤트를 처리할 이벤트 핸들러가 있는 경우 전달한다
      handleEvent 이벤트를 특정 객체의 이벤트 핸들러로 전달

[출처] [8]객체4|작성자 붉은매


반응형
자바스크립트에 미리 정의되어 내장된 객체들을 말한다.
  1. Arguments 객체

    함수가 호출될때 함수내에서 매개변수에 대한 정보를 알아 내는데 사용한다.

    • Arguments 객체의특성

      특성 의미
      caller 이 함수를 호출하는 함수의 매개변수 정보
      callee 이 함수가 호출하는 함수의 매개변수 정보.

  2. Screen 객체

    컴퓨터의 화면 해상도나 색상에 관한 정보를 알아 내는데 사용한다.

    • Screen 객체의특성

      특성 의미
      availWidth 윈도우 인터페이스를 제외한 화면의 너비
      availHeight 윈도우 인터페이스를 제외한 화면의 높이
      width 화면의 너비(픽셀)
      height 화면의 높이(픽셀)
      colorDepth 사용 가능한 색상수
      pixelDepth 한 픽셀당 비트수

      예제1 실행화면
      <script language="javascript">
      <!--
      document.write("방문자 해상도 정보<p>");
      document.write("화면너비 : " + screen.width + "<br>");
      document.write("화면높이 : " + screen.height + "<br>");
      document.write("인터페이스 제외 화면너비 : " + screen.availWidth + "<br>");
      document.write("인터페이스 제외 화면높이 : " + screen.availHeight + "<br>");
      document.write("화면 색상수 : " + screen.colorDepth + "비트<br>");
      //-->
      </script>
      방문자 해상도 정보

      화면너비 : 1280
      화면높이 : 800
      인터페이스 제외 화면너비 : 1280
      인터페이스 제외 화면높이 : 766
      화면 색상수 : 32비트

  3. Number 객체

    문자로된 숫자단어를 실제숫자로 바꾸어주는 객체이다.

    예제2 실행화면
    <script language="javascript">
    <!--
    document.write("일 : " + Number("1") + "<br>");
    document.write("이 : " + Number("2") + "<br>");
    document.write("삼 : " + Number("3") + "<br>");
    document.write("사 : " + Number("사") + "<br>");
    //-->
    </script>
    일 : 1
    이 : 2
    삼 : 3
    사 : NaN

    [출처] [7]객체3|작성자 붉은매


반응형
자바스크립트에 미리 정의되어 내장된 객체들을 말한다.
  1. Math 객체

    자바스크립트에서 삼각함수,지수함수,로그함수와 같은 특수함수들과 파이,오일러상수와 같은 특수값을
    사용하기 위해 제공되는 객체이다.
    Math는 정적객체이기 때문에 new를 통해 객체를 만드는게 아니라 그자체를 직접 객체로 사용을 한다.

    • Math 객체의특성

      특성 의미
      E 오일러 상수,자연로그의 밑으로 사용
      PI 원주율,파이(π)
      LN10 10의 자연로그
      LN2 2의 자연로그
      SQRT1_2 1/2의 제곱근
      SQRT2 2의 제곱근

    • Math 객체의 메소드

      메소드 의미
      sin(x) sine 함수, f(x) = sin(x)
      cos(x) cosin 함수, f(x) = cos(x)
      tan(x) tangent 함수,f(x) = tan(x)
      asin(x) arc sine 함수(sine의 역함수)
      acos(x) arc cosine 함수(cosine의 역함수)
      atan(x) arc tangent 함수(tangent의 역함수)
      atan2(x,y) arc tangent 함수(tangent의 역함수)
      abs(x) 절대값 함수,f(x) =|x|
      exp(x) 지수함수, f(x) = ex
      pow(x,y) 지수함수, f(x,y) = xy
      log(x) 로그함수, f(x) = logex
      sqrt(x) 제곱근 함수, f(x) = √x
      random() 난수함수
      round(x) 반올림 함수
      floor(x) x보다 같거나 작은 가장 큰 정수
      ceil(x) x보다 같거나 큰 가장 작은 정수
      max(x,y) x와 y중 큰 수 리턴
      min(x,y) x와 y 중 작은 수 리턴

      예제1 실행화면
      <script language="javascript">
      <!--
      document.write("asin(0) : " + Math.asin(0) + "<br>")
      document.write("acos(0) : " + Math.acos(0) + "<br>")
      document.write("atan(0) : " + Math.atan(0) + "<br>")
      document.write("8의9승 : " + Math.pow(8,9) + "<br>")
      document.write("7의 로그 : " + Math.log(7) + "<br>")
      document.write("2의 제곱근 : " + Math.sqrt(2) + "<br>")
      document.write("floor(3.6) : " + Math.floor(3.6) + "<br>")
      document.write("ceil(3.6) : " + Math.ceil(3.6) + "<br>")
      document.write("random() : " + Math.random() + "<br>")
      document.write("round() : " + Math.round(6.6) + "<br>")
      document.write("Math.E : " + Math.E + "<br>")
      document.write("Math.LN2 : " + Math.LN2 + "<br>")
      //끝 -->
      </script>
      asin(0) : 0
      acos(0) : 1.5707963267948965
      atan(0) : 0
      8의9승 : 134217728
      7의 로그 : 1.9459101490553132
      2의 제곱근 : 1.4142135623730951
      floor(3.6) : 3
      ceil(3.6) : 4
      random() : 0.7079159365374614
      round() : 7
      Math.E : 2.718281828459045
      Math.LN2 : 0.6931471805599453

  2. Array 객체

    배열을 만드는데 사용하는 객체이다.
    5장에서 요일 구하는 것을 Array 객체로 만들어 본다.

    예제2 실행화면
    <script language="javascript">
    <!--
    objects = ["일","월","화","수","목","금","토"]
    mirage = new Date()
    a=mirage.getDay()
    b=objects[a]
    document.write("날짜 : ",b,"요일","<br>")
    //끝 -->
    </script>
    날짜 : 월요일

    아주 간결해진 것을 볼 수 있다.

    Array객체를 만드는 방법은 4가지를 들수 있다
    ① mirage = new Array(5) (크기를 지정한 경우)
    ② mirage = new Array() (크기를 지정안한 경우)
    ③ mirage = new Array("값1","값2",...,"값n") (배열선언과 동시에 값을 할당한경우)
    ④ mirage = ["값1","값2",...,"값n"] (바로 배열을 정의한 경우)

    • Array 객체의특성

      특성 의미
      length 배열의크기
      prototype Array 객체로 할당된 변수들이 공유 할 수 있는 특성을 만드는데 사용한다.

      prototype은 객체에 새로운 특성을 만들고 싶을때 사용한다.

      예제3 실행화면
      <script language="javascript">
      <!--
      mirage = new Array(3)
      mirage[0] = "welcome"
      mirage[1] = "to"
      mirage[2] = "homepage"
      Array.prototype.ment = null
      mirage.ment = "인사말"
      document.write(mirage.ment + "<br>")
      for(i=0; i < mirage.length ; i++)
      document.write("mirage[" + i + "] = " + mirage[i] + "<br>")
      //끝 -->
      </script>
      인사말
      mirage[0] = welcome
      mirage[1] = to
      mirage[2] = homepage

    • Array 객체의 메소드

      메소드 의미
      join(분리문자) 배열을 하나의 문자열로 만든다.
      sort(function) 배열의 값들을 정렬시킨다.
      reverse() 배열에 있는 값들의 순서를 정반대로 바꾼다.
      concat(array) 두개의 배열을 하나로 만든다.
      slice(시작,끝)) 배열의 일부를 추출

      • join
        매개변수가 없을때는 분리문자로 , 가 들어간다.
        mirage = new Array(3)
        mirage[0] = "welcome"
        mirage[1] = "to"
        mirage[2] = "homepage"

        mirage.join() ==>welcome,to,homepage
        mirage.join("/")==>welcome/to/homepage
        mirage.join(":")==>welcome:to:homepage

      • sort
        매개변수로 값을 비교하는데 사용되는 함수가 들어간다.
        매개변수 지정이 없으면 사전에 배열된 순서에 따라 배열이 이루어진다.

      • concat
        두개의 배열을 합하여 하나로 만들어준다.

        mirage1 = new Array ("a1","a2")
        mirage2 = new Array ("a3","a4")
        mirage3 = mirage1.concat(mirage2)

  3. Function객체
    함수를 정의하기 위한 기능이다.

    • Function객체의 특성

      특성 의미
      arguments 함수의 매개변수 정보를 배열로 나타낸다.
      prototype function 객체로 할당된 변수들이 공유 할 수 있는 특성을 만드는데 사용한다.
      arity 매개변수의 개수를 알아내는데 사용한다.(함수 외부에서 사용)
      (함수내부에서는 argument.length로 사용) 

반응형
자바스크립트에 미리 정의되어 내장된 객체들을 말한다.
  1. Date 객체

    자바스크립트에서 날짜와 시간을 나타 내는데 사용되는 객체이다.

    mirage = new date()

    이로써 새로운 mirage 객체가 만들어 졌다.
    mirage객체는 date객체의 사본이라 생각하면 이해하기 빠를 것이다.

    • Date객체 메소드1

      메소드 설명
      getYear() 1970년 이후의 연도
      getMonth() 을 나타낸다(0=1월,1=2월...11=12월)
      getDate()
      getDay() 요일(0=일요일,...,6=토요일)
      getHours()
      getMinutes()
      getSeconds()
      getTime() 1970년 1월 1일 이후 시간을 1000분의 1초로 나타낸값

    • Date객체 메소드2

      메소드 설명
      setYear() 1970년 이후의 연도
      setMonth() 을 나타낸다(0=1월,1=2월...11=12월)
      setDate()
      setDay() 요일(0=일요일,...,6=토요일)
      setHours()
      setMinutes()
      setSeconds()
      setTime() 1970년 1월 1일 이후 시간을 1000분의 1초로 나타낸값

    • Date객체 메소드3

      메소드 설명
      parse(날짜문자열) 날짜 문자열을 분석하여 1970년 1월1일 00:00:00 이후에 경과한 시간을 1000분의 1초로 단위로 리턴
      UTC(년,월,일[,시][,분][,초]) GTM을 기준으로 1970년 1월1일 00:00:00 이후에 경과한 시간을 1000분의 1초로 단위로 리턴
      toGTMString() GTM(Greenwich Mean Time) 날짜를 리턴
      toLocaleSting() 날짜를 문자열로 변환한다.mm/dd/yy(월/일/년) hh:mm:ss(시/분/초)

      get 은 날짜시간을 구하는 메소드이고 set은 날짜시간을 세팅(설정)하는 메소드이다.

      예제1 실행화면
      <script language="javascript">
      <!--
      mirage = new Date()
      document.write("날짜 : ",mirage.getYear(),"년")
      document.write(mirage.getMonth()+1,"월")
      document.write(mirage.getDate(), "일","<br>")
      document.write("시간 : ",mirage.getHours(),"시")
      document.write(mirage.getMinutes(),"분")
      document.write(mirage.getSeconds(), "초","<br>")
      //끝 -->
      </script>
      날짜 : 2008년5월5일
      날짜 : 1요일
      시간 : 13시9분27초

      날짜시간을 나타내는 첫글자는 모두 대문자로 표기해야 한다.
      getMonth()+1은 값이 0부터 11까지 나오므로 +1을 해서 1부터 12까지의 월표기로 나타낸것이다.
      ,는 스트링문자와 메소드간의 연결 역활을 한다.(+도 연결 역할을 하는 점은 같다)

      getDay()는 숫자로만 나타난다. 이것은 원하는 결과 값이 아닐 것이다.
      그래서 지금까지 언급됐던 제어문을 총동원해서 바꿔보자.

      예제2 실행화면
      <script language="javascript">
      <!--
      mirage = new Date()
      a=mirage.getDay()
      if(a == 0){
      a="일"}
      else if(a == 1){
      a="월"}
      else if(a == 2){
      a="화"}
      else if(a == 3){
      a="수"}
      else if(a == 4){
      a="목"}
      else if(a == 5){
      a="금"}
      else if(a == 6){
      a="토"}
      document.write("날짜 : ",a,"요일","<br>")
      //끝 -->
      </script>
      날짜 : 월요일

      switch문 으로도 가능 할 것 같은데...?
      예제3 실행화면
      <script language="javascript">
      <!--
      mirage = new Date()
      a=mirage.getDay()
      switch(a) {
      case 0 :
      a="일"
      break;
      case 1 :
      a="월"
      break;
      case 2 :
      a="화"
      break;
      case 3 :
      a="수"
      break;
      case 4 :
      a="목"
      break;
      case 5 :
      a="금"
      break;
      case 6 :
      a="토"
      break;
      }
      document.write("날짜 : ",a,"요일","<br>")
      //끝 -->
      </script>
      날짜 : 월요일

      배열로도 가능할까?
      예제4 실행화면
      <script language="javascript">
      <!--
      function makeArray(n) {
      this.length = n;
      for(var i=1; i<=n;i++)
      this[i] =0 ;
      return this;
      }
      array = new makeArray(7);
      array[0] ="일"; array[1] ="월";
      array[2] ="화"; array[3] ="수";
      array[4] ="목"; array[5] ="금";
      array[6] ="토"
      mirage = new Date()
      a=mirage.getDay()
      b=array[a]
      document.write("날짜 : ",b,"요일","<br>")
      //끝 -->
      </script>
      날짜 : 월요일

      달리 표현이 가능 하지만 Array 객체에서 예를 들어 보겠다.

  2. String 객체
    문자열들을 말한다.
    String객체를 만드는 방법은 " " 기호로 문자열을 만들기만 하면 된다.
    String객체도 특성과 메소드를 가지고 있는데 String객체 뒤에 . 연산자와 함께 붙이면 된다.

    예) num = mirage.length (문자열 갯수)

    • String객체 특성

      length : String객체의 유일한 특성으로 문자의 갯수를 저장하고 있다.

      예제5 실행화면
      <script language="javascript">
      <!--
      mirage = "홈방문을 환영합니다"
      mirage2 = "Wellcome to home"
      document.write("홈방문을 환영합니다<br>")
      document.write("문자열갯수 : "+ mirage.length + "<p>")
      document.write("Wellcome to home<br>")
      document.write("문자열갯수 : "+ mirage2.length + "<br>")
      //끝 -->
      </script>
      홈방문을 환영합니다
      문자열갯수 : 10

      Wellcome to home
      문자열갯수 : 16


      참고로 공백문자도 갯수에 포함된다.
      한글(2바이트)을 하나의 문자로 인식해서 표기 한것이 특징이다.

    • String객체 메소드1 (문자열속성)

      메소드 기능 보기
      big() 글자를 크게함 테스트
      small() 글자를 작게함 테스트
      bold() 글자를 진하게 테스트
      fontsize(크기) 글자의 크기 테스트(4로지정)
      fontcolor("색") 글자색 테스트
      sup() 위첨자 테스트테스트
      sub() 아래첨자 테스트테스트
      blink() 깜박임 테스트(익스지원안됨)
      fixed() 타자기체 테스트
      italics() 이탤릭체 테스트
      strike() 글자가운데 줄긋기 테스트

      중첩해서 사용 가능하다
      예) "테스트".bold().fontcolor("red")

    • String객체 메소드2 (하이퍼텍스트)

      메소드 기능 보기
      link("위치") 하이퍼텍스트 연결 <script>
      document.write("테스트".link("http://mirage728.com.ne.kr/index.html"))
      </script>

      테스트

      anchor("표식") 표식지정 <script>
      document.write("테스트".anchor("테스트로"))
      </script>

    • String객체 메소드3 (문자열처리)

      메소드 기능
      split(분리자,개수) 문자열 분리
      concat(문자열) 두 문자열을 하나로 붙이기
      subString(숫자1,숫자2) 지정된 위치에 있는 문자열추출
      slice(처음위치,마지막위치) 문자열 일부 추출하기
      substr(처음위치,길이) 문자열 일부 추출하기
      charAt(위치) 지정된 위치에서 문자찾기
      indexOf(문자열) 지정된 문자의 위치찾기(왼쪽 부터 검색)
      lastIndexOf(문자열) 지정된 문자의 위치찾기(오른쪽 부터 검색)
      charCodeAt(문자위치) 문자열의 ISO Latin-1 값 알아내기
      fromcharCode(숫자1,숫자2,...숫자n) ISO Latin-1 값에 해당하는 문자 알아내기
      toUpperCase() 대문자로 만들기
      toLowerCase() 소문자로 만들기

      • split(분리자,갯수)
        분리자를 기준으로 개수로 지정된 숫자만큼 분리하게 된다.
        예제6 실행화면
        <script language="javascript">
        <!--
        mirage1 = "mirage728 홈에 방문해 주셔서 진심으로 감사합니다."
        mirage2 = mirage1.split(' ',4)
        document.write(mirage2)
        // 끝 -->
        </script>
        mirage728,홈에,방문해,주셔서

        공백을 기준으로 해서 4개의 문자열을 분리한 것이다.

      • concat(문자열)
        두개의 문자열을 합해서 하나의 새로운 문자열을 만든다.
        메소드를 호출하는 문자열과 매개변수로 들어가는 문자열을 합쳐준다.

        예제7 실행화면
        <script language="javascript">
        <!--
        mirage1 = "mirage728 홈".concat(" 방문을 환영합니다.")
        document.write(mirage1)
        // 끝 -->
        </script>
        mirage728 홈 방문을 환영합니다.

      • substring(숫자1,숫자2)
        지정된 위치에 있는 문자열을 추출하는 것으로 매개변수로 두개의 숫자가 들어가는데 숫자
        사이의 문자열을 추출하게 된다.
        예제8 실행화면
        <script language="javascript">
        <!--
        mirage1 = "mirage728 홈 방문을 환영합니다 "
        document.write(mirage1.substring(0,11)+"<br>")
        document.write(mirage1.substring(11,0)+"<br>")
        document.write(mirage1.substring(11)+"<br>")
        document.write(mirage1.substring()+"<br>")
        // 끝 -->
        </script>
        mirage728 홈
        mirage728 홈
        방문을 환영합니다
        mirage728 홈 방문을 환영합니다

        두개의 매개변수의 위치가 바뀌어도 상관없고 매개변수가 하나라면 매개변수 이후의 값부터
        끝까지 출력된다.

      • slice(처음위치,마지막위치)
        substring 과 같이 지정된 위치에 있는 문자열을 추출하는 것으로 매개변수로 두개의
        숫자가 들어가는데 숫자 사이의 문자열을 추출하게 된다.
        매개변수의 값이 음수일 경우에는 뒤에서 부터 위치를 가리키게 된다.

        예제9 실행화면
        <script language="javascript">
        <!--
        mirage3 = "mirage728 홈 방문을 환영합니다"
        document.write(mirage3+"<p>")
        document.write(mirage3.slice(6,11)+"<br>")
        document.write(mirage3.slice(6,-3)+"<br>")
        document.write(mirage3.slice(-3)+"<br>")
        document.write(mirage3.slice(6)+"<br>")
        // 끝 -->
        </script>
        mirage728 홈 방문을 환영합니다

        728 홈
        728 홈 방문을 환영
        합니다
        728 홈 방문을 환영합니다

      • substr(처음위치,길이)
        지정된 위치에 있는 문자열을 추출하는 것으로 첫번째 매개변수는 시작위치 이고
        두번째 매개변수 추출할 문자열의 길이를 나타낸다.

        예제10 실행화면
        <script language="javascript">
        <!--
        mirage4 = "mirage728 홈 방문을 환영합니다"
        document.write(mirage4+"<p>")
        document.write(mirage4.substr(6,11)+"<br>")
        document.write(mirage4.substr(6,3)+"<br>")
        document.write(mirage4.substr(-1)+"<br>")
        document.write(mirage4.substr(6)+"<br>")
        // 끝 -->
        </script>
        mirage728 홈 방문을 환영합니다

        728 홈 방문을 환
        728
        mirage728 홈 방문을 환영합니다
        728 홈 방문을 환영합니다

        length(길이)가 음수가 될 수 없는 관계로 모든 문자가 출력됐다.
        매개변수 지정을 안해도 모든 문자가 출력된다.

      • charAt(위치)
        매개변수로 입력된 숫자가 가리키는 문자를 리턴하게 된다
        예제11 실행화면
        <script language="javascript">
        <!--
        mirage5 = "mirage728 홈"
        document.write(mirage5+"<p>")
        document.write(mirage5.charAt(4)+"<br>")
        document.write(mirage5.charAt(0)+"<br>")
        // 끝 -->
        </script>
        mirage728 홈

        g
        m

      • indexOf(문자열)
        검색 하고자 하는 문자가 처음 나오는 곳의 위치를 알려준다.
        문자열의 왼쪽부터 검색을 시작한다

        예제12 실행화면
        <script language="javascript">
        <!--
        mirage6 = "홈 방문을 진심으로 환영합니다,자주 mirage홈을 방문해 주세요"
        document.write(mirage6+"<p>")
        document.write(mirage6.indexOf("방문")+"<br>")
        document.write(mirage6.indexOf("홈")+"<br>")
        // 끝 -->
        </script>
        홈 방문을 진심으로 환영합니다,자주 mirage홈을 방문해 주세요

        2
        0

      • lastIndexOf(문자열)
        검색 하고자 하는 문자가 처음 나오는 곳의 위치를 알려준다.
        문자열의 오른쪽부터 검색을 시작한다

        예제13 실행화면
        <script language="javascript">
        <!--
        mirage7 = "홈 방문을 진심으로 환영합니다,자주 mirage홈을 방문해 주세요"
        document.write(mirage7+"<p>")
        document.write(mirage7.lastIndexOf("방문")+"<br>")
        document.write(mirage7.lastIndexOf("홈")+"<br>")
        // 끝 -->
        </script>
        홈 방문을 진심으로 환영합니다,자주 mirage홈을 방문해 주세요

        29
        26

      • charCodeAt(문자위치)
        문자열의 특정 위치에 있는 문자의 ISO-Latin-1 값을 알아내는데 사용되는 메소드이다.
        문자위치는 알고자 하는 문자의 위치를 나타내고 생략하면 0으로 첫번째 문자의
        위치를 나타낸다.

        예제14 실행화면
        <script language="javascript">
        <!--
        document.write("M의 Iso-Latin-1 값 : "+"M".charCodeAt(0)+"<br>")
        // 끝 -->
        </script>
        M의 Iso-Latin-1 값 : 77

      • fromcharCode(숫자1,숫자2,...숫자n)
        ISO-Latin-1 값을 통해 문자열을 알아내는 메소드이다.

        예제15 실행화면
        <script language="javascript">
        <!--
        document.write(String.fromCharCode(77,105,114,97,103,101,55,50,56))
        // 끝 -->
        </script>
        Mirage728


반응형

객체란?

객체란 실생활에서 흔히 볼수 있는 개,고양이,자동차,자전거..등등이 모두 객체라 할수 있는데
프로그래밍 세계에선 문법에 의해 형식이 짜여진 컴퓨터에 사용되는 요소들이 객체가 될수가 있다.
객체는 특성(Property)와 메소드(Method)로 나누어진다.

  • 객체정의하기
    자바스크립트에서 객체는 생성자 함수를 이용해서 만들수가 있다.
    생성자 함수는 객체의 특성과 메소드를 정의하기 위해 사용되는 함수이다
    생성자 함수 역시 일반함수나 변수 만드는 방법과 동일하다.

    컴퓨터라는 객체를 만들어보자
    컴퓨터의 특성중에는 CPU(중앙처리장치) ,RAM(메모리) , HDD(하드디스크) 등을 들수가 있는데
    보기를 이용해 생성자 함수를 만들어보면

    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    }

    this는 객체자신을 가리킨다.

  • 객체만들기
    생성자 함수를 이용해서 객체를 만드는 방법은 new 라는 연산자를 통해 가능하다.

    mycom = new computer("pentium4",256,20000)

    mycom에는 cpu(pentium4),ram(256),hdd(20000)이라는 특성을 갖게 된다.
    다르게 표현할수도 있다

    mycom.cpu = "pentium4"
    mycom.ram = 256
    mycom.hdd = 20000

    "." 연산자는 객체에 속한 특성이나 메소드를 구분해 주는 것으로
    왼쪽에는 객체가 오고 오른쪽에는 특성이나 메소드가 온다

    예제1 실행화면
    <script language="javascript">
    <!--
    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    }
    //끝 -->
    </script>

    <script language="javascript">
    <!--
    mycom = new computer("pentium4",256,20000);
    document.write("CPU : " + mycom.cpu + "<br>");
    document.write("RAM : " + mycom.ram + "<br>");
    document.write("HDD : " + mycom.hdd + "<br>");
    //끝 -->
    </script>

    CPU : pentium4
    RAM : 256
    HDD : 20000

  • 객체 메소드 정의
    메소드는 객체의 동작을 지정하는 함수이다
    출력하는 함수를 메소드로 지정해 보면

    function mirage10() {
    document.write("CPU : " + this.cpu + "<br>");
    document.write("RAM : " + this.ram + "<br>");
    document.write("HDD : " + this.hdd + "<br>");
    }

    this는 특정 객체를 출력 시키는게 아닌 mirage10 함수를 사용하는 객체의 특성을
    출력 하겠다는 의미이다.
    그렇기 때문에 mirage10 함수를 메소드로 등록해서 사용하려면 생성자 함수에
    mirage10을 넣어주어야 한다.

    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    this.mirage10=print;
    }

    새로운 생성자 함수로 예를 들어보자

    예제2 실행화면
    <script language="javascript">
    <!--
    function mirage10() {
    document.write("CPU : " + this.cpu + "<br>");
    document.write("RAM : " + this.ram + "<br>");
    document.write("HDD : " + this.hdd + "<br>");
    }
    //끝 -->
    </script>

    <script language="javascript">
    <!--
    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    this.mirage10=mirage10;
    }
    //끝 -->
    </script>

    <script language="javascript">
    <!--
    mycom = new computer("pentium4",256,20000);
    mycom.mirage10();
    //끝 -->
    </script>

    CPU : pentium4
    RAM : 256
    HDD : 20000

    더 복잡한것 같지만 여러개를 출력 한다면 효과가 아주크다

  • 객체 특성 정의
    객체가 다른 객체의 특성으로 사용 될 수가 있다
    사람이라는 객체의 특성으로 컴퓨터 객체를 사용해 보겠다
    사람이라는 객체를 사용하기 위해 생성자함수를 만든다

    function person(name , age , computer)
    this.name=name;
    this.age=age;
    this.computer=computer;
    }

    이제는 person이란 객체를 만들다

    Mr=new person("남자" , 21, mycom);
    Miss=new person("여자" , 20 , mycom);

    보기를 이용해서 에를 들어본다

    예제3 실행화면
    <script language="javascript">
    <!--
    function mirage10() {
    document.write("성별: " + this.name + "<br>");
    document.write("나이: " + this.age + "<br>");
    document.write("CPU : " + this.computer.cpu + "<br>");
    document.write("RAM : " + this.computer.ram + "<br>");
    document.write("HDD : " + this.computer.hdd + "<br>");
    }
    //끝 -->
    </script>

    <script language="javascript">
    <!--
    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    }
    //-->
    </script>

    <script language="javascript">
    <!--
    function person(name , age , computer) {
    this.name=name;
    this.age=age;
    this.computer=computer;
    this.mirage10=mirage10;
    }
    //-->
    </script>

    <script language="javascript">
    <!--
    mycom = new computer("pentium4",256,20000);
    Mr=new person("남자" , 21, mycom);
    Miss=new person("여자" , 20 , mycom);
    document.write("<b>철수</b><br>")
    Mr.mirage10();
    document.write("<p><b>영희</b><br>")
    Miss.mirage10();
    //-->
    </script>

    철수
    성별: 남자
    나이: 21
    CPU : pentium4
    RAM : 256
    HDD : 20000

    영희
    성별: 여자
    나이: 20
    CPU : pentium4
    RAM : 256
    HDD : 20000

  • 참조배열 사용
    배열과 유사하지만 다른점은 []안에 숫자대신 문자를 사용한다.
    mycom의 특성값을 참조배열을 통해 접근하는 방법이다.

    mycom.cpu = mycom[0] = mycom["cpu"] = "pentium4"
    mycom.ram = mycom[1] = mycom["ram"] = 256
    mycom.hdd = mycom[2] = mycom["hdd"] = 20000

  • for ~ in 제어문
    for ~ in 제어문은 객체에 들어있는 모든 특성들을 반복해서 보여주는 기능이 있다.
    for다음에는 각각의 특성을 가리키는 변수가 오고 in 다음에는 특성을 알고자 하는 객체가 오게 된다.
    위에 있는 mycom으로 예를 들어보자

    for(var pro_ty in mycom) {
    document.write(mycom[pro_ty]);
    }

    모든특성을 한번씩 보여주는 반복 제어문으로 pro_ty에는 첫번째값인 cpu가 들어가게 된다.
    그리고 스크립트 문장을 실행한후 다시 for ~ in 제어문 처음으로 돌아가고 pro_ty는 두번째값인
    ram이 들어간다.
    for ~ in 제어문은 객체 의 특성을 모두 읽을때 까지 반복 실행이 된다.

    예제4 실행화면
    <script language="javascript">
    <!--
    function mirage10(object) {
    for(var pro_ty in object) {
    document.write(pro_ty + "=" + object[pro_ty] + "<br>");
    }
    }

    function computer(cpu,ram,hdd) {
    this.cpu=cpu;
    this.ram=ram;
    this.hdd=hdd;
    }
    //-->
    </script>

    <script language="javascript">
    <!--
    mycom = new computer("pentium4",256,20000);
    document.write("computer<p>")
    mirage10(mycom);
    //-->
    </script>

    computer

    cpu=pentium4
    ram=256
    hdd=20000

  • 배열
    makeArray라는 생성자 함수로 배열을 만들수가 있다.

    function makeArray(n) {
    this.length = n;
    for(var i=1; i<=n;i++)
    this[i] =0 (null값이 안나오게 초기화 해준다)
    return this;
    }

    n에는 배열의 갯수를 지정해 준다.
    생성자 함수로 배열을 선언한다

    array = new makeArray(4);
    4개의 변수 array[1],array[2],array[3],array[4] 을 사용 할 수 있게 된다.

    예제5 실행화면
    <script language="javascript">
    <!--
    function makeArray(n) {
    this.length = n;
    for(var i=1; i<=n;i++)
    this[i] =0 ;
    return this;
    }
    //-->
    </script>

    <script language="javascript">
    <!--
    array = new makeArray(4);
    array[1] ="사과"
    array[2] ="배"
    array[3] ="수박"
    array[4] ="참외"
    document.write("배열테스트<p>");
    for(var i=1;i<=4; i++){
    document.write(i+"번" + " : " + array[i] + "<br>")
    }
    //-->
    </script>

    배열테스트

    1번 : 사과
    2번 : 배
    3번 : 수박
    4번 : 참외

반응형
  1. 함수란?

    프로그램 내에서 특정 작업을 수행하기 위해 작업을 하나의 단위로 만들어 반복적으로 사용 할 수 있게
    한 것이다.

  2. 함수정의

    function 이란는 키워드를 사용하여 함수를 정의 할수 있다.

    function 함수이름(매개변수1,2,3.....) {
    문장
    }

    함수이름은 변수이름과 동일한 방법으로 만들어야 하며,매개변수의 수는 제한이 없고 매개변수 간에는
    콤마(,)로 구분해야 한다

    매개변수가 없는 경우
    설명
    function mirage(){
    window.open("a.html","","")
    }
    mirage 라는 함수명 안에 매개변수를 사용하지 않은 예이다.
    매개변수가 있는 경우
    설명
    function mirage(home1){
    document.write(" " + home1 + " ")
    }
    mirage함수에 home1이라는 매개변수가 들어간 경우이다.
    리턴값이 있는 경우
    설명
    function mirage(str){
    com2 = confirm("hom1")
    return com2
    }
    사용자가 입력한 값을 com2라는 변수에 담아서 mirage함수에 리턴값으로 보내는 경우이다.
    confirm은 다이얼로그 박스를 띄워서 확인 취소를 물어보는 자바 스크립트 내장함수이다.
    hom1은 다이얼로그 박스 안내문 이다.
    확인은 true, 취소는 false가 리턴된다.

  3. 내장함수

    선언해서 만들은게 아니라 이미 만들어져서 자바 스크립트에 내장되어 있는 함수이다.
    가져다가 사용 하기만 하면 된다.

    • alert
      경고창을 띄워 주는 내장함수이다
      확인=true, 취소=false 가 리턴된다.

      alert("mirage728홈 방문을....")

    • confirm
      다이얼로그 박스를 띄워 확인 취소에 따라 결과값을 리턴해 주는 함수이다

      confirm("선택 하시겠습니까")

    • prompt
      사용자 입력창을 띄워 결과값을 리턴해 주는 함수이다

      prompt("입력값","초기값")

      입력값:계산할 수식을 입력해 주세요
      초기값을 지정하면 undefined글자 대신에 지정한 값이 입력된다.
      위그림은 초기값 지정을 안한 상태이다.

    • eval
      문자열로 입력된 수식을 계산 해주는 내장함수이다.
      입력양식을 통해 입력된 값을 계산할때 아주 유용하다.

      예제1 실행화면
      <script language="javascript">
      <!--
      var mirage3
      mirage3 = prompt("계산할 수식을 입력해 주세요")
      document.write("입력한 값 : " + mirage3 + "
      ")
      document.write("실행결과 : " + eval(mirage3) + "
      ")
      //끝 -->
      </script>
      <INPUT onfocus="this.blur()" onclick="coun()" type="button" value="실행하기">

    • parseInt
      문자열을 정수로 변환해주는 자바스크립트 내장함수이다.

      parseInt(string,nbase)

      string에는 변환할 문자열을 입력하고 nbase에는 변환할 정수형태를 지정한다.
      string매개변수 안에 일반문자가 들어가 있다면 문자앞에 있는 숫자 까지만 적용이되고
      되에있는 문자나 숫자는 모두 무시된다.

      예제2 실행화면
      <script>
      var mirage7
      mirage7 = prompt("변환할 숫자를 입력하세요.")
      document.write("입력한 값 : " + mirage7 + "<br>");
      document.write("실행결과 : " + parseInt(mirage7,16) + "<br>");
      </script>
      <INPUT onfocus="this.blur()" onclick="coun3()" type="button" value="실행하기">

      위의 예제는 입력한 값을 16진수 값으로 출력합니다.

    • parseFloat
      문자열을 부동소수점으로 변환해 준다.

      parseFloat(string) F는 꼭 대문자로 써야한다

      farseFloat은 2진수나 8진수가 없기때문에 nbase는 존재하지 않는다.

      예제3 실행화면
      <script language="javascript">
      <!--
      var mirage7
      mirage7 = prompt("부동소수점으로 변환할 숫자를 입력하세요.")
      document.write("입력한 값 : " + mirage7 + "<br>");
      document.write("실행결과 : " + parseFloat(mirage7) + "<br>");
      // end -->
      </script>
      <INPUT onfocus="this.blur()" onclick="coun2()" type="button" value="실행하기">

    • escape
      ISO-Latin-1 문자셋을 ASCII형태로 바꾸어 리턴해 주는 함수이다
      리턴값은 %??형태로 나오게 된다.

      예제4 실행화면
      <script language="javascript">
      <!--
      document.write("& = "+ escape('&')+"<br>");
      document.write("^ = "+ escape('^')+"<br>");
      // end -->
      </script>
      & = %26
      ^ = %5E

    • unescape
      ASCII형태를 ISO-Latin-1 문자셋으로 바꾸어 리턴해주는 함수이다.

      예제5 실행화면
      <script language="javascript">
      <!--
      document.write("%13 = "+ unescape('%13')+"<br>");
      document.write("%c7 = "+ unescape('%c7')+"<br>");
      // end -->
      </script>
      %13 =
      %c7 = Ç

      기타 많은 내장함수가 있다.....!

  4. 함수호출

    함수를 만들어 놓고 호출을 해야 실행이 되는 함수가 있고 브라우저가 문서를 읽어 들일때
    바로 실행이 되는 함수도 있다.

    함수호출: 함수명()

    호출하는 방법은 여러가지가 있다.
    그중에 자주 쓰이는 예)

    예제6 실행화면
    <script>
    function mirage9() {
    alert("함수가 호출됐습니다");
    return;
    }
    </script>
    <a href="javascript:mirage9()">호출하기1</a>
    <a onclick="mirage9()">호출하기2</a>
    <body onload=mirage9()> ← 호출하기3
    호출하기1

    호출하기2

    ↑커서만들려면: style="cursor:hand;"
    넣어주면 된다


    링크안에 함수 호출문이 있어서 클릭하면 곧장 함수가 실행된다.
    브라우저가 문서를 읽어 들일때 실행 하려면 정의된 함수명을 삭제하고
    내장함수만 사용하든가 아니면 <body onload=mirage9()> 형태로 사용 할 수도 있다

    • 재귀적 호출

      함수가 내부에서 자기 자신을 호출하는 것이다.

      예제7 실행화면
      <script language="javascript">
      <!--
      function fac(mirage) {
      if(mirage >1 ) {
      var resu
      resu = mirage*fac(mirage-1)
      return resu
      }
      else {
      return mirage
      }
      }
      // -->
      </script>

      <script language="javascript">
      <!--
      var mirage
      mirage = prompt
      ("수의 계승을 구할 정수을 입력하세요")
      document.write("<h4>" + mirage + "의 계승 = "
      + fac(mirage) + "</h4>")
      // -->
      </script>

      첫번째 스크립트는 계승(factorial)구하는 공식이다.
      계승이란 수의 값을 줄여가며 곱해주는
      계산식 이다. 7! = 7*6*5*4*3*2*1

      먼저 함수 fac를 선언하고 매개변수로 mirage를
      지정해주었다
      if문으로 매개변수(앞으로 입력 받을값)의 범위를 지정하고 있는데 1보다 크면 문장을 실행하고 1이거나 1보다 작으면 입력받은 값을 그대로 리턴값으로 돌리고 있다
      결과값을 저장할 변수를 resu로 만들어 주었다. resu에는 입력값(mirage) 곱하기 (입력값-1)한 값이 들어가는데 입력값-1을 매개변수로 fac함수를 호출하고 있다.
      이유는 조건을 검사하기 위해서 이다
      (1이면 결과값을 리턴하고 if문을 벗어나야 하니까)
      mirage-1값이 1이 될때까지 계속 fac함수를 호출하게 된다.
      밑에 문장(return resu)은 실행 할 수도 없다 계속 함수 호출문에 걸리니까
      1이되면 resu(계산한 값이 들어있다)를 리턴값으로 돌려준후 if문을 끝내게 된다.

      두번째 스크립트는 입력을 받고 출력시키기 위한 스크립트로 계산은 위에 있는 스크립트가 한다
      prompt 내장함수로 값을 입력 받아서 mirage라는 변수에 넣어주고 있다
      mirage라는 변수에는 사용자가 입력한 값이 들어가게 된다
      그 값을 매개변수로 fac함수를 호출해서 출력시키고 있다.
      " "안에 있는 모든 값들은 그대로 출력되고 밖에 있는 문자는 값을 가지고 있는 변수또는 함수라고 생각하면 될 것이다 "" 와 계산값(변수,함수리턴값..등등)은 + 기호로 연결해 주면 된다. 중요한 점은 변수나 함수를 " "안에 넣어주면 문자로 인식하기 때문에 실행이 안되고 그냥 출력되어 버린다

      <INPUT onfocus="this.blur()" onclick="coun4()" type="button" value="실행하기">

      조금더 간단하게 표현 한다면.....!

      예제8 실행화면
      <script>
      function fact(n){
      if(n == 1)
      return(1)
      else
      return(n*fact(n-1))
      }
      </script>
      <script language="javascript">
      <!--
      var mirage
      mirage = prompt("수의 계승을 구할 정수을 입력하세요")
      document.write("<h4>" + mirage + "의 계승 = " + fact(mirage) + "</h4>")
      // -->
      </script>
      <INPUT onfocus="this.blur()" onclick="coun5()" type="button" value="실행하기">

      예제9 실행화면
      재귀적 호출의 완결판 문제!

      3개의 막대와 n개의 서로다른 크기의 접시가 있다.
      접시에는 가운데 구멍이 나서 막대에 꽂을수가 있는데 왼쪽막대에 크기 순으로 작은것은 위에
      큰것은 밑에 차례대로 꽂혀있다.
      이접시를 모두 맨오른쪽 막대에 옮기되 한번에 하나씩 옮겨야 하며 작은 접시를 큰 접시에
      놓을순 있지만 큰 접시를 작은접시 위에 놓을 수 는 없다.
      가운데 막대는 잠시 옮겨놓는 장소로 사용 할 수 있다.

      문제)접시의 갯수를 n이라 할때 n개 접시를 옮기는 프로그램을 작성하시오.

      참고) 접시갯수(n)에 따른 옮기는 횟수는 (2에n승-1)로 증가하기 때문에 너무 큰수는 컴퓨터로 계산해도 시간이 엄청 걸립니다. 결과를 확인할때 15 이하로 입력하세요..^^
      <INPUT onfocus="this.blur()" onclick="coun6()" type="button" value="결과 보기">


반응형
  1. 자료형

    • 정수
      10진수:일반정수
      16진수:0x 로 시작하며 0~15까지의 수를사용, 10~15까지의 숫자는 영문 알파벳 A~F를
      대신 사용한다
      8진수:0 으로 시작하는수로 0 ~ 7 까지의 수를 사용한다

    • 부동소수점:소수가 있는 10진수를 의미하며 지수를 사용하여 표현할수가 있다.

    • Boolean형:1비트인 자료형으로 참과 거짓을 나타낸다.true=참 false=거짓
      함수 리턴값, 관계 연산자의 결과값으로 사용을 한다.

    • null 값: 값이 없다는 것을 의미함

    • 문자열: " "' '안에 들어가는 모든 문자를 의미한다.
      문자열 안에 특수문자를 삽입할수가 있는데 의미는 아래의 표와 같다.

      \n 다음줄로 이동(newline)
      \b 백스페이스(backspace)
      \r 리턴(return)
      \t 탭문자 삽입(tab)
      \\ 역슬래시
      \' 작은따옴표(')
      \" 큰따옴표(")

  2. 변수선언

    • 특정 자료형의 값을 지닌 저장 장소로 변수를 만들때 변수명의 시작은 반드시 알파벳이나
      "_ "로 시작해야 한다.
    • 자바스크립트에서 사용하는 키워드는 사용할수가 없다.
      true, do, if ,for, return ,this,else.......등등
    • 자바스크립트 에서는 변수에 값을 할당 하기만 하면 그 입력값에 해당하는 변수가
      선언이 된 것이다.
      str="중학생"(문자열 변수) , a1 = 1 (정수형변수)
    • Var을 이용해서 선언을 할수도 있다.
      Var intvar , str
    • 자바스크립트 에서는 변수의 자료형을 쉽게 바꿀수가 있다
      Var a1="학생"
      a1은 현재 문자열 변수이다.
      형변환 하려면 자료만 바꿔준다.
      a1 = 20
      a1은 정수형 변수로 형변환 되었다.

  3. 연산자
    연산자에는 수치연산자,비교연산자,조건연산자,대입연산자,비트연산자 등이 사용된다.

    • 수치연산자
      수치계산에 쓰이는 연산자이다
      + (덧셈), - (뺄셈), * (곱셈), / (나눗셈), % (나머지),++ (증가),-- (감소), 단항연산자
      ++,--는 하나씩 증가 하거나 감소 시키는 연산자이다.

          a1 = 1
      ① sum = ++a1 (a1값이 2로 증가한후 sum에 대입된다)==> sum=2 , a1=2
      ② sum = a1++ (a1값 1이 먼저 sum에 대입된후 a1은 2가된다)==> sum=1 , a1=2
      앞뒤 어디에 붙느냐에 따라 값이 변하므로 주의해야 한다.

      단항연산자는 변수값 앞에 부호를 붙인것을 의미한다.
      -a1 = (-1*a1)
      예외) "고등" + "학생" ==> 고등학생 (이때 +는 문자열 연산자로 변한다)

    • 비교연산자
      값을 비교해서 결과를 리턴하는 연산자이다.
      작다,크다,같다,다르다 등을 주로 비교한다

      A < B A가 B보다 작다
      A > B A가 B보다 크다
      A <= B A가 B보다 작거나 같다
      A >= B A가 B보다 크거나 같다
      A == B A가 B와 같다
      A != B A가 B와 다르다

    • 조건연산자
      주어진 조건이 참인지 거짓인지를 판단하여 그 결과를 리턴해준다.
      두가지 조건이 동시에 만족해야 참인 AND(&&)연산자
      두가지 조건중 하나만 만족하면 참인 OR(||)연산자
      주어진 하나의 값이 참인지 거짓인지에 따라 값을 취하는 ?연산자(3진연산자)가 있다.

      A B A && B A || B
      true true true true
      true false false true
      false true false true
      false false false false

      ? 연산자는 조건이 참인 경우 " : " 기호 앞에 있는 값이 선택되고 거짓인 경우 " : "뒤에 있는
      값이 선택된다.

      a = 4;
      b = (a < 3) ? 7 : 10;
      조건이 거짓이라 : 뒤에 있는 10이 선택된다.
      결과: b = 10

    • 대입연산자
      대입 연산자는 오른쪽에 있는 값을 왼쪽에 대입 시키는 연산자이다.
      a1 = 3 (3을 a1에 대입시킨다)
      = 에 수치 연산자를 붙인것을 복합 대입연산자 라고한다.

      수식 같은표현
      a1 = 3
      a1 += 5
      결과: a1 = 8
      a1 = 3
      a1 = a1 + 5
      결과: a1 = 8

      -= , *= , /= , %= 도 사용 할 수 있다.

    • 비트연산자
      주어진 두수의 비트값에 AND , OR , XOR 연산을 하는 기능과
      비트값을 좌우측 으로 수평이동(Shift연산) 시키는 기능도 가지고 있다.
      비트값은 숫자의 2진수 표현이다.
      XOR연산의 진리표이다

      A B A ^ B
      1 1 0
      1 0 1
      0 1 1
      0 0 0

      두 값이 서로 달라야 참이된다.

      시프트(shift)연산자는 비트값이 한자리씩 왼쪽이나(왼쪽 시프트연산)
      오른쪽(오른쪽 시프트연산)으로 이동하는 것을 의미한다.

      A << B (A의 값을 B번 왼쪽으로 시프트)
      A >> B (A의 값을 B번 오른쪽으로 시프트)

      10 << 1 (10을 왼쪽으로 1번 시프트함)
      00001010 << 1 (10을 2진수 표현으로 변환한것,8비트적용)
       0 0 0 0 1 0 1 0
          ↙↙↙↙ (왼쪽으로 한자리씩 이동함)
       0 0 0 1 0 1 0 0 (앞의 비트값은 사라지고 뒤에 들어올 값이 없으면 무조건 0
      들어간다.)
      10100 => 20 ( 십진수로 표현) 한비트 움직일때마다 2를 곱해준 값하고 같다.

      예제1 실행화면
      1.<script language="javascript">
      <!--
      x = 10 << 1;
      document.write(x);
      //-->
      </script>
      20
      2.<script language="javascript">
      <!--
      x = 10 << 2;
      document.write(x);
      //-->
      </script>
      40

      오른쪽 시프트는 한비트 이동할 때마다 2로 나누어준 값하고 같다.
      예제2 실행화면
      1.<script language="javascript">
      <!--
      x = 20 >> 1;
      document.write(x);
      //-->
      </script>
      10
      2.<script language="javascript">
      <!--
      x = 20 >> 2;
      document.write(x);
      //-->
      </script>
      5

      오른쪽 시프트는 부호가 필요없는 정수일때 앞에 0 이 들어가고
      음수 일때는 1 양수일때는 0 이 들어간다.

    • Boolean NOT 연산자( ! )

      Boolean 값을 반전시키는 연산자로 true 일때는 false 로 false일때는 true가 된다.
      a = false;
      a = !a;
      a 의값은= true

      연산자 우선순위
      순위 연산자 설명
      1 . [] () 괄호
      2 ++ -- ! 증감,불린not
      3 * / % 수치연산
      4 + - 수치연산
      5 << >> 시프트연산
      6 < > <= >= 비교연산
      7 == != 비교연산
      8 & 비트연산
      9 ^ 비트연산
      10 | 비트연산
      11 && 조건연산
      12 || 조건연산
      13 ? : 조건연산
      14 = += -= *= /= %= &= ^= |= >>= <<= 대입연산

  4. 제어문

    • if-else
      주어진 조건을 만족 할때만 지정된 동작을 수행한다. 조건1이 참인경우 문장1
      조건2가 참인경우 문장2
      모든조건이 거짓인경우 문장n

      예제3 실행화면
      <script language="javascript">
      <!--
      a = 1, b = 2, c = 3;
      if(a == 2) {
      document.write("a = 2 입니다.")
      }
      else if(b == 4) {
      document.write("b = 4 입니다.")
      }
      else {
      document.write("모든 조건이 틀렸군요.<br>")
      document.write("c값을 출력 하겠습니다.<br>")
      document.write("c = "+c)
      }
      // -->
      </script>
      모든 조건이 틀렸군요.
      c값을 출력 하겠습니다.
      c = 3

      예제4 실행화면
      <script language="javascript">
      <!--
      function food(form) {
      for(var i=0 ; i < form.a1.length;i++) {
      if(form.a1[i].checked == true) {
      alert(form.a1[i].value + "를 좋아 하는군요")
      return document.form1.reset();
      }
      }
      }
      // -->
      </script>
      <어떤음식을 좋아하세요?
      <form name=form1>
      김치찌게 <input name="a1" type=radio value="김치찌게">
      된장찌게 <input name="a1" type=radio value="된장찌게">
      피자 <input name="a1" type=radio value="피자">

      <input type=button value="선택" onclick="food(this.form)" >
      </form>

      어떤음식을 좋아하세요? <FORM name="form1">김치찌게 <INPUT type="radio" value="김치찌게" name="a1">
      된장찌게 <INPUT type="radio" value="된장찌게" name="a1">
            피자 <INPUT type="radio" value="피자" name="a1">

      <INPUT onclick="food(this.form)" type="button" value="선택하기"> </FORM>

    • while
      주어진 조건이 만족되는 동안 반복해서 지정된 기능을 수행한다.
      반복 제어문 이다
      while문은 조건을 먼저 검사한후 참이면 문장을 실행한다.
      처음 조건이 거짓이면 문장을 한번도 실행 시키지 않는다.

      while (조건) {
      문장;
      }

      조건이 거짓(false)이 될때까지 계속 문장을 반복해서 수행한다.
      바꿔 말하자면 참(true)인 동안에는 계속해서 문장을 반복수행 하고 거짓이 될때
      while문을 빠져 나간다.

      예제5 실행화면
      3단출력

      <script language="javascript">
      <!--
      i=1;
      while(i <10) {
      document.write("3 * "+ i + " = " + 3*i + "<br>")
      i++
      }
      // -->
      </script>

      3단출력

      3 * 1 = 3
      3 * 2 = 6
      3 * 3 = 9
      3 * 4 = 12
      3 * 5 = 15
      3 * 6 = 18
      3 * 7 = 21
      3 * 8 = 24
      3 * 9 = 27

      while(i <10)에서 i값이 참(true)이므로 3*i(1)를 실행한다
      i++에 의해 i=2가 되었지만 그래도 조건이 참이므로 3*i(2) 를 실행한다
      계속 반복 하다가 i값이 10이 되면 조건이 거짓(false)이 되므로 while문을 빠져 나간다.

    • do while
      while문과 다른점은 일단 문장을 먼저 실행한후 조건을 검사해서 참이면 계속해서 문장을
      실행 시키고 거짓이 되면 do while문을 빠져 나가게 된다.
      최소한 한번은 문장이 실행된다.

      예제6 실행화면
      4단출력

      <script language="javascript">
      <!--
      i=1;
      do {
      document.write( "4 * "+ i + " = " + 4*i + "<br>")
      i++
      } while(i<10);
      // -->
      </script>

      4단출력

      4 * 1 = 4
      4 * 2 = 8
      4 * 3 = 12
      4 * 4 = 16
      4 * 5 = 20
      4 * 6 = 24
      4 * 7 = 28
      4 * 8 = 32
      4 * 9 = 36

    • for
      while처럼 주어진 조건이 참(true)인 동안만 문장을 반복해서 실행 시키고 거짓(false)이
      되는 순간 for문을 빠져 나간다.

      for(초기값;조건;증감식) {
      문장;
      }

      변수에 초기값을 설정하고 변수가 조건에 참이면 문장을 실행한다
      증감식에 의해 변수값은 1이 증감(증가와감소)하고 다시 조건을 비교해 본후 참이면
      또 문장을 실행시킨다.
      변수값이 증감 하다가 조건에 거짓이 될때 for문을 빠져나간다.

      예제7 실행화면
      5단출력

      <script language="javascript">
      <!--
      for(i=1 ; i<10 ; i++) {
      document.write( "5 * "+ i + " = " + 5*i + "<br>")
      }
      </script>

      5단출력

      5 * 1 = 5
      5 * 2 = 10
      5 * 3 = 15
      5 * 4 = 20
      5 * 5 = 25
      5 * 6 = 30
      5 * 7 = 35
      5 * 8 = 40
      5 * 9 = 45

    • break
      반복 제어문(while,for) 안에서 제어문을 종료하는 역활을 한다.
      break문 뒤에 실행을 중단시킬 위치를 지정 할 수 있다.

      예제8 실행화면
      6.7단출력

      <script language="javascript">
      <!--
      i=6 , j=1;
      mirage1 :
      while(true) {
      mirage2 :
      while(true) {
      if(i == 8) break mirage1;
      if(j == 10) {
      j=1;
      break mirage2;
      }
      document.write(i + " * " + j + " = " + i*j + "<br>")
      j++;
      }
      i++;
      }
      // -->
      </script>

      6.7단출력

      6 * 1 = 6
      6 * 2 = 12
      6 * 3 = 18
      6 * 4 = 24
      6 * 5 = 30
      6 * 6 = 36
      6 * 7 = 42
      6 * 8 = 48
      6 * 9 = 54
      7 * 1 = 7
      7 * 2 = 14
      7 * 3 = 21
      7 * 4 = 28
      7 * 5 = 35
      7 * 6 = 42
      7 * 7 = 49
      7 * 8 = 56
      7 * 9 = 63

    • continue
      break문과는 다르게 제어문의 처음 부분으로 이동 시키는 역활을 한다.
      continue문 뒤에 실행을 시작할 위치를 지정 할 수 있다

    • return
      함수에서 특정값을 리턴값으로 특정 위치에 보낼때 사용한다.
      예제4 에 리턴값 으로 form을 초기화 시켰다.

    • switch
      여러개의 조건마다 실행되는 문장을 서로 다르게 할때 사용한다.

      switch(표현식) {
      case value1 :
      문장1;
      break;
      case value2 :
      문장2;
      break;
      ........
      default :
      문장n;
      }

      예제9 실행화면
      1 ~ 10사이의 정수 영문출력

      <script language="javascript">
      <!--
      i = prompt("1 에서 10 사이의 수를 적으세요.");
      j = eval(i)
      switch(j) {
      case 1 : document.write("One");
      break;
      case 2 :document.write("Two");
      break;
      case 3 : document.write("Three");
      break;
      case 4 : document.write("Four");
      break;
      case 5 : document.write("Five");
      break;
      case 6 : document.write("Six");
      break;
      case 7 : document.write("Seven");
      break;
      case 8 : document.write("Eight");
      break;
      case 9 : document.write("Nine");
      break;
      case 10 : document.write("Ten");
      break;
      default : document.write("숫자오류");
      }
      // -->
      </script>

      1 ~ 10사이의 정수 영문출력

      <INPUT onfocus="this.blur()" onclick="mirage2()" type="button" value="실행하기">



반응형
  1. 자바스크립트란?

    넷츠케이프 에서 사용하는 스크립트 언어 로서 프로그램 코드가 직접 HTML문서 상에 삽입되어, 브라우저 에서 HTML 파일을 읽을때 같이 해석되고 실행된다.
    클라이언트 에서만 실행 되기에 정보를 서버에 보낼필요 없이 즉시 처리 할수가 있다.
    달리 해석 하자면 인터넷 연결 없이도 넷츠케이프2.0, 익스플로러3.0 이상의 브라우저만 있다면 실행하고 확인 할수가 있다.

  2. 자바스크립트 와 자바의 차이점?

    자바스크립트

    • 자바스크립트는 직접 html문서 안에 삽입되어 브라우저 에서 문서가 읽혀지면 같이 해석되고 실행된다.
    • 자바스크립트는 타입 체크를 자바 보다는 철저히 하지 않는다.
    • 그렇기에 누구나 쉽게 배울수있다.
    • 그 댓가로 몇가지 객체지향 요소를 포기 하는데,가령 클래스를 정의할수 없다거나 클래스를 상속 할수 없다.
    • 그대신 객체를 정의하여 사용 할수가 있다.
    • 객체기반 스크립트 언어이다.(이미 언어로 만든 객체들의 집합을 단순히 이용하여 프로그래밍)
    • 변수타입이 선언되지 않아도 된다.
    자바
    • 자바는 서버에서 컴파일 작업시 해석한후 애플릿 형태로 html문서에 삽입된다. 미리 해석되어 있기에 속도면에서 자바 스크립트 보다 빠르다.
    • 타입체크를 철저히 하기 때문에 클래스를 정의 할수 있고 상속 할수 있다.
    • 객체지향 언어이다( 만들고자 하는 클래스를 생성하고, 추가할 수 있으며 특정 작업을 수행하는 일련의 문장이 아닌 다른일을 하는 개개의 부분들의 집합을 프로그래밍)
    • 변수타입이 선언 되어야 한다.

  3. 스크립트 언어란?

    매크로와 같은 어떤 특별한 것들을 사용해서 작은 프로그램 들을 구현해 넣음 으로써 프로그램을
    고칠 수 있다.
    대부분은 미니 프로그램 들이 컴파일 되지 않고 에플리케이션이 실행되는 동안 라인 단위로 해석 되는데
    이러한 미니 프로그램 들을 스크립트라 하며 관련 명령어와 문장들의 집합체를 스크립트 언어라 한다.

  4. 자바스크립트 실행

    자바스크립트는 <script> 로시작해서....(본문)...</script>로 끝나게 된다.
    <script>택은 넷츠케이프 에서 자바스크립트를 위하여 새롭게 만든 택으로 넷츠케이프나 익스플로러를
    제외한 다른 브라우저 에서는 인식을 하지 못하는 경우가 많다.
    그렇기 때문에 자바스크립트를 실행시키기 위해서는 위의 두 브라우저
    중에 하나를 사용해야 합니다.

    (브라우저 다운받는곳:익스플로러, 넷츠케이프)
    다운이 안되면 직접사이트를 방문해서 받으세요..
    인터넷 익스플로러 사이트
    네츠케이프 사이트

    자바스크립트 코드는 보통 <head>---</head>택 사이나
    <body>---</body>택 사이에 들어간다.
    보통은 <head>택 사이에 들어가는데 그이유는 웹 브라우저가 HTML 문서를 읽을때 <head>안에 있는
    정보를 모두 읽은후에 <body>안에 있는 실제 정보를 읽어 화면에 출력하기 때문에 <body> 안에
    넣는다면 화면에 페이지를 출력 하면서 자바스크립트 코드를 읽어 들이고, 미처 해석 하기도 전에
    코드를 실행시킨 다면 오류를 일으키기 때문에 이런 문제를 미연에 방지 하고자 페이지가 화면에
    출력되기 전에 <head>택사이에 넣어 미리 읽어들여 해석하게 하는 것이다.
    ※그렇다고<body>에넣으면 안된다는 말은 아닙니다.~ ~만약을 대비 해서죠

  5. 주석문

    자바 스크립트 주석문은 2가지가 있다.

    /* 과 */ 사이에 들어가는 문장을 주석문으로 취급한다.
    // 는 한줄만 주석문 으로 처리 한다.

    <!-- 와 --> 는 HTML 주석문으로 자바스크립트 코드를 감출때 쓰이는데
    만약 넷츠케이프나 익스플로러 처럼 자바스크립트를 지원하는 웹 브라우저를 제외한 다른 브라우저는 <script> 택이 무시 된다.

    하지만 <script>....</script> 사이에 있는 코드들은 아무런 태그 표시가 없기 때문에
    그대로 화면에 출력된다.
    이것을 해결하기 위해 <!-- 와 --> 택으로 밑(↓)에있는 소스와 같이 모든 코드를 안에 넣어주면 된다.

  6. 간단한 예제.
    <HTML>
    <HEAD>
       <TITLE>자바스크립트</TITLE>
       <SCRIPT LANGUAGE="JavaScript">
       <!--
        document.write("안녕하세요!")
       //스크립트 끝 -->
       </SCRIPT>
     </HEAD>
       <BODY>
       </BODY>
    </HTML>

    ☞ 소스해석
    스크립트 택이 헤더 사이에 위치해 있다.
    스크립트 택에는 LANGUAGE 라는 옵션이 사용 되는데 이는 다른 스크립트 언어에 확장이 가능 하도록 하기 위해서 이다.
    지금은 자바스크립트 이기 때문에 LANGUAGE="JavaScript"가 할당된 것을 볼 수 있다. 자바스크립트가 아닌 VB스크립트 라면 LANGUAGE="vbscript" 라고 할당해 주면 된다
    중간에 document.write 라는 명령이 나오는데 이것은 영문뜻과 같이 문서에 출력하라(써라!) 라는 명령이다.
    저장 할때는 확장자를 이름.html 또는 이름.htm 으로 저장해서 브라우저로 출력해 보면 write안에 있는 "안녕하세요"가 출력 된다.

    실행하기

반응형

onabort
이미지의 다운로드를 중지할  (브라우저의 중지버튼)
onactivate
개체가 활성활   발생
(
태그의 기능이 작용할  발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러)
onafterprint
문서가 출력되거나 혹은 출력하기 위해 출력 미리보기를 한후에 발생
onafterupdate
데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가  업데이트 되었을  발생(데이터 개체부분 참조)
onbeforeactivate
개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate 참고)
onbeforecopy
선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생
onbeforecut
선택 영역이 지워지기 바로 직전에 발생
onbeforedeactivate
 문서에서 현재 개체에서 다른 개체로 activeElement 바뀔 때 발생 (activeElement 개체를 지칭하는 예약어로도 쓰임)
onbeforeeditfocus
편집가능한 개체 내부에 포함된 개체가 편집활성화  상태가 되거나 혹은 편집가능한 개체가 제어를 위해 선택될때 
onbeforepaste
시스템의 클립보드에서 문서로 붙여넣기 될때 대상 개체에서 발생
onbeforeprint
문서가 출력되거나 혹은 출력하기 위해 출력미리보기 직전에 발생
onbeforeunload
페이지가 언로드되기 직전에 발생
onbeforeupdate
데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가  업데이트 되기전에 발생(데이터 개체부분 참조)
onblur
개체가 포커스를 잃었을 
onbounce
마퀴태그에서 alernate상태에서 스크롤이  사이드에서 바운드 될때 발생
oncellchange
데이터제공 개체에서 데이터가 변화할때 발생
onchange
개체 혹은 선택영역의 내용이 바뀔  발생
onclick
개체위에서 마우스의 왼쪽 버튼을 누를때 발생
oncontextmenu 
클라이언트 영역에서 사용자가 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 열 때 발생
oncontrolselect
사용자가 개체의 제어 영역을 만들때 발생
oncopy

시스템의 클립보드에 선택영역 혹은 개체를 복사할  소스 개체로부터 발생
oncut
시스템의 클립보드에 선택영역 혹은 개체를 잘라낼때 소스 개체로부터 발생
ondataavailable
비정기적으로 데이터를 전달하는 데이터 소스 개체로부터 데이터가 도착할  마다 정기적으로 발생
ondatasetchanged
데이터 소스개체의 변화에 의해 데이터가 노출된 상태로 될때 발생
ondatasetcomplete
데이터 소스 개체로부터 모든 데이터가 유용한 상태로 표시될때 발생
ondblclick
사용자가 개체에 더블클릭 할때 발생
ondeactivate
 문서에서 현재 개체에서 다른 개체로 activeElement 변할 때 발생
ondrag
드래그 상태가 지속되는 동안 소스 객체로 부터 발생
ondragend
드래그 상태가 끝날때 소스 객체로 부터 발생
ondragenter
사용자가 개체를 드래그 하여 드롭가능 위치로 지정된 영역으로 이동할때 타겟 개체에서 발생
ondragleave
사용자가 개체를 드래그 하여 드롭가능 위치로 지정된 영역을 떠날때 타겟 개체에서 발생
ondragover
사용자가 개체를 드래그 하여 드롭가능 위치로 지정된 영역내에서 드래그할  계속적으로 타겟 개체에서 발생
ondragstart
선택된 개체 혹은 텍스트 영역에서 사용자가 드래그를 시작할  발생
ondrop
드래그앤드롭 작용에서 상태가 진행되는 동안 개체가 타겟 개체에 드롭되었을  타겟 개체에서 발생
onerror
개체가 로드되는 동안 발생하는 이벤트
onerrorupdate
데이터 소스 개체 내에 데이터가 없데이트 되는 동안 에러가 발생할  데이터 영역 개체에서 발생 
onfilterchange
비주얼 필터의 상태가 바뀌거나 트랜지션이 완료되었을  발생
onfinish
마퀴개체의 loop 완료되었을  발생
onfocus
개체가 포커스를 받았을  발생
onfocusin
개체에 포커스가 셋팅되기 바로 직전 개체에 대해 발생
onfocusout
포커스가 다른 개체로 이동한 후에 포커스를 가고 있는 현재 개체에서 발생
onhelp
브라우저가 활성화 되어 있는 동안 F1키를 눌렀을  
onkeydown
사용자가 키를 눌렀을  
onkeypress
기능키를 제외한 키를 눌렀을  발생
onkeyup
사용자가 키를 놓았을  발생
onlayoutcomplete
소스 문서로 부터 콘텐드를 가지는 객체가 미리보기나 출력을 할때 현재 LayoutRect개체를 모두 채우는 것이 끝났을  발생
onload
브라우저가 개체를 로드한 후에 발생
onlosecapture
개체가 마우스 캡쳐를 잃었을  발생
onmousedown
개체 위에 마우스 버튼을 누를 때 발생(좌우 어느 버튼이든)
onmouseenter
개체 안으로 마우스 포인터가 들어올 때 발생
onmouseleave
개체의 경계 밖으로 마우스 포인터가 이동할  발생
onmousemove
개체 위에서 마우스가 움직일 때 발생
onmouseout
개체 밖으로 마우스 포인터가 빠져나갈  발생
onmouseover
개체위로 마우스 포인터가 들어올 때 발생
onmouseup
마우스가 개체 위에 있는 동안 마우스를 누른상태에서 해제될때 발생
onmousewheel
마우스 휠이 돌아갈 때 발생
onmove
개체가 움직일  발생
onmoveend
개체가 움직임이 끝날  발생
onmovestart
개체가 움직이기 시작할  발생
onpaste
문서에 클립보드로 부터 데이터가 전송될때 타겟 개체에서 발생
onpropertychange
개체의 속성이 바뀔 때 발생
onreadystatechange
개체의 상태가 변화할 때 발생
onreset
폼을 사용자가 리셋할 경우 발생
onresize
개체의 크기가 바뀔 때 발생
onresizeend
제어영역에서 개체의 크기가 사용자에 의해 변화가 끝날 때 발생
onresizestart
제어영역에서 개체의 크기가 사용자에 의해 변화되기 시작할 때 발생
onrowenter
데이터 소스 내에서 현재 열이 변화되거나 개체에 새로운 유용한 데이터가 입력될 때 발생
onrowexit
데이터 소스 콘트르롤이 개체내의 현재 열을  변화시킬  발생 
onrowsdelete
레코드셋에서 열이 삭제될 때 발생
onrowsinserted
현재 레코드셋에 새로운 열이 추가된 후에 발생(데이터 개체에서)
onscroll
사용자가 개체내이 스크롤 바를 스크롤 할 때 발생
onselect
현재 선택된 영역이 바뀔 때 발생
onselectionchange
문서의 선택 영역의 상태가 바뀔 때 발생
onselectstart
개체가 선택되기 시작할 때 발생
onstart
마퀴 개체에서  루프가 시작될 때 발생
onstop
사용자가 stop버튼을 눌렀을 경우 혹은 페이지를 떠날 때 발생
onsubmit
폼이 전송되기 바로 전에 발생
onunload
 

반응형
출처:  http://www.ibm.com/developerworks/kr/library/j-jdom/

JDOM은 XML과 함께 작동하는 고유한 자바 툴킷으로서, XML 애플리케이션의 신속한 개발을 목적으로 설계되었습니다. JDOM의 디자인에는 자바 언어의 신택스부터 의미까지 포괄되어 있습니다. 하지만, 기존의 XML API보다 과연 얼마나 나을까요? 여러분이 직접 예제를 실행해 보고, 오픈 소스 프로젝트의 디자인 목표와 비교하면서 판단해 봅시다.

개발자인 여러분들도 80-20 규칙에 대해 들어봤을 것이다. 프로세스나 방법론이 모든 상황의 80 퍼센트를 차지하고, 나머지 20 퍼센트는 상황 별로(case-by-case) 다루어져야 한다. 소프트웨어 개발 세계에서 개발자가 주어진 기술을 사용하여 수행할 수 있는 일들의 80 퍼센트를 이룩하기는 매우 쉽다.

물론, 소프트웨어 제품과 표준이 80-20 규칙을 늘 따르는 것은 아니다. 특히 자바 XML 툴의 어긋난 부분은 이 규칙의 예외를 증명하고 있다. 자바 프로그래밍 세계는 수 많은 API들로 가득 차있다. 어떤 것은 자생한 것이고, 어떤 것은 대기업의 마케팅의 지원을 받기도 한다. XML의 보편성에 대한 약속으로서, 모든 새로운 태스크에는 새로운 기술이 있다. 하지만, 무엇이 접착제 역할을 하고, 여러분은 80 퍼센트의 작업을 수행하는데 적합한 툴을 어떻게 찾겠는가? JDOM은 이러한 질문을 염두 해 두고 구현된 XML API이다.

자바와 XML

여러 가지 면에서, 자바 언어는 XML을 위한 프로그래밍 언어가 되었다. Apache Software Foundation과 IBM alphaWorks의 노력으로 XML 문서의 생성, 조작, 변형, 파싱을 위한 완전한 툴 체인이 생겼다.

많은 자바 개발자들은 XML을 매일 사용하지만, Sun은 XML을 자바 플랫폼에 적용하는데 뒤쳐졌다. Java 2 플랫폼은 XML이 비즈니스 대 비즈니스 통합부터 웹 사이트 콘텐트 스트리밍에 이르기까지 모든 것에 대한 핵심 기술이 되기 전에 가치 있는 것이 되었기 때문에 Sun은 폭넓은 채택성을 획득했던 기존 XML API의 창시자가 되는 JSR 프로세스를 사용해왔다. 가장 중요한 것은 JAXP(Java API for XML Parsing)의 추가이다. 여기에는 세 개의 패키지들이 포함된다.

  • org.w3c.dom: XML을 위한 표준 프로그래밍 방식의 Document Object Model의 W3C recommendation의 자바 구현.
  • org.xml.sax: XML 파싱을 위한 이벤트 중심의 API.
  • javax.xml.parsers: 애플리케이션 개발자들이 특정 파서 구현을 설정하고 획득할 수 있도록 해주는 팩토리 구현.

이러한 패키지들의 추가가 자바 개발자들에게는 좋은 일이지만, 고급의 자바-XML 상호 운용성으로 큰 도약을 이룬 것이 아닌 기존 API 표준에 대한 일반적인 순응을 나타낸다. 핵심 자바 플랫폼에서 부족한 것은 XML 문서를 자바 객체로서 조작할 수 있는 매력적인 인터페이스이다.

JDOM을 생각해 보자. 유명한 자바 개발자이자 작가인 Brett McLaughlin과 Jason Hunter의 생각의 산물인 JDOM은 2000년 초반에 Apache 계열의 라이센스 하에서 오픈 소스 프로젝트로서 시작되었다. 폭넓은 자바 개발자 베이스로부터 기여와 피드백, 버그 픽스를 받아들였고, 자바 코드에서 XML 데이터에 액세스 하여, 조작 및 결과를 만들어 내는 완벽한 자바 플랫폼 기반의 솔루션 구현을 목표로 설정했다.






API로서의 JDOM

JDOM은 XML 문서들을 프로그래밍 방식으로 조작하는 org.w3c.dom 패키지에 대한 대안으로서 사용될 수 있다. 완벽한 대체는 아니고, 사실, JDOM과 DOM은 공존할 수 있다. 게다가, JDOM은 텍스트 인풋에서 XML을 파싱하는 것을 신경 쓰지 않는다. 파서 구현을 설정 및 실행하는데 도움이 되는 래퍼 클래스를 제공하기도 한다. JDOM은 기존 API를 기반으로 구현되었다.

대안 API의 필요성을 이해하려면, W3C DOM의 디자인 제약 조건에 대해 살펴보자.

  • 언어 독립성. DOM은 자바 언어를 염두 해 두고 설계되지 않았다. 이것의 접근 방식은 다양한 언어들 사이에서 매우 비슷한 API를 유지하지만, 자바의 이디엄에 익숙한 프로그래머에게는 성가신 API이다. 예를 들어, 자바 언어는 String 클래스가 언어에 구현되어 있지만, DOM 스팩은 고유의 Text 클래스를 정의한다.

  • 엄격한 계층. DOM의 API는 XML 스팩을 따른다. 따라서, 모든 것의 노드가 되는 XML에서, 모든 것이 확장하는 DOM에서 Node 기반 인터페이스와 Node를 리턴하는 메소드의 호스트를 찾는다. 이는 다형성의 관점에서 볼 때는 뛰어나지만, 자바 언어로 작업하기에는 불편하다. Node에서 리프(leaf) 유형으로의 변화는 장황하고 이해하기 어려운 코드를 만든다.

  • 인터페이스 중심. 퍼블릭 DOM API는 인터페이스들로만 구성된다. (한 가지 예외는 Exception 클래스이다.) W3C는 인터페이스를 정의할 때 구현을 제공하는 것에는 관심이 없다. 자바 프로그래머로서 API를 사용한다는 것은 XML 객체들을 생성할 때 어느 정도의 분리가 된다. W3C 표준은 일반적인 팩토리 클래스와 유연하지만 덜 직접적인 패턴들을 사용하기 때문이다. XML 문서들이 애플리케이션 레벨 코드가 아닌 파서에 의해서만 구현되는 특수한 경우, 이는 무관하다. 하지만, XML 사용이 널리 퍼지면서, 애플리케이션 개발자들은 XML 객체들을 프로그래밍 방식으로 구현하는 편리한 방법을 필요로 하게 되었다.

프로그래머에게, 이러한 제약 조건은 (메모리 사용과 인터페이스 규모 면에서) 무겁고 다루기 어렵다는 것을 의미한다. 반대로, JDOM은 자바 중심의, 경량의 API이다. DOM의 원리를 조정하여 위에 언급한 불편함을 해소시켰다.

  • JDOM은 자바 플랫폼 식이다. 이 API는 자바 언어의 빌트인 String 지원을 사용하기 때문에, 텍스트 값은 String으로서 언제나 사용할 수 있다. ListIterator 같은 Java 2 플랫폼 컬렉션 클래스도 활용하면서 자바 언어에 익숙한 프로그래머에게 풍부한 환경을 제공한다.

  • 계층이 없음. JDOM에서, XML 엘리먼트는 Element의 인스턴스이고, XML 애트리뷰트는 Attribute의 인스턴스이며, XML 문서는 Document의 인스턴스이다. 이 모든 것들이 XML에서 다른 개념들을 나타내기 때문에, 무정형의 "노드"로서가 아닌 고유의 유형으로서 참조된다.

  • 클래스 중심. JDOM 객체는 Document, Element, Attribute 같은 클래스들의 직접적인 인스턴스이므로, 이를 구현하는 것은 자바 언어에서 new 연산자를 사용하는 것만큼이나 쉽다. 또한 설정 할 팩토리 인터페이스가 없다. JDOM은 jar에서 직접 사용할 준비가 되어있다.





JDOM 문서 구현 및 조작

JDOM은 표준 자바 코딩 패턴을 사용한다. 가능하다면, 복잡한 팩토리 패턴 대신에 자바 new 연산자를 사용하면서, 신참 사용자들도 객체를 쉽게 조작할 수 있게 해준다. JDOM을 사용하여 XML 문서를 구현하는 방법을 살펴보자. 우리가 구현할 구조는 Listing 1과 같다. (참고자료 섹션에서 전체 코드를 다운로드 할 수 있다.)


Listing 1. 구현할 XML 문서 샘플
                

<?xml version="1.0" encoding="UTF-8"?>
<car vin="123fhg5869705iop90">
  <!--Description of a car-->
  <make>Toyota</make>
  <model>Celica</model>
  <year>1997</year>
  <color>green</color>
  <license state="CA">1ABC234</license>
</car>

주: 아래 Listing 2부터 7까지 샘플 문서를 구현할 것이다.

먼저, 루트(root) 엘리먼트를 만들고 이를 문서에 추가한다.


Listing 2. Document 구현하기
                

Element carElement = new Element("car");
Document myDocument = new Document(carElement);

이 단계는 새로운 org.jdom.Element를 만들고, 이것을 org.jdom.Document myDocument의 루트 엘리먼트로 만든다. (참고자료 섹션에서 제공하는 샘플 코드를 사용하고 있다면 반드시 org.jdom.*을 반입하라.) XML 문서는 하나의 루트 엘리먼트를 가져야 하므로, Document는 생성자에 Element를 취한다.

다음에는, vin 애트리뷰트를 추가한다.


Listing 3. Attribute 추가하기
                

carElement.addAttribute(new Attribute("vin", "123fhg5869705iop90"));

엘리먼트를 추가하는 것도 매우 단순하다. make 엘리먼트를 추가한다.


Listing 4. 엘리먼트와 하위 엘리먼트
                

Element make = new Element("make");
make.addContent("Toyota");
carElement.addContent(make);

ElementaddContent 메소드가 Element를 리턴하므로, 이를 다음과 같이 작성할 수 있다.


Listing 5. 간결한 형식으로 엘리먼트 추가하기
                

carElement.addContent(new Element("make").addContent("Toyota"));

이 문장들 모두 같은 일을 수행한다. 첫 번째 예제는 보다 읽기 쉽지만, 두 번째는 많은 엘리먼트들을 한번에 구현한다면 더욱 읽기 쉬울 것이라고 말할 수도 있겠다. 문서 구현을 완료하려면 다음과 같이 한다.


Listing 6. 나머지 엘리먼트 추가하기
                

carElement.addContent(new Element("model").addContent("Celica"));
carElement.addContent(new Element("year").addContent("1997"));
carElement.addContent(new Element("color").addContent("green"));
carElement.addContent(new Element("license")
    .addContent("1ABC234").addAttribute("state", "CA"));

license 엘리먼트의 경우, 엘리먼트의 콘텐트를 추가했을 뿐만 아니라, 여기에 애트리뷰트도 추가하면서, 라이센스가 발행되었던 상태를 지정하고 있다. Element에 대한 addContent 메소드는 Element만 리턴하기 때문에 이것이 가능하다.

주석 섹션이나 기타 표준 XML 유형을 추가하는 것도 같은 방식이다.


Listing 7. 주석 추가하기
                

carElement.addContent(new Comment("Description of a car"));

문서 조작은 비슷한 방식으로 발생한다. 예를 들어, year 엘리먼트에 대한 레퍼런스를 획득하려면, ElementgetChild 메소드를 사용한다.


Listing 8. 자식 엘리먼트에 액세스 하기
                

Element yearElement = carElement.getChild("year");

이 문은 실제로 엘리먼트 이름 year를 가진 자식 Element를 리턴한다. year 엘리먼트가 없다면, 호출은 어떤 것도 리턴하지 않는다. DOM Node Node 인터페이스 같은 것에서 리턴 값을 던질 필요가 없었다. Element의 자식 들은 단순히 Element이다. 비슷한 방식으로, 문서에서 year 엘리먼트를 제거할 수 있다.


Listing 9. 자식 엘리먼트 제거하기
                

boolean removed = carElement.removeChild("year");

이 호출은 year 엘리먼트만 제거한다. 나머지 문서는 바뀌지 않은 채로 남아있다.

엘리먼트만 제거한다. 나머지 문서는 바뀌지 않은 채로 남아있다. XMLOutputter 클래스를 사용한다.


Listing 10. JDOM을 XML 텍스트로 바꾸기
                

try {
    XMLOutputter outputter = new XMLOutputter("  ", true);
    outputter.output(myDocument, System.out);
} catch (java.io.IOException e) {
    e.printStackTrace();
}

XMLOutputter는 포맷팅 옵션을 갖고 있다. 여기에서, 우리는 부모 엘리먼트에서 두 스페이스를 들여쓰기 한 자식 엘리먼트를 원한다고 지정했고, 엘리먼트들 사이에 새로운 라인을 원한다는 것을 지정했다. XMLOutputterWriter 또는 OutputStream을 출력한다. 파일로 출력하려면 아웃풋 라인을 다음과 같이 바꾼다.


Listing 11. FileWriter를 사용하여 XML 출력하기
                

FileWriter writer = new FileWriter("/some/directory/myFile.xml");
outputter.output(myDocument, writer);
writer.close();






기존 XML 툴과 결합하기

JDOM의 재미있는 기능들 중 하나는 다른 API들과의 상호 운용성이다. JDOM을 사용하여, Stream 또는 Reader 뿐만 아니라, SAX Event Stream 또는 DOM Document로서도 문서를 출력할 수 있다. 이러한 유연성 때문에 JDOM이 이종의 환경에서 사용될 수 있고, XML을 핸들링 하는 또 다른 메소드를 이미 사용하고 있는 시스템에 추가될 수 있다. 나중에 예제에서 보겠지만, JDOM은 JDOM 데이터 구조를 인식하지 못하는 다른 XML 툴을 사용할 수 있다.

JDOM의 또 다른 사용법은 이미 존재하는 XML 데이터를 읽고 조작하는 기능이다. 잘 구성된 XML 파일을 읽는 것은 org.jdom.input의 클래스들 중 하나를 사용함으로써 수행된다. 이 예제에서, 우리는 SAXBuilder를 사용할 것이다.


Listing 12. SAXBuilder를 사용하여 XML 파일 파싱하기
                

try {
  SAXBuilder builder = new SAXBuilder();
  Document anotherDocument = 
    builder.build(new File("/some/directory/sample.xml"));
} catch(JDOMException e) {
  e.printStackTrace();
} catch(NullPointerException e) {
  e.printStackTrace();
}

Listing 2부터 7까지의 방식과 똑같이 이 프로세스를 통해 구현된 문서를 조작할 수 있다.

JDOM의 또 다른 적용은 이를 Apache의 Xalan 제품과 결합하는 것이다. (참고자료) 위 자동차 예제를 사용하여, 특정 자동차에 대한 상세를 제공하는 온라인 자동차 딜러용 웹 페이지를 구현할 것이다. 우선, 이 문서는 우리가 사용자에게 제공하고자 하는 자동차에 대한 정보를 나타낸다. 그런 다음, 이 JDOM Document를 XSL 스타일 시트로 결합하고, HTML 포맷의 결과를 서블릿의 OutputStream으로 출력할 수 있다.

이 경우, 우리가 사용할 XSL 스타일시트는 car.xsl이다.


Listing 13. 자동차 기록을 HTML로 변형하는 XSL 문서
                

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/car">
    <html>
        <head>
          <title><xsl:value-of select="make"/> <xsl:value-of select="model"/>
        </head>
        <body>
          <h1><xsl:value-of select="make"/></h1><br />
          <h2><xsl:value-of select="model"/></h2><br />
          <table border="0">
          <tr><td>VIN:</td><td><xsl:value-of select="@vin"/></td></tr>
          <tr><td>Year:</td><td><xsl:value-of select="year"/></td></tr>
          <tr><td>Color:</td><td><xsl:value-of select="color"/></td></tr>
          </table>
        </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

이제, org.jdom.Document를 DOM Document로 바꾸고, 이것을 Xalan에 제공한다. XSL과 가상의 애플리케이션 서버에서 가져온 OutputStream을 나타내는 파일도 함께 제공한다. (Listing 14)


Listing 14. JDOM과 Xalan을 사용하여 HTML 문서 생성하기
                

TransformerFactory tFactory = TransformerFactory.newInstance();

// Make the input sources for the XML and XSLT documents
org.jdom.output.DOMOutputter outputter = new org.jdom.output.DOMOutputter();
org.w3c.dom.Document domDocument = outputter.output(myDocument);
javax.xml.transform.Source xmlSource = 
  new javax.xml.transform.dom.DOMSource(domDocument);
StreamSource xsltSource = 
  new StreamSource(new FileInputStream("/some/directory/car.xsl"));

// Make the output result for the finished document using 
// the HTTPResponse OutputStream
StreamResult xmlResult = new StreamResult(response.getOutputStream());

// Get a XSLT transformer
Transformer transformer = tFactory.newTransformer(xsltSource);

// Do the transform
transformer.transform(xmlSource, xmlResult);

이 예제에서, 아웃풋은 자바 서블릿의 HTTPResponse OutputStream을 통해 체계화 된다. 하지만, 이 스트림은 XMLOutputter를 사용한 이전 예제처럼 쉽게 파일스트림이 될 수 있다. 우리는 DOMOutputter를 사용하여 Xalan용 XML 소스를 생성했다. 하지만, XMLOutputter를 사용하여 XML 문서를 String으로서 출력하고 이를 StreamSource로 만듦으로써 같은 인풋을 생성할 수 있었다. 유연성에 대해서 보자. JDOM은 그 구조를 String, SAX Event Stream, 또는 DOM Document로서 출력할 수 있다. 이는 JDOM이 인풋으로서 이러한 모델을 취할 수 있는 툴과 상호 작동할 수 있도록 해준다. (JDOM 웹 사이트에서 contrib 패키지를 참조하라. 여기에서 JDBC ResultSet-기반 빌더, XPATH 구현 같은 툴을 제공하는 JDOM 기반 유틸리티의 라이브러리를 찾을 수 있다.)

몇 줄의 코드로, JDOM은 다양한 기능을 실행한다. 우리는 XML에서 파싱하고 프로그래밍 방식으로 XML 문서를 생성하고, 그러한 문서들을 조작했고, XML 중심의 웹 페이지를 생성하는데 이를 사용했다.

Sun과 JDOM
JDOM의 공식 1.0 릴리스는 Java Community Process의 진행 과정과 발을 맞춘다. JSR-102로서 제출된 JDOM은 핵심 자바 플랫폼에 들어가도록 승인을 얻었다. 다음은 Sun 측에서 말한 부분이다. "JDOM은 이전 API들보다 사용하기가 훨씬 더 쉽기 때문에, 이 플랫폼에 매우 유용할 것이라고 생각한다." JSR에 따르면, 1.0 릴리스는 JDOM의 패키징 변화를 "org.jdom"에서 "javax.xml.tree"로 간주하고 있다. 미래는 긍정적이지만, 개발자들은 새로운 버전에 발을 맞추려면 코드를 개선해야 한다.





JDOM의 성장: 미래

이 글을 쓰고 있는 현재, JDOM 프로젝트는 Beta 6 버전을 릴리스 했다. 베타 상태임에도, JDOM은 안정적인 구현으로 입증되었다. API의 많은 부분이 안정적이고, 기존 인터페이스들에 잠재적으로 영향을 줄 많은 부분에서 작업이 진행 중이다. 따라서, 이 시점에서 진행되는 어떤 개발 프로젝트라도 JDOM을 무시해서는 안되겠다. 특정 메소드 시그너처와 특정 의미가 바뀔 것이고 핵심 자바 API에 채택될 것이기 때문이다. (Sun과 JDOM 참조)

JDOM을 위한 단기적인 TO-DO 리스트는 API를 안정화 하고 성능 부분을 평가하는 것에 초점이 맞춰졌다. 개발자들을 애먹이는 부분에는 DTD 엔터티 지원과 기타 구조들이다. XPATH 지원과 보다 직접적인 XML 데이터 소스와의 통합 등이 진행 중이다.

그래서, JDOM은 기존 XML API들보다 더 나은가? 여러분이 자바로 꿈을 꾼다면 대답은 '그렇다'이다. JDOM이 여러분이 선호하는 파서나 XML 인식 데이터베이스를 대체하는 것은 아니지만, 이것의 디자인 원리는 XML 세계에 적용될 수 있다.



참고자료

+ Recent posts