JavaScript
과거에는 알면 좋고 몰라도 상관없는 언어
Front-End web application 이 부분에서 JavaScript가 사용됨
- 1995 Netscape회사 브랜든 아이크가
browser에서 동작하는 => Mocha
① ProtoType기반
② 함수형 언어 형태
Livescript -> JavaScript -> 표준으로 등록 ECMA(비영리 표준 기구) => ECMAScript (ES)
: 표준화 이후 한동안 잠잠하다가 2009년 ES5 -> 2015 ES6 -> 2016 ES7
Macha -> LiveScript -> JavaScript(ECMAScript)
JavaScript
- core language -> ECMA Script
- Client-side web API / Host API(Node.js가 내장하고 있는 API)
ECMAScript(core language)
API (Client-side web API(우리는 얘만 할 거) / Host API)
- 과거 JavaScript 발전
MS -> JScript 발표
=> 사람들이 JavaScript 구현(Chrome, safari OK / IE Error)
=> Fragmentation(파편화 현상)
전세계 5대 브라우저
Chrome -> Google
IE -> Edge -> MS
Safari -> Apple
FireFox -> Mozilla
Opera -> Opera
JavaScript
① 언어의 모호성
② 구현이 어려움
③ Fragmentation(파편화 현상)
JQuery
: 구현 용이 (Fragmentation해결)
: JavaScript Library
-
1999년 W3C(World wide web 컨소시엄)
: 기본적인 web표준을 관리하는 기구
: HTML - 문서의 내용, 구조
: CSS - Styling
=> 표준 관리
-
더이상 HTML의 version을 올리지 않을 거에요 (HTML 4.01)
① 정형성이 없음 -> 유지보수성도 없음
② 확장성이 없음htmlheadtitleh1
=> XML
: 정형화된 문법 / 확장성 있음
: 새로운 표준안 : XHTML
-
몇몇 회사가 옹기종이 모여서 working group
: WHARWG(Web Hypertext Application Technology Working Group)
: XML을 이용하지 않고 web application을 만들 수 있도록 HTML을 발전시켜보아요.
=>HTML5 : HTML CSS JavaSCript
-
HTMLS의 영향으로 JavaScript가 각광 !
2013 Node.js 등장
Back-end application을 JavaScript로 !
-
JavaScript(ECMAScript)
: browser안에서 실행
: Node.js에서 실행- platform : 다른 progrma을 실행시킬 수 있는 program
window / IOS
- platform : 다른 progrma을 실행시킬 수 있는 program
Browser
| Browser | vendor | JavaScript Engine |
|---|---|---|
| Chrome | Goolge | VS |
| Edge | MS | Chakra |
| Safari | Apple | Webkit |
| FireFox | Mozilla | SpiderMonkey |
- Default Browser -> Chrome(VS engine)
Tool
① VS code 프로그램(무료) : plugin이 많아서 사용하지 않음
② web storm(유료)
JS 실습
-
VS Code 설치
-
MyApp 폴더 생성
-
code Runner 확장 설치
-
Node.js 설치
https://nodejs.org/ko/
실행 단축키
cont+opt+n
! + tap 누르면 자동 생성
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
우리가 작성한 JavaScript code를 Browser에서 실행시키려면?
① HTML 문서를 만들어야 함
② JavaScript file을 HTML 내에서 링크를 검
: <script src=>
③ web Server Program이 있어야함
(일단 web server program을 다운로드해서 VScode에 설치)
④ web의 기본적인 동작방식
web => c/s 구조
- 작성한 JavaScript code를 실행하는 방법 2가지
- Node.js 이용(code Runer)
- web server를 이용(live Server)
: browser에서 실행
여기까지 환경설정,
그 다음에는 ECMAScript2015(ES6) 프로그래밍언어 SPEC
computer는 CPU를 이용해 연산 수행, 사용하는 데이터는 memory에 올라와 있어야함
-> memory는 데이터를 저장할 수 있는 memory cell의 집합체
variable(변수)
: memory주소와 식별자(identifier)를 mapping
변수의 선언(variable declaration)
-> JavaScript에서는 var let const 3가지 중 1개를 이용하면 됨
기존에는 var(function level scope)만 있었는데 ES6들어오면서 let const (block level scope)추가됨
Hoisting
: 변수에 대해서 hoisting(호이스팅)이 발생
모든 선언 구문이 코드의 최상단으로 끌어올려지는 현상
var x = 1;
if(true){
var x = 100;
}
console.log(x); // 100 fucntion level scope라서.
// Java는 함수가 없음. 대신 method가 있음
// Java의 method는 class 안에 위치
// JavaScript는 함수형 언어로 함수가 존재
// method와 같은 기능을 함. 이놈은 독릭접으로 존재????어쩌구
// 함수를 만들때는 function keyword를 이용
// 당연히 함수 이름이 있어야 하니 식별자를 붙여줌
// 인자와 실행코드가 block으로 표현
var x = 1;
function myFunc() {
var x = 200;
console.log(x);
}
console.log(x); // 1
myFunc(); // 200
console.log(x); // 1
console.log(x);
x=100;
console.log(x);
var x;
① variable(변수)
② 선언을 통해 변수를 생성 : var let(const)
-> JS는 변수를 생성할 때 DataType을 명시하지 않음
-> 만들어진 변수에 어떤값이든 다 들어가요
-> week type(약타입)
③ 변수이름 -> 변수 식별자(identifier)
④ var / let 의 가장 큰 차이점
: scope (변수의 유효범위)
var - function level scope
let - block level scope
⑤ Hoisting
code(해당 scope) 아래쪽에서 선언된 변수가 마치 코드(해당 scope) 맨 위쪽에서 선언된 것과 같은 효과를 만들어내는 현상
⑥ JS code는 2Phase로 실행되기 때문에(Scope별) hoisting 현상이 발생
-
1번째 Phase - Creation phas
-
2번째 Phase - Execution pahse
⑦
var: 같은 scope내에서 중복 선언 가능(좋지 않음)
⑧let: 같은 scope내에서 중복 선언 안됨
⑨ Creation Phase에서 생성된 변수에는<span style="color:crimson">undefined</span>가 세팅됨
undefined: 특수한값(개발자가 임의로 변수에 할당할 수 없음)변수사용할 때 선언하고 사용하세요 !
