1. JavaScript 언어 소개

JavaScript 개요

• History
  • Netscape 사가 SUN Java 를 license 하고,
    자체 개발 중이던 LiveScript 언어를 => JavaScript 으로 개칭  (Java의 한 변종)
    * JavaScript 은 Java 가 아니다
  • 현재 Dynamic HTML 의 핵심요소 중 하나
  • MS사는 JScript, 유럽 표준 ECMAScript라는 명칭
• 목적
  • CGI script 이 사용에 불편, 많은 제약
  • Browser에서 실행되는 Script 형태의 언어 필요 즉, 상호작용 기능 (Interaction)
  • 장점 => 사용 편리성, 강력한 기능, 확장성

JavaScript 특징

• Object-based Language (객체지향언어 -- "객체기반")
  • 객체(object) + 속성(property)/메소드(method) + 사건(event handler)
  • built-in object 지원, *** class 는 지원 안함
• Browser에서 주로 실행
  • [참고]서버에서 실행되는 경우 server-side Javascript
• Platform Independent (OS 독립적)
  • windows, Mac : Netscape 2.0 이상,  Explorer 3.0 이상 지원 (4.0이상 권장)
• 방문객과의 Interaction (상호작용)
  • 입력제어, 메시지, 동작의 구현 등 문서 내 모든 객체에 대한 다양한 기능의 제어
  • 예) form 값을 검사, 가공하여 서버에 전송

Java 와의 차이점

	JavaScript	Java
실행방법	browser 에서 해석과 실행 (Interprete/Script)	서버에서 compile 후 object code 를 불러서 browser에서 실행
성격	object-based	object-oriented
형태	HTML파일 내에 같이 기술 (포함)	HTML파일의 공간에서 실행
변수형	정할 필요 없음	변수형 정의 필요

JavaScript 예)  나이 =>   

<Form  Action=""  Method=GET Name=f1>       <Img Src="arrow.gif"  Name=bul>       나이 => <INPUT  Name=age  Type=Text  Size = 10>                   <INPUT  Name = in_btn  Type = button   value ="확인"                     onClick = ' if (document.f1.age.value < 20)                                        document.bul.src = "paw.gif"                                 else  document.bul.src = "arrow.gif"  ' >    </Form>

2. JavaScript 언어 기초 문법  /* C와 유사 => 차이점 만 설명 */

변수

• 변수의 선언  // 대소문자 구분
  var 변수명
  var 변수명 = 변수값
- 위치 상관 없음. 변수형 선언 안함 (제일 왼쪽의 형태로 기준)
• 예)
   var  a = '3'
   var  b = 2;
   var  c = b + a       // c = 5, plus 연산
   var  d = a + b;      // d = '3'+'2' = '32', string연산 (Concatenation)
• 주요 키워드
  if   else   for   while   break   continue   function   return  var   null   true   false   with   in   this

객체의 구성

• 객체(Object) : 브라우저 내장 객체와 사용자 정의 객체
• 속성(Property) : 예) document.bgColor, document.bul.src
• 메소드(Method) : 예) document.write("자바스크립트 예제 p.343")

연산자 : C/C++와 동일

• (1) 속성, 괄호   .   ( )   [  ]                                 (2) 1항             !   ~   -   ++   --
• (3) 산술           *   /   %                   +   -            (4) 시프트        <<   >>   >>>
• (5) 관계(비교)  <   <=   >   >=            ==   !=         (6) 비트           &         ^          |
• (7) 논리           &&            ||                              (8) 3항             ? :
• (9) 치환(할당)   =   +=   -=   ...

문장

• 일반 제어문 : if else , for , while , break , continue
• 객체 제어문
• for  (변수  in  객체)  {  문장  }
• with  (객체)  {  문장  }
• this.속성
• 객체 = new 객체타입(파라메터, ...)

함수

• 함수선언
  • function 함수이름( 전달인자... ) {
             문장, . . . ;  return 결과;
    }
• 내장함수
• eval (인자 or 계산식);
예) var  c = eval(3+3);
예) h = "<p>예제1";    g = "<p>다음으로";
      var  eval_str = "if  (ns == 1) { x = h }  else  { x = g }"
      document.write ( eval (eval_str) )
• parseInt(), parseFloat() 등

3. JavaScript 기초 예제 1

JavaScript 사용법

• HTML문서 내에 프로그램 삽입 :  문서내  <SCRIPT> 태그
  • <Script  language = "Javascript">
        … JavaScript 프로그램 …
    </Script>
• 별도 장소에 JavaScript 프로그램 연결 : <SCRIPT> 태그
  • <Script  language = "Javascript"  SRC = "---.js" >
    </Script>
• Tag 내에서 사용 : 이벤트 처리기
  • < 태그   …   해당이벤트=" … 프로그램 …"   해당이벤트 = "… 프로그램 …" … >
    -  따옴표 주의

1) JavaScript 사용 예

• 예제1A (프로그램 삽입)

<SCRIPT  language = "Javascript">       document.write("<HR width=200>");       document.write("** 문서제목: ");      document.write(document.title + "<BR>");       document.write("** 문서작성시각:<BR>");      document.write(document.lastModified);  </SCRIPT>

실행결과 =>

• 예제1B (별도 파일)
  <Script  language = "Javascript"  src = "doctime.js" > </script>
  별도 파일 : "doctime.js"

with (document) {            write ("<BR>** 문서작성 최종시각 : ") ;   writeln (lastModified)            write ("** 예제 파일[" + location + "]")   }

실행결과 =>

• 예제1C (Tag내에 사용) : status bar에 문자열, 클릭시 메시지

<A  Href = "index.html"        onClick = "alert('누르지마시오')"        onMouseOver = "window.status = '재미있는 곳';        return true" >  status bar에 문자열, 클릭. . . </A>

2) Tag 내에 다양한 예제

• 예제 2A: page back - history 객체, back() 메소드

<INPUT  type = "button"  name = "…"  value ="뒤로 가기"                  onClick = "history.back()"  >

• 예제 2B: Background Color - document 객체 속성

<INPUT  type = "button"  name = "…"  value ="노란색으로"                   onClick = "document.bgColor = 'yellow' "  >      <INPUT  type = "button"  name = "…"  value ="흰색으로"                   onClick = "document.bgColor = 'white' "  >

• 예제 2C: New Window - window 객체, open() 메소드

<INPUT type = "button"  name = "…"  value ="새로운 윈도우"                  onClick = " window.open();  "  >      <INPUT type = "button"  name = "…"  value ="닫기버튼 예제"                  onClick = " window.open('close.html');  "  >

• 예제 2D: Close Window - window 객체, close(), confirm(), alert() 메소드

"close.html"

<INPUT type = "button"  name = "…"  value ="화면 닫기"              onClick = " if (confirm('종료하겠습니까 ?'))  window.close();                               else  alert('입력 취소') "  >

3) Page Load시 함수호출 예

• 예제 : 나이 확인  => 재미있는 곳으로 가기(age.html)  window 객체, prompt() 메소드

<Head>  <script  language = "Javascript" >    function  age_check()    {          var  age          age = prompt ("나이 입력 => ")          if  (age > 18)  alert (" O.K ! ")          else {              alert (" 방문 불가 ")              history.back()         }    }  </script>  </Head>

<Body  onLoad = "age_check()" >  </Body>