www.webdeveloper.com
Results 1 to 9 of 9

Thread: Separating codes on the same js file

  1. #1
    Join Date
    Jul 2006
    Posts
    373

    Separating codes on the same js file

    Hi,

    i have this code inside the head tags of my page:

    Code:
    <script language="JavaScript">
    	pic_name3=new Array();
    	pic_name3[90] ="photo/images/a.jpg";
    	pic_name3[91] ="photo/images/b.jpg";
    	pic_name3[92] ="photo/images/c.jpg";
    	pic_name3[93] ="photo/images/d.jpg";
    	pic_name4="photo/images/a.jpg";
    	pic3=new Array();
    	pic4=new Image();	pic4.src=pic_name4;
    	for(i=0; i<pic_name3.length; i++)
    		{
    		pic3[i]=new Image();	pic3[i].src=pic_name3[i];
    		}
    
    	function mouse_in(dotti)		
                    {document.images["RollPics"].src=pic3[dotti].src;}
    
    	function mouse_out(dotti)
    		{document.images["RollPics"].src=pic4.src;}
    </script>
    <script language="JavaScript">
     //same code as above but different images (function mouse_in2 and function mouse_out2 instead)
    </script>
    <script language="JavaScript">
     //same code as above but different images (function mouse_in3 and function mouse_out3 instead)
    </script>
    <script language="JavaScript">
     //same code as above but different images (function mouse_in4 and function mouse_out4 instead)
    </script>
    As you see, its the same code but for different pictures repeated 4 times and its way too long to have it at the beginning of the page so i want to create a js file and link to it like this

    <script language="JavaScript" src="js/pictures.js"></script>

    however, it wont work because every code is encapsulated in its own script tags. I tried by removing them and leaving the code as it is but it wont work either. What can i do in this cases?

    Thank you

  2. #2
    Join Date
    Mar 2012
    Location
    Saint-Petersburg, Russia
    Posts
    97
    Hi!

    Enclose your code snippet into function and pass the functions which you want to call as parameters. I.e.:

    Code:
    function myCode(func1, func2) {
        doSomething();
        doAnything();
        func1();
        doNothing();
        func2();
    } // myCode
    
    function f1(){...}
    function f2(){...}
    function f3(){...}
    
    // now call your code for different pairs of functions
    myCode(f1, f2);
    myCode(f2, f3);
    //etc....

  3. #3
    Join Date
    Jul 2006
    Posts
    373
    Hi

    thanks for your answer. But if i do so then i would have to change the code for every time i call the function? right now i have something like this:

    Code:
    <a href="page.html" #javascript" onmouseover="mouse_in(13);" onMouseOut="mouse_out(13);">
    have i to change it to the code below?

    Code:
    <a href="page.html" #javascript" onmouseover="f1" onMouseOut="f2">
    thats not very likely since i would have to change way too many lines of code. Isnt there another way?

  4. #4
    Join Date
    Mar 2012
    Location
    Saint-Petersburg, Russia
    Posts
    97
    Surely you should not! There are lot of ways to avoid redundancy, but to be honest I do not understand how the links are related to your code. Please provide more content example of your document and I try to show you how to deal with it.

    By the way, what are these #javascript" inside link tags?

  5. #5
    Join Date
    Jul 2006
    Posts
    373
    To be honest i dont know what are those tags for. I didnt make the code in the first place, im just trying to optimize it. Some links look like this:

    Code:
    <a href="page.html" onMouseOver="mouse_in(1);" onMouseOut="mouse_out(1);"><img src="1.gif"></a>
    <a href="page2.html" onMouseOver="mouse_in(2);" onMouseOut="mouse_out(2);"><img src="2.gif"></a>
    <a href="page3.html" onMouseOver="mouse_in(3);" onMouseOut="mouse_out(3);"><img src="3.gif"></a>
    some others like this

    Code:
    <a href="page11.html" onMouseOver="mouse_in2(1);" onMouseOut="mouse_out2(1);"><img src="dot.gif"></a>
    <a href="page12.html" onMouseOver="mouse_in2(2);" onMouseOut="mouse_out2(3);"><img src="dot2.gif"></a>
    <a href="page13.html" onMouseOver="mouse_in2(3);" onMouseOut="mouse_out2(3);"><img src="dot3.gif"></a>
    and some others like this

    Code:
    <a href="page21.html" onMouseOver="mouse_in3(1);" onMouseOut="mouse_out3(1);"><img src="pic.gif"></a>
    <a href="page22.html" onMouseOver="mouse_in3(2);" onMouseOut="mouse_out3(3);"><img src="pic2.gif"></a>
    <a href="page23.html" onMouseOver="mouse_in3(3);" onMouseOut="mouse_out3(3);"><img src="pic3.gif"></a>

    the images change on mouse over accordingly.

    Thank you.

  6. #6
    Join Date
    Mar 2012
    Location
    Saint-Petersburg, Russia
    Posts
    97
    Eh... I understand the thing with the links, but now I do not understand phrase "same code as above but different images" from the first message. Could you provide the sample of these different code fragments... Or may be paste the whole file at pastebin.com and provide a link here.

    I started writing the example of refactoring, but I think I do not get the sense of things like "pic_name3[90]" (why 90 etc.)

  7. #7
    Join Date
    Jul 2006
    Posts
    373
    Yes, now that you say i think its useless to have 8 functions instead of 2 when all of them do the same but with a different array of images each. I guess the guy who coded it was trying to split images by group. Anyway, here is the full code:

    http://pastebin.com/download.php?i=hv1EBS2z

    Thank you for your time.

  8. #8
    Join Date
    Mar 2012
    Location
    Saint-Petersburg, Russia
    Posts
    97
    Oh... horrible enough...

    I was pondering upon this code for several minutes and I see the following problems:
    - array indices (for pic_name3 for example) are not sequential;
    - image names are not always sequential too (is this possible to rename files?);
    - code fragments are not truly identical, for example last two are similar between them, but differs from one dealing with pic3 and pic4 (pic4 is not even an array!)

    We could invent one big function instead of them all, but it would not look far more comprehensible.

    If you want, you anyway could try to refactor them partly, or step-by-step. For example let us regard last two fragments:

    Code:
    	pic_name=new Array();	pic_name2=new Array();
    
    	//1st image that appears onmouseover
    	pic_name[0] ="00_img/kurimoto_top_30_over.gif";
    	//1st image that appears onmouseout
    	pic_name2[0]="00_img/kurimoto_top_30.gif";
    	//........
    	//
    	pic_name[17] ="00_img/kurimoto_top_72_over.gif";
    	//
    	pic_name2[17]="00_img/kurimoto_top_72.gif";
    
    	pic1=new Array();
    	pic2=new Array();
    
    	for(i=0; i<pic_name.length; i++)
    		{
    		pic1[i]=new Image();	pic1[i].src=pic_name[i];
    		pic2[i]=new Image();	pic2[i].src=pic_name2[i];
    		}
    
    	function mouse_in(dotti)
    		{document.images["link"+dotti].src=pic1[dotti].src;}
    	function mouse_out(dotti)
    		{document.images["link"+dotti].src=pic2[dotti].src;}
    //-->
    </script>
    
    <script language="JavaScript">
    
    
    	pic_name9=new Array();	pic_name0=new Array();
    
    	//1st image that appears onmouseover
    	pic_name9[0] ="00_img/kurimoto_top_30_over.gif";
    	//1st image that appears onmouseout
    	pic_name0[0]="00_img/kurimoto_top_30.gif";
        // ...................
        //
    	pic_name9[17] ="00_img/kurimoto_top_72_over.gif";
    	//
    	pic_name0[17]="00_img/kurimoto_top_72.gif";
    
    	pic9=new Array();
    	pic0=new Array();
    
    	for(i=0; i<pic_name9.length; i++)
    		{
    		pic9[i]=new Image();	pic9[i].src=pic_name9[i];
    		pic0[i]=new Image();	pic0[i].src=pic_name0[i];
    		}
    
    	function mouse_in0(dotti0)
    		{document.images["link"+dotti0].src=pic9[dotti0].src;}
    	function mouse_out0(dotti0)
    		{document.images["link"+dotti0].src=pic0[dotti0].src;}
    to the following

    Code:
    <script>
    // this would be double-dimensioned array for pics.
    pics = [];
    // at the beginning place only image numbers into array
    pic_name = [30, 31, 42, 43...];
    pic_name2 = [];
    // now pass through array and replace numbers with names which include these numbers.
    for (var i = 0; i < pic_name.length; i++) {
        pic_name2[i] = "00_img/kurimoto_top_" + pic_name[i] + ".gif";
        pic_name[i] = "00_img/kurimoto_top_" + pic_name[i] + "_over.gif";
    } // for
    pics[1] = [];
    pics[2] = [];
    for(i=0; i<pic_name.length; i++) {
        pic[1][i]=new Image();	pic[1][i].src=pic_name[i];
        pic[2][i]=new Image();	pic[2][i].src=pic_name2[i];
    } // for
    
    // now in the same manner should follow fragment2
    // ......
    
    // these functions would work for both fragments
    function mouse_in_x(x, dotti) {
        document.images["link"+dotti].src=pic[x][dotti].src;
    } // mouse_in_x
    
    function mouse_out_x(x, dotti) {
        document.images["link"+dotti].src=pic[x][dotti].src;
    } // mouse_out_x
    </script>
    ....
    <!-- that's how links would look -->
    <a href="page.html" onMouseOver="mouse_in_x(1, 1);" onMouseOut="mouse_out_x(1, 1);"><img src="1.gif"></a>
    <a href="page2.html" onMouseOver="mouse_in_x(1, 2);" onMouseOut="mouse_out_x(1, 2);"><img src="1.gif"></a>
    ...
    <a href="page11.html" onMouseOver="mouse_in_x(2, 1);" onMouseOut="mouse_out_x(2, 1);"><img src="dot.gif"></a>
    I hope you've got the idea. After you try this and if it would work, you may start refactoring other fragments in the same manner. When they all appear reduced, we may use other similarities between them (which would be visible better then).

    By the way it is possible to generate your links automatically, like this (you maybe aware of it already) document.write inside loop:
    Code:
    <script> // place this scriptlet instead of three links in the same place
    for (var i = 1; i <=3; i++) {
        document.write('<a href="page11.html" onMouseOver="mouse_in_x(2, ' + i + ');" onMouseOut="mouse_out_x(2, ' + i + ');"><img src="dot.gif"></a>');
    } // for
    </script>
    But this requires some files (like page.html without index) to be renamed (for example to page1.html) etc.

  9. #9
    Join Date
    Jul 2006
    Posts
    373
    Hi,

    thank you so much for your time in replying. The problem with this is that there is way too many images and it would be a pain in the neck to rename them all. I think that the easiest thing to do is to combine all the scripts into one and use only 2 functions, one for mouseover and the other for mouseout and put all the mouseover images in one array and the rest in the other array. I think its the simplest way to fix this mess because everything is already made. But if i had to code all from the start (including the html) i would rather use your suggestion because that is the right way to do it from the beginning.

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