Add Dynamic Touches to Your Website Using JavaScript
|
|
|
| 4.3/5.0 (3 votes total) |
|
|
|
Sergio Roth December 19, 2006
|
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. |