1일차
JavaScript가 인기 있는 이유
- 1995년 12월 브렌던 아이크가 10일 정도의 기간만에 만들어낸 언어입니다.
- 기존의 웹사이트는 HTML, CSS로만 이루어져 더욱 인터렉티브한 사이트를 만들어내기 위해서였습니다.
- 이후 다른 좋은 언어들도 많이 생겼지만, 기존 웹사이트들이 손상될 수 있어 자바스크립트가 유지됩니다.
- 그러므로 백엔드는 대체할 언어가 있지만 프론트엔드는 자바스크립트가 유일한 프로그래밍 언어입니다.
JavaScript의 확장
- three.js 라이브러리를 사용하면 3D를 구현할 수 있습니다. 데이터 시각화 등이 가능합니다.
- 프레임워크를 사용하면 많은 것들을 추가로 할 수 있습니다.
1) React Native : iOS 및 Android용 애플리케이션을 구현할 수 있습니다.
2) Electron : 데스크탑 애플리케이션을 구현할 수 있습니다.
3) Node.Js : 백엔드도 가능합니다.
4) socket.io : 실시간 채팅, 카메라 기능 등을 활용할 수 있습니다.
5) ml5.js : 머신러닝 모델을 생성하고 모델을 훈련시키는 웹 사이트를 구축할 수 있습니다.
2일차
기본 데이터 자료형(Basic Data Type)
number(숫자)
- integer(정수)와 float(실수)로 나뉩니다.
- 다른 자료형이지만 정수와 실수의 연산은 자바스크립트가 자동으로 처리합니다.
string(문자열)
- ""(큰따옴표) 또는 ''(작은따옴표)로 감싸서 표현합니다.
- 예를 들어 "hi" 와 'hi'는 같습니다.
- 문자도 덧셈이 가능합니다. 'h' + 'i'는 'hi'가 됩니다.
--- 변수(Variables)
: const let var
변수는 const를 기본으로 작성합니다.
업데이트가 필요한 변수에 대해서는 let을 사용합니다.
var는 절대 사용하지 않습니다.
3일차
Conditionals part Two
const age = parseInt(prompt("How old are you?"));
if (isNaN(age)) {
console.log("Please write a number");
} else {
console.log("Thank you for writing your age.");
}- NaN(Not a Number)은 입력값이 숫자가 아니라는 의미입니다.
- isNaN('값')을 입력했을 때 NaN이 맞다면(숫자가 아니라면) true를, NaN이 아니면(숫자면) flase를 반환합니다.
- 조건이 필요한 갯수가 1개면 if(기본 조건)만 작성하면 됩니다. 두가지 경우의 수가 있다면 if ~ else(그 외의 모든 조건)으로 작성합니다.
4일차
Events part Two
addEventListener2
const title = document.querySelector("div.hello:first-child h1");
function handleMouseEnter() {
console.log("mouse is here!");
}
function handleMouseLeave() {
console.log("mouse is gone!");
}
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);-
listen하고 싶은 event를 찾는 가장 좋은 방법은 mdn을 검색하는 것입니다.
-
또는 console.dir(document)를 했을 때 속성 이름 앞에 on이 붙어있다면 그게 바로 event listener 입니다.(ex. onclick)
-
addEventListener의 이벤트 종류 부분에 입력할 때는 앞의 on 부분을 떼고 입력합니다.
on... event
const title = document.querySelector("div.hello:first-child h1"); function handleMouseLeave() { console.log("mouse is gone!"); } title.addEventListener("mouseleave", handleMouseLeave); title.onmouseleave = handleMouseLeave;
- 위의 마지막 2줄의 코드는 같은 동작을 합니다. title.onmouseleave 에 함수 자체를 할당하는 방법입니다.
- addEventListener를 사용할 경우 removeEventListener로 event listener를 제거할 수 있기 때문에 더 선호합니다.
seughoria