반응형
자바스크립트에 미리 정의되어 내장된 객체들을 말한다.
  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안에 있는 "안녕하세요"가 출력 된다.

    실행하기

+ Recent posts