www.webdeveloper.com
Results 1 to 6 of 6

Thread: Optimization question

  1. #1
    Join Date
    May 2011
    Posts
    4

    Optimization question

    Hello, I'm a fledgling Java user and I've been burning through learning HTML, CSS, XHTML and JAVA over this last weekend.

    To make it quick, I'm used to building objects in Visual Basic and I'm having difficulty simplifying this code into an object so I can just define and run about a dozen of them.

    The code creates a button which changes on mouseover and on mouseclick. The button is a link to another page.
    Also on mouseover the button slides to the right, giving a more intelligent feel for the user.

    What are my options for streamlining this code so I can reduce the number of lines of code-clutter?


    PS: This is my first post here. I hope the code below is formatted properly, and I look forward to any replies. Thank you!

    PHP Code:
    <html>
    <
    head>
    <
    script type="text/javascript">

    function 
    MouseOver() { custombutton.src="cb1.mouseover.bmp"SlideRight()}
    function 
    MouseOut() { custombutton.src="cb1.normal.bmp";  SlideLeft()}
    function 
    MouseDown() { custombutton.src="cb1.clicked.bmp"; }

    function 
    SlideRight() 
            {
            if ((
    parseInt(custombutton.style.left) < 25)) { custombutton.style.left parseInt(custombutton.style.left) + 2
            
    setTimeout("SlideRight()"10); }
            }
            
    function 
    SlideLeft() 
            {    
            if (
    parseInt(custombutton.style.left) > 10) { custombutton.style.left parseInt(custombutton.style.left) - 2
            
    setTimeout("SlideLeft()"10); }
            }

    </script>
    </head>

    <body background-color=:gray>

    <a href="page2.htm"><img style="position:relative;top:10px;left:10px" src="cb1.normal.bmp" id="custombutton" onmouseover="MouseOver()" onmouseout="MouseOut()" onmousedown="MouseDown()"></a>

    </body>
    </html> 

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Don't see much clutter at all. There's probably a few different ways of writing this code, but as a beginner, this is probably the best format to write it and, as far as I can see, doesn't contain any unnecessary JS.

    For the record, JAVA is a compiled, object-oriented language created by Sun Microsystems. Javascript (abbreviated JS) is not compiled and, in the vast majority of cases, is used to enhance/modify a user's ability to interact with an HTML page server up through a web browser....vast majority, but not 100&#37;.

    EDIT: I noticed that you asked if it's formatted properly. That's really a matter of personal preference. I tend to use the following convention when writing JS, but that's only my personal preference:

    Code:
    function MouseOver() { 
      custombutton.src="cb1.mouseover.bmp"; 
      SlideRight();
    } 
    
    function MouseOut() { 
       custombutton.src="cb1.normal.bmp";  
       SlideLeft();
    } 
    
    function MouseDown() { 
       custombutton.src="cb1.clicked.bmp"; 
    } 
    
    function SlideRight() { 
            if ((parseInt(custombutton.style.left) < 25)) { 
                custombutton.style.left = parseInt(custombutton.style.left) + 2;
                setTimeout("SlideRight()", 10); 
            } 
    } 
             
    function SlideLeft() {     
            if (parseInt(custombutton.style.left) > 10) { 
                 custombutton.style.left = parseInt(custombutton.style.left) - 2;
                 setTimeout("SlideLeft()", 10);  
           } 
    }

    Regardless of which way you choose to write it, it's far more important to be consistent in the way you write it
    Last edited by aj_nsc; 05-15-2011 at 10:12 PM.

  3. #3
    Join Date
    May 2011
    Posts
    4
    I do appreciate the comments on my coding, and am very glad to know I'm on a good track so far!

    My apologies however, I was not very clear in my first post!


    What I mean is I am looking for a way to create and use several of these without redundant coding, for example:

    custombutton2 (as clickable image)
    then mouseover2(), mouseout2(), mouseclick2() (to handle custombutton2 events)
    then slideright2() and slideleft2() (to handle moving custombutton2)

    and so on for #3 through #12.



    I'm used to a Visual Basic interface where I can create a class with methods and then define similar to:
    SlidingButton1, SlidingButton2,SlidingButton3,SlidingButton4 : as SlidingButtonClass;


    Can Java offer a similar optimization approach?

  4. #4
    Join Date
    May 2011
    Posts
    4

    Clarification

    Thank you very much for your reply! I'm glad to know I'm on the right path.

    My apologies however, I wasn't very clear in my first post!

    I'm wondering if there is anything in Java that I can utilize similar to the "class" system in Visual Basic.


    To be specific:
    If I continue to write the code as I am, I will need to generate 3 event handlers for every sliding button I create, as well as 2 functions for sliding right and back to the left.

    To make a graphically pleasing panel of a dozen of these buttons that's 36 event handlers and 24 sliding functions.


    I would rather find a way to rewrite my code so that I could at least handle the events and sliding by one procedure like this:

    psuedocode:
    PHP Code:
    function UniversalSliding(ButtonEventComesFrom,Event(mouseover,mouseout,mouseclick)) 
    And I can fill in the rest from there, but can I make a function like this in Java? and if so, how?

  5. #5
    Join Date
    Dec 2005
    Posts
    2,984
    Ah, gotcha. Ok, again, it's NOT Java, it's Javascript. The distinction is important because Java is a programming language, but one that is very different from Javascript. Abbreviating Javascript "Java" is not proper and confusing.

    What you probably want is actually a "class" that generates these objects. Javascript doesn't actually have classes per say, but you can somewhat mimic them using the new keyword. This may be very confusing to a newcomer to the language and I strongly urge you to go and google the term "Object Oriented Javascript" - it's kind of a silly term the more you get to know and understand the language, but it'll get you the results you want to read.

    Code:
    function MyButton(el,msover,msdown) {
       //google the 'this' keyword in Javascript
      this.button = el;
    
       //append this.button to the DOM where you 
    
       this.mouseover = mouseover;
       this.mouseout = this.button.src; //on mouseout, show the original image src
       this.mousedown = msdown;
    
      //here I am providing a reference to a function, 
      //note how this.MouseOver is not this.MouseOver();
       this.button.onmouseover = this.MouseOver;
       this.button.onmouseout = this.MouseOut;
       this.button.onmousedown = this.MouseDown;
    }
    
    MyButton.prototype.MouseOver = function() {
       this.button.src = this.mouseover;
    }
    
    MyButton.prototype.MouseOut = function() {
       this.button.src = this.mouseout;
    }
    
    MyButton.prototype.MouseDown = function() {
        this.button.src = this.mousedown;
    }
    
    MyButton.prototype.Slide(dir) {
      //here I am providing an alternate reference to this object
      //because we can't use "this" in a setTimeout function because
      //it will refer to something else in the global scope....scope's, that's something 
      //else you should probably google
    
      var o = this;
      if(dir == 'left') {
            if (parseInt(this.button.style.left) > 10) { 
                 this.button.style.left = parseInt(this.button.style.left) - 2;
                 setTimeout(function() { o.Slide('left'); }, 10);  
           }
      } else if(dir == 'right') {
            if ((parseInt(this.button.style.left) < 25)) { 
                this.button.style.left = parseInt(this.button.style.left) + 2;
                setTimeout(function() { o.Slide('right'), 10); 
            } 
      }
    }
    
    
    var ButtonOne = new Button(document.getElementById('myFirstButton'),'msover.bmp','msdown.bmp');
    
    var ButtonTwo = new Button(document.getElementById('mySecondButton'),'msover2.bmp','msdown2.bmp');
    
    var ButtonThree = new Button(document.getElementById('myThirdButton'),'msover3.bmp','msdown3.bmp');
    Some corresponding HTML:

    HTML Code:
    <a href="page2.htm"><img style="position:relative;top:10px;left:10px" src="cb1.normal.bmp" id="myFirstButton"></a>
    <a href="page2.htm"><img style="position:relative;top:10px;left:10px" src="cb1.normal.bmp" id="mySecondButton"></a>
    <a href="page2.htm"><img style="position:relative;top:10px;left:10px" src="cb1.normal.bmp" id="myThirdButton"></a>
    You've probably got a lot of research to do after seeing this code.

  6. #6
    Join Date
    May 2011
    Posts
    4

    Thank you

    This is exactly what I needed! Thank you very much for your help. . . with javaSCRIPT

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles