Scott on Writing

Musings on technical writing...

JavaScript Includes - Be Careful With Your Syntax!!

When adding client-side script to a web page, the JavaScript can be embedded directly within the page's HTML or provided via an external reference similar to include files in programming languages. When using JavaScript include files, the browser will cache the file so that it doesn't need to be downloaded on subsequent postbacks and page visits. By embedding the script directly wthin the page's markup, the script must be downloaded on each page visit (with the rest of the markup), which is wasteful if the script content is static. Therefore, JavaScript include files lessen the amount of data the client must download, improving the end user's experience. So JavaScript includes are a Good Thing. In fact, when using certain ASP.NET Web controls (like validation controls, the Menu, and so on), script includes are used to inject the necessary client-side plumbing).

JavaScript includes have a simple enough syntax:

<script src="pathToJavaScriptFile"></script>

Of course, XML rules allow for elements with no inner content to use “/>” as a shortcut rather than needing the closing tag. In a recent project I assumed this would work for JavaScript includes and added a number of includes using syntax like:

<script src="pathToJavaScriptFile" />

Well, guess what? That doesn't work, at least not in Internet Explorer. IE ignores the JavaScript include altogether, not sucking in any of the JavaScript content from pathToJavaScriptFile. If your JavaScript file contains only infrequently-used functions, you of course don't find this out until you perform some action that calls one of these functions in pathToJavaScriptFile and you end up getting a script error. And then, of course, you spend the next hour pouring over the JavaScript code and the page's rendered markup to find what's wrong, not realizing that the browser hadn't sucked down the JavaScript include file because you used “/>” instead of “</script>”.

What's particularly odd is that if you use a tool like Fiddler to inspect the HTTP traffic, the browser still makes a request to pathToJavaScriptFile! It just doesn't 'execute' the script or 'register' the functions if you end the <script> reference with “/>“ instead of “</script>“. Ditto if you fail to end the <SCRIPT> element (that is, if you have <script src="pathToJavaScriptFile">).

Long story short - make sure you don't make the same mistake I did. Save yourself an hour of frustration by adding the verbose “</script>” when externally referencing a JavaScript file instead of trying to save six bytes by omitting it.

posted on Wednesday, April 18, 2007 3:40 PM

Feedback

# re: JavaScript Includes - Be Careful With Your Syntax!! 4/18/2007 6:35 PM Grewal

Thanks a lot for the tip.

# re: JavaScript Includes - Be Careful With Your Syntax!! 4/18/2007 8:35 PM Barry Kelly

I've been there, Scott. It's very annoying :-|

# re: JavaScript Includes - Be Careful With Your Syntax!! 4/18/2007 9:50 PM Eber Irigoyen

yup... found that out all by my self... the same way you did... although it probably took me a bit longer... sigh

# almost... 4/19/2007 4:17 AM ed everett

This got forwarded around to our development team, bellow is my reply to that email:


"Note that the “correct” syntax in this excerpt is wrong and may fail in some browsers, the really correct way is this:

<script src=”path/to/file.js” type=”text/javascript” ></script>

"(the language attribute is depreciated and should not be included)

"“Of course, XML rules allow for elements with no inner content to use “/>” it helps to know what language you are using: (x)html is not xml.

Cheers,

Ed.

# re: JavaScript Includes - Be Careful With Your Syntax!! 4/19/2007 5:16 AM Morten Haug

I found this out just a couple of weeks ago myself, only it materialized in the fact that my css settings wouldn't work. Frustrating...

# re: JavaScript Includes - Be Careful With Your Syntax!! 4/19/2007 5:45 PM Webdroid

Good catch Scott, I've also found this to be true for divs in ie.

# JavaScriptをインクルードするときは閉じタグが必要 4/22/2007 9:09 AM がんふぃーるど室長の不定期ブログ

JavaScript???????????????????

Title:  
Name:  
Url:
Protected by Clearscreen.SharpHIPEnter the code you see:
Comments   

Add To Your Reader

My Links

Archives

Post Categories

 

I am a Microsoft MVP for ASP.NET.
I am an ASPInsider.
<May 2008>
SMTWTFS
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

Comment Stats

DayTotal% of Total
Sunday 1866.8%
Monday 37913.9%
Tuesday 45316.7%
Wednesday 50418.5%
Thursday 53519.7%
Friday 49418.2%
Saturday 1666.1%
Total 2717100.0%

Hour1Total% of Total
12:00 AM 652.4%
1:00 AM 682.5%
2:00 AM 622.3%
3:00 AM 742.7%
4:00 AM 572.1%
5:00 AM 1033.8%
6:00 AM 1084.0%
7:00 AM 1585.8%
8:00 AM 1716.3%
9:00 AM 1475.4%
10:00 AM 1716.3%
11:00 AM 1816.7%
12:00 PM 1886.9%
1:00 PM 1696.2%
2:00 PM 1605.9%
3:00 PM 1324.9%
4:00 PM 1073.9%
5:00 PM 923.4%
6:00 PM 913.3%
7:00 PM 963.5%
8:00 PM 833.1%
9:00 PM 782.9%
10:00 PM 792.9%
11:00 PM 772.8%
Total 2717100.0%

Comments by Blog Entry Date/Time

Day Entry MadeAvg.Total
Sunday 5.54144
Monday 5.22339
Tuesday 4.28419
Wednesday 7.67637
Thursday 6.90607
Friday 5.48411
Saturday 5.33160
Total 5.842717

Hour1 Entry MadeAvg.Total
12:00 AM 5.0035
1:00 AM 1.002
5:00 AM 0.000
7:00 AM 7.0035
8:00 AM 5.35107
9:00 AM 6.32278
10:00 AM 6.47246
11:00 AM 4.41181
12:00 PM 6.88330
1:00 PM 3.00111
2:00 PM 5.41222
3:00 PM 8.64285
4:00 PM 4.0589
5:00 PM 5.92154
6:00 PM 4.52113
7:00 PM 9.67174
8:00 PM 9.80147
9:00 PM 5.05111
10:00 PM 5.4265
11:00 PM 4.5732
Total 5.842717

Learn More About Comment Stats
1 - All times GMT -8...


Blog Stats

Favorite Web Sites

My Books

My MSDN Articles