입문 · 6개 강의
브라우저 JavaScript로 만드는 첫 할 일 목록
HTML과 CSS를 익힌 초보자가 입력과 버튼에 반응하는 할 일 목록을 여섯 단계로 완성합니다. 각 강의는 이전 단계의 결과물에 기능 하나씩을 더하며, 학습 시간은 추정치입니다.
첫 강의 시작하기
이 코스에서 배우는 것
- JavaScript로 화면 요소를 선택하고 버튼 이벤트에 반응할 수 있다.
- 입력값을 검증하고 할 일 항목을 추가하거나 삭제할 수 있다.
- 목록의 상태를 화면에 표시하고 완성된 동작을 점검할 수 있다.
이런 분에게 추천해요
HTML 문서와 기본 CSS를 작성할 수 있고 브라우저 JavaScript를 처음 배우는 입문자
시작하기 전에
- HTML 요소와 입력 폼의 기초
- CSS 선택자와 기본 스타일 적용
- 브라우저에서 HTML 파일을 열고 개발자 도구의 콘솔을 확인하는 방법
강의 목록
위에서부터 순서대로 따라오세요01
웹 기초 · 입문
약 20분02할 일 화면을 준비하고 요소 선택하기
입력창, 추가 버튼, 빈 목록을 갖춘 HTML에 JavaScript를 연결하고 필요한 요소를 선택합니다. 작은 실행 예제로 선택한 요소를 콘솔에서 확인합니다.
웹 기초 · 입문
약 20분03버튼 클릭에 반응해 입력값 읽기
선택한 버튼에 클릭 이벤트를 연결하고 입력창의 현재 값을 읽습니다. 작은 실행 예제로 버튼을 누를 때 입력한 글자를 콘솔에 표시합니다.
웹 기초 · 입문
약 20분04빈 입력을 막고 안내하기
읽어 온 입력값의 앞뒤 공백을 제거하고 빈 값인지 검사합니다. 작은 실행 예제로 빈 입력에는 안내 문구를 표시하고 유효한 입력은 다음 처리 단계로 전달합니다.
웹 기초 · 입문
약 25분05검증한 할 일을 목록에 추가하기
유효한 입력으로 목록 항목을 만들고 화면에 추가합니다. 작은 실행 예제로 여러 할 일을 차례로 추가하고 입력창을 비웁니다.
웹 기초 · 입문
약 25분06각 할 일에 삭제 버튼 붙이기
새 항목마다 삭제 버튼을 만들고 해당 항목을 지우는 이벤트를 연결합니다. 작은 실행 예제로 여러 항목 중 선택한 하나만 삭제합니다.
웹 기초 · 입문
약 25분목록 상태 표시와 최종 점검
항목 수와 빈 목록 안내를 추가·삭제 결과에 맞춰 갱신합니다. 작은 실행 예제로 처음 화면부터 여러 항목의 추가와 삭제까지 확인하고, 새로고침하면 목록이 초기화되는 현재 동작을 점검합니다.
예상 시간은 설명 읽기·실행·연습을 포함한 추정치입니다. 읽는 속도와 경험에 따라 달라집니다.