Use these to jump around or read it all
The Concept
The Script
The Script’s Effect
Deconstructing the Script
What You’ve Learned
Your Assignment
The Concept
What’s nice about writing JavaScript right to a Web page is all the stuff that already exists that you can grab and display. You know that the document already exists from Primer #1, right? It has to or you couldn’t write to it.
In this primer we’ll talk about seven new methods: getDay(), getDate(), getMonth(), getFullYear(), getHours(), getMinutes(), and getSeconds(). Each of these already exists and can be grabbed and placed on your Web page. The problem is that these items are only methods. They need an object to act on and the document object won’t do it… so we need to make one.
The Script
<SCRIPT LANGUAGE=”JavaScript”>//This script posts the exact day
//and time you arrivedRightNow = new Date();
document.write(“Today’s date is ” +
(RightNow.getMonth()+1)+
</SCRIPT>
By the way, the document.write line above should be all on one line. It is just written in sections above so you can see all the parts.
The Script’s Effect
Please Note! This tutorial was updated during the first weeks of January, 2000. The JavaScript fix in this primer to use “getFullYear()” to grab the year. That will return a full I have created a new tutorial dedicated to how you can fix this bug across |
Deconstructing the Script
Do not be taken aback by this script’s size. It’ll all make sense in a short while. Now allow me to once again drive a point into the ground. See the script’s shape? That one line goes way off the end of the screen. That shape must be retained. Breaking that line into two will throw an error.
What’s That // Thing?
As we move through the primers, a few extra commands will be thrown in now and again. This is one of them. That double slash denotes a comment inside the script. It means that the text that follows will not be used in the process, but will rather be reprinted as-is. You can add as many of them as you’d
like as long as each line starts with the double slash.
The Date and Time Methods
If you look at the script above, you’ll see that the effect is created by asking the script to write the month, date, year,
hour, minute, and second to the page. The extra verbiage stuck in there just makes it obvious what you’re looking at.
Each of the items were created using the method “getSomething()”. Please notice the capitalization format. The “g” is lowercase then the first letter of the thing you are to get is capitalized.
First, remember that each of these items is numeric. They only return numbers. Even the getDay() method that collects the day of the week returns a number, one through seven.
Let’s start with just the first one called for in the script above, the month. Then we can start to break down how this pup works. As stated before, “getMonth()” is a method. That said, we now must concern ourselves with what object “getMonth()” is a method of. (Remember this from Primer #1? A method acts on an object.)
It would appear from the script that again “getSomething()” is a method of “document”. Not so. The method of “document” is “write”. “getMonth()” is actually a method of the object Date. Again, look up at the script. “Date” is set aside in the command:
RightNow = new Date();
Here I am setting aside an object for the method getMonth() to work on. The format is the same each time you use dates and times. You must create an object. My object is titled RightNow. See that above? Now, I could have called it
Zork or Fred for all the browser cares. It doesn’t matter as long as the object is given an original name that isn’t found in JavaScript. Use this format every time you use dates or times.
If that seems backwards to you, it does to me, too. It seems like it should be new Date = RightNow, but it isn’t. You’re learning a new language and you have to play by its rules.
The command above is saying: RightNow is the object that represents a new Date();. The date has to be new. That way you get a new date every time the page is reloaded or entered. Without the new command, the date would remain static.
Also notice the semicolon at the end of the line. That acts as a statement terminator. It denotes that one complete line of JavaScript has ended. Without it, the browser thinks the line just continues on to the next. Error.
Hooray! We have our object so that our “getMonth()” method can act upon it. We want this month to be printed on the page so we need to have a document.write() statement in there somewhere. We also know that what appears in the parentheses is printed
on the page, so let’s put it together following a logical process:
- We need to place the <SCRIPT LANGUAGE=”javascript”> first.
- Then we’ll put in a comment line that tells what this thing does.
- We’ll need to create an object before we can call on the getMonth() portion, so we’ll put that in. Make sure it ends with a semicolon.
- Now we can place the document.write statement.
- Inside the document.write’s incidence, we follow the same format as in Primer 1.
- Text that is to be printed must be inside of double quotes (single quotes on any HTML inside).
- New Rule: Combining text and commands in an incidence requires placing a plus sign (+) between items.
- Object and method are written separated by a period so the command to place the month must look like this: RightNow.getMonth().
- New Rule: RightNow.getMonth() is not text to be printed. It’s a command that will grab the month. So, no quotes of any kind are needed.
- Notice that one is added to getMonth: (RightNow.getMonth()+1). The reason is that the return of months start at zero
so every month must have one added to it to be correct. I surrounded the addition of one in ( and ) so that the plus sign wouldn’t get confused with the plus signs linking everything together.
- Text that is to be printed must be inside of double quotes (single quotes on any HTML inside).
- Finish up with </SCRIPT>
Here’s what we get:
<SCRIPT LANGUAGE=”javascript”> |
Look up at the full script again. That long line of text doesn’t look so tough now. It’s simply the “RightNow” object followed by the next “getSomething()” method. I separated each with a hyphen. Remember, the hyphen is to be printed so it needs to be in quotes. Then each of the parts are connected using a plus sign (+).
Adding Spaces
This is a little trick you’ll need to know. No matter how many spaces you put before or after the plus signs, it doesn’t translate in the printed result. It all runs together. So, if you want spaces, you need to add them in the text section. Example:
“This is the date ”
See how I added two spaces before the end quote? That will translate to two spaces when the script prints it to the page. Remember: This is not HTML. There are new rules for spaces and how to add them to your page.
Building the Long Line
I won’t go through it all, because you probably have the swing of it by now. I’ll do the full date alone. It looks like this:
document.write(“Today’s date is ”
- I start with “Today’s date is ” adding a space at the end for continuity.
- Plus sign is next.
- (RightNow.getMonth()+1) is added without quotes because we do not want that printed, we want the number returned.
- Another plus sign.
- Now a hyphen in quotes to separate it from the next number. No space because I want the next number to butt right up against it.
- Plus sign.
- Now add RightNow.getDate() because I want the number of the day. No quotes.
- Plus sign.
- Another hyphen in quotes so it is printed right to the page.
- Plus sign.
- Another new method RightNow.getFullYear() will return the number of the year.
Just continue to follow this same format and the script will print out exactly what you want. So, now you can tell everyone what time it is. But as Chicago said… Does anybody really
know what time it is? Does anybody really care?
A known concern:
I stated this above, but I wanted to hit it one more time. In one of the more interesting bugs of JavaScript,
you may have noticed above that the month is off by one when you just use the getMonth() alone. Why? Remember that the numbers returned are in JavaScript and JavaScript likes to count up from zero. Strange, yes, but that’s what it does. Thus January is seen as “0” and every month after is one down.
So, what do you do? Well, you add 1, of course! The code is a little tricky. It involves making a couple of variables. That’s where you assign a name to something (you’ll get into it in Primer 6). You assign “new Date()” a name just like you did above. Then you assign a name to the code that calls for the month. I called it “mpo” below (to stand for Month Plus One). Then you add one to that name. I called it “mpo1” below. It sounds confusing, but it’s not. Here’s what it looks like:
<SCRIPT LANGUAGE=”javascript”>RightNow = new Date();
var mpo = RightNow.getMonth();
var mpo1 = mpo + 1
document.write(“Today’s Month is ” +mpo1+ “”);</SCRIPT>
I’ll bet that’s the correct month, right? I did it above by simply adding one and
surrounding the whole thing in ( and ).
What You Have Learned
Your Assignment
This one isn’t so tough. What I would like is for you to write a script that shows the date separated by slashes on your welcome page. I’d like the welcome text printed in green. Don’t worry about the numbers yet, we’ll get into changing their color later. Also, comment out that you wrote the script, because… you did!
Answer (this will open a new window)
The Concept
The Script
The Script’s Effect
Deconstructing the Script
What You’ve Learned
Your Assignment
