한 줄의 JS 없이 온도 변환기 만들기

이것은 HTML로 구성 요소를 구축하기 위해 HyperTalk에서 영감을 받아 웹용으로 설계된 스크립팅 언어hyperscript를 사용하는 방법에 대한 일련의 게시물 중 두 번째입니다. 첫 번째 소개 게시물을 살펴보고 싶다면 여기에서 확인할 수 있습니다.

JS 한 줄 없이 Counter 컴포넌트 만들기

Rajasegar Chandran ・ 3월 4일 ・ 3분 읽기

#html #htmx #hyperscript #javascript

이 게시물에서는 섭씨 값을 화씨 값으로 또는 그 반대로 변환하는 온도 변환기 구성 요소를 빌드할 것입니다. 이 구성 요소는 관련된 복잡성과 코드를 벤치마킹하기 위해 다양한 언어와 프레임워크로 간단한 사용자 인터페이스를 구축하는 7GUIs 프로젝트에서 영감을 받았습니다.

따라서 먼저 HTML 코드로 들어가 각 코드 행이 수행하는 작업을 살펴보겠습니다.

코드

<script src="https://unpkg.com/[email protected]"></script>
<p>
  <input id="txtCel" type="number" _="on change set #txtFah.value to  ( 32 + (me.value * (9/5))).toFixed(1) "  value="0"> Celcius = 
  <input id="txtFah" type="number"  _="on change set #txtCel.value to ((5/9) * (me.value - 32)).toFixed(1)" value="32"> Fahrenheit
</p>

첫 번째 게시물에서 약속했듯이 모든 코드 예제는 간결하며 간단한 UI 구성 요소를 구현하는 데 몇 줄만 있습니다.

코드의 첫 번째 줄은 unpkg CDN에서 hyperscript 라이브러리를 가져오는 것입니다. 유형이 number 인 두 개의 입력 요소를 생성합니다. 하나는 섭씨 값이고 다른 하나는 화씨 값입니다.

그런 다음 각 입력의 onChange 이벤트를 정의하여 간단한 공식을 기반으로 서로 파생되는 섭씨 및 화씨 값을 업데이트합니다. 따라서 섭씨 값을 업데이트하면 이를 기준으로 화씨 값이 자동으로 계산됩니다.

<input id="txtCel" type="number" _="on change set #txtFah.value to  ( 32 + (me.value * (9/5))).toFixed(1) "  value="0">

위의 스크립트는

On the 'change' event for this input, set the value of the element with id `txtFah` to the calculated value based on the current element's (me) value and round it off to one decimal point

on 기능을 사용하면 이벤트 처리기를 HTML에 직접 포함하고 하이퍼스크립트로 이벤트에 응답할 수 있습니다.

<button _="on click add .clicked">
  Add The "clicked" Class To Me
</button>

밑줄(_) 속성은 하이퍼스크립트 런타임이 기본적으로 요소에서 하이퍼스크립트를 찾는 위치입니다.

하이퍼스크립트를 사용하는 기본 제공me 객체와 해당 요소 식별자를 사용하는 다른 입력 요소를 사용하여 이벤트 핸들러의 현재 요소에 액세스할 수 있습니다. 할당은 하이퍼스크립트에서 set 명령을 사용하여 수행할 수 있으며 마지막으로 Javascript에서 toFixed 함수를 사용하여 소수점 이하 한 자리에서 값을 반올림합니다.

이 Codepen에서 작동 중인 구성 요소를 살펴볼 수 있습니다.