JavaScript Form Validation

참조 및 번역 : http://www.w3schools.com/js/js_form_validation.asp

자바스크립트 폼 검증

자바스크립트를 사용하여 HTML 폼에 입력된 데이터를 서버로 보내기 전에 검증할 수 있습니다.

폼 데이터는 일반적으로 자바스크립트를 사용하여 다음의 것들을 확인합니다.

    * 필수 속성을 빈 값으로 뒀는지?
    * 유효한 e-mail 주소를 입력했는가?
    * 유효한 날짜를 입력했는가?
    * 숫자를 입력해야할 곳에 문자를 입려하진 않았는지?

필수 속성 확인

아래의 함수는 입력 필드가 비어있는 상태가 아닌지 확인합니다. 만약에 비어있으면 경고 창에 메시지를 출력하고 false를 반환합니다. 만약에 값이 입력 됐으면 true를 반환합니다.

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value==””)
  {alert(alerttxt);return false}
else {return true}
}
}

전체적인 스크립트는 다음과 같습니다.
[#M_ more.. | less.. |
<html>
<head>
<script type=”text/javascript”>
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value==””)
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,”Email must be filled out!”)==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action=”submitpage.htm”
onsubmit=”return validate_form(this)”
method=”post”>
Email: <input type=”text” name=”email” size=”30″>
<input type=”submit” value=”Submit”>
</form>
</body>

</html>
_M#]
E-mail 검증

아래의 함수는 일반적인 email 형식을 갖춘 문자열을 입력했는지 확인합니다.

이 말은 입력한 데이터가 반드시 @ 과 . 를 가지고 있는지 확인합니다. 그리고 @는 첫 번째 글자가 되면 안되고 마지막으로 . 은 @ 바로 앞에 위치해야 합니다.

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf(“@”)
dotpos=value.lastIndexOf(“.”)
if (apos<1||dotpos-apos<2)
  {alert(alerttxt);return false}
else {return true}
}
}

전체적인 코드는 다음과 같습니다.
[#M_ more.. | less.. |
<html>
<head>
<script type=”text/javascript”>
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf(“@”)
dotpos=value.lastIndexOf(“.”)
if (apos<1||dotpos-apos<2)
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,”Not a valid e-mail address!”)==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action=”submitpage.htm”
onsubmit=”return validate_form(this);”
method=”post”>
Email: <input type=”text” name=”email” size=”30″>
<input type=”submit” value=”Submit”>
</form>
</body>

</html>
_M#]

JavaScript Cookies

참조 및 번역: http://www.w3schools.com/js/js_cookies.asp

쿠키란 무엇인가?

쿠키는 방문자의 컴퓨터에 정되는 변수다. 매번 컴퓨터가 브라우저에 페이지를 요청할 때 쿠키도 같이 보낸다. 자바스크립트를 사용하면, 쿠키의 값을 가져오거나 새로운 쿠키를 만들 수 있다.

쿠키 예제:

    * 이름 쿠키 – 방문자가 처음으로 여러분의 웹 페이지를 방문 했을 때 그들은 그들의 이름을 적을 것입니다. 이 이름을 쿠키에 저장합니다. 다음에 방문자가 다시 여러분의 페이지를 방문하면 저장되어 있는 쿠키에서 이름을 가져와서 그들에게 “Welcome 기선!” 환영 문구를 보여줄 수 있습니다.
    * Password 쿠키 – 방문자가 웹 페이지에 처음 방문하면, 그들은 패스워드를 입력합니다. 이 패스워드를 쿠키에 저장합니다. 다음번에 방문자가 다시 웹 페이지를 들리게 되면 쿠키에서 패스워드를 가져와서 자동으로 채워줍니다
    * 날짜 쿠키 – 방문자가 처음 웹 페이지를 방문하면, 현재 날짜를 쿠키에 저장합니다. 다음 번에 방문자가 다시 웹 페이지를 찾아오면, 쿠키로 부터 날짜를 가져와서 “지난 번에는 2007년 7월 9일에 접속했었군요” 라고 보여줄 수 있다.

쿠키 만들고 저장하기

이 예제에서 우리는 쿠키를 만들어서 방문자의 이름을 저장하겠습니다. 처음으로 방문자가 웹 페이지를 방문하면, 그들에게 이름을 입력하도록 요구합니다. 그런다음 이 이름을 쿠키에 저장합니다. 다음번에 같은 페이지를 다시 방문하면 그들에게 환영 문구를 출력합니다.

먼저, 방문자의 이름을 쿠키 변수에 저장하는 함수를 작성합니다:

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ “=” +escape(value)+
((expiredays==null) ? “” : “;expires=”+exdate.toGMTString())
}

함수의 매개 변수는 쿠키의 이름, 쿠키의 값 그리고 쿠키를 유지시킬 일 수를 받아 옵니다.

위의 함수에서 먼저 쿠키를 유지할 날짜 수를 날짜로 변환하여 소멸될 날짜를 만듭니다. 그러고 나서 document.cookie 객체를 사용하여 쿠키의 이름과 소멸될 날짜를 저장합니다.

Then, we create another function that checks if the cookie has been set:
쿠키가 설정되어 있는지 확인하는 다른 함수를 작성합니다.

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + “=”)
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1
    c_end=document.cookie.indexOf(“;”,c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    }
  }
return “”
}

위의 함수는 먼저 document.cookie에 쿠키가 들어있기는 한지 확인합니다. 만약 document.cookie가 비어 있지 않다면 찾고자 하는 이름의 쿠키가 저장되어 있는지 확인합니다. 만약 쿠키를 찾으면 쿠키의 값을 반환하고 그렇지 않다면 비어있는 문자열을 반환합니다.

마지막으로, 쿠키가 설정되어 있으면 환명 문구를 보내고, 쿠키가 설정되어 있지 않으면 prompt 박스를 출력하여 사용자의 이름을 물어보는 함수를 작성합니다.

function checkCookie()
{
username=getCookie(‘username’)
if (username!=null && username!=””)
  {alert(‘Welcome again ‘+username+’!’)}
else
  {
  username=prompt(‘Please enter your name:’,””)
  if (username!=null && username!=””)
    {
    setCookie(‘username’,username,365)
    }
  }
}

JavaScript Browser Detection

참조 및 번역 : http://www.w3schools.com/js/js_browser.asp

브라우저 인식하기

이 튜토리얼에 있는 대부분의 것들은 자바스크립트가 가능한 브라우저라면 전부 동작합니다. 하지만, 일부 브라우저에서는 동작하지 않을 수도 있습니다. 특히 오래된 브라우저들.

따라서, 방문자의 브라우저 종류와 버전을 알아내는 것은 유용하며 그렇게 함으로써 적절한 정보를 제공할 수 있습니다.

이 방법을 실현하기 위한 최선책은 여러분의 웹 페이지들이 브라우저에 따라 적절하게 보여줄 수 있을 만큼 똑똑하게 만드는 것입니다.

자바스크립트는 Navigator 라 불리는 객체를 포함하고 있으며 이것으로 상기 목적을 달성할 수 있습니다.

Navigator 객체는 방문자의 브라우저 name, 버전, 기타 등등의 정보를 포함하고 있는 객체입니다.

Navigator 객체

자바스크립트 Navigator 객체는 방문자의 브라우저에 대한 모든 정보를 담고 있습니다. Navigator 객체가 담고 있는 두 개의 속성을 살펴보겠습니다.

    * appName –  브라우저의 이름을 담고 있습니다.
    * appVersion – 브라우저의 버전이외에도 다양한 정보를 담고 있습니다.

예제

<html>

<body>
<script type=”text/javascript”>
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)

document.write(“Browser name: “+ browser)
document.write(“<br />”)
document.write(“Browser version: “+ version)
</script>
</body>

</html>

browser 변수는 브라우저의 이름을 담고 있습니다. 예를 들어 “Netscape” 또는 “Microsoft Internet Explorer”와 같은 값을 담고 있죠.

appVersion 속성은 단순한 버전 넘버 외에도 많은 정보를 포함하고 있지만 지금은 버전 넘버에만 관심이 있습니다. 버전 넘버만 빼내기 위해서 parseFloat()를 호출하여 문자열 내에서 소수로 보이는 첫번째 숫자를 빼내옵니다.

중요! IE 5.0 이상에서는 버전 넘버가 다릅니다! 마이크로소프트가 IE 5.0과 IE 6.0에서 appVwersion 문자열을 4.0으로 시작하도록 했습니다!!! 대체 이사람들 왜 이런걸까요??? 하지만, 자바스크립트는 IE6, IE5 그리고 IE4에서도 동일합니다. 따라서 대부분의 스크립트는 괜찮을 겁니다.

예제

다음의 스크립트는 방문자의 브라우저에 따라 다른 경고 메시지를 보여줍니다.

<html>
<head>
<script type=”text/javascript”>
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser==”Netscape”||browser==”Microsoft Internet Explorer”)
&& (version>=4))
  {alert(“Your browser is good enough!”)}
else
  {alert(“It’s time to upgrade your browser!”)}
}
</script>
</head>

<body onload=”detectBrowser()”>
</body>
</html>

JavaScript HTML DOM Objects

참조 및 번역 : http://www.w3schools.com/js/js_obj_htmldom.asp

그밖에 자바스크립트 객체

Object Description
Window The top level object in the JavaScript hierarchy. The
Window object represents a browser window. A Window object is created
automatically with every instance of a <body> or <frameset> tag
Navigator Contains information about the client’s browser
Screen Contains information about the client’s display screen
History Contains the visited URLs in the browser window
Location Contains information about the current URL

HTML DOM

HTML DOM은 W3C 표준이고 HTML을 위한 Document Object Model의 약자다.

HTML DOM은 HTML을 구성하는 객체의 표준 집합체를 정의하고 HTML 문서를 접근하고 생성하기 위한 표준적인 방법인다.

모든 (문자와 속성을 가지고 있는) HTML 요소들에 DOM 통해서 접근할 수 있다. 컨텐츠를 구정, 삭제 할 수 있으며 새로운 엘리먼트를 추가할 수도 있다.

HTML DOM은 독립적인 플랫폼이자 언어다. Java, 자바스크립트 그리고 VBScript 같은 프로그래밍 언어 처럼 사용할 수 있다.

다음의 링크들에서 자바스크립트를 사용하여 각각의 DOM 객체를 생성하고 접근하는 방법을 배울 수 있다.

Object Description
Document Represents the entire HTML document and can be used to
access all elements in a page
Anchor Represents an <a> element
Area Represents an <area> element inside an image-map
Base Represents a <base> element
Body Represents the <body> element
Button Represents a <button> element
Event Represents the state of an event
Form Represents a <form> element
Frame Represents a <frame> element
Frameset Represents a <frameset> element
Iframe Represents an <iframe> element
Image Represents an <img> element
Input button Represents a button in an HTML form
Input checkbox Represents a checkbox in an HTML form
Input file Represents a fileupload in an HTML form
Input hidden Represents a hidden field in an HTML form
Input password Represents a password field in an HTML form
Input radio Represents a radio button in an HTML form
Input reset Represents a reset button in an HTML form
Input submit Represents a submit button in an HTML form
Input text Represents a text-input field in an HTML form
Link Represents a <link> element
Meta Represents a <meta> element
Option Represents an <option> element
Select Represents a selection list in an HTML form
Style Represents an individual style statement
Table Represents a <table> element
TableData Represents a <td> element
TableRow Represents a <tr> element
Textarea Represents a <textarea> element

JavaScript Math Object

참조 : http://www.w3schools.com/js/js_obj_math.asp

Matk 객체 메소드

Method Description FF N IE
abs(x) Returns the absolute value of a number 1 2 3
acos(x) Returns the arccosine of a number 1 2 3
asin(x) Returns the arcsine of a number 1 2 3
atan(x) Returns the arctangent of x as a numeric value between
-PI/2 and PI/2 radians
1 2 3
atan2(y,x) Returns the angle theta of an (x,y) point as a numeric
value between -PI and PI radians
1 2 3
ceil(x) Returns the value of a number rounded upwards to the
nearest integer
1 2 3
cos(x) Returns the cosine of a number 1 2 3
exp(x) Returns the value of Ex 1 2 3
floor(x) Returns the value of a number rounded downwards to the
nearest integer
1 2 3
log(x) Returns the natural logarithm (base E) of a number 1 2 3
max(x,y) Returns the number with the highest value of x and y 1 2 3
min(x,y) Returns the number with the lowest value of x and y 1 2 3
pow(x,y) Returns the value of x to the power of y 1 2 3
random() Returns a random number between 0 and 1 1 2 3
round(x) Rounds a number to the nearest integer 1 2 3
sin(x) Returns the sine of a number 1 2 3
sqrt(x) Returns the square root of a number 1 2 3
tan(x) Returns the tangent of an angle 1 2 3
toSource() Represents the source code of an object 1 4
valueOf() Returns the primitive value of a Math object 1 2 4


Math 객체 속성

Property Description FF N IE
constructor A reference to the function that created the object 1 2 4
E Returns Euler’s constant (approx. 2.718) 1 2 3
LN2 Returns the natural logarithm of 2 (approx. 0.693) 1 2 3
LN10 Returns the natural logarithm of 10 (approx. 2.302) 1 2 3
LOG2E Returns the base-2 logarithm of E (approx. 1.414) 1 2 3
LOG10E Returns the base-10 logarithm of E (approx. 0.434) 1 2 3
PI Returns PI (approx. 3.14159) 1 2 3
prototype Allows you to add properties and methods to the object 1 2 4
SQRT1_2 Returns the square root of 1/2 (approx. 0.707) 1 2 3
SQRT2 Returns the square root of 2 (approx. 1.414) 1 2 3

Math 객체

Math 객체는 산술연산 작업을 할 수 있도록 도와준다.

Math 객체는 몇 몇 산술적인 변수들과 함수들을 가지고 있다. 따라서 별도의 Math 객체를 만들어 사용하지 않아도 된다.