.JavaScript&more Tutorial
 

Time-dependent Scripts

Go to JavaScript Start Page

     
    • The Date Object
    JavaScript already has a built in object that gets the date and time. To use this date object, you need to first create an instance of it. What we have to do is tell JavaScript to activate this object. To activate a Date Object so you can use it, do this:

    var mydate= new Date()

    Whenever you want to create an instance of the date object, use this important word: new followed by the object name().

    Let we write out today's date: 

    <HTML>
    <HEAD>
          <TITLE>time_example</TITLE>
    </HEAD>
    <BODY>
    <P>output:
          <SCRIPT>
          <!--
               var today_date= new Date()
               var myyear=today_date.getYear()
               var mymonth=today_date.getMonth()+1
               var mytoday=today_date.getDate()
         document.write(myyear+"/"+mymonth+"/"+mytoday)
          //-->
         </SCRIPT>
    </BODY>
    </HTML>

    var myyear=today_date.getYear() means "get the year and put it in variable myyear." We added "1" to the month, since in JavaScript, it counts months starting from "0",  not "1"!

    Output:


    • Dynamically writing out html codes


    With the above knowledge, and a little HTML, you can display different images according to the date/time. Here is a common example: Displaying a different image depending on whether it is mourning or night.

                      Lets first get two images: (One for mourning, one for night.)

    Varna_day.jpg                                   Varna_night.jpg
    Varna City in Bulgaria________ Varna City in Bulgaria

     <SCRIPT>
     <!--
              var current= new Date()
              var day_night=current.getHours()

              if (day_night<=20)
                      document.write("img src='Varna_day.jpg.'>")
              else
                      document.write("img src='Varna_night.jpg'>")
       //-->
      </SCRIPT>
    (You can Cory/Paste this script in your page, too.) 

    The result of it is:

           Output:


    • setTimeout function


    It is a method of the window object, basically delays the execution of a function or statement until the specified time has passed. The basic syntax of this function is:

     setTimeout("expression", delaytime)

    "expression" -   the function/statement you want delayed
    delaytime     -   the delay time, in milliseconds. 

    For example, this will output "Two seconds have gone!" 
    after 2 seconds:

    document.name_form.test_date.value=""
    //simply clears the text box
    function name_function()
    {
       setTimeout("document. name_form.test_date.value='Two seconds have 
       gone!'",2000)
    }
    <form name="name_form">
       <input type="text" size="28">
       <input type="button" value="Start" onClick="name_function()">
    </form>



    Copy/Paste this code in your page: 

    <FORM name="three"> 
    <INPUT type="text" size="28" name="hi"><INPUT type="button" name="B1" value="Start" onclick="document.three.hi.value=' ';talk()"> 
    <SCRIPT> 
    <!-- 
    document.three.hi.value="" 
    function talk() 

    setTimeout("document.three.hi.value='Two seconds have gone!'",2000) 

    //--> 
    </SCRIPT> 
    </FORM> 


    Let's do an example that, by placing the setTimeout in a special position, continuously writes to a box, incrementally itself every second.

       var c=0
       document.go.timer.value=""
      function count()
       {
            document.go.timer.value=c
            c=c+1
            setTimeout("count()",1000)
        }
        <form name="go">
          <input type="text" name="timer" size="12">
          <input type="button" value="Start" onClick="count()">
        </form>
    You can Copy/Paste this code:
    <FORM name="see"> 
    <INPUT type="text" size="12" name="timer"> 
    <INPUT type="button" name="B1" value="Start"onclick="count()"> 
    <SCRIPT> 
    <!-- 
    var c=0 
    document.see.timer.value="" 
    function count() 

    document.see.timer.value=c 
    c=c+1 
    setTimeout("count()",1000) 

    //--> 
    </SCRIPT> 
    </FORM> 
     To get "1" second, we used "1000". (1 millisecond*1000) equals 1 second. 

    • Adding a live clock with the help of a form 


    Adding a live clock using forms is quite simple...the basic concept is to continuously write to the form every 1 second, using the updated time from your own computer. 

    If you want to add this clock somewhere on your web page
    Copy/Paste this code:

    <form name="Tick">
    <input type="text" size="12" name="Clock">
    </form>
    <script>
    function show()
    {
    var Digital=new Date()
    var hours=Digital.getHours()
    var minutes=Digital.getMinutes()
    var seconds=Digital.getSeconds()
    var dn="AM" 
    if (hours>12)
    {
    dn="PM"
    hours=hours-12
    //this is so the hours written out is 
    //in 12-hour format, instead of the default
    //24-hour format.
    }
    if (hours==0)
    hours=12
    //this is so the hours written out 
    //when hours=0 (meaning 12a.m) is 12
    if (minutes<=9)
    minutes="0"+minutes
    if (seconds<=9)
    seconds="0"+seconds
    document.Tick.Clock.value=
    hours+":"+minutes+":"+seconds+" "+dn
    setTimeout("show()",1000)
    }
    show()
    </script>
     

To continue with JavaScript&more ... continue