JavaScript Execution Order Code and Guide

Designing your web page using JavaScript requires attention to the order in which your code appears and whether you are encapsulating code into functions or objects, all of which impact the order in which the code runs.   The Location of JavaScript on Your Web Page Since the JavaScript on your page executes based on certain factors, lets consider where and how to add JavaScript to a web page.   There are basically three locations into which we can attach JavaScript: Directly into the head of the pageDirectly into the body of the pageFrom an event handler/listener It doesnt make any difference whether the JavaScript is within the web page itself or in external files linked to the page. It also doesnt matter  whether the event handlers are hard-coded into the page or added by the JavaScript itself (except that they cant be triggered before they are added). Code Directly on the Page What does it mean to say that JavaScript is  directly in the head or body of the page?  If the code is not enclosed in a function or object, it is directly in the page. In this case, the code runs sequentially as soon as the file containing the code has loaded sufficiently for that code to be accessed. Code that is within a function or object is run only when that function or object is called. Basically, this means that any code inside the head and body of your page that is not inside a function or object will run as the page is loading  Ã¢â‚¬â€Ã‚  as soon as  the page has loaded sufficiently to access that code. That last bit is important and impacts the order in which you place your code on the page: any code placed directly in the page that needs to interact with elements within the page must appear after the elements in the page on which it is dependent. In general, this means that if you use direct code to interact with your page content, such code should be placed at the bottom of the body. Code Within Functions and Objects A code inside functions or objects is run whenever that function or object is called. If it is called from code that is directly in the head or body of the page, then its place in the execution order is effectively the point at which the function or object is called from the direct code. Code Assigned to Event Handlers and Listeners Assigning a function to an event handler or listener does not result in the function being run at the point at which it is assigned —  provided that you are actually assigning the function itself and not running the function and assigning the value returned. (This is why you generally do not see the () on the end of the function name when it is being assigned to an event since the addition of the parentheses runs the function and assigns the value returned rather than assigning the function itself.) Functions that are attached to event handlers and listeners run when the event that they are attached to is triggered. Most events are triggered by visitors interacting with your page. Some exceptions exist, however, such as the load event on the window itself, which is triggered when the page finishes loading. Functions Attached to Events on Page Elements Any functions attached to events on elements within the page itself will run according to the actions of each individual visitor — this  code runs only when a particular event occurs to trigger it. For this reason, it doesnt  matter if the code never runs for a given visitor, since that visitor has obviously not performed the interaction that requires it. All of this, of course, assumes that your visitor has accessed your page with a browser that has JavaScript enabled. Customized Visitor User Scripts Some users have installed special scripts that may  interact with your web page. These scripts run after all of your direct code, but before any  code attached to the load event handler. Since your page knows nothing about these user scripts, you have no way of knowing what these external scripts might do  Ã¢â‚¬â€Ã‚  Ã‚  they  could override any or all of the code that you have attached to the various events to which you have assigned processing. If this code overrides  event handlers or listeners, the response to event triggers will run the code defined by the user instead of, or in addition to, your code. The take home point here is that you cannot assume that code designed to run after the page has loaded will be allowed to run the way that you designed it. In addition, be aware that some browsers have options that allow disabling of some event handlers within the browser, in which case a relevant event trigger will not launch the corresponding event handler/listener in your code.