계산기하면 가계용에서부터 시작해 이공계용 카시오 계산기, Texas Instrument 사의 TI-89를 비롯 많은 모델들이 넘쳐날 정도이다. 그럼에도 불구하고 계산기를 대상으로 한 코딩의 영역은 대단히 흥미로운 주제로 부각된다.
즉 계산기 코딩은 단순히 수학적인 연산만을 위한 알고리듬 코딩도 있겠지만 요즈음에는 오히려 패션이라는 디자인 측면에서의 요인도 상당한 부각되고 있다. 아울러 그 응용 범위가 단순한 앱을 넘어서 홈페이지나 인트라넷 내부 요소로 자리 잡기 위해서는 코딩 과정에서 코드의 유연한 구조를 부여해야 할 필요도 있다.
이번 계산기 코딩은 사실 색감이 뛰어난 인도 프로그래머의 계산기 코딩사례에서 출발한다.
구체적인 내용은 아래의 싸이트를 참조하자.
Creating Calculator using HTML,CSS and JavaScript
https://www.codeproject.com/tips/631525/creating-calculator-using-html-css-and-javascript
계산기 기능에 제약이 있으므로 삼각함수와 로그함수 연산을 포함하도록 확장함과 동시에 아두이노 NodeMCU/WeMos보드를 사용한 웹서버형으로 코드를 구성해 보기로 한다. 즉 무선 공유기가 설치된 PC나 핫스팟이 가능한 스마트 폰에서 request를 보내면 불러 쓸 수 있도록웹서버형으로 코드를 작상하게 되면 계산기 기능 외에도 온습도 센서라든지 여타의 센서 데이터도 함께 와이파이로 전송하여 디스플레이하여 모니터링 할 수 있는 포텐셜이 생긴다.
Notepad++에 의한 계산기 코드 실행
일차적으로 인도 프로그래머가 제공하는 HTML/Java Script 루틴을 복사하여 실행시켜 볼 필요가 있다. 사용할만한 편집기로는 Notepad++ 과 P5.js의 index.html 이 될 것이다. Notepad++에서 HTML/Java Script 코드를 실행함에 있어서 웹브라저 선택이 가능한 반면에 index.html 의 경우 크롬으로 제한됨에 유의하자.
인도 프로그램머의 소스 코드를 크롬에서 실행해본 결과 CSS 에 의한 계산기 데코레이션이 심각하게 파손됨을 발견하였다. 대안으로 Internet Explorer를 사용하니 그 결과가 만족스러웠다. 따라서 이번 코딩에서는 Notepad++ 편집기를 사용 Internet Explorer에서 결과를 보도록 하겠다.
계산기 코드의 레이아웃
첫 번째 바디 태그 세트 사이에 웹페이지 헤딩과 아울러 웹서버 호출 request를 보내기 위한 Start 버튼을 코딩한다.
두 번째 헤드 태그 속에 스타일 태그를 두어 의한 멋있는 계산기 디자인을 위한 CSS 코드를 배치한다.
세 번째 다시 바디 태그를 두어 계산기 알고리듬을 포함하고 아울러 Java Script 코드를 위한 스크립트 태그를 포함시킨다.
이 HTML/Java Script 코드를 웹서버 코딩화 하기 이전에 HTML 편집기에서 테스트를 할 필요가 있다. 이 계산기 코드의 Java Script 부분은 비록 NodeMCU/WeMos에서 와이파이에 의하여 서비스 코드를 클라이언트인 PC나 스마트폰에 송신하더라도 HTML/Java Script 계산기 연산 자체는 클라이언트 웹이 있는 스마트 기기에서 이루어지기 때문에 HTML/Java Script 코드만을 따로 시험해볼 필요가 있는 것이다.
HTML 과 별도로 CSS는 색상, 모양, 출력, 위치 선정을 포함하여 다양한 웹 디자인 기능을 제공한다. 계산기를 꾸미기 위해서는 계산기 배경 속에 각종 버튼, 디스플레이 창을 두어야 할 것이다. CSS에 의한 꾸밈은 대체로 헤드태그속에 스타일태그를 두어 그 속에 위치시킨다.
CSS 코딩 대상은 주로 색상과 배경, 텍스트, 폰트, 박스 모델, 비쥬얼 포맷과 효과, 리스트, 테이블, 사용자 인터페이스를 포함한다.
계산기 HTML/Java Script 코드 실행
스팀잇 편집에서 태그 기호 사용이 곤란하므로 HTML/Java Script 코드는 역시 필자의 사이트인 아래 사이트를 방문하여 오픈 소스를 복사해서 사용하기 바란다.
HTML/자바스크립트 계산기 프로그램 예제
http://blog.daum.net/ejleep1/379
시작부분에 올려 둔 Interne Explorer 웹을 사용했을 때와 아래의 크롬을 사용했을 경우를 비교해 보자
HTML CSS 적용에 있어서 Internet Explorer와 상당한 차이점을 보여준다. 즉 크롬에서 이 코드를 사용하려면 특히 크기 파라메터들을 조절해야 할 필요가 있을 것이다.
계산기 입력 부분 코딩
키보드 입력 방식은 input 속성을 이용한다. type은 버튼식이며 버튼 위에 출력되어 있는 value 값은 키보드를 누름에 따라 즉 onclick 함에 따라 함수 v()에 문자 형태로 입력됨과 아울러 입력된 값들이 모두 합해져서 저장된다.
여기서 키보드 입력 0∼9 및 핑크 빛 연산자 + - * / 키보드 입력만 모두 합해진다.
마지막으로 주황색 = 키를 누르면 함수 e()를 호출하게 되며 계산을 위해서 문자로 저장되었던 연산 식 전체가 Java Script의 eval(document.getElementById("d").value))에 의해 계산이 이루어지고 출력된다. document.getElementById("d").value에서 d 자 속성은 display를 의미하며 vaule는 그때 그때 키보드를 누르면 값이 입력 된다. 예를 들어 클리어에 해당하는 “C” 른 누르면 value 값은 “” null 즉 아무것도 없음이 입력된다.
계산기 아두이노 웹서버 코딩
NodemCU/WeMs WiFi 보드를 사용하는 웹서버 코딩은 또 다른 기능을 부가하여 별도로 다루어 보도록 하자. 아직 웹서버 코딩화 하지는 않았지만 HTML을 실행하였을 때에 Start 버튼을 사용하지 않은 상태에서도 계산기가 잘 작동이 되는지 확인해 보도록 하자.