쌓고 쌓다

실행 결과 기능 1. 텍스트 입력 후 추가버튼 클릭 시 목록에 추가. 2. 목록의 좌측 체크박스를 클릭시 취소선 발생. 3. 삭제 버튼 클릭시 목록을 제거 코드 구현 1. body 부분 To Do List 추가 example 삭제 아직 html과 css를 공부하지 않아서 div가 정확히 무엇인지 모르겠으나 영역을 나누는 태그 같다. 이것을 할 일 리스트를 분할하였고 그 안에서도 div로 목록마다 영역을 만들어 추가하는 방식이다. 목록을 넣기위해 입력하는 부분의 id를 "toDo" 목록의 내용을 추가하는 버튼을 "addButton" 목록들을 가지는 목록 리스트를 "toDoList"로 분할하였다. 각 할일 목록은 아래의 형태로 구성한다. 체크박스를 위한 input 태그와 내용을 위한 span 해당 목록 삭제..

먼저, 클래스를 사용하지 않고 객체를 생성하여 사용하는 방법들을 보이겠다. 객체 배열 생성 const students = [] students.push({이름: '홍길동', 국어: 10, 영어: 10}) students.push({이름: '철수', 국어: 20, 영어: 20}) console.log(JSON.stringify(students, null, 2)) students 배열에 객체들을 넣었다. 객체 배열 조회 let output = '이름\t국어\t영어\n' for(const s of students) { output += `${s.이름}\t${s.국어}\t${s.영어}\n` } console.log(output) 객체를 처리하는 함수 선언 및 출력 function getSumOf(student)..

기본 예외 처리 조건문을 사용하여 예외 처리하는 것을 기본 예외 처리라고 한다. 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으로 지정하면 ..