해당 실습은 JavaScript의 event 속성, DOM 객체에 대한 사전 예습이 필요합니다.

• 👉🏼 JavaScript event 예습하기
• 👉🏼 HTML DOM 객체 예습하기

실습 1: 계산기 프로그램 만들기

<aside> 💡 목표: 더하기, 빼기, 곱하기, 나누기가 가능한 계산기 만들기

</aside>

진행 순서

1️⃣ HTML로 위의 사진과 같은 table 만들기

힌트: colspan, rowspan이라는 property(속성)를 활용해보기

2️⃣ 계산기를 동작하도록 하는 JavaScript 코드 작성하기

• 숫자와 연산자를 누를 때마다 입력을 받는 함수

입력할 때마다 계산 결과가 계산 화면에 누적되도록 구현하기 (그렇지 않으면 굉장히 복잡해짐..!)

• 계산을 수행하는 함수

계산은 = 버튼을 눌렀을 때 마지막에 한번에!

힌트: eval() 함수 활용해보기

• clear 버튼을 눌렀을 때 여태까지의 계산 과정을 지워주는 함수

3️⃣ HTML 코드에 event 추가하기

힌트: onclick 이벤트 활용해보기

• source code

실습 2: 달력 프로그램 만들기

<aside> 💡 목표: 이번 달, 지난 달, 다음 달.. 등등의 날짜 정보를 보여줄 수 있는 달력 만들기

</aside>

진행 순서