안녕, 세상!

1. 자바스크립트 개요 본문

It공부/JavaScript

1. 자바스크립트 개요

dev_Lumin 2020. 7. 23. 18:36

(1) 자바스크립트란?

자바스크립트는 HTML 위에서 동작하는 언어이며 HTML의 특징인 단순 텍스트 위주의 정적인 웹 페이지의 제한적인 기능을 해결하기 위해서 만들어진 동적인 언어입니다.

자바스크립트는 웹에서 이용할 수 있도록 만들어진 스크립트언어로, 자바스크립트로 작성된 웹 문서는 클라이언트에 그대로 전송되기 때문에 사용자가 페이지에 있는 버튼을 마우스로 클릭하거나 키보드를 입력하는 것과 같은 이벤트 처리작업을 즉시 처리할 수 있습니다.

 

자바스크립트는 인터프리터 언어이므로 컴파일과 같은 특수한 개발 도구가 필요없습니다.

기본적으로 편집용 프로그램과 브라우저만 있으면 프로그래밍할 수 있습니다.

자바스크립트는 브라우저 안에 내장된 인터프리터에 의하여 프로그램이 수행되기 때문에 CGI 프로그래밍과 달리 HTML 문서에 삽입된 코드가 클라이언트에 그대로 전송되고 클라이언트에서 실행되므로 서버의 부하를 크게 줄일 수 있습니다.

 

 

 

자바스크립트의 특징

(1) 자바스크립트는 객체 지향적 언어입니다.

(2) 클라이언트 측에서만 실행되기 때문에 네트워크를 통한 서버로의 데이터 전송없이 모든 작업을 처리할 수 있습니다.

(3) 자바스크립트 프로그램 코드는 따로 파일로 작성되지 않고 웹에서 수행할 HTML 문서 사이에 직접 코딩합니다.

(4) 자바스크립트는 자바언어의 기본 문법을 대부분 사용하여 유사하지만, 자바보다 훨씬 쉽습니다.

(5) 내장 메소드(method)의 종류에 한계가 있으며, 소스 코드의 숨김이 불가능합니다.

 

 

자바스크립트와 자바의 차이점은 다음과 같습니다.

자바스크립트 자바
넷스케이프 개발 선마이크로 시스템 개발
클라이언트에 의해 인터프리터됨 서버에서 컴파일되고, 클라이언트에서 인터프리터됨
클래스 정의, 상속 등의 개념이 없는 객체기반 언어 객체지향 언어
HTML 내에 기술 applet의 형태로 작성되며, 컴파일 하여 class 파일을 생성한 후 HTML 문서에 삽입됨
미리 변수형을 정할 필요가 없음 미리 변수형을 정할 필요가 있음

 

 

 

(2) 자바스크립트 작성 방법

자바스크립트는 HTML 위에서 동작하는 언어라고 했습니다.

HTML 에 자바스크립트 코드가 시작된다는 사실을 알리는 태그는 <SCRIPT> 입니다.

<SCRIPT> 와 </SCRIPT> 태그 사이에 자바스크립트를 삽입하면 됩니다.

 

SCRIPT태그의 위치

<SCRIPT> 태그는 <head>와 </head> 사이에 들어가기도 하고 <body>와 </body> 사이에 들어가기도 합니다.

<SCRIPT>를 어디에 넣어야 효과적인지 알기 위해서 우선 브라우저의 동작을 알아야 합니다.

브라우저의 동작은 다음과 같습니다.

 

  1. HTML을 읽기 시작합니다.
  2. HTML을 파싱합니다. (parsing: 컴퓨터가 읽을 수 있는 코드로 바꾸는 작업)
  3. DOM 트리를 생성합니다.
  4. Render 트리가 생성합니다. (DOM tree + CSS의 CSSOM 트리 결합)
  5. Display(브라우저)에 표시됩니다.

 

브라우저는 HTML과 CSS를 파싱하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료될 때 까지 브라우저 파싱을 멈추게 됩니다.

이로 인해 HTML태그들 사이에 Script가 위치하면 HTML을 읽는 과정에서 중단 시점이 생기고 그 만큼 화면에 표시되는 것이 지연됩니다.

또한 DOM트리가 생기기 전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있는 문제가 생깁니다.

이를 해결하기 위해서 보통 <body> 태그의 최하단에 놓습니다.

 

하지만, <body> 태그의 최하단에 놓으면 브라우저는 전체 문서가 구문 분석(HTML, CSS의 파싱) 될 때 까지 스크립트 다운로드를 시작할 수 없다는 문제점이 발생합니다.

 

그래서 <body> 태그의 최하단에 위치하지 않고 위의 문제를 방지하기 위해 <script> 태그의 async, defer 속성을 사용합니다.

 

 

<script async src="abc.js"> ... </script>

<script defer src="abc.js"> ... </script>

 

 

async 속성과 defer 속성은 공통적으로 HTML 파싱과 동시에 스크립트 로드가 이뤄집니다.

그 이후에,

async 경우에는 HTML 파싱이 끝나지 않더라도 스크립트 로드가 완료되는 즉시 스크립트가 실행됩니다.

이 과정에서 비동기적으로 여러 스크립트를 로드, 실행하기 때문에 스크립트 순서에 상관 없이 실행돌 수 있습니다.

따라서 실행 순서가 서로 영향이 있는 스크립트들을 사용할 때는 주의해서 사용해야 합니다.

(동기적 실행을 위해서 async=false로 설정하여 순서대로 실행할 수도 있습니다.)

 

defer의 경우에는 HTML 파싱이 모두 끝난 뒤 스크립트가 실행됩니다.

defer의 실행은 순서대로 실행됩니다.

 

그러므로 스크립트 로드 시간을 줄일 수 있습니다.

 

 

script 태그 위치에 대한 설명은 아래 주소를 참고하였습니다.

https://junhobaik.github.io/js-script-position/

 

 

 

① 클라이언트용 자바스크립트

클라이언트용 자바스크립트는 HTML 문서 내에 자바스크립트를 작성하여 웹 브라우저를 제어합니다.

형식은 다음과 같습니다.

 

 

<SCRIPT LANGUAGE="JavaScript">

    <!--

            클라이언트용 스크립트....

    -->

</SCRIPT>

 

 

HTML의 주석을 넣어주는 이유는 자바스크립트를 지원하지 않은 웹 브라워저에서 코드들을 화면에 표시되지 않게 하기 위해서 입니다.

( 주석은 필요 시 선택적 사용 )

 

 

 

② 서버용 자바스크립트

서버용 자바스크립트는 HTML 문서 내에 자바스크립트를 작성하고, 실행은 웹 브라우저가 아니라 서버로 지정된 컴퓨터에서 읽고 분석한 다음 웹 브라우저에 그 결과를 나타내어 줍니다.

형식은 다음과 같습니다.

 

 

<SCRIPT LANGUAGE="JavaScript" RUNAT=SERVER>

    <!--

            서버용 스크립트....

    -->

</SCRIPT>

 

 

 

③ 외부 정의된 스크립트 언어 불러오기

형식은 다음과 같습니다.

 

 

<SCRIPT LANGUAGE="스크립트 언어이름" SRC="스크립트 소스 문서명">

        스크립트....

</SCRIPT>

 

 

스크립트 언어이름에 javascript 라고 넣고 문서명에는 확장자가 .js 인 파일을 명시해줘서 자바스크립트를 실행할 수 있습니다.

 

 

 

(3) 자바스크립트와 HTML의 차이점

위에서 말했듯이 자바스크립트는 HTML의 정적인 부분을 보완하기 위해서 만들어진 언어입니다.

자바스크립트는 동적인 언어로 다음 예시로 차이를 확인할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
<HTML>
<HEAD><title>자바스크립트와 HTML의 차이</title></HEAD>
<BODY>
  <h3>JavaScript</h3>
  <script>
      document.write(1+2);
  </script>
  <h3>HTML<h3>
    1+2
</BODY>
</HTML>
 cs

자바스크립트는 1+2에 대한 연산을 실행하여 출력을 하는 동적인 특징을 갖지만 HTML은 정적이므로 값을 그대로 출력만 할 수 있습니다.

 

 

 

 

(4) 콘솔

자바스크립트 코드를 실행하기 위해서 파일을 만들었습니다.

경우에 따라서 파일이 아니더라도 간단하게 어떤 코드를 실행해야 하는 상황들이 있습니다.

이러한 경우에 콘솔을 사용할 수 있습니다.

 

아무 웹페이지에서 마우스 오른쪽 클릭을 하고 검사를 누릅니다.

 

 

Console 항목을 누르면 아래 콘솔창이 나옵니다.

이 콘솔창에서 해당 웹페이지에 간단한 동작을 취할 수 있습니다.

 

 

 

 

 

(5) 자바스크립트 기초 문법

① 주석문

//  :  한 줄 주석처리

/* .... */  :  여러 줄 주석처리

 

 

② 출력문

document.write("출력할 내용");     : 자바스크립트의 출력문

document.writeln("출력할 내용");   : 줄 바꾸기를 포함한 데이터 출력문 

 

 

 

③ 자료형 (Data Type)

(1) 상수

상수는 그 값이 정해지면 변하지 않는 값을 말합니다.

분류 기본 자료형   예시
숫자 자료형 정수형 10진법 10, 100, -30
8진법 020, 0126
16진법 0xB5
실수형 일반 실수 0.86, -139.2
지수형태 실수 29.35e2
분류 설명 예시
문자열 자료형 연속된 문자들을 말하고 단일, 이중 따옴표 모두 사용가능 "abcd", 'efgh'
논리형 참과 거짓. true, false
NULL 값   null
NaN 값 (Not a Number) 숫자가 아니다라는 것을 의미
 NaN

 

 

(2) 변수

구분 설명
전역변수 1. 함수 밖에서 선언된 모든 변수
2. 변수이름 앞에 var 키워드를 붙여도 되고 붙이지 않아도 됨
3. 함수의 외부 또는 내부에서 참조 가능
지역변수 1. 함수 내에서 선언된 모든 변수
2. 보통 변수이름 앞에 var 키워드를 붙여줌
3. 변수가 선언되어 있는 함수의 내부에서만 참조 가능

var 키워드

변수를 선언할 때, var 키워드가 있는 변수는 초기 값을 할당해도 되고 하지 않아도 되지만, var 키워드가 없는 변수는 반드시 초기 값이 주어져야 합니다.

 

 

변수명 규칙

1. 첫번째 문자는 영문자나 _(under bar)로 시작합니다.

2. 둘째 문자부터는 영문자와 숫자를 혼용 사용할 수 있습니다.

3. 대입되는 자료형에 따라 자동으로 그 형이 결정됩니다.

4. 이항 연산의 경우에는 자료형의 결정은 문자형이 숫자형보다 우선입니다.

  ex) x="20" + 20 의 경우 "2020"이 대입되는 것으로 간주됨

 

 

다음은 변수 사용 예시입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<HTML>
<HEAD><title>변수 사용</title></HEAD>
<BODY>
  <SCRIPT language="javascript">
      var x="사과";
      var y=4321;
      var a="apple"+1234;
      var b=10+"22";
      var c=b+10;
      var d=20+20;
      document.write("<h3><b> 문자형 :"+x+"<br>정수형 :"+y+"</b></h3>");
      document.write("a는 문자형 변수: "+a+"<p>");
      document.write("b는 문자형 변수: "+b+"<br>c는 문자형 변수: "+c+"<br>");
      document.write("d는 정수형 변수: "+d);
  </SCRIPT>
</BODY>
</HTML>
 cs

저작자표시 비영리 변경금지

'It공부 > JavaScript' 카테고리의 다른 글

6. 웹브라우저 내장객체  (0) 2020.07.28
5. 이벤트와 이벤트 핸들러  (0) 2020.07.27
4. 객체  (0) 2020.07.26
3. 함수  (0) 2020.07.24
2. 연산자와 제어 구조  (0) 2020.07.24
'It공부/JavaScript' Related Articles more
Comments