2021. 4. 28. 01:26ㆍ코 딩 공 부/J A V A S C R I P T
개요
개요
● 자바스크립트란?
- 자바스크립트(JavaScript)는 개체(object) 기반의 스크립트 언어이다.
- 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
- JavaScript는 HTML 문서에 적용될 때, 웹 사이트 상에서 동적 상호 작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어이다.
- Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다.
- 컴퓨터나 스마트 폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다.
- 자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 개발되었다.
● HTML과 CSS 그리고 JavaScript
- HTML
제공할 웹 콘텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어이다.
- CSS
배경색, 폰트 등의 레이아웃 등을 지정하여 HTML 콘텐츠를 꾸며주는 스타일 규칙 언어이다.
- JavaScript
동적으로 콘텐츠를 바꾸고, 멀티미디어를 다루며, 움직이는 이미지 등을 구현한다. 즉, 웹의 동작을 구현한다.
● 자바스크립트 특징
- 자바스크립트는 객체 기반의 스크립트 언어이다.
- 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.
- 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
● 자바스크립트 표준
- 1996년에 넷스케이프(Netscape)는 자바스크립트를 국제 표준안으로 만들기 위해 ECMA(European Computer Manufacturers Association)에 제출하여 ECMAScript 라는 새로운 표준을 제정
- ECMAScript(ES)는 자바스크립트 뿐만 아니라 마이크로소프트의 JScript나 어도비의 액션스크립트도 따르는 국제 표준이다.
- ES 2015(ECMAScript 6)
let, const 키워드 추가, arrow 문법 지원, iterator / generator, module import / export, class 추가 등
- ES 2016(ECMAScript 7, ECMAScript 2016)
거듭제곱 연산자(**), Array.prototype.includes
- ES 2017(ECMAScript 8, ECMAScript 2017)
async/await 함수, SharedArrayBuffer 객체와 Atomics 객체를 사용한 메모리 공유 등
- ES 2018(ECMAScript 2018)
Promise.finally, Async iteration, object rest/spread property 등
- ES 2019(ECMAScript 2019)
Object.fromEntries, flat, flatMap, Symbol.description, optional catch 등
● 스크립트 언어란?
- 기존에 이미 존재하는 소프트웨어(애플리케이션)를 제어하기 위한 용도로 쓰이는 언어
- 인터프리터 형식의 언어
- 수정이 빈번하게 발생하는 부분은 소스코드를 한 줄씩 읽어 바로 실행하는 인터프리터 방식이 유리하므로, 스크립트 언어는 이런 부분에 사용하기 위해 나온 언어이다.
- 스크립트 언어는 Client side Scripting과 Server side Scripting 언어로 나눌 수 있다.
- 종류
JavaScript, VBScript, JScript, VBA, PHP, Python, Ruby, ASP.NET 등
● Client side Scripting과 Server side Scripting 언어
- Client side Scripting 언어
· 사용자의 컴퓨터에서 작동되는 스크립트 코드이다.
· 웹 페이지에 포함된 스크립트로, 클라이언트 측 코드가 사용자의 컴퓨터로 다운로드 되고 브라우저가 이를 실행한다.
· JavaScript, VBScript, JScript 등이 있다.
- Server side Scripting 언어
· 서버에서 작동되고 그 결과가 사용자의 브라우저에 넘어가 표시된다.
· PHP, Python, Ruby, ASP.NET 등이 서버 측 웹 언어의 대표적 예이다.
· Node.js란 환경을 통해 서버 측에서도 자바스크립트가 사용 가능하다.
자바스크립트 기초
자바스크립트 구현
● 개요
- 자바스크립트 구현은 다음 세 가지로 나뉜다.
코어(ECMAScript)
문서 객체 모델(DOM : Document Object Model)
브라우저 객체 모델(BOM : Browser Object Model)
● 코어(ECMAScript)
- 자바스크립트의 핵심 기능
- 문법, 타입, 선언문, 키워드, 예약어, 연산자, 객체 등 언어의 저 수준에 해당하는 부분
- ECMAScript 언어는 웹 브라우저에 종속되지 않으며 웹 브라우저는 ECMAScript를 구현하는 호스트환경이다.
- 호스트환경(웹 브라우저, Node.js 등)은 ECMAScript를 기본적으로 구현하고 DOM, BOM 등과 같은 확장을 제공한다.
● 문서 객체 모델(DOM : Document Object Model)
- 웹 페이지 콘텐츠를 조작하는 메소드와 인터페이스 제공
- XML 을 HTML에서 사용할 수 있도록 확장된 애플리케이션 프로그래밍 인터페이스
- DOM은 전체페이지를 노드 계층 구조로 변환하며 HTML 페이지의 각 부분은 각기 다른 데이터를 포함하는 다양한 타입의 노드로 표현된다.
- DOM은 문서를 표현하는 트리를 생성하고 개발자는 이를 통해 문서의 콘텐츠와 구조를 자유롭게 추가, 수정, 제거할 수 있다.
● 브라우저 객체 모델(BOM : Browser Object Model)
- 브라우저와 상호작용하는 메소드와 인터페이스 제공
- 웹 브라우저와 관련된 객체의 집합(window, location, navigator, history, screen, document)
- BOM을 이용하면 브라우저 창에 접근하고 조작할 수 있다.
HTML 문서에 JavaScript 추가
● 코드를 직접 입력
- HTML의 <head> 태그나 <body> 태그 안쪽에서 <script> 태그를 이용하여 코드를 입력한다.
<script type="text/javascript">
// 자바 스크립트 코드
</script>
● 외부 자바스크립트 파일
- HTML의 <head> 태그나 <body> 태그 안쪽에서 아래와 같이 <script> 태그를 이용하여 외부 자바스크립트 파일을 추가할 수 있다.
<script type="text/javascript" src="파일명.js"></script>
JavaScript 로그 출력
● 개요
- 브라우저의 개발자 도구(F12)의 콘솔에 로그를 출력하여 디버깅할 수 있는 Console 객체를 제공한다.
- Console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메소드를 제공한다.
- Console 객체는 모든 전역 객체에서 접근할 수 있다.
● Console 객체 주요 메소드
- console.log()
· Web Console에 메세지를 출력
- console.dir()
· 주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시