Web Storage API - 웹 브라우저에 데이터를 보관할 수 있는 공간 - 데이터를 Key-Value 형태로 저장할 수 있다. - 로컬 스토리지는 웹 브라우저를 종료하더라도 데이터가 유지된다. - 세션 스토리지는 웹 브라우저를 종료하면 데이터가 삭제된다. (session: 서버와 연결이 유지되고 있는 상태, ex: 은행 사이트) 스토리지 API에 데이터 추가 및 수정하기 localStorage.setItem('age', 20); sessionStorage.setItem('favorite', 'candy'); Storage에 들어있는 데이터 꺼내기 (없는 키 값을 조회하는 경우 null) console.log(sessionStorage.getItem('favorite')); console.log(se..
window.setTimeout(callback, millisec) - 설정한 시간만큼 기다린 후에 콜백 메서드를 한 번 실행한다. window.setInterval(callback, millisec) - 설정한 시간마다 콜백 메서드를 실행한다. window.clearTimeout(initDiv) - 타임아웃 삭제 window.clearInterval(moveDiv) - 인터벌 삭제 const out = document.getElementById('out'); // 인터벌 또는 타임아웃을 삭제하고 싶으면 생성 시에 인스턴스를 받아놓아야 한다. const initDiv = window.setTimeout(() => { out.appendChild(document.createElement('div')); }..
Node - document 내부에 있는 모든 것을 Node라고 한다. - Element보다 좀 더 작은 개념이다. - 하나의 요소를 Element Node와 Text Node로 나눌 수 있다. - document 내부의 주석들은 Comment Node라고 부른다. - 자바스크립트로 새 노드 객체를 생성하여 기존 노드에 추가할 수 있다. Node를 사용해 새 요소 추가하기 const pushItem = () => { // (1) 새 element node를 생성 const newDiv = document.createElement('div'); // (2) 새 text node를 생성 const newText = document.createTextNode('item' + itemNum++); newDiv...
Browser Object Model (BOM) - 웹 브라우저를 구조화 해놓은 객체 - window 객체를 통해 웹 브라우저를 직접 제어할 수 있다. - window는 기본적으로 생략이 가능하다. BOM의 객체들 - window: 웹 브라우저 최상위 객체 - window.screen: 모니터 등 화면에 대한 정보 - window.document: 현재 페이지의 HTML코드 구조 (DOM) - window.history: 웹 브라우저의 페이지 이동 내역 (뒤로가기 막기 등 구현 가능) - window.location: 현재 웹 브라우저가 위치한 경로에 대한 정보 - window.navigator: 웹 브라우저에 대한 정보들 window.innerWidth / innerHeight // 웹 브라우저 크기 ..
Document Object Model (DOM) - 웹 브라우저가 HTML 코드를 해석하여 구조화해놓는 객체 - document를 통해 HTML의 모든 요소에 접근할 수 있다. document에서 요소를 선택하는 메서드들 - document.getElementById('id') - document.getElementByClassName('className') - document.getElementByTagName('tagName') - document.querySelector('cssSelector') - document.querySelectorAll('cssSelector') 선택한 HTML 요소를 변경하는 방법 - element.innerHTML : 해당 요소의 내부의 내용을 채운다. 태그가 적용되..
이벤트 다루기 1. HTML 속성으로 이벤트 다루기 2. 자바스크립트로 해당 요소에 직접 추가하기 HTML로 이벤트 추가하기 (onEvent) Hello! Javascript로 이벤트 추가하기 (addEventListener) querySelector('CSS Selector'): CSS 선택자로 요소를 선택할 수 있다 (#id) const div2 = document.querySelector('#welcome2'); querySelectorAll('CSS Selector'): CSS 선택자로 요소들을 선택할 수 있다 (class) addEventListener('event', callback): 해당 요소에 이벤트를 추가한다. div2.addEventListener('click',(e) => { // ..
Array.forEach() - 배열의 모든 값으로 전달한 함수를 실행한다. const numbers = []; for (i = 0; i 화살표를 사용해 함수를 정의할 수도 있다. (Arrow Functi..
join(sep) : sep으로 이어붙인다. const snacks = ['초코파이', '초코하임', '화이트초코하임', '마가렛트', '치토스', '프링글스', '가나초콜렛', '양파링', '바나나킥', '오감자']; console.log(snacks); console.log(snacks.join("/")); push(item) : 배열의 맨 뒤에 원하는 값을 추가한다, 추가한 뒤에 길이를 반환한다. console.log(snacks.push('포스틱')); console.log(snacks.push('에이스')); pop() : 맨 뒤의 값을 꺼내면서 삭제 let item = snacks.pop(); console.log('방금 꺼낸 아이템(pop): ', item); console.log(snack..
