한 줄의 JS 없이 Flight Booker 구성 요소 만들기

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

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

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

#html #htmx #hyperscript #javascript

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

Rajasegar Chandran ・ 3월 5일 ・ 2분 읽기

#html #htmx #hyperscript #javascript

이 게시물에서는 GUI 프로그래밍에 대한 더 나은 접근 방식을 식별하고 전파하여 궁극적으로 프로그래밍을 발전시키는 데 도움이 되는 7GUIs 챌린지에서 Flight Booking 구성 요소를 구축할 것입니다.

7GUI의 작업에 대한 아이디어는 작업 세트가 가능한 한 작아야 하지만 GUI 프로그래밍에서 가능한 한 많은 기본적이거나 대표적인 문제를 반영해야 한다는 것입니다.

여기에서 우리의 UI는 3개의 구성 요소, 편도 또는 왕복 비행 유형을 선택하기 위한 하나의 선택 상자, 여정의 시작 날짜와 종료 날짜에 대한 두 개의 날짜 입력 필드를 포함합니다. 사용자가 비행 유형을 편도로 선택하면 to date 필드를 비활성화해야 합니다. 사용자가 예약 버튼을 클릭하면 항공편 세부 정보를 제공하는 경고를 표시해야 합니다.

마크업

<select id="lstFlight">
  <option value="oneway">one-way</option>
  <option value="return">return</option>
</select>
<p><input id="txtFrom" type="date"/></p>
<p><input id="txtTo" type="date" disabled/></p>
<button type="button">Book</button>

하이퍼스크립트로 이벤트 처리

하이퍼스크립트를 사용하면 표현 문법이 있는 HTML 속성 자체에 이벤트 처리 코드를 포함할 수 있습니다. 따라서 우리의 경우 선택 상자와 버튼에 대해 각각 change 이벤트와 click 이벤트를 처리해야 합니다.

먼저 선택 상자를 살펴보겠습니다. 여기서 선택 상자의 변경 이벤트에서 해야 할 일은 선택한 값에 따라 to 날짜 필드를 비활성화해야 한다는 것입니다.
이를 위해 _ 요소의 select 특성을 사용하여 아래와 같이 하이퍼스크립트 이벤트 처리 코드를 작성할 수 있습니다.

<select id="lstFlight" _="on change if me.value === 'return' then remove [disabled='true'] from #txtTo else add [disabled='true'] to #txtTo end">

현재 요소(me)의 값이 'return'이면 #txtTo 텍스트에서 disabled='true' 속성을 제거하면 이벤트 처리 하이퍼스크립트의 문자 그대로 번역은 "on the change event of this element 입니다. 상자에 그렇지 않으면 disabled='true' 속성 "을 추가합니다.

위의 논리를 바닐라 자바스크립트로 작성해야 한다면 다음과 같을 것입니다.

const lstFlight = document.getElementById('lstFlight');
lstFlight.addEventListener('change', (ev) => {
  const txtTo = document.getElementById('txtTo');
  if(ev.target.value === 'return') {
    txtTo.disabled = false;
  } else {
    txtTo.disabled = true;
  }
});

다음으로 버튼의 경우 이와 같이 클릭 이벤트를 처리해야 합니다.

<button type="button" _="on click set message to 'You booked ' + #lstFlight.value + ' flight from ' + #txtFrom.value + ' to ' + #txtTo.value then call alert(message)">Book</button>

위의 코드는 버튼의 클릭 이벤트에서 message라는 임시 변수를 생성하고 항공편 유형 및 날짜가 있는 정보와 같은 값으로 값을 설정함을 알려줍니다.

하이퍼스크립트에서 set 명령을 사용하여 임시 변수를 만들 수 있습니다.

set <expression> to <expression>

그리고 call 명령을 사용하여 함수를 호출할 수 있습니다.

call <expression>

이 예제에서는 call 명령을 사용하여 이와 같이 기본 alert() 함수를 호출했습니다.

call alert('hello world')

공식 문서에서 하이퍼스크립트 명령here에 대해 자세히 알아볼 수 있습니다.

이것은 HTML 속성의 하이퍼스크립트 구문을 사용하여 각각의 DOM 요소에 연결된 모든 이벤트 핸들러가 있는 최종 코드입니다.

코드

<script src="https://unpkg.com/[email protected]"></script>
<select id="lstFlight" _="on change if me.value === 'return' then remove [disabled='true'] from #txtTo else add [disabled='true'] to #txtTo end">
  <option value="oneway">one-way</option>
    <option value="return">return</option>
</select>
<p><input id="txtFrom" type="date"/></p>
<p><input id="txtTo" type="date" disabled/></p>
<button type="button" _="on click set message to 'You booked ' + #lstFlight.value + ' flight from ' + #txtFrom.value + ' to ' + #txtTo.value then call alert(message)">Book</button>

이 Codepen에서 실제 데모를 볼 수 있습니다.