<Lesson 8> [Contents] <Lesson 10>
JavaScript is an object-oriented programming language. JavaScript programming consists of commands that manipulate various kinds of objects using properties and methods. There are many built-in objects in JavaScript, among the most commonly used are Document object, Date object, Text object, Form object, String object, Password object, Location object, Math object and more. Each object has its own Properties and Methods. In this lesson, we will examine the date object, the rest of the objects will be discussed in the coming lessons.
9.1 The Date Object
The date object is used to manipulate and display date and time. The Methods associated with the date object are getDate, getDay, getHours, getMinutes, getSeconds, getYear and more. Each of these methods returns the current time value associated with the method name. For example, getDate will return the current while get minutes will return the current minutes
In order to use the Date object, we need to create an instant of the object using the New keyword.
9.2 Displaying Date and Time
Example 9.1
<html>
<head>
<title>Date Object</title>
</head>
<body>
<h1>Date and Time Manipulation</h1>
<script language=javascript>
currentDate=new Date()
document.write("<font color=red>Displaying Day of the month:</font>"+currentDate.getDate())
document.write("<br><font color=red>Displaying hours of the current time:</font>"+currentDate.getHours())
document.write("<br><font color=red>Displaying minutes of the current time:</font>"+currentDate.getMinutes())
document.write("<br><font color=red>Your computer time is: </font>"+currentDate.toString())
document.write("<br><font color=red>Your Local time is: </font>"+currentDate.toLocaleString())
</script>
</body>
Click on the Example 9.1 to see the output
9.3 : Setting Date and Time
We can set the date and time in JavaScript using setDate, setHours, setMinutes, setMonth, setTime and setYear methods. The general formats are:
Mydate.setDate(day of the month)Mydate.setHours(hours of the day) Mydate.setMinutes(Minutes of the day) Mydate.setMonth(Month of the day) Mydate.setYear(Year)
Example 9.2
<html>
<head>
<title>Setting date and Time</title>
</head>
<body>
<h1>Setting Date and Time </h1>
<script language=javascript>
MyDate=new Date()
MyDate.setHours(13)
MyDate.setMinutes(35)
MyDate.setSeconds(24)
MyDate.setDate(24)
MyDate.setMonth(3)
MyDate.setFullYear(2012)
document.write("<br><font color=red>The time is set to: </font>"+MyDate)
</script>
</body>
Click Example 9.2 to see the output
9.4 : Customized Greeting
We can customize greeting on a webpage according to the time of the day. You can do many things with greeting text, like changing its font size and color, or use bold font etc. The code is pretty simple, we just use the conditioning operator If.
Example 9.3
The Script:
CurDate=new Date();
timeNow=CurDate.getHours();
var greeting;
var my_greet;
if (timeNow>18) {
greeting='Good Evening';
my_greet=greeting.fontcolor("orange")
} else if(timeNow>12){
greeting='Good Afternoon';
my_greet=greeting.fontcolor("red")
} else if(timeNow>0) {
greeting='Good Morning';
my_greet=greeting.fontcolor("blue")
;
} else {
greeting='Good Day';
my_greet=greeting.fontcolor("cyan")
}
document.getElementById('mygreeting').innerHTML=my_greet
The HTML document:
<!DOCTYPE html>
<html>
<body>
<h1>Hi <b id="mygreeting"></b></h1>
<script type="text/javascript" src="cus_greet.js"></script>
</body>
</html>
view the output in