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.
<February 2010>
SMTWTFS
31123456
78910111213
14151617181920
21222324252627
28123456
78910111213

Comment Stats

DayTotal% of Total
Sunday 2046.8%
Monday 42514.1%
Tuesday 51617.1%
Wednesday 55318.4%
Thursday 58019.2%
Friday 54718.2%
Saturday 1886.2%
Total 3013100.0%

Hour1Total% of Total
12:00 AM 772.6%
1:00 AM 812.7%
2:00 AM 682.3%
3:00 AM 822.7%
4:00 AM 692.3%
5:00 AM 1264.2%
6:00 AM 1183.9%
7:00 AM 1806.0%
8:00 AM 1926.4%
9:00 AM 1585.2%
10:00 AM 1876.2%
11:00 AM 1936.4%
12:00 PM 2016.7%
1:00 PM 1846.1%
2:00 PM 1695.6%
3:00 PM 1354.5%
4:00 PM 1153.8%
5:00 PM 1063.5%
6:00 PM 1013.4%
7:00 PM 1073.6%
8:00 PM 923.1%
9:00 PM 882.9%
10:00 PM 893.0%
11:00 PM 953.2%
Total 3013100.0%

Comments by Blog Entry Date/Time

Day Entry MadeAvg.Total
Sunday 4.94158
Monday 4.80384
Tuesday 4.08477
Wednesday 7.47680
Thursday 6.25675
Friday 5.02462
Saturday 4.78177
Total 5.413013

Hour1 Entry MadeAvg.Total
12:00 AM 5.2937
1:00 AM 1.002
5:00 AM 0.000
7:00 AM 3.8550
8:00 AM 3.72134
9:00 AM 6.02295
10:00 AM 5.63276
11:00 AM 4.20193
12:00 PM 6.14350
1:00 PM 3.17133
2:00 PM 5.00230
3:00 PM 7.62320
4:00 PM 4.00108
5:00 PM 6.04169
6:00 PM 4.64116
7:00 PM 8.95188
8:00 PM 8.63164
9:00 PM 5.00115
10:00 PM 6.31101
11:00 PM 4.5732
Total 5.413013

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


Blog Stats

Favorite Web Sites

My Books

My MSDN Articles