Adding JavaScript programs to your webpage

Posted on December 31, 2008 at 12:32 am

There are a lot of JavaScript codes out there available for free. With JavaScript you will have dynamic functionality in your otherwise static webpage. You might still be daunted by the thought of touching codes in your webpage but let me assure you that this is as easy as a plain copy and paste operation.

A good source of examples of JavaScript codes are located here: http://www.javascriptkit.com/cutpastejava.shtml

For illustration purposes I will choose the whole year calendar so we can display a calendar for the whole year of 2009: http://www.javascriptkit.com/script/script2/yearcalender.shtml

The code above from Scott Barret is configurable so that users can change the year of the calendar. To start the process of extracting this code, copy the code on the text area located at the lower part of the page:

You will need to put this code into your webpage’s source code so open your webpage file using your favorite HTML editor. Make sure to paste the code when you are in source code mode and not in the WYSIWYG mode (otherwise you will end up displaying the source code instead of the desired output).

Make sure to change the year variable’s value to the year you want to display. In the example below I changed it to 2009:

So now we have the actual code’s output below:

<!–
// fill the month table with column headings
function day_title(day_name){
document.write(”“+day_name+”“)
}
// fills the month table with numbers
function fill_table(month,month_length)
{
day=1
// begin the new month table
document.write(”

“)
document.write(”“)
// column headings
day_title(”Sun”)
day_title(”Mon”)
day_title(”Tue”)
day_title(”Wed”)
day_title(”Thu”)
day_title(”Fri”)
day_title(”Sat”)
// pad cells before first day of month
document.write(”“)
for (var i=1;i<start_day;i++){
document.write(”“)
day++
}
document.write(”“)
// fill the remaining weeks
while (day <= month_length) {
for (var i=1;i<=7 && day<=month_length;i++){
document.write(”“)
day++
}
document.write(”“)
// the first day of the next month
start_day=i
}
document.write(”

“+month+” “+year+”
“) } // fill the first week of days for (var i=start_day;i<8;i++){ document.write(”	“+day+”
“+day+”

“)
}
// end hiding –>

// CAHNGE the below variable to the CURRENT YEAR
year=2009

// first day of the week of the new year
today= new Date(”January 1, “+year)
start_day = today.getDay() + 1 // starts with 0
fill_table(”January”,31)
fill_table(”February”,29)
fill_table(”March”,31)
fill_table(”April”,30)
fill_table(”May”,31)
fill_table(”June”,30)
fill_table(”July”,31)
fill_table(”August”,31)
fill_table(”September”,30)
fill_table(”October”,31)
fill_table(”November”,30)
fill_table(”December”,31)

This free script provided by
JavaScript Kit

It is so easy, isn’t it? In most cases the steps are as easy as this on some types of code you will need to copy a JavaScript file and save it inside the directory of your HTML. There will be also cases that you will not put the code in the the BODY tag but on the HEADER tag so watch out for the directions provided by the hosts of the scripts.