JavaScriptPretty simple stuff. But it seems too simple. It doesn't seem like it will impress anyone. How about placing JavaScript tags in your page. No, you don't have to go to the Java tutorial, but you can if you'd like. To learn more about JavaScript, visit our JavaScript page, or go to The JavaScript Source. Instead of having the http://www.geocities.com text come up in you status bar at the bottom of your screen, just type these few lines after the second set of quotes in you A HREF statment: Notice that now, when your mouse goes over the link, the status bar reads, "Visit geocities for your FREE home page."
All the other links were changed as well. It is wise that you make sure that the address that you are linking to is correct and that you run the page and put your mouse over the link to see the address BEFORE you add the JavaScript. If you want more complicated effects on your site, you must learn a few more things. You need to add JavaScript to you site. To do this, you'd type the following:
<SCRIPT LANGUAGE="JavaScript"> Technically, this block should be put in your <HEAD></HEAD> block, however, you may put these in your <BODY></BODY> block and still get the same results. Ok, let's kick this into second gear. We're going to add a message to one of our sites. To do this, you need to output text through JavaScript like we did below:
<SCRIPT LANGUAGE="JavaScript"> Here's what it looks like: This block was put in the <BODY></BODY> block. This is where we want to have the message. Next, we need to create some numeric variables, string variables, Boolean(or "true or false") variables, and null variables. For our test page, we are going to use the Harmon Athletics page and for the variables we are going to use the following:
By inserting these variables into our program, we can create the programming that will make our announcement more self reliant. Here's how we inserted the variables:
<SCRIPT LANGUAGE="JavaScript"> Are you lost yet? We hope not. We have a ways to go before we're done. Now we have to create what are called "objects" to use the variables we created. We need to create a few Date(); objects so that each variable is given a value and can interrelate with each other. First, we'll declare the object for the Today variable. To change the Today variable, type this: var Today=new Date("April 15, 2004"); This date is a dummy date that we can refer to in conversation. To be able to use this object, we could type ThisDay = Today.getDate(); to receive just the day of the month. The .getDate(); is called a method. To get the month value, we could type ThisMonth = Today.getMonth()+1;. The +1 was added because the Month() method is stored as an array starting from 0. If you did not add 1 to the Month() method, January would be the 0th month of the year and December would be the 11th. Remember, Today contains a dummy version of the current date and time. Using the "get" methods, we can get the real date and time. We could also type ThisYear = Today.getFullYear(); to get the year, in this case, you would get 2004. To do the same with these objects as you did with the Today object you just created, type:
var ThisDay = Today.getDate(); Next, we'll change DaysLeft to "999". This will give us a dummy test value for how many days left. Then, we need to change the two document.write() so we can print the values we have stored:
document.write("Today is "+ThisMonth+"/"+ThisDay+"/"+ThisYear+"<BR>"); The "+" that you see are used to concatenate, or add, strings of data together. Your program should look like this:
<SCRIPT LANGUAGE="JavaScript"> Now if you were to run the program, the date would be different and the days left would have also changed. Next, we will create a function, which is a series of commands that either performs an action or calculates a value. It includes a function name and parameters that the function will use. We will be using green text to describe what each line of the function does. Do not include these lines in your program. Below the <TITLE></TITLE> block in the <HEAD></HEAD> block, type in this function:
<SCRIPT LANGUAGE="JavaScript"> To complete this whole program, remove the dummy date from Today in your lower program and change DaysLeft to MarathonDays(Today);. To see if your site compares to ours, see our Harmon Store Page. Now, instead of looking like a rookie, you look like you are a pro at designing home pages. To see some other interesting JavaScript add-ons,
Question: WOW!! I didn't know JavaScript was such an important part of building a web site. Are there other things I can do to make my site more interesting? Answer: Yes there is, and we're glad you're learning. One other thing you could do to make your site more interesting as well as easier to program is to add cascading style sheets. If you have a question about any of the lessons, feel free to ask. |