전체 글 (291) 썸네일형 리스트형 자바스크립트 to do list 만들기 자바스크립트 to do list 만들기 1. 입력란 만들기 📌 html로 구현 할 일 목록 추가 하기 📌 javascript로 구현 2. 해야 할 일 리스트 출력 📌 html로 구현 id 이름 태그를 붙이고 temp_html을 append 해서 구현할 수 있을 것이다. 📌 javascript로 구현 추가하기 버튼을 클릭하면, div 요소가 생기고 div요소 안에 appendChild를 이용해 체크박스, 해야할일, 버튼을 넣어준다. 만약 input 값이 없다면, 해야할 일 리스트에 추가하지 못하도록 다음과 같이 코드를 수정해준다. addButton.addEventListener('click', () => { if(input.value !== ''){ const div = document.createElem.. 자바스크립트 이벤트 활용2 자바스크립트 이벤트 활용2 📌 글자 입력 양식 버튼 글자 입력 선택 체크박스 라디오버튼 버튼 버튼1 📌 입력 양식을 기반으로 inch 받아 cm로 변환 inch 계산 글자 입력 📌 이메일 형식 확인하기 선택 📌 드롭다운 목록 활용하기 드롭다운 목록은 기본적으로 select 태그로 구현합니다. 떡볶이 순대 오뎅 튀김 선택: 떡볶이 📌 multiple select태그 multiple 속성을 부여하면 ctrl키 또는 shift키를 누르고 여러 항목을 선택할 수 있다. 떡볶이 순대 오뎅 튀김 📌 cm 단위를 여러 단위로 변환하는 프로그램 cm = 0 mm m inch cm = mm m inch 📌 코드 리뷰 value 속성 : 값을 추출! keydown → keypress → 입력양식에 값이 들어감! → key.. 자바스크립트 이벤트 활용1 자바스크립트 이벤트 활용1 입력양식(form)에 관련해 내용을 알기 위해서는 HTML 기본에 대한 공부가 필요합니다. 📌 이벤트 모델(event model) 이벤트를 연결하는 방법 📌 키보드 이벤트 keydown : 키가 눌릴 때 실행. 키보드를 꾹 누르고 있을 때도, 입력될 때도 실행 keypress : 키가 입력되었을 때 실행. keyup : 키보드에서 키가 떨어질 때 실행 keypress는 웹브라우저에 따라 한국어, 중국어, 일본어를 제대로 처리하지 못하는 문제가 있어서 일반적으로 keyup 이벤트를 사용합니다. 📌 글자수 출력하기 textarea.addEventListener('keyup', () => { h1.textContent = `글자 수: ${textarea.value.length}` }.. 이전 1 ··· 89 90 91 92 93 94 95 ··· 97 다음
