웹 페이지 만들고 배포하기 – 자바스크립트(JavaScript)

자바스크립트를 사용하여 웹페이지 만들고 배포하기

HTML로 웹 페이지를 구성하여 사용자 입력을 받은 데이터를 자바스크립트로 가공하여 특정한 값을 출력하는 간단한 웹 서비스(민망합니다.)를 만들었습니다. 자바스크립트로 사용자 입력을 제어하고 함수를 통해 계산하고 JSON 타입의 오브젝트 배열에 접근하여 자료를 참조도 해봅니다.

이번 웹 페이지를 작성하며 자바스크립트의 문법과 스크립트가 어떤 구조로 실행되는지를 조금 맛본 것 같습니다. 스크립트 언어라 쉽게만 생각했는데 자바스크립트의 장점과 단점을 모두 경험하는 좋은 계기가 되었네요. 아직 부족한 것이 많지만 그동안 작성된 스크립트를 아래와 같이 소개해 봅니다.

---

엑셀 데이터 몇 가지를 JSON 타입의 오브젝트 배열로 만들어 const 선언을 통해 상수를 만듭니다. 그리고 torque_calc()함수 내에서 변수사용에 제한을 없애기 위해 대부분 전역변수로 선언하였습니다. (엑셀 데이터를 손쉽게 JSON 타입의 데이터로 변환해 주는 사이트가 있어 안내해 드립니다.)

 

Mr. Data Converter

 

밸브 토크 계산에 필요한 상수값 입력

const로 선언된 2개의 오브젝트 배열과 1개의 오브젝트는 접근 방법이 다릅니다. pitch_data의 경우 굳이 오브젝트로 만들 필요는 없었으나 자바스크립트 학습 차원에서 오브젝트 형태로 만든 후 사용합니다.

 

HTML에서 onclick="torque_calc()"로 자바스크립트의 함수를 실행합니다.

 

HTML에서 값을 읽어 변수에 입력

HTML에서 DIV태그 아이디를 식별하여 값을 읽어옴

맨 처음 사용자 입력받은 데이터를 상기와 같이 읽어 변수명에 입력합니다.

밸브 토크 계산을 위한 유체의 특성 입력

HTML 에서 설정된 버튼에서 지정된 값을 가져옴

상기 함수는 유체 타입을 HTML에서 버튼으로 입력받아 그 타입에 따른 상숫값을 갖게 합니다. 지금은 유체 타입이 두 가지로 설정되어 간단하게 조건문으로 해결할 수 있었으나 나중에 여러 가지 유체가 설정되더라도(버튼이 늘어나더라도) 바로 적용 가능하도록 함수를 만들어 처리합니다.

유체의 온도 입력

유체타입에 따른 특정값을 변수에 입력하여 오브젝트에 특정 값을 찾을 때 사용

 

상기 함수는 유체 타입과 유체의 온도에 따라 L1, L2, G1, G2의 값을 갖도록 합니다. 이렇게 입력된 데이터는 오브젝트 배열에서 특정한 값을 검색할 때 사용하게 됩니다.

입력된 정보를 바탕으로 밸브 작동 토크 계산

각 변수에 해당하는 값을 오브젝트 배열에서 찾고 계산

 

여기에서 실질적인 계산 과정이 이뤄지도록 합니다. 함수들은 모두 본 스크립트보다 아래에서 선언되었지만 호이스팅(Hoisting) 되어 원하는 계산 과정을 수행하거나 오브젝트 또는 오브젝트 배열에서 값을 읽어오게 합니다.

 

계산된 토크값을 화면에 출력

간단하게 입력된 데이터를 검증하고 별 문제가 없다면 출력합니다.

 

조건문을 통해 일부 데이터를 검증하고 문제가 없다면 결괏값을 result 변수에 마크업 하여 출력하도록 하였습니다. 여기에서 특이한 점은 최초 데이터 검증을 먼저 한 후 본 함수를 실행시켰으나 원하는 결과가 나오지 않아 부득이 우선 계산 후 데이터를 검증하게 됩니다. console.log를 통해 그때그때 결괏값을 확인하며 코딩을 진행하고 원하는 결과가 출력되었을 때 주석 처리하였습니다.

오브젝트 배열에서 값을 찾기 위한 함수

 

상기 함수는 오브젝트 배열에 접근하여 필요한 값을 읽을 수 있도록 만든 함수입니다. 여기까지가 제가 원하는 결과물을 계산하고 출력하기 위한 함수입니다. onclick에 따라 실행하고 결과를 마크업 하여 출력하는 코드입니다.

HTML에서 특정값을 입력했을 때 데이터의 유효성 검증

 

상기 함수는 어떠한 숫자가 사용자 입력되더라도 19~160 범위 내 미리 설정된 임의의 값으로 입력되게끔 만들었습니다. 그리고 정규식을 이용하여 밸브 사이즈를 검증하도록 하였으나 생각해 보니 사이즈는 계산식에 포함되지도 않아 주석 처리하였습니다. 정규식이 유용하긴 하더군요.( /(^\d*[02468]$)|(2.5|3|5)/ 정규식은 모든 숫자 중 짝수와 2.5, 3, 5만 매치하도록 합니다.) 그리고 반복문을 통해 미리 지정한 배열 값과 비교하여 가장 근삿값을 찾고 근삿값 중 상위 값으로 반환 후 원하는 입력창으로 focus 하게 만들었습니다.

 

---

코드를 좀 더 구조적으로 작성하고 싶었으나 아직 실력이 미천해서 수정해야 할 부분이 많아 보입니다. 하지만 처음 계획한 그림의 80~90% 완성도는 나타낸 것 같아 다음 작업을 위해 여기서 마무리합니다. 다음엔 아마 좀 더 나아지긋죠? 아래에 제가 작성한 스크립트 파일과 배포된 페이지를 링크합니다.

Torque & Thrust Calculation