Wikibooks

JavaScript/JavaScript within HTML: Difference between revisions

Browse history interactively
[checked revision][checked revision]
← Older editNewer edit →
Content deleted Content added
VisualWikitext
m Sae1962 moved page JavaScript/Placing the Code to JavaScript/Placing the code: Moved to new name
m Minor edits
Line 1:
<noinclude>{{Prognav|JavaScript|First Programprogram|Lexical Structurestructure|prog=0}}</noinclude>
 
== The {{HTML:element|script}} element ==
Line 29:
</source>
 
While the <codett>text/javascript</codett> was formally obsoleted in April 2006 by [http://www.ietf.org/rfc/rfc4329.txt RFC 4329] <ref>[http://www.ietf.org/rfc/rfc4329.txt RFC 4329]: Scripting Media Types</ref> in favour of <codett>application/javascript</codett>, it is still preferable to continue using <codett>text/javascript</codett> due to old HTML validators and old Web browsers such as Internet Explorer 5 that are unable to understand <codett>application/javascript</codett>. <ref>[https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=338278 "application/javascript" and "application/ecmasscript" media types not recognized.]</ref>
 
== Inline JavaScript ==
Line 51:
</source>
 
Older browsers that do not understand the {{HTML:element|script}} element will interpret the entire content of the {{HTML:element|script}} element above as one single HTML comment, beginning with "<codett>&lt;!--</codett>" and ending with "<codett>--&gt;</codett>", effectively ignoring the script completely. If the HTML comment was not there, the entire script would be displayed in plain text to the user by these browsers.
 
Current browsers that know about the {{HTML:element|script}} element will ignore the ''first'' line of a {{HTML:element|script}} element, if it starts with "<codett>&lt;!--</codett>". In the above case, the first line of the actual JavaScript code is therefore the line "<codett>// JavaScript code here</codett>".
 
The last line of the script, "<codett>// --&gt;</codett>", is a one line JavaScript comment that prevents the HTML end comment tag "<codett>--&gt;</codett>" from being interpreted as JavaScript.
 
The use of comment markers is rarely required nowadays, as the browsers that do not recognise the {{HTML:element|script}} element are virtually non-existent. These early browsers were Mosaic, Netscape 1, and Internet Explorer 2. From Netscape 2.0 in December 1995 and Internet Explorer 3.0 in August 1996 onward, those browsers were able to interpret JavaScript.<ref>[[w:JavaScript#History and naming]]</ref> Any modern browser that doesn't support JavaScript will still recognize the &lt;script&gt; tag and not display it to the user.
Line 70:
</source>
 
Note that the <codett>&lt;![CDATA[</codett> tag is commented out. The <codett>//</codett> prevents the browser from mistakenly interpreting the <codett>&lt;![CDATA[</codett> as a JavaScript statement (that would be a syntax error).
 
== Linking to external scripts ==
JavaScript is commonly stored in a file so that it may be used by many web pages on your site. This makes it much easier for updates to occur and saves space on your server. This method is recommended for [http://alistapart.com/articles/behavioralseparation separating behavior] (JavaScript) from content ((X)HTML) and it prevents the issue of incompatibility with inline comments in XHTML and HTML.
 
Add <codett>src="<var>script.js</var>"</codett> to the opening <codett>script</codett> tag. Replace <var>script.js</var> with the path to the .js file containing the JavaScript.
 
Because the server provides the content type when the file is requested, specifying the type is optional when linking to external scripts. It's still advised to specify the type as <codett>text/javascript</codett>, in case the server isn't set up correctly, and to prevent HTML validation complaints.
 
<source lang=HTML4strict>
Line 84:
 
== Location of script elements ==
The <codett>script</codett> element may appear almost anywhere within the HTML file.
 
A standard location is within the {{HTML:element|head}} element. Placement within the {{HTML:element|body}} however is allowed.
Line 101:
</source>
 
There are however some best practices for speeding up your web site <ref>Yahoo: [http://developer.yahoo.com/performance/rules.html best practices for speeding up your web site]</ref> from the Yahoo! Developer Network that specify a different placement for scripts, to [http://developer.yahoo.com/performance/rules.html#js_bottom put scripts at the bottom], just before the <codett></body></codett> tag. This speeds up downloading, and also allows for direct manipulation of the DOM while the page is loading.
 
<source lang=HTML5>
Line 120:
== Reference ==
<references/>
<noinclude>{{Prognav|JavaScript|First Programprogram|Lexical Structurestructure|prog=0}}</noinclude>
{{BookCat}}
 
Retrieved from "https://en.wikibooks.org/wiki/JavaScript/JavaScript_within_HTML"