Results 1 to 15 of 15

Thread: Java Script functions - which one runs first

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Java Script functions - which one runs first

    I have an HTML document that has several Java Scripts functions in it. These functions are all listed between the <head> and </head> tags. There is nothing in the main part of the HTML doc (within the <body> section) that calls any of these functions. The functions, however, are necessary for the proper running of the document page. If I comment out the functions and run the doc several things do not function or work or appear to be correct. When I un-comment the functions and run the doc everything works correctly. Since nowhere are there any calls to any of these functions how then are they executed and how does the browser know which one to run first? Without any knowledge of this my best guess is that the first function (at the top of the list of functions) is called by the browser and then the other functions are called by one or more of the other function.
    Last edited by Code Dummy; Sep 24th, 2017 at 03:13 PM.

  2. #2
    PowerPoster PlausiblyDamp's Avatar
    Join Date
    Dec 2016
    Location
    Pontypool, Wales
    Posts
    2,458

    Re: Java Scription functions - which one runs first

    Without seeing how the code looks it is hard to say what is going on, but a standard named function in Javascript will not run unless you call it from somewhere.

    Are you sure there aren't any places in the code that call these functions (onclick="" or similar)?

  3. #3

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: Java Scription functions - which one runs first

    I'm sure as far as what I am able to determine. Actually, the functions are in a separate file because there are hundreds of them so I don't want to clutter the HTML doc with them. I will post the HTML, the CSS file, and the file with all the functions. Note: the file of functions is too large to post all of it so I will just post the first small section.

    HTML file:

    Code:
    <html>
    <head>
    
    <link href="main.css" rel="stylesheet" type="text/css" media="screen" />
    
    <SCRIPT src="functions.js"></SCRIPT>
    
    </head>
    
    <body id="index" class="bodyCnt ">
    
    <div class="section_top">          
    
        <div id="region_map_wrapper">  
    
            <div id="region_map"> 
         
                <img src="bg_map.gif" width="400" height="400" usemap="#region_mapping">
    
            </div>
        </div>
    </div>
    
    <map name="region_mapping">
    
    <area shape="poly" data-region-id="1" alt="Valle d'Aosta" title="Valle d'Aosta" href
    coords="65,55,64,55,64,56,60,55,61,58,62,59,62,61,63,63,66,63,66,68,70,72,70,72,71,71,72,70,72,69,75,69,75,69,78,66,78,67,79,68,84,67,85,65,87,65,88,61,86,59,85,56,84,53,83,51,82,51,80,50,76,54,75,52,73,53,71,54,69,54,69,54,68,54,67,54,67,53,66,52,65,54,65,55" />
    
    <area shape="poly" data-region-id="2" alt="Piemonte" title="Piemonte" href 
    coords="101,33,103,33,103,35,103,38,103,39,103,41,104,42,105,42,105,43,104,43,108,46,108,52,106,53,105,55,105,56,104,58,104,59,103,62,106,63,108,67,108,69,108,70,108,71,109,71,110,72,111,75,110,77,109,77,108,78,108,79,107,78,104,77,104,78,103,78,103,81,104,82,103,83,103,83,103,85,105,85,106,88,106,88,108,89,110,89,110,88,111,87,112,89,112,90,115,90,117,93,117,96,117,97,119,97,120,97,120,99,121,100,122,101,122,102,122,103,121,103,121,104,120,105,119,103,118,102,115,102,113,104,114,106,113,106,110,107,110,105,107,105,105,107,101,108,99,111,97,109,97,108,96,108,96,111,95,111,95,113,92,116,93,117,93,117,92,119,92,121,89,123,88,124,86,122,83,122,82,122,82,121,81,119,79,118,78,120,77,120,75,121,74,120,74,121,73,121,68,118,68,116,66,116,66,116,63,116,64,114,62,113,61,112,60,112,61,108,61,107,62,107,61,107,60,103,62,102,63,101,63,99,64,99,64,98,65,99,66,97,65,96,64,96,65,92,64,92,63,92,62,93,60,92,59,92,58,91,58,88,58,87,58,85,55,86,55,82,58,82,59,81,60,82,61,82,64,78,67,79,68,78,69,76,67,75,68,74,69,74,70,73,69,72,
    71,71,71,70,73,69,75,69,78,67,79,68,83,67,86,65,87,65,88,62,87,60,85,59,86,58,86,57,87,56,87,54,88,51,90,51,90,51,91,49,92,47,93,46,93,45,95,45,95,45,95,41,94,41,95,39,97,38,97,38,97,38,99,36,100,36,100,34,101,33" />
    
    <area shape="poly" data-region-id="3" alt="Liguria" title="Liguria" href 
    coords="77,133,84,133,85,131,87,131,89,131,91,129,93,128,93,127,93,126,95,124,95,123,95,122,97,121,99,120,102,117,102,116,103,114,105,112,106,112,107,111,109,110,109,109,112,110,112,110,115,111,115,111,119,112,120,113,121,113,121,115,122,115,123,114,125,114,127,117,129,117,132,118,133,120,133,121,135,120,137,122,138,124,139,123,139,122,139,122,140,122,143,125,145,125,145,123,143,122,143,122,142,121,139,117,138,117,138,115,135,114,135,113,134,112,133,111,131,111,131,112,129,112,129,107,127,105,126,105,126,106,124,106,123,105,119,105,119,104,119,102,114,103,114,104,114,105,113,106,110,107,109,106,106,105,104,107,100,108,101,108,98,110,97,109,97,109,97,108,96,109,94,111,94,112,91,115,93,117,93,117,92,119,92,121,90,122,90,122,89,122,89,123,88,123,86,122,83,122,82,124,81,125,81,126,80,126,79,126,78,128,78,129,78,129,77,130,77,133" />
    
    <area shape="poly" data-region-id="4" alt="Lombardia" title="Lombardia" href 
    coords="105,77,104,79,103,81,105,81,104,82,104,85,105,85,105,86,106,87,107,88,109,89,110,88,111,87,112,88,113,90,115,90,116,92,117,96,118,97,119,97,121,98,121,99,122,99,122,101,122,102,123,101,123,100,124,99,125,98,126,96,125,95,124,93,123,91,124,91,125,88,126,87,126,86,129,87,130,85,133,86,134,88,135,88,139,84,141,84,143,85,143,87,143,87,144,89,145,89,145,87,147,87,147,88,148,88,149,89,153,90,155,91,160,92,160,90,164,90,164,92,166,92,166,91,170,91,171,90,175,89,174,87,173,86,172,85,172,84,171,84,170,83,168,82,167,82,167,82,166,80,166,79,165,79,163,78,161,77,160,76,159,76,159,73,158,71,157,65,159,64,162,62,162,57,161,56,158,57,158,58,156,59,155,58,155,58,154,55,154,55,153,53,152,52,152,50,154,48,155,47,154,46,156,44,156,38,155,38,153,37,155,37,156,36,157,35,156,34,156,33,155,31,154,31,153,30,152,30,152,29,151,30,150,30,149,29,148,28,146,27,144,31,144,34,145,34,146,35,147,36,146,37,146,38,148,40,147,42,145,42,142,37,140,36,139,36,137,37,136,37,135,39,131,40,130,37,128,35,130,33,128,32,128,33,127,33,125,31,125,31,124,32,124,35,125,36,125,39,123,39,124,41,122,42,123,43,119,46,118,47,118,48,117,49,117,53,119,54,119,57,115,56,115,55,115,52,114,51,112,50,113,48,113,47,110,46,109,45,108,45,108,52,106,53,106,55,105,56,104,58,103,59,103,61,105,64,105,65,108,67,108,69,108,70,109,70,111,73,111,75,110,77,109,77,108,79,107,79,107,78,105,77" />
    
    <area shape="poly" data-region-id="5" alt="Trentino Alto Adige" title="Trentino Alto Adige" href 
    coords="157,19,154,19,154,20,153,21,152,24,152,25,152,25,154,28,155,31,155,31,157,33,157,34,158,35,156,36,154,36,153,37,154,39,155,38,156,45,154,46,154,48,154,49,153,50,152,52,154,54,156,58,156,59,157,58,159,56,161,56,162,57,165,57,165,62,166,62,167,60,170,63,173,59,174,59,174,54,174,54,175,53,178,53,178,52,178,51,177,51,178,49,180,49,181,50,181,52,183,52,185,49,186,45,189,45,190,44,192,41,192,40,189,38,189,38,187,37,188,35,189,33,190,32,188,31,189,29,192,30,193,26,193,26,196,26,197,26,199,27,200,26,202,26,201,23,203,23,202,21,200,20,200,17,198,17,196,15,195,13,196,11,199,11,199,10,197,10,197,9,196,10,195,10,193,10,192,10,188,13,187,14,185,14,184,13,182,12,182,13,181,12,180,12,178,14,174,13,172,15,171,15,171,15,169,16,169,20,168,21,168,21,161,22,161,20,161,19,161,19,160,19,158,18,158,17,157,19" />
    
    <area shape="poly" data-region-id="6" alt="Veneto" title="Veneto" href 
    coords="193,27,192,29,189,29,188,30,190,31,190,32,188,34,187,38,189,39,192,40,192,41,190,43,190,44,190,45,189,45,187,45,186,47,185,48,185,49,185,51,184,52,182,52,181,51,180,49,179,49,178,50,178,51,179,52,179,53,177,54,175,54,174,55,173,59,170,63,169,62,167,61,166,61,167,62,165,62,165,58,164,58,162,57,161,62,159,65,158,66,157,70,159,73,159,75,161,77,164,78,166,79,169,82,170,84,172,84,174,88,175,88,179,88,183,92,185,91,188,90,189,89,189,90,192,90,193,88,197,89,202,93,203,94,204,95,205,95,206,94,205,92,207,92,208,90,208,89,208,88,204,85,202,84,202,83,203,82,203,80,203,77,199,77,198,75,198,73,198,72,200,72,201,73,201,70,203,70,204,69,205,70,205,70,206,71,207,70,209,68,212,67,216,64,217,64,218,63,219,63,220,63,220,61,218,61,219,56,217,55,213,55,210,57,209,57,209,55,207,55,206,53,203,49,202,48,203,47,205,46,205,43,202,41,202,38,204,36,204,36,204,32,207,32,210,27,210,26,210,25,206,24,205,23,203,23,202,23,202,23,202,26,199,26,199,27,197,27,195,25,194,25,193,27" />
    
    <area shape="poly" data-region-id="7" alt="Friuli Venezia Giulia" title="Friuli Venezia Giulia" href 
    coords="211,26,211,28,210,28,208,32,206,32,205,32,204,33,204,36,204,37,201,38,202,41,204,43,205,46,202,48,203,49,207,53,207,55,208,56,209,57,213,56,217,55,219,56,219,60,220,62,220,63,222,63,224,60,223,58,223,57,227,57,228,58,231,59,233,59,233,59,233,56,234,56,238,61,239,62,238,63,237,63,241,64,243,61,243,60,241,60,236,54,236,54,234,53,235,52,236,50,236,50,236,48,232,48,232,48,233,47,233,45,234,45,236,44,236,41,233,40,232,40,230,40,230,40,229,39,229,38,229,37,235,32,236,31,236,30,236,29,234,28,233,27,233,28,232,27,227,28,226,28,222,26,214,26,213,25,212,25,211,25,211,26" />
    
    <area shape="poly" data-region-id="8" alt="Emilia Romagna" title="Emilia Romagna" href 
    coords="125,89,125,91,124,92,125,93,125,93,126,94,126,97,124,98,124,99,124,99,124,102,123,102,122,103,123,104,124,104,124,105,125,105,127,105,128,104,130,106,130,111,130,112,131,110,133,110,136,114,136,112,137,112,138,111,138,109,139,109,141,110,142,111,142,112,143,113,145,114,147,114,147,114,149,115,150,116,150,117,152,118,153,118,154,119,157,121,159,122,160,122,161,121,163,121,166,123,167,122,169,122,171,122,171,122,172,122,175,122,176,121,177,120,178,119,179,119,180,117,181,117,182,118,183,119,185,120,185,120,186,121,187,121,189,121,189,123,189,124,188,126,187,127,187,128,190,130,190,131,190,132,191,132,195,133,196,135,199,135,200,134,201,128,201,128,202,128,204,128,203,127,205,127,207,126,207,127,210,127,211,129,211,129,212,131,213,131,214,131,215,131,214,130,216,129,216,129,217,127,215,125,211,121,209,119,208,118,206,116,205,114,205,111,204,111,
    204,107,202,106,203,102,201,101,202,97,200,96,202,94,202,93,198,89,194,89,192,90,191,90,190,89,189,89,186,92,183,92,180,90,178,89,175,89,174,90,171,90,170,90,167,91,166,91,165,91,163,91,160,91,159,92,155,91,152,90,149,90,147,88,145,89,144,89,143,88,143,85,142,84,139,84,136,88,133,88,131,85,129,86,126,87,125,89" />
    
    <area shape="poly" data-region-id="9" alt="Toscana" title="Toscana" href 
    coords="139,109,138,109,138,110,137,112,137,112,136,112,136,114,137,115,138,115,138,117,139,118,139,118,140,120,141,120,143,121,144,122,145,123,145,125,148,128,149,130,149,131,150,138,150,139,152,140,151,141,150,142,151,144,152,145,152,146,153,147,155,149,155,150,156,152,157,153,157,155,157,156,158,158,157,160,156,161,157,162,156,164,156,164,155,167,154,168,152,169,151,169,150,169,150,168,149,169,147,169,145,170,146,171,147,172,149,173,150,172,152,172,153,173,153,173,154,173,155,172,155,170,155,169,155,168,156,167,157,166,158,165,160,164,161,164,163,166,164,168,163,169,164,172,168,172,170,174,170,175,172,178,173,179,174,180,174,182,173,184,172,185,173,186,174,187,176,187,176,185,180,184,181,185,182,186,183,187,185,187,185,185,188,185,189,185,189,183,187,182,187,181,189,180,190,180,191,179,191,177,192,176,193,175,193,175,194,174,193,173,193,172,192,171,191,171,192,170,193,170,194,169,195,169,196,168,196,168,197,166,197,165,197,164,197,163,197,162,196,162,195,160,195,159,195,159,195,158,196,156,198,156,199,155,199,155,200,155,201,154,202,153,203,152,203,151,201,150,200,149,200,149,199,148,198,145,200,145,200,142,200,142,201,141,202,140,202,139,202,138,204,138,204,137,205,136,205,135,204,135,204,134,203,133,201,134,200,134,200,135,197,135,196,134,195,132,191,133,190,131,189,129,189,128,187,128,187,126,189,125,189,124,190,124,189,122,189,122,187,122,187,123,187,122,186,121,186,120,183,119,182,118,181,118,180,118,179,118,178,119,176,120,175,122,175,123,174,122,171,122,170,122,168,121,167,123,164,122,164,121,161,121,160,121,159,121,158,120,157,119,156,118,154,118,153,117,152,116,151,117,150,118,150,116,148,115,147,114,147,113,144,113,144,112,142,110,141,110,139,109" />
    
    <area shape="poly" data-region-id="10" alt="Umbria" title="Umbria" href 
    coords="205,140,204,140,203,140,202,141,200,142,200,143,200,144,198,145,199,147,200,148,200,149,201,149,203,151,203,152,201,153,201,154,201,155,199,155,199,156,197,156,197,156,196,158,195,159,195,159,196,161,197,162,197,164,198,164,197,166,197,166,196,168,196,168,195,173,197,173,197,173,197,174,199,177,201,178,202,177,203,177,205,179,205,180,205,180,206,182,207,182,210,182,211,183,209,184,210,186,211,186,212,187,214,187,215,186,216,185,216,184,217,184,218,182,219,181,220,181,222,179,222,178,225,177,226,177,228,175,229,175,230,173,230,173,230,171,231,168,229,167,228,167,228,168,227,167,226,166,224,165,224,166,223,166,222,165,221,164,222,159,220,158,221,154,219,154,218,153,219,152,217,150,218,146,217,145,215,147,210,143,209,143,208,143,207,143,207,140,205,140" />
    
    <area shape="poly" data-region-id="11" alt="Lazio" title="Lazio" href 
    coords="195,169,195,170,194,170,192,170,192,171,193,173,193,175,192,177,191,178,192,180,190,181,190,181,189,182,188,185,188,186,186,186,184,186,186,187,189,189,189,192,190,193,191,194,192,196,192,196,193,198,194,197,199,200,200,202,202,204,203,206,204,207,204,209,205,209,205,211,207,211,212,215,213,216,213,218,214,219,214,219,215,221,218,221,219,221,220,222,221,222,223,222,227,225,227,227,228,229,229,229,231,226,232,225,237,226,237,226,239,226,240,227,241,228,243,229,243,227,247,226,250,225,251,221,251,220,253,218,253,216,254,215,254,211,252,210,251,208,249,209,248,209,245,206,244,206,243,206,243,207,243,208,242,208,241,208,239,205,236,205,235,202,235,202,232,202,231,199,228,199,227,197,227,195,226,194,229,195,231,193,234,194,234,194,235,192,234,191,233,190,232,188,231,188,230,184,229,183,229,183,231,181,230,181,230,179,231,179,234,178,235,177,236,175,235,174,233,173,231,173,230,174,229,176,227,176,225,177,225,179,222,179,220,181,218,182,218,183,218,184,217,184,216,186,214,187,212,187,212,186,211,185,211,184,210,183,206,183,205,180,204,178,203,177,201,177,200,178,198,175,196,174,198,173,195,171,195,169" />
    
    <area shape="poly" data-region-id="12" alt="Marche" title="Marche" href 
    coords="217,125,217,128,216,129,213,131,212,131,212,131,211,129,211,128,210,128,208,127,206,127,205,127,204,128,204,128,203,128,202,128,201,129,201,133,203,134,204,135,205,135,206,135,204,137,204,138,202,139,203,140,203,140,205,140,206,139,207,142,207,144,208,142,211,143,214,145,215,146,216,145,216,144,217,145,217,151,219,151,219,152,221,154,221,157,222,159,222,163,223,164,223,165,224,166,225,165,226,165,228,167,231,168,230,171,231,172,232,173,234,174,235,174,237,172,238,170,239,169,240,170,241,170,243,168,244,166,246,165,248,165,249,165,249,162,247,160,247,160,247,157,246,156,245,153,244,151,244,149,242,147,242,144,241,143,240,142,240,140,237,138,234,137,230,135,228,133,226,132,225,131,224,130,221,128,219,127,219,127,218,126,217,125" />
    
    <area shape="poly" data-region-id="13" alt="Abruzzo" title="Abruzzo" href 
    coords="249,165,248,165,246,165,244,167,243,168,242,169,240,170,239,169,238,169,238,172,237,172,236,174,236,176,234,178,231,178,230,179,230,180,230,181,229,184,231,184,230,187,231,188,233,191,235,193,234,194,233,195,232,193,230,194,227,195,227,195,228,197,228,198,229,199,231,199,231,200,232,201,235,202,235,202,236,205,240,205,240,206,241,207,242,208,243,207,244,206,245,206,248,209,250,208,252,209,252,210,254,210,255,209,257,209,257,208,259,206,259,206,258,205,259,204,260,203,264,203,264,203,264,205,266,207,267,207,269,204,270,202,271,201,271,197,273,195,273,193,272,193,272,190,271,189,269,189,268,188,266,187,264,184,263,182,261,182,259,181,258,179,255,176,255,175,254,175,252,173,251,170,251,168,249,166,249,165" />
    
    <area shape="poly" data-region-id="14" alt="Molise" title="Molise" href 
    coords="263,202,260,202,259,204,259,204,259,205,259,207,258,208,258,208,257,209,255,209,254,210,253,214,253,216,252,218,253,218,254,218,255,219,257,219,258,217,258,216,259,216,260,217,262,217,263,220,264,220,265,219,265,219,267,220,269,220,270,220,270,220,272,220,273,221,273,221,274,219,274,219,276,218,280,217,281,216,281,215,279,213,280,212,279,211,279,210,281,209,283,208,285,208,285,206,284,205,283,205,283,203,283,202,283,201,283,200,283,198,281,196,280,196,278,196,276,194,274,194,274,195,272,196,272,197,272,201,270,202,269,205,267,206,266,207,264,206,264,204,264,203,263,202" />
    
    <area shape="poly" data-region-id="15" alt="Campania" title="Campania" href 
    coords="254,219,253,219,251,220,250,225,249,226,249,226,247,227,247,227,249,229,250,230,252,233,252,233,253,234,253,236,255,239,255,240,256,241,256,242,256,244,254,245,251,245,251,247,253,248,255,248,256,246,257,245,259,243,261,243,262,241,263,241,266,244,269,245,268,246,266,249,265,249,265,251,263,252,261,251,260,252,262,254,263,254,264,253,265,252,265,251,266,250,268,250,272,250,273,248,276,248,277,247,277,247,281,250,281,251,282,252,283,254,285,257,283,259,282,261,282,262,282,263,283,263,284,263,286,265,288,264,290,265,291,267,292,268,293,269,294,270,295,270,296,271,297,270,299,268,299,268,300,267,302,267,303,267,304,266,305,265,306,263,307,262,307,262,309,261,309,259,308,257,306,257,305,256,304,254,304,254,303,254,301,254,299,252,299,249,300,249,297,248,297,247,297,246,298,244,297,243,296,243,294,241,294,240,294,237,296,237,297,239,298,238,299,237,300,236,300,233,299,233,298,231,296,229,295,228,294,228,293,229,292,230,291,230,291,229,290,227,290,223,288,223,285,223,285,222,285,219,285,218,285,217,284,216,283,216,281,216,281,216,280,217,276,218,274,220,273,221,273,221,271,219,270,219,269,220,267,221,265,219,265,219,265,220,263,220,262,218,261,217,259,217,258,217,258,217,257,219,255,220,254,219" />
    
    <area shape="poly" data-region-id="16" alt="Puglia" title="Puglia" href 
    coords="284,199,283,201,283,201,284,203,282,203,283,205,284,205,285,207,284,209,282,209,281,209,279,210,280,213,281,214,280,215,281,215,284,216,284,216,285,218,285,218,284,219,285,222,286,223,288,222,289,223,290,226,291,230,293,230,293,228,295,228,296,228,297,230,299,231,300,229,301,229,301,229,303,228,303,230,305,230,306,228,307,226,308,226,311,229,311,231,310,233,311,234,312,234,314,236,315,234,316,234,317,233,317,234,318,237,320,238,321,238,321,239,324,240,325,242,326,241,327,241,327,239,329,240,329,242,332,239,333,241,333,242,332,244,333,245,333,247,333,248,335,249,337,250,338,251,339,249,341,248,342,246,344,246,345,247,345,248,347,247,348,246,349,247,348,249,348,249,347,250,346,251,347,252,350,252,352,252,353,253,355,254,356,254,358,254,365,253,368,257,368,259,370,259,370,263,371,265,373,267,375,270,378,268,380,270,380,271,382,271,381,263,382,262,383,260,385,259,385,258,383,255,383,253,379,250,376,247,373,246,371,244,369,243,368,240,366,239,363,238,361,237,357,236,354,236,351,232,347,230,344,227,339,227,336,226,334,225,332,225,330,224,327,223,326,222,322,220,321,220,319,219,316,218,314,217,313,217,311,216,309,215,308,214,307,212,307,209,308,206,311,204,313,202,314,199,311,197,310,196,307,197,305,197,304,198,297,198,295,198,284,199" />
    
    <area shape="poly" data-region-id="17" alt="Basilicata" title="Basilicata" href 
    coords="302,229,301,229,301,229,299,230,299,231,298,232,299,233,299,236,297,237,296,238,295,237,295,238,294,238,293,241,296,243,297,244,298,246,298,248,299,249,299,252,300,254,302,253,304,254,306,257,308,257,309,260,305,263,305,265,304,268,304,269,306,271,307,272,308,272,309,270,313,269,314,268,315,268,315,272,318,272,319,272,320,271,322,270,322,271,324,271,326,271,324,270,325,268,326,266,327,265,328,263,329,262,331,263,332,262,333,260,333,259,334,258,334,257,335,255,336,254,336,253,337,252,338,251,338,251,336,249,335,248,333,248,333,245,332,244,333,242,333,240,331,239,330,241,327,240,326,241,324,241,323,240,322,239,320,239,319,238,318,237,317,235,317,234,315,235,312,233,312,233,310,233,312,232,312,230,310,228,309,227,308,227,307,227,306,228,305,230,304,230,302,229" />
    
    <area shape="poly" data-region-id="18" alt="Calabria" title="Calabria" href 
    coords="315,268,314,268,312,269,309,269,308,271,308,272,307,273,307,278,309,278,308,281,310,282,310,284,311,286,312,286,314,288,316,291,316,293,317,295,317,296,318,299,319,302,319,304,320,306,321,307,323,309,323,310,323,312,323,313,322,314,322,315,319,315,316,317,314,319,313,320,313,321,314,322,316,324,315,326,315,326,315,329,314,330,314,333,313,334,312,335,310,335,309,336,309,343,311,346,312,347,314,347,315,347,316,347,318,346,319,346,321,346,323,344,323,343,324,338,326,333,327,332,328,331,329,330,330,330,333,328,335,327,335,322,333,321,334,317,333,317,332,315,333,314,334,312,336,310,338,308,341,307,342,307,345,306,347,308,349,308,350,306,350,305,351,303,351,302,350,301,348,300,349,297,349,296,347,293,347,291,349,289,349,289,345,286,344,285,341,284,341,283,339,282,338,281,336,281,332,281,331,281,330,279,329,278,328,277,329,273,331,271,330,269,332,269,330,267,331,264,332,262,329,263,328,264,327,264,327,265,325,267,324,270,325,271,324,272,323,272,321,271,320,271,320,271,319,271,317,272,316,272,315,270,315,268" />
    
    <area shape="poly" data-region-id="19" alt="Sardegna" title="Sardegna" href 
    coords="97,235,96,234,94,234,94,235,93,236,92,237,92,238,92,239,92,241,92,242,92,243,92,244,91,246,90,249,92,250,91,251,90,252,90,254,92,254,94,253,95,255,96,256,96,259,97,262,99,264,100,268,99,268,99,271,100,272,97,273,97,276,96,278,98,279,100,279,102,280,101,282,101,284,100,286,100,285,98,286,98,292,97,293,96,295,96,297,95,298,97,300,97,302,96,304,95,305,98,307,99,308,97,308,95,309,94,309,94,307,93,305,92,305,91,308,91,309,94,309,95,310,95,311,96,314,98,313,98,311,98,309,98,309,99,310,101,311,100,312,102,313,103,316,104,317,104,316,105,314,106,315,108,317,110,317,112,316,113,314,114,313,115,311,114,309,114,308,115,307,116,306,118,305,119,304,123,305,126,307,127,308,128,309,130,308,130,307,131,303,132,302,131,300,131,299,132,298,132,297,132,296,132,294,133,292,133,287,133,286,134,279,135,277,133,276,135,274,135,272,133,270,133,268,132,266,133,265,134,263,135,262,136,261,136,258,137,257,138,255,136,253,135,250,135,248,134,246,134,244,135,244,135,241,134,242,133,244,132,243,131,241,130,241,131,239,133,238,129,237,129,236,130,235,130,233,129,232,128,234,126,233,126,232,128,230,128,229,126,228,125,230,125,229,124,230,122,231,122,229,121,228,120,229,119,230,119,231,119,232,117,233,116,233,115,234,112,236,111,237,110,238,111,240,109,241,105,242,103,244,100,245,99,244,95,243,94,243,94,241,94,239,95,237,96,236,97,235" />
    
    <area shape="poly" data-region-id="20" alt="Sicilia" title="Sicilia" href 
    coords="240,339,239,340,238,341,233,341,233,345,232,346,231,346,230,347,227,347,225,346,224,345,224,344,223,343,222,343,222,344,222,345,220,345,220,347,219,347,217,348,216,349,216,349,216,350,216,350,216,352,216,355,215,356,215,357,216,359,216,361,217,361,218,361,221,364,222,365,224,365,224,364,230,365,233,367,234,367,235,367,240,370,243,372,244,373,245,373,247,374,249,375,251,378,254,379,257,379,259,381,260,381,267,381,269,382,271,382,273,384,275,386,275,387,277,390,278,391,282,392,284,394,286,394,286,394,287,394,291,394,292,394,292,394,294,394,295,396,296,396,298,395,297,393,297,393,297,390,296,389,296,388,299,384,301,382,301,379,300,378,298,377,297,376,298,374,299,375,300,374,298,371,295,371,295,370,294,367,295,366,294,364,295,362,297,361,297,354,299,350,301,348,303,344,305,341,305,338,305,338,307,335,307,334,305,333,303,334,300,336,298,337,297,337,296,336,295,336,295,338,294,340,290,340,288,339,287,339,284,340,282,340,279,343,277,345,275,345,275,345,270,346,269,346,265,347,262,346,260,346,259,347,257,348,256,348,251,348,249,347,247,345,247,344,245,344,245,345,243,344,242,344,241,341,240,340,240,339" />
    
    </map>
    
    <nav id="region_menu">
      <ul>
        <li>
          <a id="map_1" data-region-id="1" href><span>Valle d'Aosta</span></a>
        </li>
        <li>
          <a id="map_2" data-region-id="2" href=""><span>Piemonte</span></a>
        </li>
    <li>
    <a id="map_3" data-region-id="3" href=""><span>Liguria</span></a>
    </li>
    <li>
    <a id="map_4" data-region-id="4" href=""><span>Lombardia</span></a>
    </li>
    <li>
    <a id="map_5" data-region-id="5" href=""><span>Trentino-Alto Adige</span></a>
    </li>
    <li>
    <a id="map_6" data-region-id="6" href=""><span>Veneto</span></a>
    </li>
    <li>
    <a id="map_7" data-region-id="7" href=""><span>Friuli-Venezia Giulia</span></a>
    </li>
    <li>
    <a id="map_8" data-region-id="8" href=""><span>Emilia-Romagna</span></a>
    </li>
    <li>
    <a id="map_9" data-region-id="9" href=""><span>Toscana</span></a>
    </li>
    <li>
    <a id="map_10" data-region-id="10" href=""><span>Umbria</span></a>
    </li>
    <li>
    <a id="map_11" data-region-id="11" href=""><span>Lazio</span></a>
    </li>
    <li>
    <a id="map_12" data-region-id="12" href=""><span>Marche</span></a>
    </li>
    <li>
    <a id="map_13" data-region-id="13" href=""><span>Abruzzo</span></a>
    </li>
    <li>
    <a id="map_14" data-region-id="14" href=""><span>Molise</span></a>
    </li>
    <li>
    <a id="map_15" data-region-id="15" href=""><span>Campania</span></a>
    </li>
    <li>
    <a id="map_16" data-region-id="16" href=""><span>Puglia</span></a>
    </li>
    <li>
    <a id="map_17" data-region-id="17" href=""><span>Basilicata</span></a>
    </li>
         <li>
           <a id="map_18" data-region-id="18" href=""><span>Calabria</span></a>
         </li>
         <li>
           <a id="map_19" data-region-id="19" href=""><span>Sardegna</span></a>
         </li>
         <li>
           <a id="map_20" data-region-id="20" href=""><span>Sicilia</span></a>
         </li>
       </ul>
    </nav>
      
    </body>
    </html>
    The CSS code is posted in next post

  4. #4

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: Java Scription functions - which one runs first

    CSS File:

    Code:
    ol,ul
    {
      list-style:none
    }
    
    #index .section_top #region_map_wrapper
    {
      height:400px;
      width:400px;
      
      float:left;
    }
    
    #index .section_top .sprite_region_1
    {
      background:url(sprite_map_multicolored.gif)
      no-repeat;
      width:400px;
      height:400px;
      background-position:-7200px 0;
      z-index:110
    }
    
    #index .section_top .sprite_region_2{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-4400px 0;z-index:110}
    #index .section_top .sprite_region_3{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-2800px 0;z-index:110}
    #index .section_top .sprite_region_4{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-3200px 0;z-index:110}
    #index .section_top .sprite_region_5{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-6400px 0;z-index:110}
    #index .section_top .sprite_region_6{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-7600px 0;z-index:110}
    #index .section_top .sprite_region_7{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-2000px 0;z-index:110}
    #index .section_top .sprite_region_8{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-1600px 0;z-index:110}
    #index .section_top .sprite_region_9{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-6000px 0;z-index:110}
    #index .section_top .sprite_region_10{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-6800px 0;z-index:110}
    #index .section_top .sprite_region_11{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-2400px 0;z-index:110}
    #index .section_top .sprite_region_12{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-3600px 0;z-index:110}
    #index .section_top .sprite_region_13{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:0 0;z-index:110}
    #index .section_top .sprite_region_14{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-4000px 0;z-index:110}
    #index .section_top .sprite_region_15{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-1200px 0;z-index:110}
    #index .section_top .sprite_region_16{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-4800px 0;z-index:110}
    #index .section_top .sprite_region_17{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-400px 0;z-index:110}
    #index .section_top .sprite_region_18{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-800px 0;z-index:110}
    #index .section_top .sprite_region_19{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-5200px 0;z-index:110}
    #index .section_top .sprite_region_20{background:url(sprite_map_multicolored.gif) no-repeat;width:400px;height:400px;background-position:-5600px 0;z-index:110}
    The functions posted in the next post

  5. #5

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: Java Scription functions - which one runs first

    Java functions file (partial)

    Code:
    !function(a,b)
    {
      "use strict";
      "object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):
      function(a)
      {
        if(!a.document)throw new Error("jQuery requires a window with a document");
          return b(a)}:b(a)
      }
      ("undefined"!=typeof window?window:this,
      function(a,b)
      {
        "use strict";
        var c=[],
        d=a.document,
        e=Object.getPrototypeOf,
        f=c.slice,
        g=c.concat,
        h=c.push,
        i=c.indexOf,
        j={},
        k=j.toString,
        l=j.hasOwnProperty,
        m=l.toString,
        n=m.call(Object),
        o={
      };
      function p(a,b)
      {
        b=b||d;
        var c=b.createElement("script");
        c.text=a,
        b.head.appendChild(c).parentNode.removeChild(c)
      }
      var q="3.2.1",
      r=function(a,b)
      {
        return new r.fn.init(a,b)
      },
      s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
      t=/^-ms-/,
      u=/-([a-z])/g,
      v=function(a,b)
      {
        return b.toUpperCase()
      };
      r.fn=r.prototype={jquery:q,constructor:r,length:0,
      toArray:function()
      {
        return f.call(this)
      },
      get:function(a)
      {
        return null==a?f.call(this):a<0?this[a+this.length]:this[a]
      },
      pushStack:function(a)
      {
        var b=r.merge(this.constructor(),a);
        return b.prevObject=this,b
      },
      each:function(a)
      {
        return r.each(this,a)
      },
      map:function(a)
      {
        return this.pushStack(r.map(this,function(b,c)
                                         {
                                           return a.call(b,c,b)
                                         }
                                   )
                              )
      },
      slice:function()
      {
        return this.pushStack(f.apply(this,arguments))},
        first:function()
        {
          return this.eq(0)},
          last:function()
          {
            return this.eq(-1)
          },
          eq:function(a)
          {
            var b=this.length,
            c=+a+(a<0?b:0);
            return this.pushStack(c>=0&&c<b?[this[c]]:[])
          },
          end:function()
          {
            return this.prevObject||this.constructor()
          },
          push:h,
          sort:c.sort,
          splice:c.splice
        },
        r.extend=r.fn.extend=function()
        {
          var a,b,c,d,e,f,g=arguments[0]||{},
          h=1,
          i=arguments.length,
          j=!1;
          for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||r.isFunction(g)||(g={}),h===i&&(g=this,h--);
          h<i;h++)
          if(null!=(a=arguments[h]))
            for(b in a)
              c=g[b],
              d=a[b],
              g!==d&&(j&&d&&(r.isPlainObject(d)||(e=Array.isArray(d)))?(e?(e=!1,f=c&&Array.isArray(c)?c:[]):f=c&&r.isPlainObject(c)?c:{},
              g[b]=r.extend(j,f,d)):void 0!==d&&(g[b]=d));
              return g
            },
            r.extend({expando:"jQuery"+(q+Math.random()).replace(/\D/g,""),isReady:!0,
            error:function(a)
            {
              throw new Error(a)
            },
            noop:function()
            {},
            isFunction:function(a)
            {
              return"function"===r.type(a)
            },
            isWindow:function(a)
            {
              return null!=a&&a===a.window
            },
            isNumeric:function(a)
            {
              var b=r.type(a);
              return("number"===b||"string"===b)&&!isNaN(a-parseFloat(a))
            },
            isPlainObject:function(a)
            {
              var b, c;
              return!(!a||"[object Object]"!==k.call(a))&&(!(b=e(a))||(c=l.call(b,"constructor")&&b.constructor,
              "function"==typeof c&&m.call(c)===n))
            },
            isEmptyObject:function(a)
            {
              var b;
              for(b in a)return!1;
              return!0
            },
            type:function(a)
            {
              return null==a?a+"":"object"==typeof a||"function"==typeof a?j[k.call(a)]||"object":typeof a
            },
            globalEval:function(a)
            {
              p(a)
            },
            camelCase:function(a)
            {
              return a.replace(t,"ms-").replace(u,v)
            },
            each:function(a,b)
            {
              var c,
              d=0;
              if(w(a))
              {
                for(c=a.length;
                  d<c;d++)
                  if(b.call(a[d],d,a[d])===!1)break
              }
              else 
                for(d in a)
                  if(b.call(a[d],d,a[d])===!1)break;
                  return a
            },
            trim:function(a)
            {
              return null==a?"":(a+"").replace(s,"")
            },
            makeArray:function(a,b)
            {
              var c=b||[];
              return null!=a&&(w(Object(a))?r.merge(c,"string"==typeof a?[a]:a):h.call(c,a)),c
            },
            inArray:function(a,b,c)
            {
              return null==b?-1:i.call(b,a,c)
            },
            merge:function(a,b)
            {
              for(var c=+b.length,d=0,e=a.length;d<c;d++)a[e++]=b[d];
              return a.length=e,a
            },
            grep:function(a,b,c)
            {
              for(var d,e=[],f=0,g=a.length,h=!c;f<g;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);
              return e
            },
            map:function(a,b,c)
            {
              var d,e,f=0,h=[];
              if(w(a))
                for(d=a.length;f<d;f++)e=b(a[f],f,c),null!=e&&h.push(e);
              else 
                for(f in a)e=b(a[f],f,c),null!=e&&h.push(e);
              return g.apply([],h)
            },
            guid:1,
            proxy:function(a,b)
            {
              var c,d,e;
              if("string"==typeof b&&(c=a[b],b=a,a=c),
                r.isFunction(a))
              return d=f.call(arguments,2),
              e=function()
              {
                return a.apply(b||this,
                d.concat(f.call(arguments)))
              },
              e.guid=a.guid=a.guid||r.guid++,e
            },
            now:Date.now,
            support:o
          }),
          "function"==typeof Symbol&&(r.fn[Symbol.iterator]=c[Symbol.iterator]),
          r.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),
          function(a,b)
          {
            j["[object "+b+"]"]=b.toLowerCase()
          });
    
    function w(a)
    {
      var b=!!a&&"length"in a&&a.length,
      c=r.type(a);
      return"function"!==c&&!r.isWindow(a)&&("array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a)
    }

  6. #6
    PowerPoster PlausiblyDamp's Avatar
    Join Date
    Dec 2016
    Location
    Pontypool, Wales
    Posts
    2,458

    Re: Java Scription functions - which one runs first

    Welcome to the wonderful world of Javascript

    From the look of things the file has been minified, hence the very short function and parameter names, which makes reading the code a lot more difficult, however the important bit is the very first line. Before anything though a bit of background on what is happening.

    Under Javascript a function is normally declared using the function keyword and a name e.g.
    Code:
       function test()
            {
                alert("I am running!");
            }
    This declares a function test but doesn't actually cause it to execute, before anything happens you would need to call the function. e.g.
    Code:
    test();
    
            function test() {
                alert("I am running!");
            }
    If you wanted to execute the function in response to something happening, such as a button click, you could also connect this function up as an event handler
    Code:
            var btn = document.getElementById("btn");
            btn.addEventListener("click", test);
    
            function test() {
                alert("I am running!");
            }
    Under certain circumstances you don't want to always give your functions a name, the above code could have been written as an anonymous function.
    Code:
            var btn = document.getElementById("btn");
            btn.addEventListener("click", function () {
                alert("I am running!");
            });
    note the function doesn't have a name - it will be registered against the button click but doesn't have a name you can use or call directly.

    Javascript uses the normal precedence operators to evaluate things, if you haven't come across this search for BODMAS on the internet. The important bit is that putting something in brackets causes it to be evaluated first, a side effect is that the brackets also act as a scoping mechanism so anything declared inside them doesn't become part of the global namespace - this becomes important when creating Javascript libraries as it prevents two libraries clashing if they have the same function names. If you declare an anonymous function directly inside brackets and then call this you can get a function that can contain other named functions, that runs automatically and never puts the function names into the global namespace.

    I could rewrite the earlier snippet
    Code:
       var btn = document.getElementById("btn");
            btn.addEventListener("click", test);
    
            function test() {
                alert("I am running!");
            }
    as
    Code:
     (function () {
                var btn = document.getElementById("btn");
                btn.addEventListener("click", test);
    
                function test() {
                    alert("I am running!");
                };
            })();
    As confusing as the syntax looks it is a very common approach in most Javascript libraries (jQuery as an example), this is known as a self-executing function.

    This works because the (function().... )(); syntax causes the anonymous function to be evaluated and executed. Anything that causes this evaluation to happen would have the same result.

    In the javascript you posted notice the ! at the very beginning. The ! turns the first line into a "function expression", if you go to the end of the file you will probably spot a (); at the end - this is then executing the function. This is very similar to a self-executing function but uses one less character - a single "!" rather than a "(" and a ")" per function expression

    That is a fairly long explanation to say that function(a,b) will be being executed automatically and as part of this function a lot of other functions are being defined, look towards the end of the function(a, b) and you will probably see it is calling the other functions in a particular order. The minified nature of the code though is obviously going to make it harder to read the functions.js file.

  7. #7

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: Java Script functions - which one runs first

    What's wrong with this code? It doesn't show the alert messagebox

    Code:
    <html>
    <head>
    
    <SCRIPT>
    (function () {
                var btn = document.getElementById("btn");
                btn.addEventListener("click", test);
    
                function test() {
                    alert("I am running!");
                };
            })();
    </SCRIPT>
    
    </head>
    
    <body>
    
    <input type="button" id="btn">
    
    </body>
    </html>
    BTW I looked at the end of the file and there is no (); present
    Last edited by Code Dummy; Sep 24th, 2017 at 03:16 PM.

  8. #8
    PowerPoster PlausiblyDamp's Avatar
    Join Date
    Dec 2016
    Location
    Pontypool, Wales
    Posts
    2,458

    Re: Java Script functions - which one runs first

    You are not getting the alert because you are putting the script in the head section, when you do that it is trying to find the button before the button is rendered to the HTML, add the code to the end of the body tag and it should work.

    Strange there isn't a (): at the end, although now I look at the code properly the function is expecting two parameters (a, b) it will not be empty brackets (); but brackets with two separate values between them.

  9. #9

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: Java Script functions - which one runs first

    The only reason I put the code in the <head> section was because that's where all the java functions were put in the example I posted so I figured that's where it goes.

    OK, so you say I didn't get the alert when I click on the input button is because I put the java code in the <head> section so I moved it to the bottom of the <body> section after all of the HTML code but still I get no alert when I click on button.

    Code:
    <html>
    
    <head></head>
    
    <body>
    
    <input type="button" id="btn">
    
    <SCRIPT>
    (function () {
    
                var btn = document.getElementById("btn");
                btn.addEventListener("click", test);
                };
    
                function test() {
                    alert("I am running!");
    
            })();
    </SCRIPT>
    
    </body>
    </html>
    NOTE:

    Here is what is at the end of the java functions file:

    Code:
    $(function()
    {
      function i(i)
      {
          '
          ' A few lines of script code
          '
      }
      function l()
      {
          '
          ' A few lines of script code
          '
      }
      $("body").on("submit", "#search_form", function(e)
                                             {
                                                   '
                                                   ' A few lines of script code
                                                   '
                                             }
       );
      $("body").on("mouseover", "[data-region-id]", function()
                                                    {
                                                         '
                                                         ' A few lines of script code
                                                         '
                                                    }
       );
      $("body").on("mouseleave", "[data-region-id]",l)
            '
            ' There is no code here
            ' 
       }
    );

  10. #10
    PowerPoster PlausiblyDamp's Avatar
    Join Date
    Dec 2016
    Location
    Pontypool, Wales
    Posts
    2,458

    Re: Java Script functions - which one runs first

    If you notice your code
    Code:
    (function () {
    
                var btn = document.getElementById("btn");
                btn.addEventListener("click", test);
                };
    
                function test() {
                    alert("I am running!");
    
            })();
    is different to the code I posted back in post #6
    Code:
     (function () {
                var btn = document.getElementById("btn");
                btn.addEventListener("click", test);
    
                function test() {
                    alert("I am running!");
                };
            })();
    That is probably why yours isn't working.

    It looks like the javascript file has even more functions and code defined after the function expression itself, you would need to find the end of the !function(a, b) {} block to see exactly what is being passed in. Out of interest where did the functions.js file originate - working with minified sources is an absolute miserable experience so if the original files are available anywhere that might make things a lot clearer. It also looks as if you have jQuery being used as well which is going to add further potential complication as it could be wiring up the event handlers in a different way.

  11. #11

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: Java Script functions - which one runs first

    OK, I removed that extra ); and now it works. Thanks.

    I got a hold of the original file which was, of course, minified and I just couldn't deal with it so I spent some time and reformatted it myself. I'm pretty sure my reformatting isn't 100% correct but it does make things a lot easier to read.

  12. #12
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

    Re: Java Script functions - which one runs first

    Ok.... this is the key to what's going on:
    $(function()

    That's the start of a special JS call... It is an initializer and it gets called automatically once the entire body of the document is loaded. It can be placed anywhere - odds are there's at least one in one of the included scripts if not all - that's why if you comment some out, things stop working, because their initializer didn't run.

    The lines
    $("body").on("submit", "#search_form", function(e)
    are registering events for different elements on the page... in that case, it's the submit button in the body of the document for the form "search_form"

    This one deals with the mouse moving over a region named "data-region-id"...
    $("body").on("mouseover", "[data-region-id]", function()


    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  13. #13

    Thread Starter
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: Java Script functions - which one runs first

    Quote Originally Posted by techgnome View Post
    Ok.... this is the key to what's going on:
    $(function()

    That's the start of a special JS call... It is an initializer and it gets called automatically once the entire body of the document is loaded. It can be placed anywhere - odds are there's at least one in one of the included scripts if not all - that's why if you comment some out, things stop working, because their initializer didn't run.
    That's what I thought until I did a little test. I put alert statement at the very beginning of two functions. In the function I thought would be the first to run (the one you are referring to) the alert message reads "First To Run". Then at the beginning of the other function; the one at the very top of the file that starts with the !(function..... the alert message reads "Second To Run"

    Code:
    $(function()
    {
    alert("First To Run");
    
      "use strict";
      var e = $("#region_map"), 
      t = $("#region_menu");
          '
          '
          '
    Code:
    !function(a,b)
    {
    alert("Second To Run");
    
      "use strict";
      "object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):
           '
           '
           '
    When I run the HTML object the messages appear in the following order:

    "Second To Run"

    "First To Run"

    So, how then can you explain this as it appears that what you say is the first to run actually is the second

  14. #14
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Java Script functions - which one runs first

    The $() syntax is a jQuery syntax.

    I'm assuming when you put a function in the $() syntax that maybe it's waiting for the form READY event to execute that code.

    When I get back to my home office I'll test this out a bit...

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  15. #15
    PowerPoster PlausiblyDamp's Avatar
    Join Date
    Dec 2016
    Location
    Pontypool, Wales
    Posts
    2,458

    Re: Java Script functions - which one runs first

    Quote Originally Posted by Code Dummy View Post
    That's what I thought until I did a little test. I put alert statement at the very beginning of two functions. In the function I thought would be the first to run (the one you are referring to) the alert message reads "First To Run". Then at the beginning of the other function; the one at the very top of the file that starts with the !(function..... the alert message reads "Second To Run"

    Code:
    $(function()
    {
    alert("First To Run");
    
      "use strict";
      var e = $("#region_map"), 
      t = $("#region_menu");
          '
          '
          '
    Code:
    !function(a,b)
    {
    alert("Second To Run");
    
      "use strict";
      "object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):
           '
           '
           '
    When I run the HTML object the messages appear in the following order:

    "Second To Run"

    "First To Run"

    So, how then can you explain this as it appears that what you say is the first to run actually is the second
    If there are multiple self executing functions, function expressions or any other code at the global level they will be executed in the order they occur in the file, if the !function(a,b) occurs before the $(function...) then it will be executed first. Also the $(function()....) syntax is shorthand for handling the document.ready event, so depending on where you are including the script file it may be waiting for the HTML to be fully loaded (as szlamany mentioned)
    Last edited by PlausiblyDamp; Sep 26th, 2017 at 03:05 PM.

Posting Permissions

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



Click Here to Expand Forum to Full Width