Basic JavaScript skills
Now that you know how to edit and test an application, you're ready to learn how to write the JavaScript code. You'll start with the basics.
How to include JavaScript with the script tag
In the last chapter, you saw JavaScript that was embedded in an XHTML file. You also saw an application that used one file for the XHTML, one for the CSS, and one for the JavaScript code. Now, figure 2-4 shows you how to use the XHTML <script> tag to include JavaScript code that's in an external file or embedded in the XHTML.
To start, this figure describes the attributes that can be used with the script tag. Since it is possible to use other scripting languages with this tag, the type attribute is required so the web browser knows which language the script is written in. In contrast, the charset and defer attributes are rarely used.
In the code for older web pages, the language attribute was often used to identify the scripting language. Today, however, the language attribute is obsolete so you should always use the type attribute instead.
In the examples in this figure, you can see how the script tag is used for external files and embedded scripts. In the first example, the src attribute is used to specify an external file named sales_tax.js. This assumes that the external file is in the same folder as the XHTML page. If it isn't, you can code the path to the file along with the file name.
In the second example, a script tag with JavaScript code is embedded in the head of an XHTML document. JavaScript code here is typically used to define functions and event handlers and to initialize any global variables.
In the third example, a script is embedded in the body of an HTML document. When the script is in the body, the script tag is replaced by the output of the JavaScript code when the application is loaded.
You can also load an external JavaScript file from a web server other than yours. This is illustrated by the fourth example. In this case, you provide the name of the web server including the http:// prefix. If you omit the http:// prefix, the browser will treat the server name as a folder name on your server.
In the last example, you can see how the <noscript> tag is used. It can be coded anywhere, but it is usually used after a script tag in the body of a document. Then, if JavaScript is disabled, the content of the noscript tag will be shown. But if JavaScript is enabled for the browser, the script tag is replaced by the output of the JavaScript code and the noscript tag is ignored. This way some output will be displayed whether JavaScript is enabled or not.
Attributes of the script tag
<script type="text/javascript" src="sales_tax.js"></script>
How to embed JavaScript in the head of an HTML document
<head>...<script type="text/javascript">var $ = function (id) { return document.getElementById(id); }</script>...</head>
How to embed JavaScript in the body of an HTML document
<p>©<script type="text/javascript">var today = new Date();document.writeln( today.getFullYear() ); </script>Mike's Bait and Tackle Shop</p>
How to load a script from a different web server
<script type="text/javascript"src="http://www.google-analytics.com/urchin.js"></script>
How to use the noscript tag in the body of an HTML document
<script type="text/javascript">var today = new Date();document.writeln( today.getFullYear() );</script><noscript>2009</noscript>
Description
Figure 2-4 How to include JavaScript with the script tag