JavaScript Timing Events

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

자바스크립트 타이밍 이벤트

자바스크립트를 사용해서, 특정 코드를 함수가 호출 됐을 때 즉시 호출하지 않고 일정 타임 후에 실행하도록 할 수 있습니다. 이것을 타이밍 이벤트라고 합니다.

자바스크립트로 타이밍을 다루는 것은 매우 간단합니다. 다음 두 개의 핵심 메소드를 사용하면 됩니다.
    * setTimeout() – 특정 코드를 특정 밀리초 후에 실행합니다.
    * clearTimeout() – setTimeout()을 취소합니다.

주의: setTimeout() 과 clearTimeout()은 둘 다 HTML DOM Window 객체의 메소드 입니다.

setTimeout()

문법
var t=setTimeout(“javascript statement”,milliseconds)

setTimeout() 메소드가 반환하는 값 – 위 문장에서 리턴 값은 t라는 변수에 저장됩니다. 만약 setTimeout()을 취소하고 싶을 때 이 변수명을 참조할 수 있습니다.

setTimeout()의 첫 번째 인자는 자바스크립트 문장입니다. 따라서 “alert(‘5 seconds!’)” 또는 “alertMsg()”같은 함수 호출이 될 수 있습니다.

두 번째 인자는 몇 밀리초 후에 첫 번쨰 인자에 있는 문장을 실행하길 원하느냐 입니다.

Note: There are 1000 milliseconds in one second.
주의: 1000 밀리초가 1초 입니다.

예제

아래의 예제는 버튼을 클릭하면 5초 후에 경고창이 뜨게 됩니다.
[#M_ more.. | less.. |
<html>
<head>
<script type=”text/javascript”>
function timedMsg()
{
var t=setTimeout(“alert(‘5 seconds!’)”,5000)
}
</script>
</head>

<body>
<form>
<input type=”button” value=”Display timed alertbox!”
onClick=”timedMsg()”>
</form>
</body>
</html>
_M#]
예제

타이머를 무한 루프 돌리려면, 함수가 자기 자신을 호출하도록 하면 됩니다. 아래의 예제에서 버튼을 클릭하면 필드 값이 0부터 시작하여 무한대로 증가하게 됩니다.
[#M_ more.. | less.. | <html>
<head>
<script type=”text/javascript”>
var c=0
var t
function timedCount()
{
document.getElementById(‘txt’).value=c
c=c+1
t=setTimeout(“timedCount()”,1000)
}
</script>
</head>

<body>
<form>
<input type=”button” value=”Start count!”
onClick=”timedCount()”>
<input type=”text” id=”txt”>
</form>
</body>

</html>_M#]
clearTimeout()

문법
clearTimeout(setTimeout_variable)

예제

아래의 예제는 위의 “무한 루프” 예제와 같습니다. 단 하나 차이는 “Stop Count!” 버튼을 클릭하여 멈출 수 있다는 것입니다.
[#M_ more.. | less.. |
<html>
<head>
<script type=”text/javascript”>
var c=0
var t

function timedCount()
{
document.getElementById(‘txt’).value=c
c=c+1
t=setTimeout(“timedCount()”,1000)
}

function stopCount()
{
clearTimeout(t)
}
</script>
</head>

<body>
<form>
<input type=”button” value=”Start count!”
onClick=”timedCount()”>
<input type=”text” id=”txt”>
<input type=”button” value=”Stop count!”
onClick=”stopCount()”>
</form>
</body>

</html>
_M#]

JavaScript Animation

출처 : http://www.w3schools.com/js/js_animation.asp

자바스크립트 애니메이션

자바스크립트를 사용하여 동적인 이미지를 만드는 것이 가능합니다.

그 트릭은 바로 서로 다른 이벤트 마다 다른 이미지로 변경하는 것입니다.

다음의 예제에서 우리는 웹 페이지의 링크 버튼으로 보이는 이미지를 추가할 것입니다. 그런 다음 onMounseOver 이벤트와 onMouseOut 이벤트를 사용하여 자바스크립트 함수를 호출하고 그 곳에서 이미지를 변경할 것입니다.

HTML 코드

HTML 코드는 다음과 같습니다.

<a href=”http://www.w3schools.com” target=”_blank”>
<img border=”0″ alt=”Visit W3Schools!”
src=”b_pink.gif” name=”b1″
onmouseOver=”mouseOver()”
onmouseOut=”mouseOut()” />
</a>

나중에 자바스크립트에서 참조할 수 있도록 이미지가 name 속성을 가지고 있는 것에 주목하기 바랍니다.

onMouseOver 이벤트는 브라우저에서 마우스가 이지미 위로 올라왔슴을 알려주고 브라우저가 이미지를 다른것도 바꾸는 함수를 호출하도록 합니다.

onMouseOut 이벤트는 브라우에서 마우스가 이미지 밖으로 나갔음을 알려주고, 다른 자바스크립트 함수를 실행합니다. 이 함수는 다시 원래의 이미지로 설정합니다.

자바스크립트 코드

이미지를 변경하는 자바스크립트 코드는 다음과 같습니다.

<script type=”text/javascript”>
function mouseOver()
{
document.b1.src =”b_blue.gif”
}
function mouseOut()
{
document.b1.src =”b_pink.gif”
}
</script>

mouseOver() 함수는 이미지를 “b_blue.gif”로 바꿉니다.
mouseOut() 함수는 이미지를 “b_pink.gif”로 바꿉니다.

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>