▶︎ 이벤트

🍘  자바스크립트에서 이벤트란?

이벤트(event)는 웹 브라우저나 사용자가 실행하는 어떤 동작

- 클릭하거나 마우스를 올리는 등의 모든 동작

- 웹 브라우저에서 일어난 모든 동작이 이벤트가 되진 않고 해당 웹 문서 영역에서 이루어지는 동작만

🍏 문서 로딩 이벤트

🍏 마우스 이벤트

🍏 키보드 이벤트

🍏 폼(form) 이벤트

▶︎ 이벤트 처리하기

이벤트를 처리하는 것을 '이벤트 처리기' 또는 '이벤트 핸들러' 라고 함

🍏 HTML 태그에 함수 연결하기

HTML 태그에 'on이벤트명' 으로 직접 함수를 연결할 수 있음

<태그 on이벤트명="함수명">

이 방법은 함수에 변경 내용이 있으면 HTML 소스도 함께 수정해야 해서 스크립트 파일에서 이벤트 처리하는 방법을 많이 사용

🍏 웹 요소에 함수 연결하기

요소.on이벤트명 = 함수

이 방법을 이용해서 하나의 이벤트에 두가지 이상의 함수를 실행할 경우 가장 마지막에 사용한 것만 적용되서 문제

🍏 이벤트 리스너로 이벤트 처리하기

addEventListner() 메서드를 사용해서 이벤트 처리하는 방식을 많이 사용함

요소.addEventListner(이벤트, 함수, 캡처 여부);

- 이벤트 : 이벤트 명엔 on을 붙이지 않고 'click' 처럼 이벤트 이름 그대로 사용

- 함수 : 익명함수를 사용해서 직접 작성해도 되고 호출해도됨 (호출할 경우 괄호 붙이면 안됨!)

- 캡처 여부 : true면 캡처링을, false이면 버블링을 한다는 의미, 대부분 기본값인 false 그대로 둠

▶︎ event 객체

웹 문서에 발생하는 이벤트 정보를 저장하는 event 객체가 있다.

🍘 event 객체의 프로퍼티와 메서드

event 객체는 이벤트 이름, 발생위치, 발생시간 등 이벤트와 관련된 다양한 정보가 포함되어 있다.

event 객체에서 사용할 수 있는 메서드는 preventDefault() 뿐임

🍏 event 객체의 주요 프로퍼티

※ 전체 프로퍼티 목록 링크

event 객체 프로퍼티 사용 예시

const box = document.querySelector("#box");

box.addEventListner("click", (e) => {
	alert(`이벤트 발생 위치 : ${e.pageX}, ${e.pageY}`);
});

pageX와 pageY라는 프로퍼티를 사용해서 이벤트 객체의 위치를 알 수 있다.

웹 문서에서 마우스 오른쪽 버튼 비활성화하기

window.addEventListner("contextmenu", e => {
	e.preventDefault();
	alert("오른쪽 버튼을 사용할 수 없습니다");
});

마우스 오른쪽 버튼을 클릭하면 나오는 바로가기 메뉴를 콘텍스트 메뉴(context menu)라고 한다.

웹에서 마우스 오른쪽 버튼을 사용하지 못하게 할 때 위와 같이 많이 사용한다.

▶︎ 이벤트 전파

이벤트가 발생할 때 그 부모 요소에도, 부모의 부모요소에도 똑같이 이벤트가 처리되는데, 이것을 "이벤트 전파(event propagation)"이라고 한다.

🍘 이벤트 버블링

특정 요소에서 이벤트가 발생 -> 그 요소의 부모 요소 -> 부모 요소의 부모 요소

이런식으로 부모요소에도 이벤트가 발생한것으로 간주되어 전파되는 것을 이벤트 버블링이라고 한다.

웹 브라우저 상의 대부분의 이벤트는 이벤트 버블링 된다.

🍏 event.target과 event.currentTarget

event 객체의 프로퍼티 중에 target과 currentTarget 프로퍼티가 있는데 target은 이벤트가 발생한 맨 처음 요소를 가리키고  currentTarget은 이벤트가 전파되면서 현재 이벤트 처리기가 실행되는 대상을 가리킨다.

🍘 이벤트 캡처링

이벤트 캡처링은 웹 요소에서 이벤트가 발생하면 일단 최상위 요소에서 시작해서 이벤트가 발생한 요소까지 차례대로 이벤트가 전파되는 방식이다.

버블링이 아래에서 위로(자식에서 부모로) 전파된다면 캡처링은 위에서 아래로(부모에서 자식으로) 전파된다.

이벤트 리스너에 세번째 옵션에 true를 사용하면 캡처링 방식으로 전파된다.

▶︎ DOM

🥥 DOM 이란?

DOM (Document Object Model, 문서 객체 모델)

- 웹 문서에 담겨 있는 모든 요소를 따로 제어 ➡️ 조건에 맞거나 사용자 동ㅇ작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응

- DOM에서는 웹 문서를 하나의 객체로 정의

- 텍스트, 이미지, 표 등 모든 요소를 각각 객체로 정의

- 웹 문서들도 객체이므로 프로퍼티, 메서드를 갖고 있음

🥥 DOM 트리

- 웹 문서는 여러가지 태그가 서로 포함 관계('부모', '자식')를 가지고 있음

- DOM을 활용해 웹 문서의 요소를 부모와 지식으로 구분해서 표시하면 트리모양이 되서 DOM 트리라고 부름

- 노드(node) : DOM 트리에서 가지가 갈라져 나가는 부분

- 루트 노드(root node) : html 노드

- 형제 노드(sibling node) : 같은 부모를 가진 노드

🥥 웹 요소에 접근하기

🍎 querySelector() 함수

- 선택자를 사용해 웹 요소의 1가지만 가져올 때 사용

- document 객체에 포함된 함수

document.querySelector("p")				// p태그 요소 중 첫번 째 요소
document.querySelector("#container")		// id가 container인 요소
document.querySelector(".box")			// class가 box인 요소 중 첫번째 요소

- 조건에 맞는 요소가 여러개 일 경우 첫번째 요소 1개만 가져옴

🍎 querySelectorAll() 함수

- 한꺼번에 여러개 요소를 가져와 노드 리스트 형태로 저장

- 노드 리스트에 저장된 요소는 배열처럼 인덱슬ㄹ 사용해서 접근

🍎 웹 요소 내용 수정하기

- 프로퍼티를 사용

웹요소.innerText
웹요소.innerHTML
웹요소.textContent

innerText  : 웹 브라우저 창에 보이는 내용만 가져옴 (감춰진 것은 안보임)

innerHTML  : 요소 안에 있는 태그 내용을 함께 가져옴

textContent  : 소스에 있는 대로 요소의 내용을 가져옴 (감춰진 것까지 보임)

- 내용을 가져와서 내용 수정하기

웹요소.innerText = 내용
웹요소.innerHTML = 내용
웹요소.innerContent = 내용

- 이미지 요소에 접근 후 src 속성값 바꾸기

이미지 요소.src = 이미지 파일

🥥 자바스크립트로 스타일 수정하기

🍎 css 속성에 접근해서 수정하기

요소.style.속성명

const button = document.querySelector("button");

button.onclick = () => {
	button.style.backgroundColor = "black";
   	button.style.color = "white";
}

🍎 classList

- 클래스 스타일을 추가 또는 삭제 가능

- classList 는 요소에 사용한 클래스 스타일을 모두 모아 놓은 프로퍼티

요소.classList;		// 요소에 사용된 클래스 리스트 모두 볼 수 있음

- 스타일을 추가, 삭제하거나 토글하기

요소.classList.add(클래스명)
요소.classList.remove(클래스명)
요소.classList.toggle(클래스명)

- 특정 클래스 스타일이 있는지 확인하기

요소.classList.contains(클래스명)

🥥 DOM에서 폼 다루기

※ 폼(form) : 사용자가 내용을 입력할 수 있는 웹 요소

🍎  텍스트 값 가져오기

요소.value

document.querySelector("#name-box").value

🍎 name 속성값을 사용해 폼 요소에 접근하기

<form name="order">
	...
    <input name="product">

HTML에서 위와같이 있을경우 input 박스에 접근할 때 아래와 같이 name으로 접근할 수 있다.

document.order.product.value

🍎 form 배열을 사용해서 접근하기

document.forms					// 모든 form을 가져옴
document.forms[0].elements		// 첫번째 form에 있는 폼 요소를 모두 가져옴
document.forms[0].elements[0]	// 첫번째 form 요소에 첫번째 요소를 가져옴

🍎 선택 목록, 항목에 접근하기

- HTML에서 selector를 사용한 선택 목록의 option(항목)에 접근할 때 아래와 같은 방법을 사용할 수 있다.

document.querySelector("#product").options

- HTMLOptionsCollection 형태로 저장

- selectedIndex 에는 사용자가 선택한 옵션의 인덱스 값이 저장 (기본값 0)

➡️ selectedIndex를 활용해 사용자가 선택한 값을 가져올 수 있음

🍎 체크박스, 라디오 버튼에 접근하기

※ 체크박스 : 여러가지 항목 중 여러개를 선택할 수 있음

※ 라디오박스 : 여러가지 항목 중 한가지만 선택할 수 있음

<h1>메뉴 주문</h1>
<form name="orderForm">
<fieldset>
  <legend>메뉴</legend>
  <p>메뉴를 선택하세요</p>
  <label><input type="checkbox" name="menu" value="dolce">돌체라떼</label>
  <label><input type="checkbox" name="menu" value="vanilla">바닐라라떼</label>
  <label><input type="checkbox" name="menu" value="choco">초코라떼</label>
</fieldset>
<fieldset>
  <legend>구매수단</legend>
  <p>구매 수단을 선택하세요</p>
  <label><input type="radio" name="purchase" value="card">카드</label>
  <label><input type="radio" name="purchase" value="cash">현금</label>
  <label><input type="radio" name="purchase" value="gifticon">기프티콘</label>
</fieldset>
</form>

- label 태그에 type 속성으로 checkbox인지 radio인지 구분

- 같은 그룹 별로 같은 name 붙임

- 라디오 버튼에 접근하기

document.orderForm.purchase

name을 사용해 접근

RadioNodeList 라는 노드 리스트 형태로 저장됨

선택한 항목은 value 값이 RadioNodeList의 value에 저장됨

- 체크 박스에 접근하기

document.orderForm.menu

마찬가지로 name 으로 접근

document.orderForm.menu[0].value	// 'dolce'

인덱스로 접근해서 특정값을 가져올 수 있음

- checked 속성

라디오 버튼, 체크 박스에는 checked 속성이 있음

선택했으면 true, 선택하지 않았으면 false

document.querySelectorAll("input[name='menu']:checked")	// 메뉴 중 선택된 항목만 가져옴

자바스크립트에서 NaN은 비교연산자(==, ===, !=, !== 등) 으로 비교가 안된다. 왜냐하면 NaN은 자기자신과 비교해도 다르다고 하기 때문이다!! (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN)

let temp = Number("안녕하세요");		// temp는 NaN이 된다.
temp === NaN 		// false!⚠️

자바스크립트는 자료형이 자꾸 바뀌어서 골치아픈데 NaN에서 직접비교하면 원하는 결과가 안나온다. 😭

NaN인제 체크하고 싶다면 함수를 사용하면된다!

또는 자기 자신과 다른지 체크하면 된다.. NaN은 유일하게 자기과 비교했을 때 다르다고 하는 값이다. 

function valueIsNaN(num) {
	return num !== num;		// NaN을 제외한 모든 값은 false, NaN만 유일하게 true로 나온다.
}

🌟  Object.is()

Object.is() 는 객체안의 두 값이 같은지 비교해주는 함수이다.

let isNaN = NaN;
Object.is(isNaN, NaN)	// true!

이 함수를 사용해서도 가능한데 MDN NaN문서에서는 isNaN() 함수를 추천해준다.

🌟 isNaN()

isNaN()과 Number.isNaN() 두가지 방법이 있는데 혼동해서는 안된다.

isNaN() 은 현재 값이 NaN이거나 숫자로 바꾸었을 때 NaN 인경우 true 이다.

Number.isNaN() 은 현재 값이 NaN 이어만 true 이다.

isNaN('NaN인가요?')	// true
Number.isNaN('NaN인가요?')	// false

NaN 인지 비교할 때 상황에 맞춰서 적절한 함수를 사용하면 될 것이다.

🍘  배열

- 하나의 변수에 여러 개의 값 저장

arr = [12, "apple", true]

- 서로 다른 자료형 한 배열에 저장 가능

- 배열의 길이 확인

arr.length // 3

🍘  심벌(Symbol)

- 유일성을 보장

- 객체 프로퍼티의 키(key)로 사용 가능

- 오픈 소스를 가져올 때 같은 키 이름으로 충돌하는 상황 방지

- 잘 사용하진 않음

- 선언

let var1 = Symbol()

- 심벌을 키로 사용할 때는 대괄호로 묶어서 표현

let id = Symbol()
const member = {
	id : 1234,
    [id] : 1
}
member[id]	// 1
member.id	// 1234

- 심벌에 설명 추가 가능

Symbol("설명")

🍘  자바스크립트의 장점이자 단점, 자료형 변환

다른 언어와 다르게 자바스크립트는 변수를 선언할 때 자료형을 지정하지 않고 변수에 값을 할당하면 그 값에 따라 자료형이 결정

--> 느슨한 자료형 체크

편리하지만, 여러 사람이 프로젝트를 진행할 때 변수를 일관성있게 유지하지 못함

▶︎ 자동 형 변환

- 자바스크립트는 '+'가 더하기 연산자이면서 연결 연산자로 사용됨

- '+'를 이용해서 숫자와 문자열을 더하면 숫자가 자동으로 문자열로 바뀌면서 2개의 문자열을 연결해서 보여줌

- 그외 연산자는 자동으로 문자열을 숫자로 변환한 후 계산함

▶︎ 직접 형 변환

- Number()

Number("200")	// 숫자 200으로 변환

- parseInt()

- parseFloat()

- toString()

- String()

값.toString()		// null, undefined 제외한 모든 자료형 문자열로 변환
값.toString(기본값)	// 기본값에 입력한 진수형으로 변환

String(값)		// null, undefined 자료형까지 모두 포함해서 문자열로 변환

- Boolean()

🍘  연산자

산술연산자, 연결연산자, 할당연산자, 논리연산자는 다른 언어와 거의 같다.

▶︎ 비교연산자

비교연산자가 다른 언어와 조금 다르다.

- 프로그램에서 값을 비교할 때는 ===, !== 연산자 사용하는 것이 좋음

- 자바스크립트에서는 문자열끼리 비교도 가능함

- 피연산자가 문자열일 경우 문자들의 아스키코드 값을 비교해서 결정

- 첫번째 문자가 서로 같은 아스키값일 경우 다음 문자 비교 하는 식으로 비교

🍘  ForEach 문

프로그램 중에 배열의 길이가 바뀌어 정확하게 배열의 크기를 알 수 없을 때, 배열의 요소를 가져와서 함수를 실행할 때 사용

fruits.forEach(function(fruit) {
	console.log(fruit);
});

🍘  For...in 문

반복해서 객체의 값을 가져와서 처리할 때 사용

let book = {
    title : "가나다",
    pubDate : "2019-02-04",
    pages : 777
}

for (key in book) {
    document.write(`${key} : ${book[key]}<br>`)
}
/*
title : 가나다
pubDate : 2019-02-04
pages : 777
*/

🍘  for...of 문

문자열이나 배열같이 반복 가능(literable) 자료에서 사용하는 반복문

const students = ["a", "b", "c", "d"];

for (student of students) {
	document.write(`${student}, `);
}
//a, b, c, d

🙌  자바스크립트 시작하기

자바스크립트를 시작하게 된 이유는 프론트에도 관심이 생기면서 백,프론트엔드 전부 만들고 싶어졌기 때문이다. 공부는 강의나 글을 조금보다가 DOIT이라는 시리즈의 '모던자바스크립트 프로그래밍의 정석'으로 시작한다. 아무도 안 읽을 기초 개념에 대한 글을 쓰게 된 이유는 일을 하느라 힘들다고 핑계대면서 게을러지는데 하루이틀 쉬더라도 꾸준히 이어갈 수 있도록 하기 위함이다.

자바스크립트를 배운 후에 가능하다면 타입스크립트도 좀 해보고 Vue.js 를 배워서 프론트를 직접 짜보고 싶다. 백엔드도 재밌었지만 프론트도 나름의 매력이 있는 것 같다. 다양한 요소들로 화면을 예쁘게 꾸며보는것도 재밌을 것 같다. 컴포넌트니 아톰이니 모르는 개념이 아직 많지만 조금씩 하다보면 풀스택이 되어 있을 것이다. ㅎㅎ Vue 를 하고 싶은 이유는 리액트를 공부하려 했다가 요즘 Vue를 쓰는 회사가 많아진 것으로 보여서 알아보았더니 소규모 프로젝트를 하기엔 Vue가 적절할 것 같아 보였다. 리액트가 아직은 프론트 시장을 장악하고 있지만... 혼자 프로젝트도 할 수 있을라면 Vue를 배우는게 좋을 것고 여러가지 갖다붙이기에도 Vue가 좋다고 한다.

👀  에크마스크립트? ES6?

우선 들어가기전 '자바스크립트' 이름에 왜 '자바'가 들어가있는 이유가 무엇일까?

전혀 비슷한 면도 없고 자바를 토대로 만든 언어도 아닌데 이름에 자바가 들어가는 이유는 따로있다. 우선 인터넷 초창기에 자바스크립트의 전신인 '라이브스크립트'를 '넷스케이프(Netscape)라는 회사가 개발했다. 그러다 '썬 마이크로시스템즈'가 라이브스크립트의 개발권을 넘겨받았는데, 그 회사가 '자바(java)'를 만든 회사라 그 이름을 따서 '자바스크립트'가 된것이다.

자바스크립트를 부를 때 '에크마스크립트(ECMAScript)'라고도 많이 한다는데 그 이유는 아까 '라이브스크립트'를 만든 '넷스케이프'에서 자바스크립트 기술 규격을 표준화하기 위해 '유럽컴퓨터제조연합(ECMA)'에 제출했는데, 이후 자바스크립트가 스크립트 표준으로 채택되면서 공식 이름이 '에크마스크립트'로 정해진 것이다.

그 이후 에크마스크립트는 새로운 기능이 추가되면서 업그레이드 됐는데 그때마다 edition이 달려서 ES2, ES3,... 이렇게 이어졌는데 에크마스크립트위원회에서 매년 업그레이드 되니까 이름뒤에 년도를 붙여서 '에크마스크립트 2015' 라고 부르게 되었다. 그래서 ES6라고도 하고 에크마스크립트 2015라고도 한다.

그럼 에크마스크립트는 자바스크립트인걸까? 아니다. 에크마스크립트는 자바스크립트를 기반으로 표준화된 스크립트 언어이다. 그래서 자바스크립트는 에크마스크립트의 표준사양을 따르는 가장 유명한 언어이지만, 그외에도 여러 스크립트 언어가 있다.

🖥  기본 입출력

▶︎ alert()

- 알림창 (확인만 가능)

- 괄호 안에 내용 작성

▶︎ confirm()

- '확인' or '취소' 가 가능한 창

- 확인 클릭하면 true, 취소 클릭하면 false 리턴

- 괄호안에 내용 작성

▶︎ prompt()

- 사용자가 값을 입력할 수 있는 창

- 입력후 '확인' or '취소'

- 괄호안에 사용자에게 보여줄 내용 작성

- 값 입력 후 확인 클릭하면 사용자가 입력한 값 리턴

- 값을 입력하지 않으면 빈 값 리턴

- 취소를 누르면 null 값 리턴

- prompt(내용, 기본값) 으로 기본값을 지정가능

▶︎ console.log()

- 콘솔 창에 내용 표시

✳︎ 기본적으로 자바스크립트에서 문자열에 변수를 삽입할 때 연결연산자 '+'를 사용하지만 '템플릿 리터럴' 방식으로도 가능

템플릿 리터럴 방식이란?

큰따옴표(" ") 대신 백틱(` `)을 이용해서 문자열을 감싸고 변수는 ${변수명}을 이용해서 문자열 안에 쉽게 넣는 것이다. 더 직관적이어서 틀릴 확률이 낮아지고 띄어쓰기, 이스케이프 문자를 그대로 표시할 수 있어서 편리하다.

name = "wisejade"
class = "javascript"
console.log(`${name}은 ${class}를 공부중입니다.`)

▶︎ document.write()

- 간단한 내용을 웹 브라우저 창에 보여줄 때 사용

⛅️  변수

변수는 다른 언어를 배웠을 때와 마찬가지로 사용하면 된다. 숫자가 앞에올 수 없고 공백을 포함하면 안된다. 단어 하나로 이루어져있을 경우 모두 소문자로 사용하면 되고 여러 단어로 이루어져있을 경우엔 카멜 표기법을 쓰거나 언더바(_)를 쓰면 된다.

유니코드 문자를 변수에 사용해도 되지만 인코딩할 떄 문제가 생길 수 있으므로 사용하지 말자!

변수 선언은 변수는 예약어 let을 사용하고 상수는 예약어 const를 사용한다.

(var도 많이 썼지만 호이스팅 문제 때문에 이제 안쓴다.)

😮 자료형

자바스크립트의 자료형은 크게 원시타입(Primitive type)과 객체(Object)로 나뉜다.

원시 유형은 하나의 값만 저장하는 자료형으로 number, string, boolean, undefined, null, symbol 이 있다.

이외의 모든 건 객체이다.

▶︎ typeof()

- 자료형을 알수 있는 함수

- 괄호 안에 값이나 변수를 넣으면 어떤 자료형인지 알려준다.

✳︎ 자바스크립트는 실수 계산에 적합하지 않다. 자바스크립트는 실수 정수 자료형 나누지 않고 모든 수는 number형으로 저장된다. 하지만 실수를 저장하는 방법 때문에 실수 계산이 틀릴 수도 있다.

▶︎ NAN

- Not a Number (숫자가 아님) 을 의미

- 변수를 선언만 하고 값이 할당되지 않은 상태에서 그 변수를 연산에 사용할 경우 NaN 값이 됨

▶︎ 자바스크립트에서 falsy로 인정하는 값

- 0

- ""

- NaN

- undefined

- null

▶︎ undefined vs null

- undefined는 값이 할당되지 않았을 때 변수의 초기값

- null은 변수에 값이 없거나 유효하지 않다는 의미로, 자바스크립트에서 반환하거나 사용자가 할당할 수 있는 값

🛌  객체(Object)

- 중괄호({}) 안에 key, value 쌍으로 여러개를 만들 수 있음

let object1 = {
    name : "table",
    color : "brown",
    height : 100
}

- key는 문자열이지만 큰따옴표 사용하지 않음

- 키:값 쌍을 객체의 프로퍼티(property)라고 함

- 객체 값 접근하기

object1.name
object1["name"]

첫번째 방법을 많이 사용한다.