JavaScript 란?

1. 웹 페이지에 기능을 더하여 HTML 페이지를 동적으로 만들어주는 인터프리터 언어
2. 웹을 위한 인터프리터 언어이자 객체기반의 스크립트 프로그래밍 언어

인터프리터란?
인터프리터(interpreter, 해석기)란 소스코드를 바로 실행하는 컴퓨터 프로그램 또는 환경
소스코드를 한줄씩 읽어가며 실행하는 프로그램 ( 컴파일 언어에 비해 속도가 느리다 )

3. 주 목적은 웹 브라우저에서 단순한 DOM 요소의 조작, Alert, Confirm 등을 사용하기 위함
4. 서버, 앱, 프론트엔드 등 서비스 전반적인 것들을 만들 수 있음 ( 모바일앱, 서버, 프론트앤드 개발 )
5. Netscape 사의 Brendan Eich 에 의해 1995년 만들어짐
6. Mocha → LiveScript → JavaScript 로 최종 정착됨

JavaScript Engine

1. 브라우저에는 JavaScript 가상 시스템이라는 내장 엔진이 존재

• Chrom , Opera - V8 Engine
• Firefox - SpiderMonky
• IE - Trident 및 Chakar
• Microsoft Edge - ChakraCore
• Safari - Nitro 및 SquirrelFish

2. JavaScript 가상 시스템 엔진의 작동방법

1. 엔진이 스크립트를 읽는다 → 2. 스크립트를 기계어로 변환 → 3. 코드 실행

Javascript 실행 순서

1. 일반적으로 위에서 아래의 순서대로 실행. 순서에 주의해서 코드를 작성
2. Hoisting으로 인한 예외의 경우 존재 → 스코프가 꼬이지 않도록 되도록 let / const 키워드 사용

호이스팅( Hoisting )이란?

• var 변수/함수 선언들을 유효범위 최상단으로 모두 끌어올려지는것
  유효범위 : 함수 {} 블록영역 안에서 유효
• var 변수/함수의 선언만 위로 끌어 올려지며, 오른쪽의 할당 값과 내용은 끌어 올려지지 않는다
• var 변수 선언과 함수 선언문 에서만 호이스팅이 일어남
  var example)
  var exam = "var 대신 let으로";
  함수선언문 example)
  function 함수명() {
  구현 로직
  }
• let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다
  let/const example)
  let exam1 = "let 사용하자";
  const exam2 = 2;
  함수표현식 example)
  var 함수명 = function () {
  구현 로직
  }; => var 키워드로 선언하여도 오른쪽의 할당 내용은 끌어 올려지지 않는다
• 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것
  실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 처리하는 것
  실제 메모리에서는 변화가 없다

DOM ( DOM, Document Object Model ) 이란?

1. HTML 이나 XML 문서에 접근 하기 위한 문서 객체 모델
2. DOM 은 HTML 이나 XML 문서 모든 요소를 정의하며, 접근방법을 제공

웹페이지

HTML : 웹 페이지의 구성요소 ( Markup Language ), <태그명> 형식의 태그언어
CSS : 웹 페이지의 디자인 ( Style )
Javascript : 웹 페이지의 동적언어 ( Script Language )

JavaScript 표준 ( ECMAScript)

• 1996년에 Netscape 사는 자바스크립트를 국제 표준안으로 만들기 위해 ECMA에 요청
• ECMA(European Computer Manufacturers Association) 에서 1997년에 ECMA-262 공식 정의
• ECMAScript는 마이크로소프트의 JScript나 어도비의 액션스크립트도 따르는 국제 표준
• 현재 최신 표준은 2015년에 발표된 ECMAScript 6

Java 와 Javascript ?

두 언어는 서로 직접적인 관련은 없다.
두 언어 모두 C언어 기반으로 만들어져 문법상의 비슷한 부분은 존재.

JavaScript 기능

• 새로운 HTML 요소나 속성을 추가
• 존재하는 HTML 요소나 속성을 제거
• 모든 HTML 요소를 변경
• 모든 HTML 속성을 변경
• 모든 CSS 스타일을 변경
• 새로운 HTML 이벤트를 추가
• 모든 HTML 이벤트에 반응 ( ex : 마우스, 키보드 이벤트에 대한 스크립트 실행 )
• AJAX 등을 이용한 웹 서버 통신
• 쿠키 등의 설정과 조회

JavaScript 특징

• 자바스크립트는 객체 기반의 스크립트 언어
• 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어
• 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현
• 모든 HTML 속성을 변경
• 장점
  컴파일 과정이 필요 없다 > 빠른 시간 안에 스크립트 코드 작성
  다른언어들에 비해 단순한 구조와 원칙을 갖고 있어 배우기 쉽다.
  웹에 특화된 기술이기 때문에 운영체제나 플랫폼에 상관없이 잘 작동되고 확장성이 높다.
• 단점
  OS에 직접 접근할 수 없다.
  하드디스크를 읽거나 쓸 수 없다.
  다른 프로그램을 호출할 수 없다.
  도메인이 동일한 두 탭/윈도우를 제외하고 탭/윈도우 간에 통신을 수행할 수 없다.
  웹 브라우저에서 실행되기 때문에 일부 보안상의 제약이 있으며, 브라우저에서 웹 페이지를 열 때 안전하고 위험에 처하지 않도록 보장해야 한다.
  일반적으로 자바스크립트는 자체 도메인에 대해서만 제한없이 네트워크 요청을 보낼 수 있다.

JavaScript의 서버 개발 🛠

• Node.js
• Next.js
• Express

JavaScript의 앱 개발 🛠

• React Native
• NativeScript
• Cordova

JavaScript의 프론트엔드 개발 🛠

• jQuery
• BackBone.js
• React
• Vue
• Angular