본문 바로가기

개발/Front-end

[JavaScript] 자바스크립트 개요 / 장단점 / 작성 방식

< web(front-end)의 3요소 >

 

[ 정적인 화면 구성 ]

- HTML : 웹 문서의 큰 틀 (뼈대)

- CSS : 스타일(색상, 테두리, 디자인, 글꼴 등등...)

[ 동적인 효과 ]

- JavaScript : 웹 문서 상에 이벤트가 발생했을 때 추가적으로 실행해야 하는 동작들 처리

                      프로그래밍 언어로 변수, 조건문, 반복문 사용 가능

 

 

< 스크립트 언어 >

 

- 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 함

- 매우 빠르게 배우고 짧은 소스코드로 상호작용 하도록 고안됨

 

 

< JavaScript >

 

- 웹브라우저에서 가장 많이, 가장 기본적으로 사용되는 인터프리터 방식*의 스크립트 언어

자바 컴파일* + 인터프리터 방식
* 컴파일 방식
- 컴파일 단계를 거치고 나서 실행되는 개념 (오류잡기 수월)
- 소스코드를 한 번 다 읽어내고 나서 프로그램이 실행됨
자바스크립트 * 인터프리터 방식
- 컴파일 단계를 거치지 않고 곧바로 실행되는 개념
- 실행하면서 소스코드를 한 줄씩 읽어내면서 실행 (실시간으로 분석해서 실행)
- 코드상에 문법적인 문제가 있다면 바로 알 수 없고 실행시점에 알려줌

 

 

< 자바스크립트 장단점 >

 

장점 단점
요소에 이벤트가 발생했을 때,
코드를 한 줄씩 읽어나가면서 수행되기 때문에
수행속도가 빠름
웹에 특화된 기술
: 내부에서 제공되는 기술이 제한적임
간단한 코드 작성으로
초보자가 접하기 쉬운 언어
(단순한 구조, 원칙)
HTML내에 소스코드를 작성하기 때문에
외부에 공개됨 (개발자 도구)
: 보안에 취약
  언어 자체의 완성도가 높지 않음

 

 

< 자바스크립트 소스코드 작성 위치에 따른 종류 >

 

inline (인라인) 이벤트를 부여하고자 하는 요소 내에 간단한 소스코드를 작성해서 실행되게 하는 방법
주로 실행해야 하는 소스코드가 매우 소량일 경우 사용
internal (내부) 해당 HTML문서 내에 script 태그 영역에 함수 단위로 소스코드를 작성해서 어떤 요소에 어떤 이벤트 발생 시, 해당 함수를 호출함으로써 실행시키는 방식
script 태그는 head, body 태그 내에 아무 곳이나 적어도 상관 없음
external (외부) 별도의 .js파일로 소스코드들을 작성해서 해당 HTML문서에 script 태그를 가져다가 실행되게 하는 방법
유지보수에 좋음