2015. 7. 12. 17:27
자바스트립트 맛보기 마지막 대표 예제 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