Hello World
Wednesday December 23, 2009
In this series of introductory tutorials on Modern JavaScript that takes an entirely different approach to how to write JavaScript. Whether you are just starting with JavaScript or have been writing JavaScript for some time and want to learn how to modernise your approach to coding then this series of tutorials may just be what you are looking for. We begin today with the first tutorial which as with all programing series is the usual "Hello World" script.
Come back each week to see further tutorials in this series.
Hello World
Come back each week to see further tutorials in this series.
Hello World
One point of note, it’s usually more performant if you have a good JS separation to have your .js includes just before the closing “” tag. Otherwise, rendering of what content is available can be stalled until the .js script files are loaded. The same goes for CSS, which is why it’s suggested to combine scripts as much as possible for deployment. Having all your methods for all pages in a single script can help with caching most of that information for other pages. The only thing I try to keep in page specific scripts is the load events for references to other scripts. Actually, I generally have a breakdown of three scripts + libraries. So it comes down to Libraries + site methods, one script for the general layout’s load events, and one script for the specific page’s load events. This keeps the calls down a bit, while keeping just enough separated.
It’s also a good idea to bind to event handlers for the dom-ready/window load events as needed. dom-ready will fire sooner, but isn’t supported on all browsers. Most JS frameworks provide a helper for registering such events. This is considered more proper than assigning to the window.onload member. And more than one event can be bound with typical event bindings, over window.onload.
Well this is the first in a series of tutorials for people just starting to learn JavaScript. There is a tutorial part way through suggesting moving the JavaScript call to the bottom of the body (which will speed things up for HTML but which will not work for XHTML).
Modern browsers can download up to eight files simultaneously when those files are called from HTML so having a couple of CSS files in the head isn’t going to slow things significantly. Browsers can only single thread JavaScript files called from HTML though so having huge JavaScript files in the head of the page will slow things down. The way around that is to use JavaScript to load the JavaScript as I descriibe on http://javascript.about.com/library/bladdjs.htm – that allows you to have as many JavaScript files downloading simultaneously as you are likely to need while only the script from that page single threads to start them off. The others are called from JavaScript instead of HTML and so do not count toward the 8 general files or 1 JavaScript at a time HTML limit.
It is also advisable to not start using frameworks until after you have a proper understanding of JavaScript.