Processing 의 Java 모드가 아닌 P5.js 모드를 HTML 편집기로 활용해 보자. Notepad++ 같은 우수한 무료 편집기를 사용해도 무방하며 아울러 P5.js 모드에서 항상 수반되는 index.html을 HTML 및 Java Script 편집기로 사용하는 것도 괜찮은 방법일 듯 하다.
HTML 및 Java Script 코딩을 배우기 위한 뛰어난 예제를 들라고 하면 시계 코딩과 아울러 계산기(Calculartor)를 들 수 있다.
일단 Processing 편집기를 열어서 P5.js 모드를 선택하자.
P5.js 모드 선택에 따라 편집기에 index.html 탭이 추가됨을 확인할 수 있다. 일단 calculatorjs_01로 파일명을 부여하고 index.html 탭을 눌러 index.html 편집 화면으로 이동하자.
Processing P5.js 파일명이 index.html src=“⚫⚫⚫ 라인에 나타나야 한다. 때로는 처음 New 상태의 index.html src=“sketch_18602a⚫⚫⚫ 와 같이 나타날 수도 있지만 아래와 같이 고쳐쓰도록 하고 타이틀 즉 제목을 정의하는 html 명령 1줄을 추가하자.
바디 태그를 배경색과 텍스트 유형을 지정하는 형태로 다음과 같이 편집한다.
아울러 바디 태그 사이에 계산기 알고리듬 코드를 복사하여 index.html에 삽입한다. 이 계산기 코드는 아래의 인터넷 사이트에서 복사해 올 수 있는 오픈 소스 html 코드이다.
https://www.wikihow.com/Create-a-Calculator-Using-HTML
HTML 계산기 코딩이 완료되었으므로 반드시 index.html 저장 작업을 실행해야 한다.
실행 버튼을 누르면 아주 단순한 형태의 계산기가 아래와 같이 나타난다. 5+3*8을 입력 후 = 버튼을 누르면 계산 결과를 볼 수 있다.
물론 HTML 코딩이기는 하나 한편으로 eval(“계산식”) 명령은 Java Script 의 계산기 명령임에 유의하자. eval() 명령은 박스에 입력되는 계산식을 문자열 형태로 넣어주면 알아서 연산 결과를 돌려준다. 지금 계산기에는 나타나 있지 않지만 삼각함수, 로그함수 및 엑스포넨셜 함수 모두를 포함한다.