[JS] Javascript 자바스크립트 기본 개념
자바스크립트 언어란?
자바스크립트 언어는 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다.
또한 컴파이 과정이 없고, 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 실행된다.
위와 같은 형태로 진행되어 컴퓨터는 내가 적은 코드 그대로를 읽는다.
웹 페이지에서 자바스크립트의 역할
웹 페이지는 HTML, CSS, Javascript(JS) 세 가지 언어가 결합되어 작성된다.
HTML이 페이지의 구성을 담당하고, CSS가 웹 페이지의 디자인을 담당한다면 JS는 웹 페이지의 동적 제어를 담당한다.
예를 들어 버튼을 누르거나, 사용자 또는 내부적으로 어떠한 연산, 행위가 필요할 때 사용한다.
1. HTML의 form을 이용하여 입력 창을 제공하였다면, 해당 창에 값들을 키, 마우스를 통하여 입력받고 연산하는 작업은 자바스크립트뿐만이 가능하다.
2. 기존의 HTML, CSS를 이용하면 초기 설정된 값만으로만 디자인을 유지하고, 태그의 속성이 고정된다(정적이다). 하지만 자바스크립트를 이용함으로써 웹 페이지에 동적인 변화를 일으킨다.
3. 브라우저 윈도우의 크기나 모양 변경, 새 윈도우나 탭 열기, 다름 웹사이트 접속, 브라우저 히스토리 제어 등 브라우저의 작동을 제어하는데 사용한다.
4. 웹 페이지가 웹 서버와 데이터를 주고받을 때 활용한다. 즉, 웹 서버와의 통신(Ajax)이 가능하다.
5. JAVA, Python의 API처럼 JS로 활용할 수 있는 수많은 API가 제공되므로 웹 브라우저에서 실행되는 다양한 웹 애플리케이션을 개발할 수 있다.
자바스크립트 코드의 위치
자바스크립트 코드는 크게 네가지 위치에 작성할 수 있다.
1. HTML 태그의 이벤트 리스너 속성에 작성
HTML 태그에는 onclick, onmouseover, onmouseout 등과 같이 이벤트가 발생할 때 처리하는 코드를 등록하는 리스너 속성이 있다.
자바스크립트는 이러한 리스너 속성에 작성할 수 있다.
See the Pen 리스너에 JS코드 작성 by Heekng (@heekng) on CodePen.
2. <script></script> 내에 작성
<script></script>는 <head></head>, <body></body>, body태그 밖 등 어디든 들어갈 수 있다.
또한 웹 페이지 내에서 여러 번 작성할 수 있다.
See the Pen script태그 내에 작성 by Heekng (@heekng) on CodePen.
위처럼 <script></script>태그는 body태그 밖에도 작성 가능하다.
3. 자바스크립트 파일에 작성
자바스크립트 코드를 확장자가 .js 인 파일에 저장하고, <script src=".js경로"></script>를 통해 불러서 사용할 수 있다.
See the Pen .js 파일에 작성하여 불러오기 by Heekng (@heekng) on CodePen.
4. URL부분에 작성
<a> 태그의 href속성 등에도 자바스크립트 코드를 작성할 수 있다.
href="javascript:스크립트 작성"의 형태로 작성하며, javascript: 를 적지 않으면 일반적인 URL로 판단하기 때문에 반드시 작성해야 한다.
See the Pen URL부분에 작성 by Heekng (@heekng) on CodePen.
'JS & TS > Javascipt' 카테고리의 다른 글
| [JS] 객체, 프로토타입, property (0) | 2021.02.13 |
|---|---|
| [JS] 함수 function (0) | 2021.02.12 |
| [JS] 값 비교하기(==, ===) (0) | 2021.02.12 |
| [JS] 데이터타입, 변수, 상수 (0) | 2021.02.12 |
| [JS] 자바스크립트로 본문에 코드 추가하기 (0) | 2021.02.11 |
| [JS] 다이얼로그 사용하기 (0) | 2021.02.11 |
