Next page | Contents page |

The entire process: from event to display

JavaScript code running in a browser is usually initiated by an event. We have already seen that there are a large number of possible events. The first to occur for your program is likely to be the onload event which is fired by the system when everything for the HTML page has been loaded. The event is handled by invoking a function named in the body element:


  <body onload="run()">.

That function can be named anything you like of course, not necessarily run.

The function that handles the onload event is likely to invoke other functions along the way but when it gets to its end, regardless of whether there is a return statement, that is the end of the whole process. Anything drawn in canvas elements or changed in other elements then becomes visible, but not before this. [There are exceptions: alert(), prompt(), confirm() break the flow and hold everything up until they are dismissed, but these are not nice things to use anyway.]

Nothing further happens unless another event occurs. That may be the user clicking or changing something, or just moving a mouse - depending on what event handler functions you have created. Again, any event handler function runs until its end and that's the end of the process. Anything drawn or changed in the HTML then becomes visible.

JavaScript as originally designed is fundamentally single threaded. Nothing happens in parallel with the one process (with one or two exceptions such as image loading, which we will encounter soon).

Since about 2015 features have been added to the language for running parallel threads: HTML5 introduced worker threads and now JavaScript has asynchronous functions, promises, and various associated wonders.

I would strongly urge beginners not to even think about using those because they lead you into very deep water. Parallel processes can cause all kinds of problems unless you are very clear about your design. First become thoroughly familiar with the fundamental JavaScript process as described on this page.

Next page | Contents page |