Richard: 10월 2009

2009년 10월 23일 금요일

나의 먹보 조카.

나의 먹보 조카. 잘먹는다. ㅋㅋㅋ

밥 그릇에 밥풀 때기 묻은거 아에 마셔 버리는구나..

엄마가 그릇 2/3 정도 밥을 담아 주는데

그릇크기가 얼굴만 하니까

보통 일반인이 큰 냉면그릇에다 밥 담아 먹는거랑 같네..

많이도 먹는다. ㅋㅋ

2009년 10월 3일 토요일

폼처리와 정규표현식

만일 폼에서 "우편번호"를 입력받는 부분에 대해 체크루틴을 작성한다면

예는 텍스트필드 하나로 구현해보겠습니다.
<input type=text name=zip size=7 maxlength=7>

1. 녈값은 허용된다.
2. 하지만 값이 들어있을 때는 "숫자세자리-숫자세자리"거나, "수자여섯자리"
를 꼭 지켜야 한다.

위의 규정을 기존에 사용되던 방식으로 체크루틴을 작성한다면

숫자값만 체크하는것은 위의 루틴만으로 구현가능합니다.
하지만 2번의 "숫자세자리-숫자세자리"같은 조건을 위의 방법으로 구현하기에는
많은 제약이 있습니다.

뭐.. '-'문자가 1개있는지 체크하고, 나머지 6자리가 숫자인가 체크한다..
이런 방식으로 짤 수도 있겠지만, 사용자가 '11-1111'처럼 입력할 수도 있겠지요
아니면 폼을 두개로 해서 피해가는 방법도 있겠지만..
우편번호 하나 체크하는데.. 너무 코딩이 길어져도 문제가 있는 것이고요

가장 권해드리는것은 정규표현식을 사용하여 체크하는 방법입니다.
정규표현식(Regular Expressions)에 대해서는 나중에 설명드리기로 하고요,
위의 자바스크립트 코드를 정규표현식을 사용해서 고치면

위와 같이 단순하게 코딩할 수 있습니다.
처음의 if문은 1번조건을 체크하기 위해 넣은것이니까..
2번의 복잡한 요구를 if문 하나로 처리해 낸 것입니다.

위에서처럼.. 정규표현식을 쓰면, 쓸데없는 잔머리에 노가다를 하지 않고도
아주 간편하면서도 완벽하게 폼체크 루틴을 작성할 수 있습니다.

----------------------------------------------------------------------------
<html>
<head>
<script language=javascript>
<!--
function isload() {
document.regular.test.focus();
}

----------------------------------------------------------------------------

먼저 위의 /^aaa/를 간단히 해석하자면
aaa로 시작하는 모든 문자열은 참이 됩니다. aba같은경우는 거짓이 되겠지요?
그러면 위의 예에서 ^문자는 "처음"을 나타내는 것입니다.
/문자는 괄호의 역할을 하는 것이고요.

한번 실습해 보세요... 공부하는거라기보다는 재밋게 논다고 생각하세요..
정말 재밌죠? (아닌가요? .... 돌맞겠다.. )

^문자가 처음을 나타낸다면 "끝"을 나타내는 문자도 있습니다.
바로 $죠..

위에서 ^aaa를 tree$라는 문자열로 바꿔봅시다. search(/tree$/)이렇게 되겠죠?
그리고 웹브라우져를 리로드합시다.
그리고 위와 동일하게 pine tree라는 값을 넣어봅시다.
맞다고 나오죠?

다시 위의 변경되는 부분을 (apple|redhat|sun|ms)로 변경해 봅시다.
이번에는
sunrise
redhat linux
apple g3
ms windows
모두 일치한다고 나올 것입니다. 여기서 |는 or역할을 합니다.
apple, redhat, sun, ms들 중 하나만 일치하면 참입니다.

또 다시 [xyz]로 바꿔 봅시다.
xerox
yellow
zoo
등은 일치하며,
speaker같은 문자와는 일치하지 않을 것입니다.
[]로 둘러싸여져 있는 .. 각각의 문자 1개만 일치해도 참입니다.
자세히 말씀드리면
speaker는 x, y, z중 아무 문자도 포함하고 있지 않습니다.
그래서 거짓이 되는 것입니다.
이 연산자를 확장해서 [0-9]와 같이 쓰면 모든 숫자와 일치하며
[a-z|A-Z]이렇게 쓴다면 모든 알파벳 문자와 일치합니다. 위의 |문자와
같이 쓴 것을 주의하세요. 좀 어렵게 쓰여진 책에는 []를 문자셋이라고
표현하고 있습니다. 문자들의 집합.. 뭐 이래서 이렇게 표현한게 아닐까요?

지금까지의 예는 "특정 문자열이 존재하는가"를 파악하는 그런 단순한 예제였다면
이번 글에서 설명드릴 부분은 문자열의 포맷, 갯수등을 고려하여, 아주 세밀하게
참거짓을 판별할 수 있는 그러한 내용입니다.

다음의 표는 항목의 속성을 나타낼 때 쓰이는 기호입니다.

\b : 단어 구분자와 일치합니다.
   (일반적으로는 space나 뉴라인문자를 나타내지만 웹브라우저에서는 문자열의
   시작과 끝과도 일치하는 것 같습니다.)
\B : 단어구분자가 아니면 일치합니다.
\d : 한 숫자와 일치합니다.
\D : 숫자가 아니면 일치합니다.
\s : 하나의 white space와 일치합니다.
   (white space : space, tab, formfeed, line feed등을 일컫는 말입니다.)
\S : white space가 아니면 일치합니다.
\w : 알파벳 문자와 일치합니다.
\W : 알파벳 문자가 아니면 일치합니다.

"폼처리와 정규표현식 2"에 올려드렸던 간단한 테스트 HTML에서
정규표현식이 들어가는 부분을 ^\w+$ 라고 바꿔보시겠습니까?
위에서 \w기호는 알파벳 문자와 일치한다고 했습니다.

HTML폼에서 gom이라고 입력하시고 submit해보세요.
공백문자가 없으면 일치한다는 메시지가 나타날 것입니다.
하지만 입력폼에서 gom" 을 입력해보시겠습니까?
이번에는 백이면 백 다 일치하지 않는다는 메시지가 나타날 것입니다.

위의 표에서는 \w는 "알파벳 단어"를 의미한다고 했습니다. 더 정확히 말하면
영어 알파벳 문자와 숫자문자를 제외한 모두는 \w은 거짓으로 판단합니다.
그리고 \w뒤에 붙어 쓰이는 +문자는 수량을 나타내는 의미로 "1회 이상 반복되면 참"

의 의미를 가지고 있습니다.

그럼 위에서 쓰인 정규표현식 ^\w+$ 는 어떻게 해석되는지 살펴보기로 할까요?
\w 알파벳 단어 하나,
+는 1회이상 반복되면 참,
^는 주어진 조건으로 시작해야 한다는 의미,
$는 주어진 조건으로 끝나야 한다는 의미이니..

gom은 위의 4가지 조건을 다 만족하여 참이 되고요.
gom"은 "문자가 \w조건에서 거짓이 되므로 전체가 거짓이 됩니다.

어느정도 개념이 서는것 같습니까?
한가지만 더 테스트해 보고 .. 위에서 간단히 언급한 수량을 나타내는 기호를
공부해 보도록 합시다.

위에서 \S라는 항목이 있었죠?
설명에는 "white space가 아니면 일치합니다."라고 되어 있었습니다.
그리고 숫자를 나타내는 \d를 써 보기로 하겠습니다.
그럼 위의 예제를 응용하여 \B\d 의 정규표현식을 써봅시다.
위에서처럼 해석해 보면 "일반적인 문자, 숫자"의 조합이 있으면
참이 됩니다. 따라서 "person1, etc"라는 단어는 참을 반환할 것입니다.
"n1" 부분에서 일치하기 때문이지요.
하지만 " 1room"같은 경우에는 결코 참이 될 수 없겠지요.
공백문자는 \S에서 거짓이 되기 때문이지요.

그럼 위의 문자 속성들과 같이 사용되는 수량자들을 알아보기로 하겠습니다.

* : 0번 혹은 그 이상 일치합니다.
+ : 1번 이상 일치합니다.
? : 0번 혹은 1번 일치합니다.
. : 1개의 문자와 일치합니다.
{n} : n번 일치합니다.
{n, } : n번 이상 일치합니다.
{n, m}: n번 이상 m번 이하 일치합니다.

위에서도 말씀드렸듯이 수량자는 문자 속성 다음에 쓰여집니다.
그리고 해당 속성이 몇번 반복되는가를 나타냅니다.

예제를 보는 것이 이해하시기에는 훨씬 빠를 것입니다.
1회 연재에서 예를 들었던 우편번호를 체크하는 정규표현식을 다시 보도록 하죠.
\d{3}-\d{3} 입니다.

이제 어느정도 눈에 들어오십니까?
\d는 숫자면 참,
{3}은 3번 반복되면 참,
-는 그냥 '-'문자를 나타내고요.
따라서 "숫자3자리-숫자3자리"를 말합니다.

그리고 다른 하나 예를 들어보겠습니다.
흔히 E-mail주소를 체크하기 위해서는 무지 많은 루프를 통한 필터링을 사용해도
정확한 체크가 불가능했습니다.
하지만 \S+@\S+\.S+ 라는 표현식을 사용하면 단 한번의 조건문을 통해서 가장
정확한 형태의 E-mail주소를 체크할 수 있습니다.
KRNIC에서도 다음과 같이 정규표현식을 체크하고 있습니다. (\S+)@(\S+)\.(S+)
\w를 써도 될 듯한데.. 궂이 \S를 쓰는 이유는.. 저도 잘 모르겠고요.
다만 KRNIC에서 쓴다는 이유로 저도 최근에는 \S를 사용하고 있습니다.

----------------------------------------------------------------------------
출처 mail : 이병기 greatbk@yahoo.com

쿠키 사용법

Cookie를 구현하려면 기본적으로 두 개의 스크립트 함수가 필요한데
setcookie(name,expdate)와 getcookie(name)가 그 두 함수입니다.

이 함수들은 별로 어렵지는 않지만 이미 다른 사람들이
잘 구현해 놓았으므로 우리는 사용법만 알면됩니다.

setcookie(name,expdate)에서 name은 자신이 사용하고자하는
cookie 이름입니다. 이 이름은 다른 쿠키와 겹치지 않도록
특이하게 짓는 것이 좋습니다.
expdate는 쿠키가 저장될 기간입니다. expdate가 지나면
쿠키는 지워집니다.

getcookie(name)는 주어진 이름의 쿠키를 읽어들입니다.

그 외에도 delcookie()라는 것도 있는데,
이것은 저장된 쿠키를 지우는 겁니다.
하지만 지금 다루고 있는 예에서는 사용되지 않습니다.

<html>
<head>
<script language="JavaScript">
<!--HIde

/**********************************************************
3. Cookie의 사용 예 (소스)

다음은 cookie를 사용하는 예입니다.
( 이 글 전체는 html형식입니다.
따라서 이 글을 다운 받으신 후 파일명을 test.html등으로
바꾼후 바로 사용 가능합니다.)
***********************************************************/

/* This code is Copyright (c) 1996 Nick Heinle and Athenia Associates,
* all rights reserved. In order to receive the right to license this
* code for use on your site the original code must be copied from the
* Web site webreference.com/javascript/. License is granted to user to
* reuse this code on their own Web site if and only if this entire copyright
* notice is included. Code written by Nick Heinle of webreference.com.
*/

function setCookie (name, value, expires) {
if (!expires) expires = new Date();
document.cookie = name + "=" + escape (value) +
"; expires=" + expires.toGMTString() + "; path=/";
}

function show_name() {
if(getCookie(cookieName) != null) {
document.write("Welcome Back <b><i>" + getCookie(cookieName) +
"</b></i>. ");
}
else document.write ("<font color=blue><h2>Welcome Your First Visit !"
+ "</h2><FORM>Let me Know Your Name:"
+ " <INPUT TYPE = 'text' NAME = 'nameinput'>"
+ " <INPUT TYPE = 'button' VALUE = 'Ok'"
+ " onClick = 'set_name(this.form)'>"
+ "</FORM></font>");
}

function set_name(form) {
var expdate = new Date ();
var num = 1;
expdate.setTime (expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
var username = form.nameinput.value
if (username != '') {
setCookie(cookieName, username, expdate);
window.history.go(0);
}
}

cookieName = "_nameXYZ";
//-->

</script>
</head>
<body>
<p>
<script>

</script>
</body>
</html>

페이드 스크립트

----------------------------------------------------------------------

웹브라우져의 종류를 알아내자!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>예제 - 웹브라우져의 종류를 알아내자!</TITLE>
</HEAD>

<BODY bgColor="white">
<CENTER>
당신이 사용하는 브라우져는 다음과 같습니다.<P>

<FORM NAME="Browser_Info">
<TABLE BORDER=0>
<TR>
<TD BGCOLOR=#E5EEF8>웹브라우저 이름:
<TD><INPUT NAME="Name" TYPE="text" SIZE=35>
</TR>

<TR>
<TD BGCOLOR=#E5E5D5>웹브라우저 버젼:
<TD><INPUT NAME="Version" TYPE="text" SIZE=35>
</TR>

<TR>
<TD BGCOLOR=#BDF2D5>웹브라우져 코드명:
<TD><INPUT NAME="CodeName" TYPE="text" SIZE=15>
</TR>
</TABLE>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--
if (navigator.appVersion.indexOf("4.0") != -1)
{
// ---------------------------------------------------------------------
// navigator object : 현재 사용 중인 웹브라우져의 이름, 코드명, 버전등을
// 알려주는 객체
// ---------------------------------------------------------------------
// 속성(property)에는 다음과 같은 것들이 있습니다.
// appName : 웹브라우져의 이름. Netscape Navigator를 쓰는 경우에는
// appName이 "Netscape"이고, Internet Explorer를 쓰는 경우에는
// "Microsoft Internet Explorer"입니다.
// appVersion : 웹브라우져의 버전을 이 속성을 통해 알 수 있습니다..
// appCodeName : 웹브라우져의 코드명. Netscape Navigator의 코드명은
// "Mozilla"죠...
// ---------------------------------------------------------------------
// navigator.appVersion.indexOf("4.0")에 대한 설명
// navigator객체의 appVersion이라는 속성값(문자열)에 "4.0"이라는 문자열이
// 들어있는지를 검사하는 겁니다. indexOf 메소드(method)는 String 객체의
// 메소드로서 인자로 주어진 문자열이 처음으로 발견되는 위치의 인덱스값을
// 리턴해 줍니다. 만일, 해당 문자열이 없다면 -1을 리턴합니다.
// 그래서, 위의 if문처럼 처리한 겁니다. 그리고 appVersion이 문자열,
// 즉 String이므로 위처럼 appVersion.indexOf("4.0")처럼
// 쓸 수 있는겁니다. (사용형식 : 객체이름.속성, 객체이름.메소드)
// ---------------------------------------------------------------------

if (navigator.appName.indexOf("Netscape") != -1)
{
// alert() 함수는 주어진 인자(문자열)을 가지고 경고 다이얼로그
// 박스를 출력해줍니다.
alert("당신은 Netscape Communicator v4.0x를 쓰고 있습니다.");

// window.location = "ns4.htm"; 파일이 없으므로 주석처리했습니다.
// 만일 웹브라우져가 Netscape 4.0이라면 "ns4.htm"문서를 불러옵니다.
}

else if (navigator.appName.indexOf("Microsoft Internet Explorer") != -1)
{
alert("당신은 Microsoft Internet Explorer v4.x를 쓰고 있습니다.");

// window.location = "ie4.htm";
}
}

else if (navigator.appVersion.indexOf("3.0") != -1)
{
if (navigator.appName.indexOf("Netscape") != -1)
{
alert("당신은 Netscape Navigator v3.0x를 쓰고 있습니다.");

// window.location = "ns3.htm";
}

else if (navigator.appName.indexOf("Microsoft Internet Explorer") != -1)
{
alert("당신은 Microsoft Internet Explorer v3.x를 쓰고 있습니다.");

// window.location = "ie3.htm";
}
}

else
alert("Your browser is not supported by this script program.");

// 각 객체들은 계층적인 구조를 같습니다.
// document 객체내에는 form객체가 들어가고, 또 그내에는 Text Field,
// Button, Text Area등의 객체가 들어갑니다. 여기서는 form객체의 이름을
// FORM 태그의 NAME attribute(속성)에서 Browser_Info로 주었습니다.
// 그리고, 여기선 Text Field 객체의 이름이 각각 Name, Version, CodeName
// 인 3개가 있습니다. Text Field객체는 계층구조상 Form객체의 하위에 존재
// 하므로 아래처럼 써 줄수가 있는 겁니다. value 속성은 말그대로
// Text Field의 값입니다.

document.Browser_Info.Name.value = navigator.appName;
document.Browser_Info.Version.value = navigator.appVersion;
document.Browser_Info.CodeName.value = navigator.appCodeName;
//-->
</SCRIPT>

</BODY>
</HTML>

Richard