맛집지도 만들기 - javascript

Javascript는 기존에 정의되어있는 HTML, CSS를 변경할 수 있는 기술

 

JS로 할 수 있는 일

1. HTML, CSS 추가,수정,삭제

2. 마우스 클릭, 키보드 등 이벤트 감지 및 반응

3. 클라이언트 저장소 활용

4. 네트워크 요청

 

변수 선언

=> var, let, const 키워드 사용

var는 재선언, 재할당 가능

let은 재선언 불가능, 재할당 가능

const는 재선언 불가능, 재할당 불가능

 

=== 는 자료형까지 같아야함

== 는 자료형이 같을 필요 없음

 

배열 조회: arr.slice(시작, 끝)

배열 삭제: arr.splice(인덱스, 갯수)

 

for - in: 객체의 속성(index) 반복

for - of: 배열의 객체값 반복

 

반복문 제어

=> continue를 만나면 해당 반복은 건너뜀

 

익명함수는 hoisting(선언 전에 호출하는 것) 불가능

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

 HTML 요소 선택방법

** document.querySelector(선택자) 

 

HTMLCollection vs NodeList: HTML은 실시간 update, Node는 정적 데이터/css 

 

innerText = "content" : JS에서 html 요소 text로 수정

innerHTML = "html" : JS에서 html 요소 html로 수정

style.property = "css property value" : JS에서 css 요소 수정

 

document.createElement(): 태그 만들기

document.createTextNode(): text 노드 만들기

 

ex) let inner = document.querySelector(".inner");

      let element = document.createElement("div");

      let hello = document.createTextNode("hello");

 

위에 처럼 복잡하게 안하고 ` `과 ${}를 사용해도 됨

ex) app.innerHTML = `<div class="item">상품명 : ${productsData.title}, 무게 ${productsData.weight}g</div>`;

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

DOM Event

 

자주 사용되는 이벤트

 

ex)

const pTag = document.querySelector("p");
pTag.addEventListener("click", changeText);

function changeText(event) {
    event.target.innerHTML = "문자열의 내용이 바뀌었습니다!";
}

 

이벤트 리스너 등록

1. 프로퍼티로 등록 (HTML 태그에 속성으로 등록)

ex) <p onclick="alert('문자열을 클릭했어요!')">이 문자열을 클릭해 보세요!</p>

2. 메소드에 evenlistener를 전달

ex) element.addEventListener(이벤트 타입, 이벤트 핸들러, 이벤트 전파방식)

이벤트 타입: click, load, keydown....

이벤트 핸들러: 이벤트 발생 시 실행할 함수

이벤트 전파방식: false면 bubbling, true면 capturing 방식으로 전파

 

bubbling: 맨 아래부터 전파

capturing: 최상위부터 전파