The Dynamic pages load!!
Effective web pages are the result of mmany different factors, including compelling content, good design, and attention to details, such as how fast the page load
In other words, instead of your web server pushing the page experience to the user, the server push script over the Internet. The script then uses the power of the user's computer to make the page come alive.
Pages with scripts like these can be called dynamic pages By moving the processing from the server side to the client(user)side, you get better performance and you can personalize the user experience.
One of my 3 months project at J&J Cordis Corporation for Convert Ms Excel to Ms Access application with is putting the current Date/previous of time the new Processing Engineer got all Training Date into a Forms now is Web page,
Back then I was not familiar much with Date Time as much like today.
which is gets as a number in Access and it's very suck!!. Today I can can manipulate that figure in many ways,
because javascript has to handle the conversion from the number the computer uses into textual date you can understand:
a. window.onload = iniDate;
When the document loads call iniDate( ).
b.var dayName= new array("Sunday", "Monday", "Tuesday", "Wednessday", "Thursday", "Friday", "Saturday");
First, we need to create a new array that contains the day of the week. Make sure to use commas to seperate the items in the array; and because they are text string, each item must enclosed in quotes. The array gets assigned to the variable dayName.
c. var MonName= new array("January", "February", "March", "April", "May", "June", "July", "august", "September", "October", "November", "December");
d. var now = new Date( ) ;
The last thing to do in this first section is to tell javarScript to create a new Date Object, call is now, and fill it with the current date.
e. var dtString = dayName[now.getDay( )] + ", " + monName[now.getMonth( )] + " " + now.getDate ( ) ;
The object dayName[now.getDay ( )] is read from right to left; getday( ) is the javarscript method that gets today's day of the week, and asking now for it gets today's of the week.
The numerical result reference one of the entries in the array dayName
next we concatenate a comma and a space to the text string that we're building, and then we concatenate the next expresion, which is the month name, expression by the object monName[getMonth( )]. This gets the month in much the same fashion as getting the day name; and the reference on of the entries in the array monName.
A space is concatenated next, and we end the object now.getDate( ), which return the date of the month. All of this assigned to dtString variable.
e. document.getElementById( "dtField" ).innerHtml = dtString
The id dtField is in Html page; it's within a <span>tag, liked so
<h1> today is <span id = "dtField"></span>.</h1>
Javarscript:
window.onload = iniDate;
Function inDate( ) {
var dayName= new array("Sunday", "Monday", "Tuesday", "Wednessday", "Thursday", "Friday", "Saturday");
var MonName= new array("January", "February", "March", "April", "May", "June", "July", "august", "September", "October", "November", "December");
var now = new Date( )
var dtString = dayName[now.getday( )] + " , " + monName[now.getmonth( )] + " " + now.getdate( ) ;
document.getElementById( "dateField" ).innerHtm = dtString;
<h1> today is <span id = "dtField"></span>.</h1>
Working with days:
We are figure out if this is weekday or this is a weekend;
a. var now = new Date( );
Fill the variable now with the current date.
b. If(now.getDay( ) > 0 && now.getDay( ) < 6) {
c. dtString = "Sorry, it's a weekday. ";
If the result is greater than zero and less than 6, it has to between 1 and 5, which is to say from Moday to Friday.
d. else {
dtString = "You wrong, It's a weekend!" ;
If we fail b step , it must be weekend.
e. document.getElementById( "dtField" ).innterHTML = dtString ;
Script:
window.onload = initDate ;
Function initDate( ) {
var now = new Date ( ) ;
If(now.getDay( ) > 0 && now.getDay( ) < 6) {
var dtString = "Sorry, it's a weekday.";
}
else {
dtString = "You wrong, It's a weekend!" ;
document.getElementById( "dtField" ).innterHTML = dtString ;
}
Customizing a Message for the Time of the Day:
I take the technique used in the last example and use it again to customize a message for the user, depending on the time of the day.
This can be a friendly greeting when user enter the site
Script:
window.onload = initDate ;
Function initDate( ) {
var now = new Date ( ) ;
document.getElementById( "dtField" ).innterHTML = timeString(now.getHours( ) ) ;
function timeString(theHour) {
if (thehour < 5) {
return "What are you doing so late?";
}
if (thehour < 9) {
return "Good Morning";
}
if (thehour < 17) {
return "No surfing during working hours!";
}
return "Good Everning!";
}
}
Displaying Dates by time Zone:
By default the dates and times that are displayed are those on the user's machine. If you want to
display a date somewhere else, you need a calculate it based on UTC(Coordinate Universal time) is essential a different name for
GMT(Greenwich Mean Time) or UTC also goes under Universal Time(UT).
Script:
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>Time Zones</title>
<Script Type = "text/javarscript" src = "Script04.js"></Script>
</head>
<body bgcolor = "#FFFFFF">
<h3>Our office hours are 9:00 am to 5:00 pm, Monday through Friday, at each of our locations it is now</h3><ul>
<li><span class= "tz-8"></span> in Sanfancisco </li>
<li><span class= "tz-5"></span> in NewYork </li>
<li><span class= "tz-0"></span> in London </li>
<li><span class= "tz+7"></span> in Hong Kong </li>
</body>
</html>
window.onload = initDate;
function initDate( ) {
var allTags = document.getElementByTagName("*") ;
for (var i=0; i<allTags.lenght; i ++) {
if (allTags[i].classname.indexOf("tz")==0) {
ShowThetime(allTags[i], allTags[i].className.substring(2)) ;
}
}
}
function showthetime(currElem, tzOffset) {
var dayName= new array("Sunday", "Monday", "Tuesday", "Wednessday", "Thursday", "Friday", "Saturday");
var thatTZ = new Date( );
var dateStr = thatTZ.ToUTCString( ) ;
dateStr = dateStr.substr(0, datStr.lenght - 3) ;
thatTZ.setTime(Date.parse(dateStr)) ;
thatTZ.setHours(thatTZ.getHours( ) + parseInt(tzOffset)) ;
currElem.innerHTML = showTheHours(thatTZ.getHours( ) ) + showZerofilled(thatTZ.getminutes( ) ) +
-> showAmPm(thatTZ.getHours( ) ) + dayName[thatTZ.getday( )];
function showtheHours(theHour) {
if(theHour ==0) {
return 12;
}
if(theHour < 13) {
return theHour;
}
return theHour - 12
}
function showZeroFilled(intValue) {
if(intValue > 9) {
return ":" + intValue
}
return ":0" + intValue
}
function showAmPm (thattime) {
if(intValue < 12) {
return "AM" ;
}
return "PM" ;
}
}
Converting 24-Hour to 12-Hour Time:
Javarscript provides the time in 24 hour format, also know as military time. many people are unfamiliar or uncomfortable
with this format. In the next two script has two important elements:
Script:
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>Javar Script Clock</title>
<Script Type = "text/javarscript" src = "Script05.js"></Script>
</head>
<body bgcolor = "#FFFFFF">
<div align = "center">
<h2 Id = "showTime"> </h2>
<form action = "#">
Display 24-hour clock?
<input Type = "radio" name = "timeClock" id = "show24" checked = "Checked"/><lable for = "show24">Yes</label>
<input Type = "radio" name = "timeClock" id = "show12" checked = "Checked"/><lable for = "show12">No</label>
<h3>Our office hours are 9:00 am to 5:00 pm, Monday through Friday, at each of our locations it is now</h3><ul>
</form>
</body>
</html>
window.onload = showTime;
function showthetime( ) {
var now = new Date( ) ;
document.getElementByTagName("showTime").innerHTML = showTheHours(now.getHours( ) ) +
-> (now.getHours( ) ) +
showZeroFilled(now.getminutes( ) ) +
showZeroFilled(now.getseconds( ) ) +
settimeout(showTheTime, 1000);
function showtheHours(theHour) {
if(show24Hour( ) || (theHour > 0 && theHour < 13)) {
return theHour;
}
if(theHour == 0) {
return 12
}
return - 12
}
function showZeroFilled(intValue) {
if(intValue > 9) {
return ":" + intValue
}
return ":0" + intValue
}
function show24Hour( ) {
return (document.getElementById("show24".checked) ;
}
function showAmPm (thattime) {
if(show24Hour( ) ) {
return " " ;
}
if(now.getHour( ) < 12)) {
return " AM " ;
}
return "PM" ;
}
}
Creating a Count down:
In case you want to put a count down on your pages that tell the user how many days or hours until a particular event:
Script:
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>Dynamic Countdown</title>
<Script Type = "text/javarscript" src = "Script06.js"></Script>
</head>
<body bgcolor = "#FFFFFF">
<p>Anie says: ,/p>
<p> It's only <span class = "daysTill" id ="Bday"> </span> days until my birthday and <span class = "daysTill" id "Easter" </span> days until EastTer, so you' d better start shopping now!</p>
<p> It's only <span class = "daysTill" id ="anniv"> </span> days until our anniversity...</p>
</body>
</html>
window.onload = showDays;
function showDays( ) {
varAllTags=document.getElementByTagName("*") ;
if (allTags[i].className.indexOff("daysTill") > - 1) {
allTag[i].innerHTML = showtheDaysTill(allTags[i].id) ;
}
}
function showtheDaysTill(thisDate) {
var theDays ;
Switch(thisDate) {
Case "bday" :
theDays = daysTill(4,13);
break;
Case "Easter" :
theDays = daysTill(4,25);
break;
Case "anniv" :
theDays = daysTill(6,16);
break;
}
return theDays + " ";
function daysTill(mm,dd) {
var now = new Date( ) ;
var inDate = new Date(now.getFullYear( ), mm-1,dd) ;
if(inDate.getTime( ) < now.getTime( ) ) {
inDate.setYear(now.getFullYear( ) + 1) ;
}
return (Math.ceil(dayToDays(intDate) - dayToDays(now( ) ) ) ;
}
function dayToDays(intime ) {
return (inTime.getTime( ) / (1000 * 60 * 60 * 24));
}
}
Javarscript stores dates in milliseconds since January 1, 1970. In order to compare two dates.
Fist, get the number of millisecond in a day by mutiplying 1000(the numberr of milliseconds in a second), by 60 (number of seconds by minute),
by 60 again(number of minute in an hour), and then by 24(number of hour in a day.
Dividing the number of milliseconds returned by getTime( ).