- HTML & CSS
- Web 문서의 구조와 외형을 정의
- JavaScript
- 문서의 기능을 정의
- JavaScript의 고질적인 문제들을 많이 해결한 ES2015를 지나 현재 ES2019까지 발표
- Cross browsing, 간편한 활용 등을 위해 많은 library들이 등장 (대표적으로 jQuery)
- 최근 표준화된 browser, ES6 이후의 다양한 도구의 등장으로 순수 JavaScript 활용의 증대
- 전역 객체 window
- DOM 조작
- BOM 조작
V8 engine을 기반으로 한 Node.js
-
- Interpreter를 통해 바로 실행된다
- Data type, type casting 수월
- 속도가 느림
- 실행 환경에 제한을 받음
- JavaScript Interpreter 가 설치되어있는 프로그램에서만 작동함
-
- 함수를 기본으로 하는 방식
- 선언적 프로그래밍
- HTML 요소를 동적으로 처리 가능
- 1급 함수
- 함수 자체를 data 처럼 사용 가능
- 변수의 유효 범위 == 함수의 유효 범위
- Java와는 전혀 다른 programming 언어이다
- Netscape 사에서 마케팅을 목적으로 Java 라이센스를 받아 사용
- JavaScript == ECMA-262
-
초보적인 언어가 아니다
- 학습 시작 초기에는 쉽지만 복잡한 서비스 구축에 사용될만큼 강력함
-
Web 표준이다
- HTML5: HTML5 + CSS3 + JavaScript
- HTML5의 JavaScript에 대한 의존도가 높음
JavaScript는 함수형 프로그래밍에 적합하다!!!
- Text editor와 web browser만 있으면 programming 가능
- Data type 및 type-casting이 쉬워 쉽게 학습하여 사용 가능
- Compile 과정을 거치지 않기 때문에 작성한 코드 테스트가 수월
-
해석 순서
-
Interpreter에 의해 위에서 아래로 해석 & 실행됨
-
Interpreter
: 프로그램 언어로 적혀진 프로그램을 기계어로 변환하는 프로그램
-
-
-
대/소문자 구분
- variable, method, keyword등 정확히 대소문자 구분하여 입력
- HTML의 경우 대소문자 구분하지 않음
-
구문 끝
-
공백과 들여쓰기
-
주석
변경 불가능한 값 (immutable)
- boolean
- null
- undefined
- number (NAN도 number type)
- string
- symbol (ES6)
- object: 일반 객체, function, array
- Integer Type이 별도로 없는 것이지 정수라는 수 체계가 존재하지 않는 것은 아니다
- Template 문자열
-
null
- 선언 했는데 값이 할당되지 않은 경우
- typeof null => object 라고 나옴
- JavaScript는 원시 타입 (primitive type)을 제외하고는 모두 객체이다
- JavaScript의 객체는 key와 value로 구성된 속성 (property)의 집합이다
- 값 == 함수?
- method로 불리움
- 함수 level scope를 가진다
- 함수 내에서 선언된 변수는 지역변수이며, 나머지는 전역변수로 활용
- 변수 선언 시 키워드(var)를 쓰지 않으면, 암묵적 전역으로 설정된다
- 주의: 변수가 아닌 전역 객체 (window)의 property로 생성
- 변수에 할당된 것이 아니라 window.global 이 된 것!
- keyword를 꼭 사용해라!
- 주의: 변수가 아닌 전역 객체 (window)의 property로 생성
- JavaScript에서는 모든 선언을 호이스팅 한다
- ES6에서 새롭게 등장한
let
과const
keyword는 이러한 내용을 방지할 수 있다- 호이스팅 자체가 이루어 지는 것은 아니고, var는 선언과 동시에 초기화 (undefined)를 하고,
- let, const는 선언과 초기화 단계가 분리되어 진행된다
- Block level scope를 가지고 있다
- 동등 연산자 (==)
- 값 비교 및 에상치 않은 변환
- 일치 연산자 (===)
- 엄격한 같음
- 형비교
- python 의 == 과 동일!
- else if
- {}
- {}
객체는 key와 value로 구성된 속성 (property)들의 모임
-
객체 리터럴
var cat1 = {} var cat2 = {name:'nero', age:3}
-
Object 생성자 함수
var dog1 = new Object() dog1.name = 'cherry' dog1.name = 5
-
객체 literal로 생성을 하는 경우 key가 string으로 표기될 수 있다면, 암묵적 형변환이 발생한다
- 그게 아닌 경우는 반드시 따옴표를 통해서 문자열로 만들어 줘야함!
var OBJ = { name: 'chloe', 'e-mail': 'chloe@test.com' }
- 여기서 name 은 string으로 암묵적 형변환이 일어난다!
-
만약, 생성자 함수를 만들어 사용하면 마치 class처럼 속성이 동일한 객체를 생성할 수 있다
function Person(name, age){ this.name = name; this.age = age } var p1 = new Person('chloe', 25)
-
속성 접근은 . or [] 로 가능하다
-
단, 반드시 [] 로 접근을 해야하는 경우가 있다
-
ex) key 가 string으로 이루어지지 않은 경우
var OBJ = { name: 'chloe', 'e-mail': 'chloe@test.com' } OBJ['e-mail']
-
-