학습내용 : 자바스크립트란? / 자바스크립트의 작성 / 데이터와 정보처리 (UPDATE:2001/01/17)

■ 자바스크립트

오브젝트(Object)

자바 스크립트에서 오브젝트는 사용자가 정의하고 또 서로 상호 작용이 가능한 프로퍼티와 메소드의 집합을 말한다. 여기서 프로퍼티는 색상, 애니메이션 속도, 음악소리 크기 등을 말하는데 HTML 문서 내에서 오브젝트에 의해 참조될 수도 있다. 예를 들어 document.bgcolor="blue"와 같이 하여 웹페이지의 백그라운드 색상을 변경시킬 수 있다.

메소드(Methods)

메소드란 오브젝트와 프로퍼티에 영향을 미칠 동작을 수행하는 것이다.

이름의 사용

자바 스크립트에 내장되어 있거나 개발자에 의해 만들어진 오브젝트는 특별한 이름 생성 규칙을 가지고 있다. 이름은 특정 오브젝트의 프로퍼티를 참조할 수도 있다. 예를 들어 윈도 오브젝트가 status 프로퍼티를 가지고 있다고 할 때, 이 status 프로퍼티를 참조하기 위해서는 'window.status'를 이용하면 된다.

▶ document 오브젝트는 여러 프로퍼티를 가지고 있다.

- document.bgColor는 문서의 백그라운드 색상을 참조

- document.titless는 타이틀 태그에서 지정한 HTML 문서의 타이틀을 참조

- document.images[]은 이미지 배열의 특정 이미지를 참조

1. Javascript 특징

① 브라우저 상에서 실행시에 프로그램 코드가 해석된다.

② 컴파일이라는 과정을 거치지 않기 때문에 비교적 타입 체크를 철저하게 하지 않는다.

③ 클래스를 정의할 수 없고 상속할 수 없다. 대신 객체를 정의하여 사용할 수 있다.

자바스크립트로 만든 코드는 "<script> ... </script>"라는 택을 이용하여 HTML 문서에 넣어지게 된다. <script>택은 자바스크립트를 지원하지 않는 브라우저에서는 무시된다.

※ 자바스크립트 버전

1.0은 넷스케이프 2.0고 함께 발표된 초기 버전이다. 그후 넷스케이프 3.0과 함께 자바 스크립트 1.1이 발표되었고 넷스케이프 4.0과 함께 자바스크립트 1.2가 발표되었다.

● 1.0 : <script language="JavaScript">

● 1.1 : <script language="JavaScript1.1">

● 1.2 : <script language="JavaScript1.2">

특정 버전에만 사용될 수 있는 기능이 있는 경우 버전을 지정해주는 것이 좋다. 모든 버전에서 사용 가능한 일반 기능의 경우는 그냥 "JavaScript"로 지정한다.

※ 자바스크립트 코드 감추기

주석 택인 "<!--" ... "//-->"를 사용하여 코드를 가려준다.

2. Javascript 기초

① 주석문

자바스크립트에서는 "/*"과 "*/" 사이에 들어가는 문장과 "//" 뒤에 나오는 문장을 모두 주석문으로 취급하고 있다.

② 자료형

● 정수형 : 16, 10, 8진수의 3가지 형태로 표현한다.

● 부동소수점 : 부동소수점 계산은 가끔 정확하지 않다.

● Boolean : 크기가 1비트인 자료형으로 true와 false의 두 가지 값만 가진다. 자바스크립트에서는 1이나 0의 값을 사용하지 않는다.

● null값 : 아무 값도 없다는 것을 의미하고 예외처리에 자주 사용된다.

● 문자열 : 따옴표("" 나 '') 사이에 들어가는 모든 문자

③ 변수 사용하기

단지 변수에 값을 할당하는 것만으로 입력된 값에 해당하는 타입의 변수를 선언할 수 있다.

   intvar = 1

   str = "JavaScript"

프로그램 상에서 변수의 사용 범위를 좀더 명확히 하고 체계적으로 보이도록 하고 싶다면 var를 이용하여 변수를 선언하는 것이 좋다.

   var intvar = 1

var를 통해 선언하게 되면 같은 이름의 변수라 할지라도 현재 자신이 속해 있는 영역 안에서만 효력을 발생하게 된다. 변수에 할당하는 값의 종류에 따라 필요한 때에 자료형을 바꿀 수 있다.

   var test = 10

   test = "change to string"

※ 학습정리

※ 관련예제

        if (var1 == var2) {
                document.write("undefined와 null은 비교 연산에서 같은 값으로 취급");
        }
</script>
</body>
</html>

// varName=초기값       <- 초기값은 반드시 필요
// var varName[=초기값] <- 초기값은 옵션

// 변수의 첫 번째 문자 : 문자(A-Z, a-z) 또는 "_"문자
// 두 번째 문자부터는 숫자(0-9) 포함 가능
/* 잘못된 변수 정의 예 (Error)
        variable;
        6variable = 10;
*/

        var variable1;
        var variable2 = "변수2";
        variable3 = "변수3";
        variable4 = variable2;
        var variable5 = variable3;

        document.write("variable1 = " + variable1 + "<br>");
        document.write("variable2 = " + variable2 + "<br>");
        document.write("variable3 = " + variable3 + "<br>");
        document.write("variable4 = " + variable4 + "<br>");
        document.write("variable5 = " + variable5 + "<br>");

</script>
</body>
</html>

</script>
</body>
</html> 

※ 참고문헌

 정보통신교육원 문서자료.