-
자바 스크립트 (JavaScript)란? + 기본구조 및 사용법프론트엔드 프로그래밍/JavaScript 2022. 1. 26. 22:16
자바 스크립트 (JavaScript)
- 정식명칭 ECMA스크립트 (ECMAScript)
- ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어
- ES6
- default parameter
- class
- arrow function
- const
- let
자바 스크립트 (JavaScript)
- 동적인 웹 페이지를 작성하기 위하여 사용되는 언어
- 웹 표준 프로그래밍 언어
- 모든 웹 브라우저에서 자바스크립트 지원
- 웹 브라우저 뿐 아니라 스마트폰 용 애플리케이션 개발 등 각종 분야에서 능력과 가치를 인정 받고 있음
- 초기에는 브라우저에 내장되어 제한된 기능만 지원하였는데
- 현재 Ajax(Asynchronous JavaScript and XML) 기술과 함께 영향력이 증가
- 전세계에서 가장 많이 사용되는 언어
자바스크립트 기능
- HTML이 지원하지 못하는 다양한 기능 지원
- 동적인 움직임 / 이벤트 발생 처리 / 경고 메시지 출력 / 데이터 유효성 확인 / 멀티미디어 기능
- Ajax를 이용하여 새로운 내용을 동적으로 로딩하거나 서버에 전송하여 동적인 페이지 생성
- 애니메이션 기능 지원
- 브라우저 사용자의 특성(웹 페이지 탐색 움직임, 게시물 읽을 때의 습관, 등)에 대한 정보를 서버로전송하여 웹 분석, 사용자작 동작 트래킹 분석, 웹 서비스 개인화 등에 사용
자바스크립트 실행
- 스크립트 언어이기 때문에 컴파일 되지 않고
- 인터프리터(해석기)를 통해 웹 브라우저에서 한 줄씩 바로 실행
스크립트 언어 (인터프리팅 언어)
- 독자적으로 실행되지 않고 다른 프로그램에 내장되어 사용
- 소스코드를 컴파일하지 않고 한 줄씩 인터프리터를 통해 바로 실행
자바 스크립트의 용도
- 이벤트에 반응하는 동작 구현
- HTML 요소들을 동적으로 변경
- 사용자가 입력한 값들을 검증
- 게임이나 애니메이션 / 멀티미디어 기능 구현
- Ajax 기술을 사용하여 서버와 데이터를 비동기적으로 교환
비동기식 처리
- 서버 측에 데이터를 요청한 후 데이터 수신이 완료될 때까지 기다리지 않고 다른 작업 진행이 가능한 기술
자바스크립트 기본 구조
- HTML 문서에 <script>자바스크립트 코드</script> 태그 삽입
자바스크립트 사용법 3가지
- Internal 방식
- External 방식
- Inline 방식
Internal 방식
- HTML 문서에 삽입
- 일반적으로 <head> 부분에 삽입하지만
- <body> 안의 임의의 부분에 삽입해도 됨
- <script type=”text/javascript”>
alert(“알림창”);
</script>
External 방식
- 별도의 자바스크립트 파일(.js)로 작성하여 HTML 문서에서 소스 지정
- <script src=”a.js”></script>
Inline 방식
- 자바스크립트 코드가 짧을 때
- HTML 태그의 이벤트 핸들러 속성을 사용하여
- 함수 호출
- <body onLoad=”start()”>
- <button onClick=”show()”>
새 프로젝트 생성 : JavaScript01
예제
- internal.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript Internal 방식 </title> <script type="text/javascript"> alert("head 부분에 삽입된 알림창입니다"); </script> </head> <body> <script type="text/javascript"> alert("body 부분에 삽입된 알림창입니다"); </script> </body> </html>- external.html / a.js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript External 방식</title> <script src="a.js"></script> </head> <body> </body> </html>/** a.js */ alert("a.js에 삽입된 알림창입니다.");- inline.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript Inline 방식</title> <script type="text/javascript"> function start(){ alert("inline 방식으로 start() 함수를 호출하여 \n 출력된 알림창입니다"); } </script> </head> <body onLoad="start()"> </body> </html>'프론트엔드 프로그래밍 > JavaScript' 카테고리의 다른 글
브라우저 객체 모델 (window, history, location, navigator) (0) 2022.01.27 자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String) (0) 2022.01.27 제어문 (if, switch, for, while...) (0) 2022.01.27 변수 (var, let, const) + 연산자 + 데이터 타입 (0) 2022.01.27 데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt) (0) 2022.01.26