<%response.buffer=True%> <% function rw(str) response.write str end function function html(str) response.write(server.HTMLEncode(str)) end function function url(link,str) response.write "" & str & "" end function %> [CTN162:lessons | topics]
[CTN162: Lessons & Topics]

Day 8: Dates/Arrays/Modulus

Dates: We can use JavaScript to generate date and time information, but are limited to the date and time on the user's (client) computer. This means that if the user has an incorrect date/time, it will display incorrectly on our page as well. For this reason, we are limited on the ways we can safely use these functions.

This code will generate date information from the client computer:

<script language="JavaScript">
var dayArray = new Array();
var monArray = new Array();
dayArray[0] = "Sunday";
dayArray[1] = "Monday";
dayArray[2] = "Tuesday";
dayArray[3] = "Wednesday";
dayArray[4] = "Thursday";
dayArray[5] = "Friday";
dayArray[6] = "Saturday":

monArray[0] = "January";
monArray[1] = "February";
monArray[2] = "March";
monArray[3] = "April";
monArray[4] = "May";
monArray[5] = "June";
monArray[6] = "July";
monArray[7] = "August";
monArray[8] = "September";
monArray[9] = "October";
monArray[10] = "November";
monArray[11] = "December";

//Get current date info:
var now = new Date();
var day = now.getDay();
var month = now.getMonth();
var year = now.getFullYear();
var date = now.getDate():

//Print fully formatted date:
var printedDate = "Today is " + dayArray[day] + ", " + monArray[month] + " ";
printedDate += date + ", " + year;

document.write(printedDate);

</script>

The date functions retrieve only numbers, so the arrays are populated with words to make the day and month information more readable. Example: Show Date

Now we can grab the day of the week, and can generate different code for every day of the week!

myDate = new Date();

myDay = myDate.getDay();

switch(myDay){

case 0:
       document.write("Sunday content!");
       break;

case 0:
       document.write("Monday content!");
       break;

case 2:
       document.write("Tuesday content!");
       break;

case 3:
       document.write("Wednesday content!");
       break;

case 4:
       document.write("Thursday content!");
       break;

case 5:
       document.write("Friday content!");
       break;

case 6:
       document.write("Saturday content!");
       break;

}

The advantage to the "random" example is that code (an article, for example) is generated for each day, allowing for a dynamic site, but not annoying the user by constantly swapping content out on a visit to your site. The content is consistent over the course of each calendar day.

Modulus: The modulus operator (using the % sign) is used to calculate a remainder. We can use the modulus operator to rotate content based on any number we wish. To see how the modulus function works, try the following example, and insert a number between zero and 31: Example: Show Modulus

You can see by this example that we can insert any number, and use the modulus to rotate from zero up to that number. We can use this, (for example) to rotate only 3 articles, instead of the 7 necessary to rotate using the days of the week. To make this work, we would only need to get the modulus of the day of the week number we passed in earlier:

myDate = new Date();

myDay = myDate.getDay();

var myMod = myDay % 3 //Rotate between 3 items only

switch(myMod){

case 0:
       document.write("Day 1 content!");
       break;

case 1:
       document.write("Day 2 content!");
       break;

case 2:
       document.write("Day 3 content!");
       break;

}

To change to a different rotation, you would only need to change the modulus number! To rotate 5 items, you would change the modulus to 5, and create more cases for your switch.

 

Back To Top

 
2000, 2001, 2002 webdeavor, INC. & newmanic,   All rights reserved