HTML/CSS/JAVASCRIPT 강의실

시삽: 레드플러스 님 
게시판 이동:
 제목 : 11일차 강의내용 - 자바스크립트의 작성
글번호: 22
작성자: 관리자
작성일: 2001/01/17 오전 1:48:00 (2001/01/19 오전 12:27:00 수정)
조회수: 6807
JavaScript

학습내용 : 자바스크립트란? / 자바스크립트의 작성 / 데이터와 정보처리 (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"

 

※ 학습정리

 

※ 관련예제


<html>
<head>
</head>
        <h3>데이터 타입</h3>
<body>
<script>
        var var1;
        var var2=null;
        document.write("변수 var1의 값=" + var1 + "<br>");
        document.write("변수 var2의 값=" + var2 + "<br>");

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


<html>
<head>
</head>
        <h3>데이터 변환</h3>
<body>
<script>
        var answer=1004;
        document.write("answer = " + answer + "<br>");
        answer = "정답은 1004입니다.";
        document.write("answer = " + answer + "<br>");
</script>
</body>
</html>


<html>
<head>
</head>
        <h3>변수 선언</h3>
<body>
<script>
// 변수는 프로그램에서 필요한 데이터의 저장 공간이다.
// 자바스크립트에서는 변수의 데이터 타입은 필요 없다.
// 각 변수에 대한 유일한 이름을 가져야 한다.

// 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>


<html>
<head>
</head>
        <h3>변수의 종류</h3>
<body>
<script>
// 전역변수 : 함수의 밖에서 선언, 모든 함수에서 참조, 선택적으로 var키워드 사용
// 지역변수 : 함수의 안에서 선언, 해당 함수에서만 참조, 반드시 var키워드 사용
        var Variable = "전역변수"
        
        function Test_Var() {
                var Variable="지역변수"
                document.write("Variable은 " + Variable + "입니다<br>");
                document.write("this.Variable은 " + this.Variable + "입니다<br>");
        }
Test_Var();
</script>
</body>
</html>


<html>
<head>
</head>
        <h3>스트링속의 특수 문자</h3>
<body>
<script>
/*
        \b : 백스페이스
        \f : 폼 피드
        \n : 새로운 줄
        \r : 캐리지 리턴
        \t : 탭 문자
        \' : 단일(작은) 따옴표
        \" : 이중(큰) 따옴표
        \\ : 백슬래쉬
*/
        
        document.write(" 백슬래쉬는 \\, 이중(큰) 따옴표는 \", 단일(작은) 따옴표는 \' ");


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

※ 참고문헌

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

 

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트

(댓글을 남기려면 로그인이 필요합니다.)

관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 12일차 강의내용 - 변수와 연산자 그리고 대화상자 02_00_02_LocalVariable_변수(지역 변수와 전역 변수).png(51 KB) 관리자 2001-01-19 6138
현재글 11일차 강의내용 - 자바스크립트의 작성 - 관리자 2001-01-17 6807
  자바스크립트의 정리 - 관리자 2001-10-19 4858
  예제파일 강의샘플.zip(11 KB) 관리자 2001-10-19 4504
  예제. 00.자바스크립트.htm JavaScript-0000.jpg(89 KB) 레드플러스 2003-05-22 4629
  예제. 01.안녕하세요_JavaScript.htm JavaScript-0001.jpg(97 KB) 레드플러스 2003-05-22 4829
  예제. 02.안녕하세요_JavaScript_외부파일에정의.htm JavaScript-0002.jpg(92 KB) 레드플러스 2003-05-22 4443
  위 예제 문서 02.안녕하세요_JavaScript_외부파일에정의.zip(540 Byte(s)) 레드플러스 2003-05-22 4299
  예제. 03.안녕하세요_JavaScript_태그내에직접정의.htm JavaScript-0003.jpg(94 KB) 레드플러스 2003-05-22 4573
  예제. 04.자바스크립트버전표시.htm JavaScript-0004.jpg(120 KB) 레드플러스 2003-05-22 4836
  예제. 05.자바스크립트작성시스크립트태그의문제점.htm JavaScript-0005.jpg(112 KB) 레드플러스 2003-05-22 4890
  예제. 06.자바스크립트의기본구조표현.htm JavaScript-0006.jpg(93 KB) 레드플러스 2003-05-22 4889
  예제. 07.자바스크립트의객체속성메소드이벤트사용.htm JavaScript-0007.jpg(109 KB) 레드플러스 2003-05-22 4733
  Visual Studio 2013 Community Eidtion 소개: 자바스크립트... - 레드플러스 2015-03-17 3022
다음글 10일차 강의내용 - 스타일시트(CSS) - 관리자 2001-01-16 7002
 
손님 사용자 Anonymous (손님)
로그인 Home