Add Dynamic Touches To Your Website Using Javascript

Writen by Sergio Roth

You're not a programmer but you have a website. Would you like to add some JavaScript to it to make it look more dynamic and appealing? I have used JavaScript in many of the websites I have programmed, to do things that range from displaying today's date to using Ajax. Of course I will not speak about Ajax in this article, Ajax would need an article on its own and is beyond the scope here. Just in case you're wondering what Ajax is, it is a set of JavaScript instructions and classes that allow browsers to get information from a script in the server and update the page contents dynamically without having to reload the page. As I was saying, I will not discuss Ajax here. But I will share part of my knowledge and provide some ready-to-use code that you can easily add to your pages. The code pieces are independent, so you do not need to add them all. Each one works on its own. So let's begin.

In case you're wondering if you need anything special to run JavaScript, the answer is no. You just need your browser. The only trick is to have JavaScript enabled in the browser, which is how most people have it set.

I am not trying to teach you JavaScript here. I am just trying to provide you some snippets of code you can use directly of-the-shelf to enhance your pages.

Display today's date You can use this JavaScript small bit of code to display today's date anywhere in the page. Just insert the code where you want the date to appear. Enclose all this code between script and /script tags.

  var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');  var months = new Array('January','February','March','April','May',
'June','July','August','September','October','November','December');  var d = new Date();  var weekDay = days[d.getDay()];  var month      =  months[d.getMonth()];  var day   = d.getDate();  var year = d.getYear();  var suffix = 'th';  if (day == 1) suffix = 'st';  else if (day == 2) suffix = 'nd';  else if (day == 3) suffix = 'rd';  document.write(weekDay+', '+month+' '+day+suffix+', '+year);  

This piece of code will display the date in this format: Monday, April 3rd, 2006 . If your site is in a language other than english, just replace the days and months names. You can replace the suffix letters so they don't get displayed either, by changing 'th' to '', 'st' to '', 'nd' to '' and 'rd' to ''. If you want to change how the date is displayed, to make it look like this, for example: Monday, 3 April 2006 , you need to move things around a little in the document.write line. This is how the document.write line should look to display the date in the format I just mentioned:

document.write(weekDay+', '+day+' '+month+' '+year);

You can notice we have removed the suffix part here.

If you're wondering why would you like to display today's date in the page, the answer I give you is: to provide your visitors the impression that your page is updated very often. That the page is up-to-date. Anyway, I think it is a nice touch.

Display a message in the status bar You can use this small bit of JavaScript code to display a custom message in the browser's status bar. Enclose all this code between script and /script tags.

  window.status = 'This is my message.';  

Paste this piece of code somewhere in the body of your page, and replace the This is my message text with the message you want to show.

You can combine both pieces of code and display today's date on the status bar if you wish. Just use the code piece to display the date, and replace

document.write(weekDay+', '+month+' '+day+suffix+', '+year);

with

window.status = weekDay+', '+month+' '+day+suffix+', '+year;

There is much more you can do with JavaScript to implement dynamic functionality in your page, including animation and menus. You will find scripts on the web you can use for free to implement these, or you can get someone to program the exact utility you need. In the meantime, I hope you enjoy these two snippets of code I provided today.

Sergio Roth is freelance web programmer with a vast experience in Php, HTML, JavaScript, CSS and MySQL. You can contact him for web hosting, custom programming and domain registration at Ayreshost.com.