PDA

View Full Version : JavaScript Slideshow -- OOP!


RysChwith
03-28-2005, 04:03 PM
So, I thought it'd be fun to try OOP with JavaScript. Since I was in the process of reworking a slideshow script I've been using at work, it seemed a likely test subject.

The script is designed to work by replacing element contents based on their IDs. So, for example, when you go to slide 5, it goes through an array that tells the script which elements gets replaced, then puts in the information from array index 4 for each of those elements. The procedural version works. The OOP... well, not so much. As near as I can tell, the two classes involved are erroring out immediately, and the main page is erroring out in the nested for loop. I've attached what I have so far as a zip file. Oop.htm is the main page, controller.js is the class for the slide show controller, and slideItem.js is the class for an element of the slide show.

If anyone feels inclined to take a peek through what I've done so far and offer advice, I'd be appreciative.

Rys

RysChwith
04-20-2005, 03:00 PM
I'm having what appears to be a scope issue with a couple of objects in my slide show script. The attached zip file contains all the relevent files.

Basically what's going on it that there are two classes: controller and slideElement. The controller is supposed to control the navigation of the slide show, while slideElement contains all the information for one element of the slide (this script assumes that each slide has the same content areas, because that's the way we tend to do it at work).

Test.html is a test page I set up to make sure it works. It creates a controller object and an array of the content area IDs. It then goes through a nested loop to create an object for each ID, create five dummy data, stuff the data into the object, then stuff the object into the controller's array of objects.

The same logic is used to add data to the slideElement's array of data and to the controller's array of elements. In both cases, the array -- which is created empty as part of the constructor -- isn't recognized when the appropriate method is called. Firefox silently fails, and IE gives me "object does not exist" error.

If I throw in some code to test for the array and create it if it doesn't exist, Firefox throws up no errors, but doesn't load any of the content. IE bombs out on the document.getElementById line in the controller's show() method. In either case, I don't like this solution, since you lose the encapsulation from using var. Plus, the array should exist and be accessible, anyway.

Any thoughts?

Rys

RysChwith
04-21-2005, 02:57 PM
Got it sorted. I was setting the array equal to arguments[ 2 ], which is an optional argument for the constructor. Since it wasn't being used, it's value was null, which was wiping out the array. So I changed that little assignment chunk to:if( slideElement.arguments[ 2 ] ) {
sElemValues = slideElement.arguments[ 2 ];
}Since the array had already been created previously, it wasn't necessary to create it of the if statement failed.

After a few more fixes and modifications, it works. I've attached the finished product, if anyone's interested. This is actually just step one, though. The real goal is to get this thing to the point that it's usable by someone who knows only the rudiments of code. Time for step two.

Rys