프론트엔드 프로그래밍/JavaScript

자바 스크립트 (JavaScript)란? + 기본구조 및 사용법

hyovvely 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>