Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Kim's Programming

HTML - 자바스크립트(JavaScript) 본문

Programming/HTML

HTML - 자바스크립트(JavaScript)

Programmer. 2015. 8. 22. 20:56

자바스크립트


    • 팝업창이 자동으로 나타나거나, 메뉴 이미지 위에 마우스를 올려놓으면 해당 이미지가 바뀐다거나 입력 폼에서 잘못된 입력 값이나 입력 누락등을 알려주는 메세지 박스가 나타나거나, 마우스를 움직일 때 마다 문자나 이미지가 따라 다니는것 모두 자바 스크립트(JavaScript)로 구현된 것입니다.

    • 자바스크립트는 HTML문서에 삽입하여 상호작용이 가능한 문서를 구현할 수 있도록 넷스케이프에서 개발이 된 것입니다.

    • 자바스크립트는 별도의 컴파일과정을 필요로 하지 않습니다. 브라우저를 해석기로 사용하는 언어이며 ActiveX 컨트롤을 통해 실행이됩니다.

자바스크립트의 특징


    1. 간단하고 작은 프로그램 작성에 적합합니다. C/C++이나 자바 애플리케이션 같은 컴파일러 기반의 언어는 기능이 강력하고 복잡한 작업을 수행하는 큰 프로그램이나 시스템의 구축에 적합합니다. 그러나 가장 기능을 수행하는 작은 프로그램을 만들 때는 스크립트 언어를 이용하여 신속하게 작성하는 것이 효과적입니다. 스크립트 언어는 컴파일 과정이 없기 때문에 일반적인 다른 언어보다 신속한 개발이 가능하다는 장점이 있습니다.

    2. 사용자 이벤트 프로그래밍에 적합합니다. 자바스크립트는 특히 웹브라우저 내에서 이루어지는 각종 이벤트를 체크하여 이벤트에 따른 수행내용을 프로그램 내에서 지정할 수 있습니다. 예를 들면, 특정 버튼이나 링크 위에 마우스 포인터가 이동하면 해당 설명이 메시지로 보여지는 도움말 시스템을 웹 페이지에 구현하는 등의 이벤트 처리에 적합한 언어입니다.

    3. 객체기반 언어입니다. 자바스크립트는 제한적인 객체지향 개념을 도입한 스크립트 언어입니다. 객체(Object)란 프로그램 작성의 대상 도메인 내에서 명사적으로 표현될 수 있는 모든 것 (Thing)을 의미하며, 속성과 행위를 가질 수 있는 기본단위를 말합니다. 속성은 객체의 성질 또는 특징을 나타내며, 행위는 매소드란 용어로 표현되는데 이는 객체가 수행할 수 있는 동작을 나타냅니다. 객체지향 언어는 객체를 조립하여 프로그램을 구성한다는 점에서 절차(procedure)를 중심으로 프로그램을 구성하는 기존의 절차적 언어와 구분됩니다.

    4. 플랫폼에 독립적입니다. 자바스크립트는 언떤 운영체제, 어떤 하드웨어에서도 작동하는 이식성이 뛰어난 (플랫폼에 독립적인)언어 입니다. 표준에 입각하여 작성된 자바스크립트 코드는 웸 브라우저나 사용자의 컴퓨터가 바뀌어도 사용가능합니다.


자바스크립트의 한계



    1. 내장 메소드의 한계

      자바스크립트는 기본적으로 브라우저의 기능과 밀접한 관련을 가집니다. 따라서 자바스크립트를 이용한 응용프로그램은 브라우저가 제한하는 기능적 한계를 벗어 날 수 없습니다.

    2. 코드의 보안성

      자바스크립트는 구조상 HTML 소스코드에 포함되므로 해당 웹 페이지를 열함하는 사용자가 코드를 복사하고 재사용하는게 가능합니다. 이런 점은 소스의 복사를 통해 활성화에는 기여하나 보안이 요구되는 분야에서는 사용이 제한되게 됩니다.

    3. 디버깅 및 개발 도구의 부족

      최초의 자바스크립트는 브라우저가 내보내는 오류 메시지가 프로그램 검증 수단의 전부였습니다. 최근에는 웹 사이트 구축 도구로 자바스크립트 생성 시능을 가진 에디터나 도구들이 꽤 있지만 프로그램 개발 도구 차원의 디버깅 기능은 제한적이라 기본적인 지식이 없으면 어렵습니다.

자바스크립트 명령어 작성

자바스크립트 사용을 위한 SCRIPT 태그


    • 자바스크립트는 HTML내에 삽입된 코드 형태로 작성합니다. 일반적인 HTML문과 자바스크립트를 구분하는 태그가 바로 <SCRIPT>태그입니다. 자바스크립트 코드가 시작되는 곳에 <SCRIPT>를 삽입하며, 코드 작성이 끝나면 </SCRIPT>태그로 닫습니다. <SCRIPT>태그는 language와 src 속성을 가지며 각 속성을 다음과 같습니다.

    • language 속성은 스크립트 코드의 종류를 명시합니다. 이 속성을 따로 명시하지 않으면 기본값으로 "Java-Script"가 지정됩니다. 자바스크립트를 사용하는 경우, <SCRIPT language= "Java-Script">형식으로 사용합니다.

    • SRC 속성이란? 자바스크립트는 기본적으로 HTML 파일 내에 작성되도록 되어있으나, 자주 쓰이는 자바스크립트를 따로 파일로 분리했을 경우 이 파일의 내용을 불러오기 위해 src속성을 이용하여 파일명 지정이 가능합니다. 이때 자바스크립트 코드를 수록한 파일명은 확장자가 .js이어야 합니다. 자바스크립트 파일이 HTML 파일과 다른 디렉토리에 존재한다면 경로명과 파일명을 동시에 명시하여야 합니다.

    • 자바스크립트의 사용부분?
      자바스크립트 프로그램은 HTML의 어느 부분에 삽입해도 지장은 안생깁니다. 하지만 자바스크립트 프로그램의 위치는 주로 헤더부분에 두는 것을 권장하고 있습니다. 이는 헤더부분에 위치한 자바스크립트 프로그램은 사용자의 이벤트(각종 브라우저 환경의 변화, 입/출렬 방생 등)가 초기화 되기 이전에 그 내용이 브라우저 시스템에 의해 인식되기 떄문입니다.

자바스크립트 작성시 유의사항

    • 자바스크립트 명령어는 한 줄에 한개의 명령어가 오는 것이 원칙입니다. 만약 한 줄에 여러개의 명령어를 사용하고자 할 경우엔 명령어 뒤에 세미콜론(;)을 붙여줘야만 합니다. 세미콜론의 의미는 하나의 명령문이 명시적으로 끝났다는 것을 나타내는 데 한 줄에 한 개의 명령어만 나타나더라고 관례적으로 세미콜론을 붙이는 경우가 많습니다. 간단한 물자열을 출력하는 자바 스크립트를 보겠습니다.

1
2
3
4
5
6
7
8
9
10
<HTML>
    <HEAD>
        <TITLE>자바스크립트</TITLE>
    </HEAD>
    <BODY>
        <SCRIPT language="JavaScript">
        document.write("자바스크립트로 문자열을 표시합니다.");
        </SCRIPT>
    </BODY>
</HTML>
cs
다음 소스의 결과입니다.


    • HTML과는 달리 자바스크립트 명령어는 대소문자를 구분하여 사용함에 유의하여야 합니다. 또한 문자열에 대한 표시는 작은따옴표 또는 큰따옴표를 사용하여 문자열임을 표시하여야 합니다. 따옴표 안에 따옴표가 나타나야 하는 경우, 외부에서 큰 따옴표를 사용하고, 내부에는 작은 따옴표를 사용합니다.
      예) <BODY onload="prompt('Hello')">

    • 출력 메소드의 매개변수로 사용되는 문자열의 내용 중에서 일반 문자가 아닌 특수문자를 지정하기 위해서는 Escape Character라고 불리는 특수문자 표기를 사용하여 입력해야합니다. 다음은 자바스크립트의 문자열에서 사용되는 특수문자의 표기와 그 의미를 나타낸표입니다.

       특수 문자

      의 미 

      \n

       개행 문자

      \t

       탭 문자

      \r

       캐리지 리턴(행의 처음으로)

      \f

       폼 피트(일반적으로 페이지 간 구분)

      \b

       백스페이스

      \\

       \문자 자체를 표시

      \"

       " 문자를 표시


자바스크립트의 주석문


    • 주석문이란 작성자나 프로그램 코드를 보는 사람들에게 프로그램에 대한 설명을 하기 위해 프로그램 코드 중간에 설명문을 삽입한 것입니다. 웹 브라우저는 이러한 주석문을 만나면 실행 코드로 인식하지 않고 무시하게됩니다. 자바스크립트에서 주석문을 표기하는 방식은 두가지가 있습니다. 첫 번째는 행 단위의 주석 표기인 //와 /* 내용 */입니다. //은 //이 있는 행의 //뒤의 모든 글자를 주석처리 하고 /* */은 가운데 내용 부분을 줄과 상관없이 주석으로 처리하게됩니다. 주석은 귀찮은 과정일 수도 있지만 작성시 이해를 돕는데 역할을 하기 때문에 주석을 포함 시키는 것이 좋습니다.

자바스크립트의 명령어 블록


    • 여러개의 명령들을 논리적으로 하나의 단위로 묶을 수도 있습니다. 이렇게 묶여진 하나의 단위를 블럭(block)이라고 하며, 웹 브라우저는 이 블럭을 하나의 명령어로 인식합니다. 실제로 실행될 때는 블럭 내의 명령들을 차례대로 수행하므로 블럭으로 묶여지지 않은 일련의 명령어들과 차이가 없으나, 조건문이나 반복문 등에서 사용될떄는 블록의 존재유무에 따라 처리 내용이 달라지는 경우도 있습니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <HTML>
          <HEAD>
              <TITLE>자바스크립트</TITLE>
          </HEAD>
          <BODY>
              <SCRIPT language="JavaScript">
              {
              document.write("자바스크립트로");
              document.write("문자열을 표시합니다."); 
              }
              </SCRIPT>
          </BODY>
      </HTML>
      		cs

      다음 소스의 결과는 다음과 같습니다.

자바스크립트 프로그램의 기본구조


    • 자바스크립트 프로그램의 기본구조는 내장형, 행입력형, 함수형, 링크형으로 구분되며, 한 프로그램 내에 여러가지 형태가 동시에 사용될 수 있습니다.

내장형  자바스크립트


    • 내장형은 HTML문서에 자바스크립트 소스를 직접 입력하는 방법으로 <HEAD> 태그나 <BODY>태그에 입력하여 사용하며, <SCRIPT>태그 내에 자바스크립트 코드를 사용합니다. 다음 소스는 자바스크립트의 내장 함수인 alert() 함수를 이용하여 경고창을 결과화면에 표시하며 내장형의 기본 구조를 가지고 있습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <HTML>
          <HEAD>
              <TITLE>내장형 자바스크립트</TITLE>
              <SCRIPT language="JavaScript">
              alert("HEAD 부분에서 실행");
              </SCRIPT>
          </HEAD>
          <BODY>
              <SCRIPT language="JavaScript">
              alert("BODY 에서 실행");
              </SCRIPT>
          </BODY>
      </HTML>
      		cs
      다음의 결과는 다음과 같습니다.
행입력형 자바스크립트

    • 행입력형은 HTML문서에 사용된 태그 내에 이벤트핸들러(이벤트를 받아서 처리하는 명령어)와 함께 기술하는 방법이면, 사용형식은 다음과 같습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      <HTML>
          <HEAD>
              <TITLE>행입력형 자바스크립트</TITLE>
              <SCRIPT language="JavaScript">
              alert("HEAD 부분에서 실행");
              </SCRIPT>
          </HEAD>
          <BODY>
              <A href="JavaScript:alert('행입력형 예')">여기를 누르세요</A><BR>
              <A href="#"onclick="alert('행입력형')">클릭</A><BR>
              <INPUT type=button value="클릭" onclick="alert('환영')"><BR>
              <INPUT type=button value="클릭" onclick="javascript:alert('환영')">
              </SCRIPT>
          </BODY>
      </HTML>
      		cs

함수형 자바스크립트


    • 함수형은 일정하게 반복되는 명령문의 집합을 함수로 선언하고 필요할 때 이를 호출하여 사용하는 형태의 자바스크립트 구조입니다. 다음 예제는 "안녕하세요"라는 경고창을 띄워주는 명령문을 hello() 라는 이름의 함수로 정의해 두고 이 함수를 호출하는 예를 보여주고 있습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <HTML>
          <HEAD>
              <TITLE>함수형 자바스크립트</TITLE>
              <SCRIPT language="JavaScript">
              function hello()
              {
                  alert("안녕하세요")
              }
              </SCRIPT>
          </HEAD>
          <BODY>
              <INPUT type=button value="클릭1" onclick="hello()"><BR>
              <INPUT type=button value="클릭2" onclick="hello()">
              </SCRIPT>
          </BODY>
      </HTML>
      		cs

링크형 자바스크립트
    • 링크형은 별도의 스크립트 파일을 다른 파일로 저장해두고 HTML문서에서 이 파일을 불러서 사용하는 형태로써 스크립트 파일의 확장자는 .js로 저장됩니다. js파일 내에서 태그는 사용할 수 없고 자바스크립트 명령어만 나타나야 합니다. 다음 소스는 hi.js와 bye.js 파일에 자바스크립트 명령어를 작성해 두고 HTML 문서에서 이를 불러와 사용하는 예를 보여줍니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <HTML>
          <HEAD>
              <TITLE>함수형 자바스크립트</TITLE>
              <SCRIPT language="JavaScript" src="hello.js"></SCRIPT>
              <SCRIPT language="JavaScript" src="bye.js"></SCRIPT>
          </HEAD>
          <BODY onload="hi()">
              <INPUT type="button" value="클릭" onclick="bye()"><BR>
              </SCRIPT>
          </BODY>
      </HTML>
      ------------------------------------------------------------------------------------예제6.html
      function hello()
      {
          alert("안녕하세요!")
      }
      ------------------------------------------------------------------------------------------hello.js
      function bye()
      {
          alert("바이 바이")
      }
      ----------------------------------------------------------------------------- -------------bye.js
      		cs
다음 소스의 결과는 다음과 같습니다.



저작자표시 비영리 동일조건

'Programming > HTML' 카테고리의 다른 글

HTML - 조건문, 배열  (2) 2015.08.23
HTML - 변수, 상수, 자료형, 연산자  (0) 2015.08.23
HTML - CSS(Cascading Style Sheet)  (0) 2015.08.22
HTML - 프레임 태그 입력 태그  (0) 2015.08.22
HTML - 멀티미디어 태그 그리고 테이블  (0) 2015.08.21
'Programming/HTML' Related Articles more