쌓고 쌓다

기본 예외 처리 조건문을 사용하여 예외 처리하는 것을 기본 예외 처리라고 한다. body 태그 내부에 h1 태그가 없을 수도 있기에 조건문으로 아래처럼 기본 예외 처리 가능하다. document.addEventListener('DOMContentLoaded', () => { const h1 = document.querySelector('h1') if(h1) { h1.textContent = 'h1 태그' } else { console.log('h1 태그가 존재하지 않습니다.') } }) 고급 예외 처리 try catch finally 구문을 사용해서 예외를 처리하는 것을 고급 예외 처리라고 한다. 형태 try { // 예외가 발생할만한 코드 } catch (exception) { // 예외가 발생했을때 ..

localStorage 객체 localStorage는 웹 브라우저가 기본적으로 제공하는 객체이다. 웹 브라우저에서 제공해주는 기능을 웹 API라고 한다. 이것으로 웹 브라우저에 데이터를 저장할 수 있다. 주요 메소드 메소드 설명 localStorage.getItem(키) 지정된 값을 추출한다. 없으면 undefined가 나옴. localStorage.키 형태로 사용 가능. localStorage.setItem(키, 값) 키로 값을 저장합니다. localStorage.키 = 값 형태로 사용 가능. localStorage.removeItem(키) 특정 키 값을 제거. localStorage.clear() 저장된 모든 값을 제거. 코드 document.addEventListener('DOMContentLoad..

드롭다운 목록 cm단위를 여러 단위로 바꿔 보자. cm를 mm, m, inch로 바꿀 때 각각 10, 0.01, 0.393701을 곱한다. 코드 document.addEventListener('DOMContentLoaded', () => { let 현재값 let 변환상수 const input = document.querySelector('input') const select = document.querySelector('select') const span = document.querySelector('span') const calculate = () => { return 현재값 * 변환상수 } select.addEventListener('change', (event) => { const option = ..

사용자로부터 입력받을 때 사용하는 요소를 입력 양식(form)이라고 한다. HTML에서 input, textarea, button, select 태그 등이 입력 양식이다. EX) 계산 태그(button)를 누르면 input 태그에 연산을 가한 결과를 p 태그에 출력해 보자. 코드 document.addEventListener('DOMContentLoaded', () => { const input = document.querySelector('input') const button = document.querySelector('button') const p = document.querySelector('p') button.addEventListener('click', (event) => { const inp..

이벤트 모델 이벤트를 연결하는 방법을 이벤트 모델이라고 한다. 종류 1. 표준 이벤트 모델 document.body.addEventListener('keyup', () => { ... }) addEventListener 메소드를 사용하는 방법이다. 2. 고전 이벤트 모델 document.body.onkeyup = (event) => { ... } 문서 객체가 갖고 있는 on...으로 시작하는 속성에 함수를 할당하여 이벤트를 연결하는 방법이다. 3. 인라인 이벤트 모델 HTML 요소의 on... 속성에 자바스크립트 코드를 넣는 방법이다. * 모든 이벤트 모델의 이벤트 리스너에 첫번째 매개변수로 event를 받는다. 이것을 이벤트 객체라고 한다. 이벤트 객체에는 이벤트에 대한 상세한 정보를 갖는다. text..

document.addEventListener('DOMContentLoaded', () => {})의 코드는 document라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때, 매개변수로 지정한 콜백 함수를 실행하라이다. 이벤트 연결 모든 문서 객체는 생성되거나 클릭, 마우스를 올리거나 할때 이벤트가 발생된다. 이 이벤트가 발생할 때 실행할 함수는 addEventListener()를 통해 실행한다. 형태는 아래와 같다. 문서 객체.addEventListener(이벤트 이름, 콜백 함수) 이벤트가 발생할 때 실행할 함수(콜백 함수)를 이벤트 리스너 또는 이벤트 핸들러라고 부른다. EX) h1 태그를 클릭할때 카운트 해보자. 클릭 횟수: 0 user-select 속성을 non으로 지정하면 ..

문서 객체 가져오기 document.body로 body의 요소를 읽어 들일 수 있고 아래와 같은 방법들로도 요소 읽기가 가능하다. document.head ducument.body document.title head, body, 요소 내부에 만든 다른 요소들은 별도의 메소드를 통해 접근한다. document.querySelector(선택자) document.querySelectorAll(선택자) querySelector 메소드는 요소를 하나만 추출하고, querySelectorAll 메소드는 문서 객체 여러 개를 추출한다. 선택자 부분에 CSS 선택자를 사용한다. 이름 선택자 형태 설명 태그 선택자 태그 특정 태그를 가진 요소 추출 아이디 선택자 #아이디 특정 id 속성을 가진 요소 추출 클래스 선택자 ..

HTML에서 html, head, body, title, h1, div 등을 요소(element)라고 부른다. JavaScript에서는 이를 문서 객체(document object)라고 부른다. 문서 객체 모델(DOM:Document Objects Model) : 문서 객체를 조합해서 만든 전체적인 형태 DOMContentLoaded 이벤트 html 페이지는 코드를 위에서 아래로 차례대로 실행한다. body 태그가 생성되기 전에 head 태그에서 body 태그에 무언가 출력은 한다면 문제가 발생한다. 아래의 코드를 보자. document.body.innerHTML로 body 안에 있는 html 코드를 조작한다. 1번째 h1 태그 2번째 h2 태그 실행 결과 head 태그 안에서 body 태그를 조작하는 ..