RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Rotate Content Easily with Object-Oriented JavaScript-3 : Page 3

Create JavaScript News Items
Open a second file in your text editor to hold the JavaScript portion of the application. Following object-oriented principles, you'll create a class that has properties appropriate for a news item. Add the following constructor to create a news item:

   function makeNews(c,l,f,i){
      this.copy = c;
      this.link = l;
      this.follow = f;
      this.img = i;
      this.write = writeNews;
You call the makeNews method to create news objects. Each object takes four parameters: the copy (c), the link (l), the follow text (i.e. what to display as the link) (f), and an image (i). News objects also need a method to writing their content to the page. I've called that method write, and associated it with the writeNews function. Add the following writeNews function to your script:

   function writeNews(){
      var str = '';
      str += '<a href="' + this.link + '">';
      str += '<img border="0" src="' + 
         this.img.src + '"></a><br>';
      str += this.copy + '<br>';
      str +=  '<a href="' + this.link + '">' + 
         this.follow + '</a>';
      return str;
As you can see, writeNews simply translates the properties of each news item into an HTML string. The string shown in the preceding code is arbitrary; you can modify the writeNews function to suit your needs as long as it writes well-formed HTML.

Because I wanted to be able to include an accompanying image in each news item's display, I'll provide image objects to force the browser to pre-load the images. It's always a good idea to pre-load your images—especially if they aren't visible when the page loads. Add the following code to pre-load the images:

   var listImg = new Image();
   listImg.src = 'watch.gif';
   var treeImg = new Image();
   treeImg.src = 'dhtml.gif';
   var formImg = new Image();
   formImg.src = 'form.gif';
   var autoImg = new Image();
   autoImg.src = 'web.gif';
Next, you need a collection of the news items to display on the page. I've used an array for the collection. Add the following to your script (each statement should be on a single line):

   var newsArray = new Array();
   newsArray[0] = new makeNews(
      "Move Items Between Lists With JavaScript",
       'Read More',listImg).write();
   newsArray[1] = new makeNews(
      "Build an XML-Based Tree Control With JavaScript",
      'More Info',treeImg).write();
   newsArray[2] = new makeNews(
      "Automate Your Form Validation",
      'Full Story',autoImg).write();
   newsArray[3] = new makeNews(
      "Create Fast, Smooth Multi-Page Forms With JavaScript",
      'More Info',formImg).write();
Note that you're not really interested in storing the news objects themselves in the array; instead, you want the array to contain the results of the call to each news object's write method. The preceding code stores the HTML string for each object in the array. That occurs because the new operator takes precedence over the call to the write method. In essence, the code first creates each news object, is created, and then calls its write method. The result is that the array stores the string returned from the call to each news object's write method rather than the news objects themselves. Also note that I've passed in a reference to the pre-loaded image object for each item.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date