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   

My Links

Ads Via DevMavens

Archives

Post Categories

 

I am a Microsoft MVP for ASP.NET.
I am an ASPInsider.
<July 2009>
SMTWTFS
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

Comment Stats

DayTotal% of Total
Sunday 2046.9%
Monday 42314.3%
Tuesday 50116.9%
Wednesday 54518.4%
Thursday 57219.3%
Friday 53618.1%
Saturday 1856.2%
Total 2966100.0%

Hour1Total% of Total
12:00 AM 752.5%
1:00 AM 802.7%
2:00 AM 672.3%
3:00 AM 812.7%
4:00 AM 642.2%
5:00 AM 1234.1%
6:00 AM 1153.9%
7:00 AM 1755.9%
8:00 AM 1876.3%
9:00 AM 1565.3%
10:00 AM 1866.3%
11:00 AM 1926.5%
12:00 PM 1996.7%
1:00 PM 1846.2%
2:00 PM 1675.6%
3:00 PM 1344.5%
4:00 PM 1153.9%
5:00 PM 1063.6%
6:00 PM 993.3%
7:00 PM 1063.6%
8:00 PM 903.0%
9:00 PM 842.8%
10:00 PM 893.0%
11:00 PM 923.1%
Total 2966100.0%

Comments by Blog Entry Date/Time

Day Entry MadeAvg.Total
Sunday 4.91157
Monday 4.92379
Tuesday 4.21471
Wednesday 7.42668
Thursday 6.53666
Friday 5.17450
Saturday 4.73175
Total 5.522966

Hour1 Entry MadeAvg.Total
12:00 AM 5.2937
1:00 AM 1.002
5:00 AM 0.000
7:00 AM 4.0048
8:00 AM 4.29133
9:00 AM 6.04290
10:00 AM 5.83274
11:00 AM 4.36192
12:00 PM 6.44348
1:00 PM 3.14132
2:00 PM 5.04227
3:00 PM 7.97303
4:00 PM 3.8199
5:00 PM 6.00168
6:00 PM 4.56114
7:00 PM 8.95188
8:00 PM 8.58163
9:00 PM 5.00115
10:00 PM 6.31101
11:00 PM 4.5732
Total 5.522966

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


Blog Stats

Favorite Web Sites

My Books

My MSDN Articles