강의 링크 <- 노마드코더
Javascript를 사용하는 이유
- backend에 사용할 언어는 python, ruby, asp, 하스켈 등 다양하지만, frontend의 경우 javascript가 유일한 프로그램
- 인터넷이 빨리 발전하는 만큼 javascript도 빠르게 발전 - > 막강+영향력 커짐 ==> developer가 할 수 있는 일이 점점 더 늘어남
- 웹, 웹앱, 모바일 어플리케이션, native application, 비디오 게임, 데스크톱 앱 등 다양하게 만들 수 있음
- vscode나 atom은 javascript로 만들어진 데스크톱 앱
ES5, ES6
- javascript의 version같은 개념
- ES5 - ECMAScript5 / ES6 - ECMAScript6 -> specification에 대한 업데이트
- javascript는 중앙집중화 되어있어서 누군가 업데이트하면 모든 브라우져에서 작동하게 됨
- vanila js는 library가 없는 javascript를 말함
Vanila JS
- 브라우저를 통해 제공된 javascript
- 핵심이 되는 기능을 잘 사용할 수 있어야 하기 때문에 vanila javascript를 공부해야함
let, const, var
- let - 재선언 금지, 재할당 가능
- const - 재선언 금지, 재할당 금지
- var - 재선언 가능, 재할당 가능
var a = b;
var a = c; // 재선언, 재할당 가능
let a = b;
let a = c; // 재선언 불가능
a = c; // 재할당 가능
const a = b;
const a = c; // 재선언 불가능
a = c; // 재할당 불가능
Data Type
- 변수 선언할 때는 const를 기본으로 사용, let은 필요할 때만
- 변수 뒤에 올 수 있는 정보
-> String : text를 의미
-> Boolean : True / False
-> Number : 숫자
-> Float : 소숫점이 붙은 숫자
- 변수명 지을때 Camel Case 방식
-> 소문자로 시작하고 단어 덧붙힐 경우 대문자로 시작
ex> lowerCase
Array , Object
- 데이터 정렬 방법 -> Array, Object
- Array = [] 방식, Object = {} 방식
- Object는 value 값에 이름을 붙힐 수 있음
DOM
- Document Object Model
- HTMl의 요소를 가져와 객체로 바꿈
Event & Event Handlers
- javascript는 event에 반응하기 위해 만들어짐
- event - 웹사이트에서 발생하는 것 (click, resize, load, before, closing 등)
- addEventListener 구문
-> target.addEventListener(type, listerner);
function handleResize(){
console.log("I have been resized");
}
//resize
window.addEventListener("resize",handleResize); // resize 이벤트가 발생될 때 handleResize 함수 실행
window.addEventListener("resize",handleResize()); // resize 이벤트 발생 여부와 상관없이 새로고침하면 handleResize 함수 실행됨 주의
**<이 뒤에 코드 예제 따라하는 부분은 git에 업로드>**
[git](https://github.com/3sally/VanilaJS/tree/master/NomadCoders.ChromeApp)