자바스트립트로 입력한 data가 참인지 거짓인지 그 결과물 출력하기



자바스트립트 맛보기 마지막 대표 예제 4번

JavaScript로 할 수 있는 대표 적인 4가지 예제, 오늘은 마지막으로 대표 예제 4번이다.
자바스크립트를 이용하여 사용자가 입력한 값이 참인지 거짓인지를 구분하여 화면에 출력하는 코딩에 대하여 공부해 보자.


사용자가 입력한 data가 참인지 거짓인지에 대한 결과물 출력하기


먼저 이 예제에 대한 결과물를 확인해 보자.
아래에서 빈칸에 임의의 숫자를 입력하고 '제출'을 클릭하여 결과를 확인해 보자.

하나씩 코딩을 풀이해 보자
1. HTML 코딩
(1) <input>태그
<p>아래 칸에 1과 10사이의 숫자를 입력하세요!</p>
<input id="first" type="number">

● <input>태그로 웹페이지에서 사용자가 숫자를 입력할 수 있는 네모칸을 만든다. 이 HTML요소의 아이디는 'first'로 지정했고 입력 데이터의 type은 'number(숫자)'로 설정했다.

(2) <button>태그
<button type="button" onclick="resultTrueFalse()">제출</button>
<p id="second"></p>

● <button>태그로 입력칸 오른쪽에 '제출'이라는 버튼을 만든다. 이 버튼을 onclick했을  때 'resultTureFalse'라는 이름을 가진 함수가 작동하도록 지정했다.
● <p>태그와 </p>태그 사이에 내용물이 없도록 코딩하고, 아이디를 'second'로 지정했다. 뒤에 나오는 함수에서 그 결과값을 이 <p>태그에 집어 놓도록 코딩할 것이다.

(3) <script>태그 - 여기서 부터 JavaScript!
<script>
function resultTrueFalse() {
    var x, text;
    x = document.getElementById("first").value;
    if (isNaN(x) || x < 1 || x > 10) {
        text = "유효하지 않은 값 입니다.";
    } else {
        text = "유효한 값 입니다!";
    }
    document.getElementById("second").innerHTML = text;
}
</script>

● 함수 resultTrueFalse를 선언한다. 이 함수를 정의함에 있어 변수, 조건문, isNaN( ) 메서드, || 논리연산자를 사용한다.
● 변수 x 에는 'first' 아이디를 가진 HTMl요소의 값에 접근하여 그 값을 가져오게 하기 위한 명령어를 대입 한다. x = document.getElementById("first").value;
● 변수 text 에는 "유효하지 않은 값 입니다", "유효한 값 입니다"를 각각 대입 한다.
● 조건문 if절에는 || 논리연산자(or 연산자)를 사용하여 세가지 중 하나라도 참이라면 '유효하지 않은 값입니다'를 나타내게 한다. isNaN(x)는 변수 x에 대입한 것이 문자이면 false이고, 숫자이면 true라는 값을 도출하게 하는 함수이다. 
● else절은 그 밖에 다른 것이면 '유효한 값 입니다'를 나타내게 된다.
● second 아이디를 가진 HTML요소에 접근하여, 변수 text에 대입될 값을 화면에 출력 한다. document.getElementById("second").innerHTML= text ;


  Comments,     Trackbacks