반응형
  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