使用<script>元素的方式有2种
1、直接在页面嵌入JavaScript代码 <script type="text/javascript"> function sayHi() { alert("Hello!"); } </script> 包含在<script>元素内部的JavaScript代码将被从上至下依次解释，在解释器<script>元素内部所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示 在使用<script>嵌入JavaScript代码时，记住不在要代码中任何地方出现”</script>”字符串，例如，浏览器在加载下面所示代码时就会产生一个错误 <script type="text/javascript"> function sayScript() { alert("</script>"); } </script> 因为浏览器遇到字符串"</script>"时，会认为那是结束的</script>标签，而通过把字符串分割为2部分可以解决这个问题，如： <script type="text/javascript"> function sayScript() { alert("</scr"+"ipt>"); } </script> 2、通过<script>元素包含外部的JavaScript文件 <script type="text/javascript" src="js/login.js"></script> 注：带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码 另外，通过<script>元素的src属性还可以包含来自外部域的JavaScript文件，这一点既使<script>元素倍显强大，又让它备受争议。<script>与<img>元素非常相似，即它的src属性可以指入当前HTML页面所在的域之外的某个域中的URL，例如 <script type="text/javascript" src="http://www.somewhere.com/afile.js"></script> 这样，位于外部域中的代码也会被加载和解析，就像这些代码位于加载它们的页面中一样。利用这一点可以在必要时通过不同的域来提供JavaScript文件，不过，在访问自己不能控制的服务器上的JavaScript文件则要多加小心，否则文件中的代码随时有可能被替换 无论如何包含代码，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析…… 标签的位置 习惯放于HTML页面的<head>标签中 但这样做有时会引起如<head></head>中的外部JS文件没解析完，延迟期间浏览器窗口空白，或者是JS在执行中，出现空对象异常（原因是HTML元素未加载到页面中），因此现在的WEB应用程序一般都把全部的JS引用放在<body>元素中，放在页面内容的后面。 延迟脚本 <script type="text/javascript" src="js/login.js" defer=”defer”></script> Defer这个属性表示脚本会被延迟到整个页面都解析完毕再运行。实际上与上面介绍的把JS放在页面最底部的效果是一样的。 但不是所有浏览器都支持defer属性，因此建议使用“把JS引用放在<body>元素中，放在页面内容的后面”这个方法 在XHTML中的用法 可扩展超文本标记语言，即XHTML（Extensible HyperText Markup Language），是将HTML作为XML的应用而重新定义的一个标准，编写XHTML代码的规则要比编写HTML严格得多，而且直接影响能否在嵌入JavaScript代码时使用<script />标签。以下面的代码块为例，虽然它们在HTML中是有效的，但在XHTML中则是无效的 <script type="text/javascript"> function compare(a,b) { if(a<b){ alert("a is less than b"); }else if(a>b){ alert("a is greater than b"); }else{ alert("a is equal to b"); } } </script> 这是由于a<b中的小于号在XHTML中被当作一个标签的开始，作为标签来讲，小于号后面不能跟空格，因此导致语法错误 解决方法： 1、 用相应的HTML实体(<)替换代码中所有的小于号（<），替换后代码如下 <script type="text/javascript"> function compare(a,b) { if(a < b){ alert("a is less than b"); }else if(a>b){ alert("a is greater than b"); }else{ alert("a is equal to b"); } } </script> 2、 用一个CData片段来包含JavaScript代码，在XHTML(XML)中，CData片段是文档中一个特殊区域，这个区域中可以包含不需要解析的任意格式的文本内容， <script type="text/javascript"> function compare(a,b)<![CDATA[ { if(a<b){ alert("a is less than b"); }else if(a>b){ alert("a is greater than b"); }else{ alert("a is equal to b"); } } ]]> </script> 在兼容XHTML的浏览器中，这个方法可以解决问题，实际上不少浏览器不兼容XHTML，因而不支持CData片段，怎么办呢？再使用JavaScript注释将CData标记注释掉就可以了： <script type="text/javascript"> function compare(a,b) //<![CDATA[ { if(a<b){ alert("a is less than b"); }else if(a>b){ alert("a is greater than b"); }else{ alert("a is equal to b"); } } //]]> </script> 这种格式在所有现代浏览器都可以正常使用，它能通过XHTML验证，而且对XHTML之前的浏览器也会平稳退化 不推荐使用的语法 <script><!-- function sayHi(){ alert("Hello!"); } //--></script> 让不支持<script>元素的浏览器能够隐藏嵌入javascript代码。 由于现在所有浏览器都支持javascript，因此没必要再用这种格式了 嵌入代码与外部文件 在HTML嵌入javascript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外中文件，优点如下 可维护性－遍及不同HTML页面的javascript代码会造成维护问题，但把所有javascript文件都放在一个文件夹中，维护起来就轻松多了，开发人员因此也能够在不触及HTML标记的情况下，集中精力编辑javascript代码 可缓存－浏览器能够根据具体的设置缓存链接的所有外部JS文件，也就是说，如果有2个页面都使用同一JS文件，这个文件只须下载一次，最终结果就是能够加快页面加载的速度 可适应未来－通过外部文件来包含javascript无须使用前面提到的XHTML或注释hack，HTML和XHTML包含外部文件的语法是相同的 二、文档模式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 最初的2种文档模式是：混杂模式（quirks mode）和标准模式（standards mode），这2种模式主要影响CSS内容的呈现，但在某些情况也会影响JavaScript的解释执行。 如果在HTML文档开始处没有文档类型声明，浏览器会默认开启混杂模式，但采用混杂模式不是值得推荐的做法，因为不同浏览器的混杂模式行为差异非常大，如果不使用某些hack技术，跨浏览器的一致性就无法实现 三、<noscript>元素 当浏览器不支持JS时，使用<noscript>元素显示替代的内容 <noscript>元素可以包含能够出现在<body>中的任何HTML元素－<script>元素除外 包含在<noscript>元素中的内容只有在浏览器不支持脚本或浏览器支持脚本，但脚本被禁用这2种情况下才会显示出来，除此外的其他情况下，浏览器都不会呈现<noscript>中的内容 四、小结 把JavaScript插入到HTML页面中要使用<script>元素，使用这个元素可以把JavaScript嵌入到HTML页面中，让脚本与标记混合在一起；也可以包含外部的JavaScript文件，而我们需要注意的地方有： 1、这2种方式都需要把type属性设置为 text/javascript，以表明使用的脚本语言是JavaScript 2、在包含外部JavaScript文件时，必须将src属性设置为指定相应文件的URL，而这个文件即可以是同一服务器上的文件，也可以是其他任何域中的文件 3、所有<script>元素会按照它们在页面中出现的先后顺序依次被解析，只有在解析完前面<script>元素的代码之后，才会开始解析<script>元素中的代码 4、浏览器在呈现后面的页面内容之前，必须先解析前面的<script>元素中的代码，为此，一般将<script>元素放在页面内容之后和</body>标签之前 5、在IE中，通过defer属性可以让浏览器呈现完文档之后再执行脚本，虽然defer属性是HTML4.01规定的，但只有IE支持该属性 6、<noscript>元素可以指定在不支持脚本或禁用脚本的浏览器中显示的替代内容，但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的任何内容