고요한 마음의고향

  안녕하세요?
  오늘은 나이를 입력받아서 그에 따른 메시지를 출력하는 소스입니다.

<script language="JavaScript">
<!--
function valid(form) {
  var field = form.age;  // field변수에 form.age 즉 나이 값을 대입합니다.
  var userAge = parseInt(field.value);  
  if (!userAge) {  // UserAge가 없으면 즉 나이를 입력하지 않았으면
    alert("나이를 입력 해 주세요");
    return false;
  } else if (userAge >= 18) {  // 18세 이상이면
      alert("감사합니다"); 
      return true;
    } else { // 18세 미만이면
        alert("당신의 나이는 " + userAge + " 세군요. 18세가 되면 다시 찾

아 주세요");
        field.focus();     // 나이가 18세 이하이면 위의 메시지를 출력하고 나이 입력상자에 포커스를 줍니다.
        field.select();    // 선택이 되게 합니다.
        return false;
      }
}
// -->
</script>

<form method="post" action="mailto:you@yourdomain.com" enctype="text/plain"  onsubmit="return valid(this)">
/* 보내기 버튼을 누르면 valid함수에 this즉 지금 폼을 전송합니다. */
나이 <input type="text" name="age" size="2">세<br>
직업 <input type="text" name="job" size="40"><br>
내용 <textarea name="resume" cols="40" rows="5"></textarea><br><br>
<input type="submit" value="보내기">
</form>

자세한것은 옆의 주석을 참고하시면 이해가 되실겁니다. 실행화면은 직접 한번 실행해 보시기 바랍니다. 그럼 다음시간에 또 만나요~

  안녕하세요?
  오늘은 디지탈 시계소스입니다. 화면에 오전,오후,현재시간을 초까지 나타나게 하는 건데요. 소스를 보시죠.

<span id=tick2></span>
<script>
<!--
// 시계를 보여주는 스크립트 입니다
function show2(){
        if (!document.all&&!document.getElementById)
        return
        thelement=document.getElementById? document.getElementById

("tick2"): document.all.tick2
        var Digital=new Date()
        var hours=Digital.getHours()
        var minutes=Digital.getMinutes()
        var seconds=Digital.getSeconds()
        var dn="오후"
        if (hours<12)
        dn="오전"
        if (hours>12)
        hours=hours-12
        if (hours==0)
        hours=12
        if (minutes<=9)
        minutes="0"+minutes
        if (seconds<=9)
        seconds="0"+seconds
        var ctime=dn+" " +hours+":"+minutes+":"+seconds
        thelement.innerHTML="<b style='font-

size:12;color:black;'>"+ctime+"</b>"
        // 글자의 색상을 수정할 수 있습니다
        setTimeout("show2()",1000)
        // 1초(1000)마다 갱신하여 초단위로 보여줍니다
}
window.onload=show2
//-->
</script>

대충보면 Digital 날짜객체에서 시,분,초를 구해서 ctime에 저장하고 setTimeout을 이용해서 1초마다(1000은 1초를 나타냅니다) 함수를 호출해서 화면에 시간을 표시하게 하는 것입니다. 자세한 것은 스스로 공부해 보시기 바랍니다. 그럼 다음시간에 또 만나요~ 참 실행하면 그냥 오전 오후 나오고 시:분:초 이렇게 나옵니다. 한번 실행해 보시길~

  안녕하세요?
  오늘은 버튼이나 링크를 클릭하면 랜덤으로 사이트를 이동하는 소스입니다.

<script >
<!--

// 랜덤으로 생성할 링크들을 설정 하세요
var randomlinks=new Array()

randomlinks[0]="http://www.jasko.co.kr"
randomlinks[1]="http://www.daum.net"
randomlinks[2]="http://www.yahoo.co.kr"
randomlinks[3]="http://www.imbc.com"
randomlinks[4]="http://www.naver.com"

function randomlink(){
window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)]
}
//-->
</script>

<input type="button" value="랜덤으로 여행하기" onclick="randomlink()">

<a href="#" onclick="randomlink()">랜덤으로 여행하기</a>

버튼에 랜덤으로 여행하기라고 하는 내용으로 버튼을 만들고 링크로 랜덤으로 여행하기라고 만들어서 아무거나 누르면 randomlink()함수가 실행되어서 randomlinks의 첨자에 Math.random()함수를 이용해서 0-4사이(randomlink.length)의 수를 임의로 만들어 첨자에 대입하면 위의 링크로 이동하게 됩니다. 쉽게 이해하시리라 믿습니다. 그럼 다음시간에 또 만나요.

  안녕하세요?
  오랜만이네요. 추석은 다들 잘 보내셨는지 모르겠습니다. 오늘은 즐겨찾기에 추가하는 소스입니다. 인터넷을 다니다보면 좋은 사이트는 즐겨찾기에 등록해서 바로 찾아가지요? 바로 그렇게 지금 페이지를 즐겨찾기에 저장하는 소스입니다. 그럼 코드를 보시죠.

<script language="javascript">
<!--
function addbookmark()
{
        bookmarkurl="http://www.jasko.co.kr/" // 즐겨찾기에 추가할 곳 의 URL
        bookmarktitle="자스코" // 사이트명
        if (document.all)
        window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
// -->
</script>

<a href="javascript:addbookmark()"><b>즐겨찾기에 추가하기</a>

맨아래부터보면 즐겨찾기에 추가하기라는 글자에 링크를 javascript:addbookmark()라고 했습니다. 즉 이 글자를 누르면 addbookmark 자바스크립트 함수가 호출된다는 말입니다. 그럼 addbookmark함수가 호출되어서 window객체의 external.AddFavorite을 실행시켜서 즐겨찾기 대화상자가 뜨게 만드는 것입니다. url은 jasko.co.kr이고 제목은 자스코이다 이렇게 되어있네요. 그럼 실행결과를 보면서 마치도록 하겠습니다.

  안녕하세요?
  오늘은 달마다 다른 페이지를 보여주는 소스입니다.

<script language="javascript">
<!--
function monthPage() {
today = new Date();
m = new Array(
// 각 월별로 이동시킬 페이지들을 만들고, 차례대로 설정 합니다
"1.html","2.html","3.html","4.html","5.html","6.html","7.html","8.html","9.html","10.html","11.html","12.htm

l"
);
window.location = m[today.getMonth()];
}
//  -->
</script>

<body onLoad="monthPage()">

today에 new Date() 즉 날짜 객체를 선언하고 m은 Array즉 배열객체입니다. 12개로 1부터 12월까지 보여줘야할 문서의 이름을 가지고 있습니다. 그다음에 window.location 즉 문서제목을 m[today.getMonth()]라고 했으니깐 m배열의 이번달을 구해서 m배열에 첨자로 보내니깐 예를들어 이번달이 9월이면 getMonth는 한달늦으니깐 8이 되어서 m[8]인 9.html이 되는 것이죠. 배열은 처음이 0부터 시작합니다. 여기까지 이해가시지요? 
  그다음에 <body onLoad> 즉 문서가 읽어들여질때 monthpage()함수를 호출하는 겁니다. 다시 설명드리면 9월이면 today.getMonth()는 8이되어서 m[8]인 9.html이 window.location에 입력이 되어서 9.html 문서가 읽어들여지는 것입니다. 그럼 오늘은 여기까지 다음시간에 또 만나요~

  안녕하세요?
  오늘 스크립트 소스는 텍스트상자의 글자를 마우스로 클릭하면 다 선택이 되게 하는 소스입니다. 아주 간단하니 예제소스를 보시지요.

<textarea name="" rows="5" cols="60" onfocus="this.select()">마우스를 클릭하면 이곳의 텍스트가 모두 선택됩니다</textarea>
<input type="text" name="text1" size=60 onfocus="this.select()" value="마우스를 클릭하면 이곳의 텍스트가 모두 선택됩니다">

처음에는 textarea이고 두번째는 text type 글상자입니다. 여기서 유의할것은 onfocus="this.select() 입니다. 즉 focus 포커스가 지정되면 즉 거기로 마우스나 탭을 이용해서 포커스를 이동하면 이런 뜻입니다. 그러면 this.select() 지금 그 컨트롤을 select 즉 선택한 상태로 만들어라 하는 내용입니다. 간단하지요? 한번 실행해 보시기 바랍니다.

  안녕하세요?
  오늘도 소스코드 분석을 하겠습니다. 오늘은 디지탈 시계인데요. 화면에 시간을 표시하면서 1초단위로 시계가 시간을 가리킵니다. 예제에 주석으로 설명을 붙여 놨으니 참고하시면서 봐주시기 바랍니다. 앞에서배운 Date객체에 시,분,초를 구하고 그것을 화면에 뿌려주는 형식으로 되어있습니다. 어렵지 않게 이해하시리라 생각됩니다. 그럼 소스를 보시죠.

<span id="liveclock" style="position:absolute;left:0;top:0;"></span>
<!-- 이곳에서 시계를 보여줄 위치를 설정 하세요 */
left:0;top:0 은 왼쪽에서 0픽셀, 위쪽에서 0 픽셀 떨어진 곳에 시계를 보여준다는 말입니다 -->

<script language="JavaScript">
<!--
function show5(){
        if (!document.layers&&!document.all&&!document.getElementById) // 크로스 브라우징 구현을 위해
        return

         var Digital=new Date()      // Date객체인 Digital을 선언
         var hours=Digital.getHours()  //  시간구하기
         var minutes=Digital.getMinutes()  // 분구하기
         var seconds=Digital.getSeconds()  // 초구하기

        var dn="PM"         // 오전,오후 AM PM정하기, 디폴트로 PM
        if (hours<12)       // 만약에 시간이 12시보다 작으면
        dn="AM"             // 오전이니까 dn=AM
        if (hours>12)       // 시간이 12시보다 크면
        hours=hours-12      // 예를들어 13이면 12를 빼서 1로 만들어줍니다.
        if (hours==0)       // 시간이 0시이면
        hours=12            // 시간은 12시로 표시

         if (minutes<=9)
         minutes="0"+minutes  // 분이 9보다 작으면 앞에 0을 하나 추가합니다. 그러니까 3분이면 03이 되겠죠.
         if (seconds<=9)
         seconds="0"+seconds  // 초도 똑같이 0을 추가해줍니다.
 
        //아래에서 원하는 형태대로 시계를 설정 하세요
        myclock="<font size='4' color=gray face='굴림' ><b>"+hours+":"+minutes+":" +seconds+"

"+dn+"</b></font>"    // myclock이라는 문자열을 HTML형식으로 표현한 것입니다. font의 size,즉 크기는 4이고

color 색깔은 gray회색이고 face 폰트는 굴림체라는 겁니다. 그리고 <b>는 bold,굵게 표현하라는 거지요. 그다음에

시간 분 초를 표시합니다.

        if (document.layers){ //NN 이면
                document.layers.liveclock.document.write(myclock)
                document.layers.liveclock.document.close()
        }
        else if (document.all) // IE 이면
        liveclock.innerHTML=myclock
        // 이 부분은 저도 잘 모르겠습니다. document.layers는 아마도 넷스케이프이면 그런뜻이고 document.all은

익스플로러이면 그런뜻인거 같습니다.
        else if (document.getElementById)
        document.getElementById("liveclock").innerHTML=myclock
        setTimeout("show5()",1000)   // 1000이면 1초를 얘기합니다. 그래서 1초마다 show5함수를 호출하라는 뜻

이지요.
}
window.onload=show5  // window가 onload,즉 열릴때, 로드될때 show5를 호출하라는 거니깐 맨처음 실행될때 show5

가 실행이 될겁니다.
//-->
</script>

<!-- 여기까지 입니다 -->

옆의 주석을 보면서 이해하시면 훨씬 빠르실 겁니다. 그럼 실행결과를 볼까요?