Making a Better Use of Script Tags

Admittedly, I’m a certified Stage 3 Javascript fanboi. There is a lot of things I love about the language, but one thing I do not particularly care for is the script tag syntax. Let me show you what I mean. Pretty much every page I created recently has something like this near the top:

<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
 
   $(document).ready(function(){
      // Your code here
   });
 
</script>

In other words you have two script tags in your code. First one imports the external js file (in this case the JQuery library) and the second one calls some functions from that file. If the first script tag fails to import the external code for some reason (for example due to a network problem) then the second tag will blow up in your face immediately. Granted this is how embedding of javascript in HTML was done since the begging of time, but you can’t say this is a graceful behavior.

John Resig (the man behind JQuery) noticed this, and he proposed to fix this behavior. He proposed to change the behavior of your script tags in order to allow you to write your code this way:

<script type="text/javascript" src="jquery.js">
 
   $(document).ready(function(){
      // Your code here
   });
 
</script>

Embedding the code operating on the library in the very same script tag has many benefits. For one, it logically groups the code so the calls to library functions occur in the same place that library is imported. Furthermore, it prevents network related failures. If you can’t import jquery.js, the code related to it will not get executed. This is a much more graceful than what we have now.

The best part is that these are not just some theoretical musings that will never be implemented by any of the mainstream browsers. John achieved this effect by adding 3 lines of code to the end of jQuery.js file ultimately proving two things:

  1. That John Resig is the man
  2. That jQuery is FUCKING AWESOME

In fact he takes it one step further. For example, roughly 99% of code you will write against the framework will be inside the $(document).ready closure. So while we are using shortcuts, why not just make that code optional in our modified tags:

<script type="text/javascript" src="jquery.js">
      // Your code here
</script>

Doesn’t that look much clearer, and straightforward? I love it! But don’t get too excited yet. This functionality is not included in jQuery yet and there is no guarantee that it will ever make into it. John says it will need some through testing before it gets deployed.

Once more I’m amazed, and humbled by what you can do with Javascript, and exactly how much power is packed into that 16kb jQuery script. Mind boggling!

This entry was posted in programming and tagged , . Bookmark the permalink.



4 Responses to Making a Better Use of Script Tags

  1. Adam Kahtava CANADA Google Chrome Windows says:

    John is the man! jQuery is efff’n awesome!

    Ever wonder why we even need a type attribute in the script tag?

    Reply  |  Quote
  2. Luke Maciak UNITED STATES Mozilla Firefox Ubuntu Linux Terminalist says:

    [quote post="2641"]Ever wonder why we even need a type attribute in the script tag?[/quote]

    Well, it’s there to specify the MIME type of the script you are importing/embedding. Naturally as it goes with stuff like that, there is an intense flame war about whether you should use text/javascript or application/javascript. :P

    Oh, and you can use the script tag to embed client side vbscript in which case you’d use text/vbscript although I haven’t really seen that being done much these days.

    Reply  |  Quote
  3. Adam Kahtava CANADA Google Chrome Windows says:

    But most browsers choose JavaScript by default. It doesn’t really matter what your type attribute contains – unless you’re using vbscript.

    Reply  |  Quote
  4. Luke Maciak UNITED STATES Mozilla Firefox Ubuntu Linux Terminalist says:

    @Adam Kahtava: True. I see many people skip it altogether.

    But, W3c lists it as a required attribute so if you skip it, your code may no longer validate.

    Reply  |  Quote

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>