Thread: Add Dynamic Touches to your Website using JavaScript [TuT]

Results 1 to 8 of 8
  1. #1 Add Dynamic Touches to your Website using JavaScript [TuT] 
    Registered Member E . J . E's Avatar
    Join Date
    Jul 2008
    Age
    29
    Posts
    248
    Thanks given
    1
    Thanks received
    0
    Rep Power
    27
    Summary : 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?

    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','Thu rsday','Friday','Saturday');
    var months = new Array('January','February','March','April','May',' June','July','August','September','October','Novem ber','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.
    Шιтн Rєgαяds,
    Σlιαs Jσяdαп Σlbαққαlι; 010'

     

  2. #2  
    DeltaScape is Pro!!

    Join Date
    Feb 2008
    Age
    29
    Posts
    743
    Thanks given
    4
    Thanks received
    5
    Rep Power
    77
    Not going to use, but looks nice.

    Enjoy your rep.
     

  3. #3  
    Registered Member E . J . E's Avatar
    Join Date
    Jul 2008
    Age
    29
    Posts
    248
    Thanks given
    1
    Thanks received
    0
    Rep Power
    27
    Quote Originally Posted by Ghost View Post
    Not going to use, but looks nice.

    Enjoy your rep.
    Thanks Mate
    Шιтн Rєgαяds,
    Σlιαs Jσяdαп Σlbαққαlι; 010'

     

  4. #4  
    is serisiuly cul.

    DJ Dan's Avatar
    Join Date
    Apr 2007
    Posts
    1,324
    Thanks given
    6
    Thanks received
    5
    Rep Power
    223
    Or you could use PHP which would be x10 easier.
     

  5. #5  
    Registered Member E . J . E's Avatar
    Join Date
    Jul 2008
    Age
    29
    Posts
    248
    Thanks given
    1
    Thanks received
    0
    Rep Power
    27
    Quote Originally Posted by DJ Dan View Post
    Or you could use PHP which would be x10 easier.
    Maybe. Depends Really
    Шιтн Rєgαяds,
    Σlιαs Jσяdαп Σlbαққαlι; 010'

     

  6. #6  
    Registered Member

    Join Date
    Oct 2008
    Posts
    865
    Thanks given
    75
    Thanks received
    56
    Rep Power
    483
    Quote Originally Posted by E . J . E View Post
    Maybe. Depends Really
    Not really. For the example you choose, PHP would be way easier.
    Code:
    echo date('l, F jS Y');
    (Ajax doesn't need to be used for time/date (assuming that's what you were talking about) that updates automatically)

    All of what you have, made into 1 line.

    You're suffixes are slightly wrong. You forgot 21, 22, 23 & 31

    Nice effort though, and good tutorial for the beginners.
     

  7. #7  
    Registered Member E . J . E's Avatar
    Join Date
    Jul 2008
    Age
    29
    Posts
    248
    Thanks given
    1
    Thanks received
    0
    Rep Power
    27
    Quote Originally Posted by thedoom View Post
    Not really. For the example you choose, PHP would be way easier.
    Code:
    echo date('l, F jS Y');
    (Ajax doesn't need to be used for time/date (assuming that's what you were talking about) that updates automatically)

    All of what you have, made into 1 line.

    You're suffixes are slightly wrong. You forgot 21, 22, 23 & 31

    Nice effort though, and good tutorial for the beginners.
    Thanks Dude.
    Шιтн Rєgαяds,
    Σlιαs Jσяdαп Σlbαққαlι; 010'

     

  8. #8  
    Super Donator

    Sir Zap's Avatar
    Join Date
    Mar 2009
    Age
    28
    Posts
    1,395
    Thanks given
    336
    Thanks received
    80
    Rep Power
    567
    Can be done like that too

    anyway gj


    <h4>
    <script type="text/javascript">
    <!--
    var currentTime = new Date()
    var month = currentTime.getMonth() + 1
    var day = currentTime.getDate()
    var year = currentTime.getFullYear()
    document.write(month + "/" + day + "/" + year)
    //-->
    </script>
    </h4>
     


Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


User Tag List

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •