자바스크립트가 유용하게 쓰이는 용도의 세 번째는 바로 input 태그 관련이야.
웹페이지에서 input 태그를 이용해서 사용자의 입력을 받아 들여.
회원가입이나 로그인시에 아이디, 비번은 필수이고 그밖에 게시글을 쓸 때도 쓰이는 필수항목이지.
대부분의 웹페이지는 사용자의 입력을 받고 [전송] 버튼을 누르면 입력 내용을 서버로 보내게 되고, 이것을 받는 서버 측에서 내용을 검사해서 DB에 저장을 하거나 결과를 다시 보내 주는 방식으로 사용자와 통신을 하게 돼.
이 과정에서 사용자가 입력한 내용을 검사하는 것을
'유효성 검사' 라고 부르는데, 예를들어 비번을 넣지 않고 [로그인] 버튼을 누르면
"비밀번호를 입력하세요." 라는 메시지가 나오겠지?
또 제목을 넣지 않고 저장하려 한다든지 잘못된 날짜나 연락처를 입력했다든지, 아주 다양해.
대부분의 경우 이러한 유효성 체크는 자바스크립트 없이도 가능해.
바로 서버 쪽에서 체크하는 거야.
예를들어 비밀번호를 넣지 않고 [로그인]을 버튼을 눌렀다면, 일단 서버로 보내고 로그인 정보를 받는 서버측 파일에서 들어온 정보를 검사해서 비밀번호가 없으면 처리를 거부하고, echo 메시지와 함께 로그인 화면을 다시 보여 주는 방식이야.
그런데 이렇게 서버에서 체크하면 일단 서버로 정보를 보내야 돼. 즉, 트래픽이 발생하게 돼.
자바스크립트를 이용하면 서버에 정보를 보내기 전에 브라우저 자체 내에서 먼저 검사를 할 수 있어.
어떻게 하는지 한 번 살펴 볼까?
아래에 회원가입에서 많이 사용하는 form 양식이 있어.
1. 아래 내용을 복사해서 js.html 을 바꿔치고 저장해서 브라우저에서 확인해 봐.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바공부</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<form method="post" action="join.php" name="frm" onsubmit="return formCheck()" style="width:500px; margin:auto">
<table border="1px">
<tr><td>아이디</td> <td><input type="text" name="id"></td></tr>
<tr><td>비밀번호</td> <td><input type="password" name="pw1"></td></tr>
<tr><td>비밀번호확인</td><td><input type="password" name="pw2"></td></tr>
</table>
<input type="submit" name="submit" value="회원가입">
<input type="reset" name="reset" value="다시 입력">
</form>
<script>
function formCheck() {
if (frm.id.value == "") {
frm.id.focus();
alert("성명을 입력해 주십시오.");
return false;
}
if (frm.pw1.value == "" || frm.pw1.value != frm.pw2.value) {
frm.pw1.focus();
alert("비밀번호가 없거나 다릅니다.");
return false;
}
return true;
}
</script>
</body>
</html>
Html 쪽만 보면 form 내용에 아이디,비번을 입력해서 [회원가입] 버튼을 누르면 서버의 join.php 로 정보를 전송하는 일반적인 코드야.
그런데 <form ... 라인에 보면 onsubmit="return formCheck()" 라는 코드가 보이지?
이 코드가 자바스크립트에서 submit 을 보내기 전에 formCheck() 라는 함수를 실행해서 true 값이 나오면 전송을 진행하고 false 값이 오면 그냥 현재 화면에 머무르게 돼.
아래 <script>~</script> 쪽 코드를 볼까?
if (frm.id.value == "") {
frm.id.focus();
alert("성명을 입력해 주십시오.");
return false;
}
■ value, focus()
<form.. > 라인에 name="frm" 이라고 form 요소 전체의 이름을 정해 두면 frm 은 이 form 전체 구성요소를 하나의 객체로 인식하게 돼.
그러니 (frm.id.value == "") 는 "form 안에 있는 name="id" 라는 input 요소에 있는 값(value)이 없으면..." 이라는 조건이 되는거야.
조건에 맞으면 아래 줄 frm.id.focus() 의 focus() 는 이곳으로 커서를 이동해라 라는 뜻이고.
alert() 명령으로 메시지를 띠워 줘.
그리고 return false 를 만나면 더 이상 코드가 아래로 진행되지 않고 false 값을 가지고 함수를 호출했던 곳으로 빠져 나가.
이제 onsubmit="return formCheck()" 로 돌아가서 formCheck() 가 false 값으로 돌아오면 서버전송을 하지 않고 제자리에 있게 되는 거지.
좀 어렵지만 각 라인의 코드가 대충 이해는 되지?
아래쪽에 있는 if 절도 거의 비슷해
"비밀번호(pw1) 이 없거나 또는(||) 비밀번호(pw1)에 입력한 값과, 비밀번호확인(pw2)에 입력한 값이 다르면(!=) 메시지를 주고 pw1 칸에 커서를 이동해라." 는 뜻이야.
자바스크립트에서 || 기호는 or 를 뜻하고, and 기호는 && 를 사용해.
참고로 구글에서 다음과 같은 검색어로 찾아봐 :
자바스크립트 input 유효성 검사
나의 간단한 설명 보다 훨씬 더 자세하고 친절한 포스트들을 만날 수 있을거야.
■ 속성(Properity) 와 메소드(Method)
위에서 특정 input 안에 있는 값을 구할 때는 value 라는 명령을 사용했고, 커서를 이동시킬 때는 focus() 라는 명령을 사용했어.
그런데 하나는 괄호() 가 없고, 하나는 있는데 이게 뭘까? 큰 차이점이 있어.
자바스크립트에서 어떤 객체(요소) 뒤에 점(.)은 객체와 명령을 연결시키는 역할을 하고 뒤의 명령에 괄호가 없는 것은 속성(Property)을 나타내고 괄호() 가 있는 것은 동작(Method)을 하라는 명령을 뜻해.
보통 Property는 우리 말
'속성'이라고 해도 잘 어울리는데 Method 는 '방법?' 으로 해석하면 뭔가 좀 어색해서인지 보통 그냥 영어발음으로
'메소드'라고 불러.
우리가 배운 ( )가 있는 함수도 어떤 일(동작)을 하잖아. 대표적으로 alert() 도 메시지를 띠우는 동작을 하니 사실 메소드야.
반면 앞서 우리가 배웠던 배열의 크기를 알아내는 length 나 요소의 내용을 뜻하는 innerHTML 같은 것에는 괄호() 가 없어. 즉 이것들은 모두 '속성'이야. 어떤 객체나 요소에 대한 값을 가져 오거나 넣을 때는 바로 속성을 사용해.
설명이 좀 알쏭달쏭하지? 사실 나는 지금도 그래...ㅎ
이렇게 속성(Properity) 와 메소드(Method)를 사용해서 프로그램을 하는 기법을
'객체지향 프로그램(Object Orient Program - 줄여서
OOP)라고 불러.
자바스크립트 뿐만 아니라 요즘 대부분의 프로그램들은 대부분 OOP 방식이야.
이 OOP 방식이 좋다, 나쁘다에 대해선 아직도 많은 논쟁이 있지만, 자바스크립트는 이 방식으로 되어 있기 때문에 뭐 선택의 여지가 없어. 그냥 알아야 돼...ㅎ
(근데 나는 개인적으로 이 OOP 방식 별로 안 좋아해...ㅋ)
다시 우리 학습으로 돌아 와서
"그럼 속성에는 어떤게 있고, 메소드에는 어떤게 있을까?"
예를들어 input 의 값을 알고자 할때 value 라는 속성을 사용했어.
그런데 전장에서 div 내의 값을 변경할 때는 innerHTML 이라는 속성을 사용했잖아?
value, innerHTML 둘 다 내부의 값에 대한 속성인데 아무거나 쓰면 되나?
그것은 내가 선택한 객체(요소)에 다라 달라.
input 요소에서는 value 를 사용하고, div 나 p 같은 요소에서는 innerHTML 이라는 속성을 사용해.
그럼 다시 이런 생각이 들거야.
"그 많은 HTML과 CSS 의 태그에 대해 속성들이 다 다르면 어떻해?.. 어떻게 알아?"
맞아. 나도 불만이야...ㅎ
우선 각 요소에 대해 사용할 수 있는 속성과 메소드는 자바스크립트 메뉴얼에 다 나와있어.
그리고 실제로 우리가 코딩을 할 때 사용하는 건 수 많은 속성,메소드 중에서 몇가지 안돼.
쓰는 놈만 계속 사용하기 때문에 조금 공부하다 보면 따로 외우지 않아도 금방 익숙해 져.
실제로 우리들이 지금까지 공부하는 동안 사용한 거 몇가지 안되잖아.
앞으로도 맨날 그놈 들만 줄창 사용할거야.
그러다 뭐 하나 막히면 그때 찾아서 하나 더 배우고, 또 하나 배우면서 고수가 되어 가는 거야..ㅎ
잔소리가 너무 길었지?
그래도 이건 의외로 중요한 내용이어서 말을 하지 않을 수가 없네.
연습을 하나 더 해보고 이 번장을 마무리해 보자구.
■ 계산하기
수량, 단가를 입력하면 수량*단가 계산값을 금액 란에 보이게 하는 연습을 해볼거야.
이번에는 서버로 전송을 할게 아니고, 그냥 현재 페이지에서 보여주기만 하는 화면으로 꾸며 볼께.
1. 아래 내용을 복사해서 js.html 을 바꿔치거나, 다른 이름으로 저장해서 브라우저에서 확인해 봐.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바공부</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div style="width:500px; margin:auto">
<table border="1px">
<tr><td>수 량</td><td><input type="number" id="qty" onchange="calc()"></td></tr>
<tr><td>단 가</td><td><input type="number" id="unitPrice" onchange="calc()"></td></tr>
<tr><td>금 액</td><td><input type="text" id="price" readonly></td></tr>
</table>
</div>
<script>
function calc() {
var qty = document.getElementById('qty') ;
var unitPrice = document.getElementById('unitPrice') ;
var price = document.getElementById('price') ;
price.value = qty.value * unitPrice.value // 수량 * 단가
//price.value = Intl.NumberFormat().format(price.value); //- 천단위 컴마표시
}
</script>
</body>
</html>
이 코드에서 핵심은 onchange="calc()" 야.
onchange 는 input 입력내용에 변경이 있는 경우에 발생하는 자바스크립트 이벤트 코드야.
즉 input 박스에 무엇인가 입력하고 다른 곳으로 이동하는 순간 input 박스에는 onchange 이벤트가 일어나고 거기에 미리 지정해둔 calc() 라는 함수를 실행해.
input 박스에 갔다 나와도 입력내용에 아무 변화가 없으면 onchange 는 실행되지 않아.
지금 위 코드를 보면 [수량] 입력란과 [단가] 입력란에만 onchange 가 있어.
[금액]란은 사용자가 입력하는 자리가 아니고 수량*단가를 입력하면 합계금액을 보여주는 자리야.
그래서 입력할 수 없도록 readonly 속성을 주었어.
이제 수량, 단가에 숫자를 입력하면 onchange 가 발생하고 calc() 라는 함수가 실행되겠지?
calc() 함수는 이제 쉬워 보일거야.
getElementById 로 input 요소를 가져오고 value 속성으로 값을 가져와서 곱한 값을 price.value 에 넣었어.
그런데 일반적으로 숫자를 표시할 때 천단위가 넘으면 컴마로 구분해서 보이게 하는 것이 일반적이야.(1,234,567)
그것은 어떻게 할까?
자바스크립트나 또는 다른 언어에서 숫자는 보통 숫자와 마이너스 기호만 숫자로 인식해.
컴마나 다른 글자들이 같이 들어가 있으면 문자로 간주해.
위의 수량, 단가 입력란 input 의 type을 보면 number 로 지정했어. 그래서 숫자만 입력을 받아.
그런데 금액란을 보면 type="text" 로 했어.
그리고 위 코드의 맨 마지막 줄은 // 기호로 주석표시를 했는데, 이 주석을 지우고 다시 실행해 보면 천 단위 마다 컴마가 찍히는 것을 볼 수 있어. 바로 이 코드가 천단위 컴마를 만들어 주는 코드야.
그럼 여기서 또 의문이 생길거야.
"수량, 단가도 type="text" 로 하고 컴마가 생기게 하면 되지 않을까?"
당연히 되지. 그리고 실제로 더 많이 사용돼.
그런데 문제는 수량, 단가에 컴마가 들어간 숫자를 입력하면 자바스크립트는 문자로 인식하기 때문에 곱하기 계산을 못해.
어떻게 해결할 지는 여러분의 숙제로 남겨 둘께.
구글에서 "자바스크립트 천단위 컴마" 같은 검색어로 검색해 보면 금방 찾을 수 있을거야..