SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Related objects or properties or what? A oop question.

    Hi
    I have created a demonstration site to put in my portfolio. But I think I must understand the JavaScript I got help on on this and other forums if I am ever to be a web page designer. So maybe you can help me with this question. This demonstration site I created has a slideshow which changes slides on a time basis with the aid of a JavaScript program. It also loads flights while others are showing to enhance the experience for 56K modem users. It uses what I think is perhaps 3 new program created objects in the course of implementing all features of the script. So now we are getting to my question in this script the new keyword is utilized 3 times with a dot syntax all beginning with the same name before the first dot. This name is "slideit" and on the fifth line down it is used as "slideit.srcs = new Array(" (see code below), on the 37th line down the "slideit" name is used like this "slideit.delays = new Object();", and on the 48th line down the "slideit" name is used like this "slideit.delays = new Object();" . So are these three different objects or three related objects or three properties of the same object or what? I have been reading a JavaScript book which I think is the best I have found for object oriented JavaScript but this point is just not clear enough to me. So please look at the code below and go to the link to if you think it is necessary and enlighten me on this question if you can. I would greatly appreciate it. Code and link below.

    Sincerely
    Marc

    link to the page I have been talking about

    Code:
     // sideshow scripting begins
    var slidesChangingAt = 7;
    var slideNumber;
    var onClickState; 
    slideit.srcs = new Array(    // line five refer to in question above  
    	"horizontao400w/r1c1Big.jpg",
    	"horizontao400w/r1c2Big.jpg",
    	"horizontao400w/r1c3Big.jpg",
    	"horizontao400w/r1c4Big.jpg",
    	"horizontao400w/r1c5Big.jpg",
    	"horizontao400w/r1c6Big.jpg",
    	"horizontao400w/r2c1Big.jpg",
    	"horizontao400w/r2c2Big.jpg",
    	"horizontao400w/r2c3Big.jpg",
    	"horizontao400w/r2c4Big.jpg",
    	"horizontao400w/r2c5Big.jpg",
    	"horizontao400w/r2c6Big.jpg",
    	"vertical400h/r3c1Big.jpg",
    	"vertical400h/r3c2Big.jpg",
    	"vertical400h/r3c3Big.jpg",
    	"vertical400h/r3c4Big.jpg",
    	"vertical400h/r3c5Big.jpg",
    	"vertical400h/r3c6Big.jpg",
    	"vertical400h/r3c7Big.jpg",
    	"vertical400h/r3c8Big.jpg",
    	"vertical400h/r3c9Big.jpg",
    	"horizontao400w/r4c1Big.jpg",
    	"horizontao400w/r4c2Big.jpg",
    	"horizontao400w/r4c3Big.jpg",
    	"horizontao400w/r4c4Big.jpg",
    	"horizontao400w/r4c5Big.jpg",
    	"horizontao400w/r4c6Big.jpg");
    
      var nextSlide = true;
     
    function slideitSetup(slidesChangingAt, slideNumber ) {
    slideit.delays = new Object();  // line 37 referred to in question above  
    slideit.delays.normal = 1000*slidesChangingAt; 
    slideit.delays.checking = 500;
    slideit.index  = slideNumber;
    slideit.preloader = new Image();
    slideit.preloader.src = slideit.srcs[slideit.index];
    slideit.delays.current = slideit.delays.normal;
    }
     
     var state1message = "every " + slidesChangingAt + " sec's";
    function fasterSlowerslideitSetup(slidesChangingAt) {
    slideit.delays = new Object(); // line 48 referred to in question above  
    slideit.delays.normal = 1000*slidesChangingAt; 
    slideit.delays.checking = 500;
    slideit.preloader = new Image();
    slideit.preloader.src = slideit.srcs[slideit.index];
    slideit.delays.current = slideit.delays.normal;
    }
                           
    function slideit()
    {
    var state = "checking";
    if (slideit.preloader.complete) {
    state = "normal";
    };//If not, speed up loop while waiting. If image available, proceed.
    
    if(state == 'normal' && onClickState ){
    /* Change display image */
    document.images.slide.src = slideit.srcs[slideit.index];
    
    /* Increment index. Restrict to available indices. */
    slideit.index = ++slideit.index % slideit.srcs.length;
    
    /* Reset the image object (needed for IE) */
    slideit.preloader = new Image();
    
    /* Preload next image */
    slideit.preloader.src = slideit.srcs[slideit.index];
    }
    
    setTimeout("slideit()", slideit.delays[state])
    }
    // end sideshow driver--------------------------------------------------------//
    function showHourglass (el,interval) {
      var hourglassVar = el.getElementsByTagName('img')[1];
      hourglassVar.setAttribute("src", "ani-busyGray.gif");
      setTimeout(function(){ hourglassVar.setAttribute
      ("src", "black1by1.gif");}, interval);
    }; 
    function onClickFaster(){
     if((onClickState == true) && (slidesChangingAt>1)){
        slidesChangingAt -= 3;
        state1message = "every " + slidesChangingAt + " sec's";
        document.getElementById("textOverW2").firstChild.nodeValue=state1message;
         fasterSlowerslideitSetup(slidesChangingAt);
    	 }
    }
    
    function onClickSlower(){
     if(onClickState == true){
        slidesChangingAt += 3;
        state1message = "every " + slidesChangingAt + " sec's";
        document.getElementById("textOverW2").firstChild.nodeValue=state1message;
        fasterSlowerslideitSetup(slidesChangingAt);
    	}
    }
    
    // start of onClickToggle 
    var onClickState = false; // make onClickState variable global
    function onClickToggle()
    {
          if (onClickState == false) {
             onClickState = true;
             document.getElementById("textOverW2").firstChild.nodeValue=state1message;
    		 showHourglass(document.getElementById("startSlideshow"),7000);
    		 }
              else {
                          if (onClickState == true) {
                              onClickState = false;
                              document.getElementById("textOverW2").firstChild.nodeValue="Slideshow off";
                           	}
                   }
     }
    // end of onClickToggle
    window.onload = function () {
    document.getElementById("textOverW2").firstChild.nodeValue="Slideshow off";
    document.getElementById("turnOnSlides").onclick=onClickToggle;
    document.getElementById("Faster").onclick=onClickFaster;
    document.getElementById("Slower").onclick=onClickSlower;
    slideNumber=location.href.split('?')[0].match(/0*(\d+)\.\w+$/)[1]-1;
    slideitSetup(slidesChangingAt, slideNumber );
    setTimeout("slideit()", 5000);
    }

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Don't use "new Array()" or "new Object()". See examples below.

    2) arrays:
    Code:
    var arr = [1, 2, 3];
    alert(arr[0]); //1
    3) objects:
    Code:
    var obj = {name:"Jane", age:23};
    alert(obj.name);  //Jane
    alert(obj["name"]); //Jane
    4) In javascript, you can add a new property to an existing object like this:
    Code:
    obj.weight = 115;
    Then you can display all the properties of an object like this:
    Code:
    for(prop in obj)
    {
    	alert( prop + ": " + obj[prop] );
    }
    5) In js, a function is an object, so you can add properties to a function, which looks like this:
    Code:
    function g()
    {
    	alert("hello world");
    }
    
    g.name = "Mr. g";
    g.interests = "shapely functions";
    
    g(); //hello world
    alert( g.name ); //Mr. g
    6) In js, whenever you see a dot connecting some words, you know that everything to the left of the dot is an object, e.g.
    Code:
    document.getElementById("myDiv").className = "show";
    Starting at the first dot, and looking to the left, that rule tells us that document is an object. Starting at the second dot and looking left, we know what document.getElementById("myDiv") is also an object. In your code you have this:
    Code:
    slideit.srcs = new Array();
    so you know that slideit is an object. What type of an object is it: array, function, regular object? If you look around in the code for the name slideit, you can see that it is a function:
    Code:
    function slideit()
    {
    	....
    So the line:
    Code:
    slideit.srcs = new Array();
    is creating a 'srcs' property for the object named slideit and assigning a blank array to it. A function normally does not have a srcs property--after all it's just a function that is defined to do something when it's called. However, since a function is an object you can add properties to it at will--just like with any other object in js. Practically what that does is it attaches some data to the function. Attaching data to a function can be used to make data persist from function call to function call. When a function finishes executing, all the local variables declared inside the function are destroyed, and therefore they lose any values they were assigned.

    As an exercise try to write a function that keeps a running total of the numbers you send it as arguments. Send the function one number at a time and have it keep a total of all the numbers you have sent it so far. Also, have it alert() the total so far.

    In this line:
    Code:
    slideit.delays = new Object();
    a property called delays is being added to the slideit object, and it's value is a blank object. A property of an object(slideit.delays) can be assigned a number, a string, an array, an object, and even a function. Here's how you would assign a function to a property of an object:
    Code:
    function g()
    {
    	alert("hello");
    }
    
    var obj = {name:"Jane", age:23};
    obj.greet = g;
    obj.greet();  //hello
    Here is an example of adding a property to g and assigning an object to the property:
    Code:
    g.girlFriend = obj;
    alert( g.girlFriend.name ); //Jane
    g(); //hello world
    7) So are these three different objects or three related objects or three properties of the same object or what?
    Code:
    function slideit()
    {
    	//code
    }
    
    slideit.srcs = new Array();
    slideit.delays = new Object();
    The first lines define the function slideit, and in js functions are objects. The second line creates a property called srcs for the slideit object and assigns it a blank array, which can be done more succinctly like this:
    Code:
    slideit.srcs = [];  //compare to: slideit.srcs = [1, "Hello", someFuncName];
    In js, arrays are objects as well. The third line creates a property called delays for the slideit object and assigns it a blank object, which can be done more succinctly like this:
    Code:
    slideit.delays = {};  //compare to slideit.delays = {name:"Jane", age:22};
    Putting it all together, slideit is an object that contains two objects inside of it. slideit also happens to be a function, so you can write:
    Code:
    slideit();
    which is not true for objects in general. For instance, you can't do this:
    Code:
    var obj = {name:"Jane", age:23};
    obj();  //error function expected
    8) When reading complex code, it is often not readily apparent why the programmer did things the way they did; and trying to understand why a programmer chose certain methods of doing things can be next to impossible without understanding the programming issues he was trying to solve. The best way to understand the code is to write it from scratch yourself, and then when you get stuck coding something, look at the other person's code to see how they did it.

    In this case, the reason the programmer attached all the properties to the slideit() function was to make the data persist when the setTimeout() calls its surrounding function. As an exercise, you should try to write an animation script with that identical setup(a common one for animations), which entails having a function, say g, with a setTimout() inside g which calls g. Just try to make a div move to the right UNTIL the divs left edge is at 300px.
    Last edited by 7stud; Jan 22, 2007 at 13:48.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that long and very complete answer. It leaves me with more questions which can be cleared up if you or anyone else would be so kind to indulge me. The answer pretty much states there is a kind of parent child object hierarchy. As pointed out in the answer in the code I am using slideit is a function. Is there any reason why one would want a top-level name in a hierarchy to be some sort of generic object and not be an object of a particular type? And if it is OK for an object to be a particular type at the top-level of an object hierarchy is a particularly important to figure out what your top-level object type should be? If one ever had a need to create a generic object it appears that the answer implies the way to created a generic object is as follows. "GenericObject = new object ()" is that the best way to create a generic object if indeed one would have a need to do so?

    Also pointed out was unnecessary use of the new keyword. Is the new keyword always unnecessary? Should the new keyword be avoided for any reason? Is the new keyword necessary if later you want to use the prototype keyword to add properties or is the prototype keyword unnecessary to and should be avoided?

    In this case, the reason the programmer attached all the properties to the slideit() function was to make the data persist when the setTimeout() calls its surrounding function.
    You suggested two exercises I might perform in order that I might further investigate how to create persistent data in other ways than the way now utilized in my program. Is there any reason or reasons the way it is done in my program now is less than optimal? Would there be any times it should be done the way I have done it in my program?

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there any reason why one would want a top-level name in a hierarchy to be some sort of generic object and not be an object of a particular type?
    Yes, when you don't need the object to be of a particular type(array, function, etc.). Why create an object that is a function, if you never plan on using it as a function? It would require you to type out a meaningless function definition that you never plan on using. In addition, people who read your code would be confused as to why you created a function and then attached properties to it, when you never used the function. And finally, it would take up more memory to pass around an object that also was a function because the function definition takes up memory.

    And if it is OK for an object to be a particular type at the top-level of an object hierarchy is a particularly important to figure out what your top-level object type should be?
    If you tried the exercise to write a function that alerts a running total, you would see that there is a problem, namely making the total persist. You could declare a global variable(=a variable declared outside any function definition) to store the total, and then have the function update the total, and then alert the total, and it would work(try it). However, declaring global variables is bad programming practice. For instance, if you have 10 scripts running on your page that you acquired somewhere, and they each declare 5 global variables, what happens if one of those variables has the same name as another one? You'll get errors. As scripts get very complex, global variables become problematic because any function has access to a global variable and can change it accidentally, or you may get variable name clashes where two scripts are using the same name for a global variable.

    If one ever had a need to create a generic object it appears that the answer implies the way to created a generic object is as follows. "GenericObject = new object ()" is that the best way to create a generic object if indeed one would have a need to do so?
    See statement #1 in my earlier post. You know how arrays work, right? You put data in an array, and then you access each element using a numerical index, for instance:
    Code:
    var arr = [10, 20, -3];
    alert(arr[0]);
    Now, what if you want to retrieve data using a string as the index value? You can't use arrays for that, but you could use an object:
    Code:
    var phoneNumbers = {jane: "345-5789", bob:"456-7891"}
    alert(phoneNumbers.jane);
    But remember, just because js allows you to do something doesn't mean you have to. It's just an option, and the more options you have the better. Sometimes using an object makes your code much more readable. For instance, you could define an array with phone numbers:
    Code:
    var phoneNumbers = ["345-5789", "456-7891"]
    alert(phoneNumbers[0]);
    but that isn't as clear as using an object.

    Also pointed out was unnecessary use of the new keyword. Is the new keyword always unnecessary? Should the new keyword be avoided for any reason?
    See statement #1 in my earlier post. Avoid it when you are not calling a constructor function because it is more cumbersome to type.

    Is the new keyword necessary if later you want to use the prototype keyword to add properties or is the prototype keyword unnecessary to and should be avoided?
    You use new to create an object using a constructor function. The prototype object is a property of the constructor function, and you use the syntax "constructorFunctionName.prototype=" to set it's properties.

    You suggested two exercises I might perform in order that I might further investigate how to create persistent data in other ways than the way now utilized in my program. Is there any reason or reasons the way it is done in my program now is less than optimal? Would there be any times it should be done the way I have done it in my program?
    See all my previous comments. How do you define optimal? The least amount of code? The fastest execution? The easiest to maintain when future circumstances require changes to the code? The easiest to read and understand?


Bookmarks

Posting Permissions

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