JavaScript: Function, IF statements, Date

 

Example: IF Statements

Let's say you want to increase the variable 'count' by 1 if 'count' is greater than 10. You could use this code:

if (count > 10)
   count = count + 1

Or perhaps we want to decrease 'count' by 3 if it is greater than or equal to 24. You could use this code:

if (count >= 24)
   count = count - 3

For another example, recall that, for Date objects, Sunday is day 0, Monday is day 1, up to Saturday which is day 6. If you want to assign "Sunday" to 'dayString' if 'day' equals 0, you could use this code:

if (day == 0)
{   dayString = "Sunday"
    alert(dayString)
}

Note that when comparing two integers, you use two equal signs inside the IF. The curly brackets are required when there are two or more statements inside an IF.

Example: a form

In the example we'll do, the function 'doSomething()' makes modifications to a form element on the page. We use the syntax

<a href="javascript:doSomething()">

so that the JavaScript function 'doSomething()' runs when the viewer clicks on the link.

Here is the full example:

<script language=JavaScript>
<!--

function setStatus(msg)
{ window.status = msg
   return true
}

function doSomething()
{ document.forms[0].hello.style.display = "block"
   document.forms[0].hello.value = "Surprise! There was a hidden text box on the page!"
   document.forms[0].hello.style.backgroundColor = "#FFFFEB"
}
//-->
</script>
</HEAD>

<BODY>
<a href="javascript:doSomething()"
onMouseOver="return setStatus('Run the function doSomething()')"
onMouseOut="return setStatus('')">Click here to run the function 'doSomething()'</a>

<form>
<input type=text name=hello size=55 style="display:none;">
</form>

to see this how this script behaves in a new window.

 

Other Resources

Try these links on onMouseOver and the Status Bar:


Page Link
onMouseOver and Status Bar www.htmlgoodies.com/primers/jsp/article.php/3478451
onMouseOver and Status Bar www.webdeveloper.com/library/qanda.html#statusbar
onMouseOver and Status Bar webteacher.com/javascript/ch06_1.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Write a function findTokyoTime(). This function prints the day and time in Tokyo, Japan. The time in Tokyo is 14 hours later than the time on the east coast of the U.S. For example, at 9:17 on a Sunday evening, your code would print this when it is run:

The time in Tokyo is: Monday 11:17 (on a 24-hour clock)

Your function should run when a link is clicked. The syntax can be like this: <a href="javascript:findTokyoTime()">Click here to calculate the time in Tokyo.</a>. Inside the Javascript function findTokyoTime(), create a Date object 'now', as you did in exercise 3. From that object, get the day, hour and minute. You can call these variables 'day', 'hour' and 'minute'. To get the hour in Tokyo ('hourTokyo') add 14 to 'hour'.

It is possible that 'hourTokyo' will be greater than 23, which doesn't make sense. If 'tokyoHour' exceeds 23, subtract 24 from it. If 'tokyoHour' exceeds 23, that means it is "the next day" in Tokyo, so you will need to add 1 to 'tokyoDay'. If it is Saturday here and Sunday in Tokyo, 'tokyoDay' will now equal 7, which doesn't make sense. If 'tokyoDay' exceeds 6, subtract 7 from it.

Finally, figure out which day it is (Sunday, Monday, etc.). To do this, set up an IF statement for each possible value of 'tokyoDay'. Then print 'tokyoDay', 'tokyoHour' and 'tokyoMinute' within a document.write().