자바스크립트 개발 환경은 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.
자바스크립트 내에서 input입력 방법과 submit 하는 과정에 대해 한번 알아보자.
막상 처음 접할때는 많이 어렵지만, 천천히 게시글들을 따라오고나면 어렵지 않다는 것을 알 수 있다.
바로 코드를 통해 분석을 해보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html> <head> <title>test title</title> </head> <body> <h2> JavaScript </h2> <p id="test">자바 스크립트 </p> <input id="value"> <button type="button" onclick="func()"><< Submit >></button> <p id="output"></p> <script> function func(){ var x; x = document.getElementById("value").value; if (!(1 <= x && x <= 9)) document.getElementById("output").innerHTML = "0에서 9사이 값을 입력하세요."; else document.getElementById("output").innerHTML = x + "값이 제대로 입력되었습니다."; } </script> </body> </html> // This source code Copyright belongs to Crocus // If you want to see more? click here >> | Crocus |
<input id="value"> :: 인풋을 받아낼 폼을 의미한다. 이 폼이 존재해야 값을 입력 할 수 있다.
이 폼은 radio button이 될 수도 있고 다양한 방식으로 바뀔 수 있다.
<button type="button" ~> :: 이제 버튼을 통해 input값을 제출할 수 있는 submit 버튼이다.
이제 스크립트 코드를 보자.
버튼을 누르면 func()가 동작하는데
x에 value에 들어있던 값을 가져오게 된다.
그리고 조건문에 의해 x가 1~9사이 값이 아니라면 "0에서 9사이 값을 입력하세요."라고 뜬다.
정상적으로 입력했다면 x + "값이 제대로 입력되었습니다."라고 뜬다.
이로서 간단하게 인풋과 버튼을 이용한 submit을 할 수 있게 되었다.
이 과정을 이용하여 다양한 웹에 적용 시킬 수 있을 것이다.
두번째로 input에 다양한 속성을 추가해보자. 예를들면 최소, 최댓값을 넣어두는 방법을 써 볼 수도 있다.
아래 코드는 type를 number로 주고, min, max를 부여하여 인풋에 특정 범위 사이 값만 들어올 수 있게 하였다.
required는 인풋폼에 값이 꼭 들어와야한다는 의미이다.
만약 인풋폼을 고의로 조작하여 100같은 값을 넣으면 아래 if else문의 x.validationMessage에 의해 잘못된 값에 대한 메시지가 나타난다.
HTML Input 속성에 대한 더 많은 것을 알고싶다면 아래 링크를 참조하도록 한다.
https://www.w3schools.com/html/html_form_attributes.asp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <title>test title</title> </head> <body> <h2> JavaScript </h2> <p id="test">자바 스크립트 </p> <input id="value" type="number" min="1" max="9" required> <button type="button" onclick="func()"><< Submit >></button> <p id="output"></p> <script> function func() { var x = document.getElementById('value'); if (x.checkValidity() == true) document.getElementById('output').innerHTML = "유효한 값이 들어왔습니다."; else document.getElementById('output').innerHTML = x.validationMessage; } </script> </body> </html> // This source code Copyright belongs to Crocus // If you want to see more? click here >> | Crocus |
'Basic > JavaScript' 카테고리의 다른 글
| 자바스크립트 screen (0) | 2017.09.28 |
|---|---|
| 자바스크립트 window (0) | 2017.09.28 |
| 자바스크립트 use strict (0) | 2017.09.24 |
| addEventListener() 메서드 (0) | 2017.09.24 |
| 자바스크립트 애니메이션 이용하는 방법 (0) | 2017.09.23 |