Simple JavaScript Scripts, Part 2
Your first JavaScript script
In any language, the programmer needs to find out how to output text into a
document. In order to output text in JavaScript you must use write() or
writeln(). Here's an example:
Writing text on a document
<HTML>
<HEAD>
<TITLE> Writing text on a document</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hiding the code
document.write("Welcome to Applications in JavaScript!");
// done hiding -->
</SCRIPT>
</BODY>
</HTML>
Test This Example
If you're familiar with JavaScript
syntax, this script should be easy for you to understand. You will
notice that we have included the code in between <SCRIPT> and
</SCRIPT> tags. We made sure the document object
write is in lowercase as JavaScript is case sensitive.
Now, you might be wondering what the difference is between
write and writeln. Well, while
write just outputs a text, writeln outputs a
line feed after the text output.
Date and time
You probably have seen many Web sites that incorporate a clock. Before
JavaScript, you had to use CGI to have the current date and time on a page.
Now, creating clocks and the date is easy and can make your site look cool.
Using this example, you also can create custom greetings for your visitor,
depending on the time of day. For example, you can have a message saying,
"It's 12:00 a.m.. Go to bed!"
If you look at the Netscape's JavaScript documentation, you will know that
there are two built-in functions in JavaScript that let you display date
and time. The following example will display the current time and date in a
text box with an option to stop the time.
Showing date and time on a document
<HTML>
<HEAD>
<TITLE> Showing date and time on a document</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--Hiding the code
var show_time=false;
var timerID=null;
function stop(){
if (show_time){
clearTimeout(timerID);
document.clock.date_time.value=" ";
}
show_time=false;
}
function start(form){
var today=new Date();
var display_value =" Time= " + today.getHours()
if(today.getMinutes() < 10){
display_value+=":0" + today.getMinutes();
}
else{
display_value+=":" + today.getMinutes();
}
if (today.getSeconds() < 10){
display_value+=":0" + today.getSeconds();
}
else{
display_value+=":" + today.getSeconds();
}
if(today.getHours()>=12){
display_value+=" P.M."
/* Here we have a variable called mygreeting where
you can store somthing like this:
mygreeting ="Good Morning!"; */
}
else{
display_value+=" A.M."
/* Now set mygreeting to:
mygreeting ="Good Afternoon!"; */
}
display_value += " Date= " + (today.getMonth()+1) + "/" +
today.getDate() + "/" + today.getYear();
document.clock.date_time.value=display_value;
timerID=setTimeout("start()",100);
show_time=true;
/* Here have an alert() method do the following:
alert(mygreeting); */
}
//done hiding-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white Text=Red Link=Green onLoad=stop()>
<center>
<H2>Displaying Date and Time</H2>
<FORM name=clock>
<INPUT type="text" name="date_time" size=35 value=" "><br>
<INPUT type="button" name="show_now" value="Display" onClick=start()>
<INPUT type="button" name="clear_now" value=" Clear " onClick=stop()>
</center>
</FORM>
</BODY>
</HTML>
Test This Example
In this script, we have two functions (stop() and
start()) for our two buttons Display and Clear. When the
button Display is pressed, the start() function is called,
and when the button Clear is pressed, the stop() function
is called. Both of these functions are called using the
onClick event handler.
Now the stop() function simply clears the
setTimeout method that is used in the start()
function. This function also clears the text box that displays the
time and date. Finally, the function puts a false value to the Boolean
variable show_time.
In start() function, a new instance of date using the
statement new is created. Then a variable
display_value was defined so that we can export the date
and time value in the text box later. Remember that we are using the
display_value as a string variable. Now we have to make
sure that if the seconds and minutes are less than 10, they are both
displayed as single digits. The if...else statement is
used for that purpose.
In order to display a.m. or p.m., another if...else
statement is used to check for a value more than or equal to 12. So,
if the time value is more than 12, display_value would
then hold "p.m.," otherwise it would hold "a.m." Lastly, the value of
the day, month, and the year is added in the variable. Now it's time to
display the data into the text box. This is done with the following
code:
document.clock.date_time.value=display_value;
The above code takes the value of display_value and puts
it in the property called value of the text box named
date_time. The word document is used to insure that we
are indicating the current document. Lastly, the variable
timerID is set and show_time is set to true.
Notice that timeID uses the setTimeOut()
function with the parameters start() and 100. The reason
why 100 is passed in is because the function start() is
within one tenth of the second.
Simple JavaScript Scripts
Simple JavaScript Scripts, Part 3
|
