자바스크립트 소개
자바스크립트는 웹 브라우저에서 실행되는 스크립트 언어다.
웹 브라우저에는 자바스크립트 엔진이 탑재되어 있다.
하지만 탑재된 엔진이 똑같지 않으므로 대표적인 웹 브라우저에서 똑같이 동작하도록 구현하기가 쉽지 않다.
엔진의 표준화가 그래서 중요한데, Ecma International에서 자바스크립트 표준을 담당한다.
자바스크립트 용도
- 서버로 전송되기 전에 입력값이 유효한지 검사
- HTML 엘리먼트에서 이벤트가 발생하면 동작하는 이벤트 핸들러 작성
- 드롭 다운 메뉴와 같은 동적인 메뉴 생성
- 엘리먼트의 CSS 속성을 동적으로 변경
- 웹페이지 내용을 추가
1. 양식 입력값의 유효성 검사
signUp.html은 회원가입 양식 페이지다.
파라미터를 서버로 전송하기 전에 사용자가 입력한 값이 유효한지를
검사하는 예제이다.
예제에서 이메일과 모바일에 집중하기 위해서 그 외 입력 필드는 기본값을 주었다.
signUp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>자바스크립트 예제</title>
<script type="text/javascript">
function check() {
var form = document.getElementById("signUpForm");
var id = form.id.value;
id = trim(id);
if (id.length == 0) {
alert("유효하지 않는 ID입니다.");
return false;
}
var pass = form.passwd.value;
pass = trim(pass);
if (pass.length == 0) {
alert("유효하지 않는 패스워드입니다.");
return false;
}
var name = form.name.value;
name = trim(name);
if (name.length == 0) {
alert("유효하지 않는 이름입니다.");
return false;
}
var email = form.email.value;
var chk = emailCheck(email);
if (chk == false) {
alert("유효하지 않는 이메일입니다.");
return false;
}
var mobile = form.mobile.value;
mobile = trim(mobile);
if (mobile.length == 0) {
alert("유효하지 않는 모바일 번호입니다.");
return false;
}
chk = beAllowStr(mobile,"0123456789-");
if (chk == false) {
alert("유효하지 않는 모바일 번호입니다.");
return false;
}
return true;
}
/*******************************************
입력 : 문자열
리턴값 : 입력문자열의 양 사이드의 공백을 제거한 문자열
********************************************/
function trim(str) {
//문자열 끝에 있는 공백문자를 제거한다.
for (var i = str.length - 1; i >= 0; i--) {
if (str[i] == " ") {
str = str.substring(0, i);
} else {
break;
}
}
//문자열 앞에 있는 공백을 제거한다.
for (var i = 0; i < str.length; i++) {
if (str[i] == " ") {
str = str.substring(i+1, str.length);
}
}
return str;
}
/*******************************************
입력 : 검사대상 문자열, 허용되는 문자열
리턴값 : 검사대상 문자열이 허용되는 문자열로 구성되었다면 true,아니면 false
********************************************/
function beAllowStr(str, allowStr) {
for (var i = 0;i < str.length; i++) {
var ch = str.charAt(i);
if (allowStr.indexOf(ch) < 0) {
return false;
}
}
return true;
}
/**************************************
입력 : 문자열
리턴값 : 유효한 이메일이면 true 아니면 false
***************************************/
function emailCheck(email) {
var allowStr = "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz@.-_";
if (beAllowStr(email, allowStr) == false) {
return false;
}
var golbang = 0; // @ 문자의 갯수를 저장하기 위한 변수
var dot = 0; // . 문자의 갯수를 저장하기 위한 변수
if (email.length < 5) {
return false;
}
if (email.indexOf("@") == -1) {
return false;
}
if (email.indexOf(".") == -1) {
return false;
}
if (email.indexOf(" ") != -1) {
return false;
}
for (var i = 0;i < email.length; i++) {
if (email.charAt(i) == "@") {
golbang++;
}
if (email.charAt(i) == ".") {
dot++;
}
}
if (golbang != 1 || dot > 3) {
return false;
}
if (email.indexOf("@") > email.indexOf(".")) {
return false;
}
if (email.indexOf("@") == 0 || email.indexOf(".") == email.length - 1) {
return false;
}
return true;
}
</script>
</head>
<body>
<h1>회원가입</h1>
<form id="signUpForm" action="signUp_proc.jsp" method="post" onsubmit="return check();">
ID: <input type="text" name="id" value="heist" /><br />
패스워드: <input type="password" name="passwd" value="1440" /><br />
이름: <input type="text" name="name" value="홍길동" /><br />
이메일: <input type="text" name="email" /><br />
모바일: <input type="text" name="mobile" /><br />
<input type="submit" value="가입" />
<input type="reset" value="리셋" />
</form>
</body>
</html>
signUp.html 예제 실행
옛 방식의 자바스크립트 코드이다.
이메일이 유효한지 검사하는 함수는 정규 표현식을 이용하는 게 바람직하다.
정규 표현식은 곧 다룬다.
emailCheck()와 trim() 함수를 정규 표현식을 사용하도록 수정한다.
function emailCheck(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/gi, "");
}
모바일 번호의 유효성을 검사하는 함수도 새로 만든다.
function mobileCheck(mobile) {
var re = /\d+-\d+-\d+/;
return re.test(mobile);
}
위의 3개의 함수를 이용하여 유효성 검사를 하도록 회원가입 폼 페이지, signUp2.html를 작성한다.
signUp2.html 예제 실행
signUp.html과 signUp2.html에서 모바일 유효성 검사 기준에 차이가 있다.
signUp.html에서는 숫자와 -(대시)만으로 이루어진 문자열을 유효한 모바일 번호라고 판단했다.
signUp2.html에서 mobileCheck() 함수는 하나 이상의 숫자-하나 이상의 숫자-하나 이상의 숫자
형식을 유효한 모바일 번호라고 판단한다.
위의 이메일 정규 표현식은, 적절한 정규 표현식을 제공하는 사이트가 여럿 있는데,
그중 한 곳에서 참조했다.
2. 엘리먼트에서 이벤트가 발생하면 동작하는 이벤트 핸들러 작성
이 버튼에 대한 코드는 다음과 같다.
<input type="button" value="버튼" onclick="alert('버튼클릭!');" />
버튼을 클릭하면 alert() 함수가 실행된다.
여기서 alert() 대신에 사용자가 정의한 함수가 있다면, 그 함수를 이벤트 핸들러라 한다.
링크나 서밋 버튼이나 리셋 버튼은 이벤트에 대해 기본 동작이 정해져 있다.
즉, 링크나 서밋 버튼이나 리셋 버튼은 자바스크립트 없어도 동작한다.
이벤트 핸들러가 굳이 필요 없다.
하지만 버튼의 경우 이벤트 핸들러를 연결하지 않으면 아무런 동작도 하지 않는다.
회원가입 예제에서는 서밋 버튼의 기본 동작을 수행하기 전에 check() 함수가 동작하도록 했다.
<form .. onsubmit="return check();">
이때 check() 함수는 불린 값을 리턴하도록 구현해야 한다.
true를 리턴하면 서버로 파라미터를 전송하는 기본 동작을 하고, false를 리턴하면 기본 동작을 못하게 되어, 결국 check() 함수 실행 후 서밋 버튼은 아무런 동작도 하지 않게 된다.
3. 드롭 다운 메뉴와 같은 동적인 메뉴 생성
아래 사이트를 방문하면 페이지 하단 Example에서 dTree 자바스크립트 메뉴를 체험할 수 있다.
dTree
동적이라 함은 사용자에 반응하여 움직임을 뜻한다.
드림위버의 MM_으로 시작하는 함수가 자바스크립트로 동적 메뉴를 만들 때 사용하는 함수이다.
4. 엘리먼트의 CSS 속성을 동적으로 변경
자바스크립트를 이용하면 특정 이벤트가 발생할 때 특정 엘리먼트의 CSS 속성을 변경할 수 있다.
signUp2.html 파일을 열다.
<script type="text/javascript"> 아래에 다음 자바스크립트 함수를 추가한다.
다른 이름으로 저장하기 메뉴를 이용하여 signUp3.html라는 이름으로 저장한다.
function testCss() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].style.background="yellow";
}
}
body 엘리먼트에 onload 이벤트를 추가한다.
body 엘리먼트의 onload 이벤트는 문서의 모든 요소가 다운로드되고 사용 가능할 때 발생한다.
<body onload="testCss()">
5. 웹페이지 내용 추가
페이스북 댓글은 자바스크립트로 웹페이지 내용을 추가하는 좋은 예이다.
