자바스크립트 버튼 클릭 기초 for SAPUI5 핵심

자바스크립트 버튼 (button, input type=”button”) 태그는 사용자로부터 정보를 입력 받은 후 클릭을 통해 서버 등으로 데이터를 전송하거나 받을 때 필요한 객체 타입을 이야기 합니다. 자바스크립트를 활용해서 해당 button의 click, submit 그리고 input과 button 태그의 차이점 등을 기술하였습니다.

버튼 역시 이벤트 처리가 필요하므로 이벤트의 기초는 여기 에서 참고할 수 있습니다.

자바스크립트 버튼의 click event

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="button1">버튼 타입 2</button>
    <input type="button" value="버튼 타입 2">
  </body>
</html>

header 부분에 다음과 같은 자바스크립트 코드를 입력합니다.

미리 선언한 두 개의 button을 가져와서 클릭 이벤트를 적용하였습니다.


      document.addEventListener("DOMContentloaded", () => {
        const buttonType1 = document.querySelector( "#button1" );
        const buttonType2 = document.querySelector( "input[type=button]" )
 
        buttonType1.addEventListener( "click", ( event ) =>{
          event.currentTarget.textContent = "버튼 타입 1 클릭"
        })
 
        buttonType2.addEventListener( "click", ( event ) =>{
          event.currentTarget.textContent = "버튼 타입 2 클릭"
        })
 
      });

 

자바스크립트 버튼 submit의 기능 – form 이란

폼(Form)이란, 인터넷상에서의 입력 양식을 의미하게 됩니다. 여러 정보를 혹은 무언가를 입력할 수 있는 양식들을 이야기 하게 됩니다.

아래의 이미지의 경우 로그인 필드와 패스워드 필드가 입력을 받을 수 있도록 되어 있습니다.

로그인화면 등에서 form, submit를 볼 수 있음

이러한 폼을 만들 때 폼 태그를 사용하게 되며, 이걸 제출하는 것을 Submit, 위의 이미지에서 보이는 Sign in 버튼 등을 이용해서 처리하게 됩니다.

HTML 코드로는 다음과 같이 Form 태그를 사용하게 되며 submit를 처리할 수 있는 button 등이 내부에 배치되게 됩니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="submit">
      <input type="text">
//submit 타입으로 버튼을 생성해야 한다.

      <input type="submit" value="등록" id="button2"/>
    </form>
  </body>
</html>

이름을 입력받은 후 해당 이름을 가져와서 다른 페이지 등으로 전송하는 submit은 아래와 같이 자바스크립트 버튼 제어 로직을 세울 수 있습니다.

    
      //form 태그를 가져온다.

      const form = document.querySelector(  "form"  );
      //form 태그에 submit 이벤트 등록
      form.addEventListener( "submit",  ( event ) => {
        const name = document.querySelector( "#nameInput" );
        console.log( name.value )
      })
    

만약 Validation 조건 등을 걸어서 잘못된 이름 등이 들어왔을 때에는 화면이 리프레시 되면 안되므로 event.preventDefault() 등으로 기본값 기능을 막을 수 있습니다.

...

        if ( name.value.length <= 1 ){
          alert( "이름을 2글자 이상 입력해 주세요." );
  //유효성 체크 등으로 다른 화면으로 넘어가는 것을 막음
          event.preventDefault();
        }else{
// submit 로직 처리
        }
...

또 만약에 아래와 같이 form 태그 밑에 button 태그가 사용되면 해당 버튼은 무조건 submit 처리가 되므로 용도 맞게 사용이 되어야 합니다.

<form action="submit">
      이름을 입력하세요.

      <input type="text" id="nameInput">
      <input type="submit" value="등록" id="button2"/>
      <button id="button2">전송하기</button>
    </form>

아래와 같이 폼 태그 내에서의 BUTTON 태그는 기본값이 submit로 지정되어 있습니다.

자바스크립트 버튼 에 SUBMIT - form 태그 내의 button 태그는 submit의 역할을 하게됨

button 태그의 속성에는 default 값이 submit이기 때문이며 그래서 type을 명시적으로 사용하는 것이 좋습니다.

<button type="button" id="button2">전송하기</button>
//혹은 input 타입으로
<input type="button" value="전송하기2" id="button2" />

 

button 태그와 input 태그의 차이점은

button은 아래의 두가지 방식으로 button을 표현할 수 있습니다.

<button id="button1">버튼</button>
<input type="submit" value="버튼">

이 방식의 차이는, button 태그의 경우, 요소 내에 텍스트나 이미지 등을 넣을 수 있지만, input 태그를 사용한 경우에는 이를 넣을 수 없습니다. 즉, button 태그는 슬래시태그로 감싸 닫는 태그이고, input 태그는 스스로 닫는 태그입니다.

따라서 button 태그는 객체 트리 구조상 하위 객체 텍스트나 이미지 등을 포함할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head> </head>
  <body>
    <input type="button" value ="글자만" />
    <button type="button">
        글자 및 이미지 등 하위 객체 포함 가능
      <img
       src="https://sapui5.hana.ondemand.com/resources/sap/ui/documentation/sdk/images/logo_ui5.png"
        alt="arrow"
      />
    </button>
  </body>
</html>

실행결과는 다음과 같습니다.

자바스크립트 버튼 태그 객체는 하위에 다른 객체를 포함할 수 있다

이상으로 button 의 기초적인 자바스크립트 처리에 대해서 알아보았습니다. 더 자세한 내용은 모질라 여기 문서 를 참조하시기 바랍니다.