Calculator 2

16 Mar 2022

Toy Project

220314-Cal/index.html

HTML data type

Calculator 코딩

버튼 클릭시 data-type에 따라 동작을 다르게 처리하기 위해

숫자 버튼을 제외하고 data-type 속성을 추가

• All Clear button: data-type=”ad”
• operator(연산자) button: data-type=”operator”
• = button: data-type=”equals”

data-*속성은 지정 데이터 특성(custom data attributes)이라는

클래스를 형성함으로써 임의의 데이터를 스크립트로

HTML과 DOM사이에서 교환할 수 있는 방법

• DOM: Document Object Model
  HTML, XML문서의 프로그래밍 interface
  DOM은 구조화된 표현(strutured representation)을
  제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는
  방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을
  변경할 수 있게 도움
  DOM은 nodes와 object로 문서를 표현함 이들은
  웹 페이지를 스크립트 또는 프로그래밍 언어들에서
  사용할 수 있게 연결시켜주는 역할
  
  • WEB API ?
    

HTML문서를 구조, 객체화 해서

JS(프로그래밍언어)로 접근하는 방법을 제공하고

JS 문법(프로그래밍언어)으로

HTML문서를 다양하게 기능하도록 만드는 역할?

Web API, DOM 기본을 먼저 공부할 것

대신, 계산기 설계에 필요한 알고리즘은 보고 생각해도 될 듯