本章内容
- 使用<script>元素
- 嵌入脚本与外部脚本
- 文档模式对JS的影响
- 考虑禁用JS的场景
（1）script元素
向HTML页面中插入JS的主要方法就是使用script元素。
在script元素里面有6个属性有的基本上已经废弃
- async (可选)表示应该立即下载脚本，但是不妨碍页面上的其他操作。比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效.
- charset (可选)表示通过SRC属性指定代码的字符集。由于大多数浏览器会忽略他的值。因此很少有人用.
- defer (可选)表示脚本可以延迟到文档完全被解析和显示之后在执行。只对外部脚本文件有效
- language 废弃
- src (可选)表示包含要执行代码的外部文件.
- type (可选)表示编写代码使用的脚本语言的内容类型(text/javascript)不过这个属性不是必须，没有指定的话，默认就是(text/javascript)
包含在script元素内部的JS代码将从上至下依次解释。就拿下面的例子来说:解释器会解释到一个函数的定义，然后将该定义保存在自己的环境中，在解释器对script元素内部的所有代码求助完毕以前，页面中的其余内容都不会被浏览器加载或者显示.
<script>
function Hello(){
window.alert("<\/script>")
}
</script>
备注
- 在使用script内联到HTML里面的时候，请不要在代码中的任何地方出现"</script>"等字符串，因为这样浏览器会报出一个错误。
- 如果非要使用请在前面加上转移符号\这样就变成了/script这样就不会报出错误
- 在HTML中使用script请一定要前后都要有闭口。不能前面有script,而后面没有script这样做他不会运行的
（i）标签的位置
按照惯例标签的位置都应该放在页面的<head>元素中，比如
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<title>PC与移动端切换</title>
<meta name="keywords" content=" ">
<meta name="description" content=" ">
<script type="text/javascript" src="js/respond.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="js/judgeindex.js"></script>
</head>
<body>
[里面写内容]()
</body>
- 这种做法的目的就是把所有的外部文件(包括CSS文件和JS文件)的引用都放在相同的地方.
- 可是在文档的<head>元素中包含所有的JS文件，一位置必须要等到全部的JS代码都被下载,解析和执行完成后,才开始呈现.
- 对于需要很多JS代码的页面来说。无疑会导致浏览器在呈现页面的延迟，而延迟期间的浏览器窗口将会一片空白.为了避免这样的情况，一般吧JS引用放在<body>元素页面内容的后面.
(ii)延迟脚本
- HTML标签中定义了defer属性,这个属性的用途是表明脚本在执行的时候不会影响页面的构造.
- 也就是说脚本会被延迟到整个页面都解析完毕后在运行。因此在<script>元素中设置defer属性。相当于告诉浏览器在body结束后执行
- <script type="text/javascript" defer="defer" src="js/jquery.min.js"></script>
(iii)异步脚本
- HTML5为<script>元素定义了async属性。它只适用于外部脚本文件。他与defer类似。但是区别在于async的脚本并不能表征按照写好的先后顺序执行。
- <script type="text/javascript" async=“async” src="js/respond.js"></script>
- <script type="text/javascript" async="async" src="js/jquery.min.js"></script>
- 在上面的代码中第二个脚本可能会在第一个脚本文件之前执行的，所以确保2个互不依赖十分重要，比如jquery类库,async属性的目的是不让页面等待两个脚本的下载和执行。从而异步加载页面其他内容.为此，建议异步脚本不要再加载期间修改DOM
- 异步脚本一定会在load事件前执行。
(iv)在XHTML中的用法
<script type="text/javascript">
function comnpare(a,b)
{
if (a < b)
{
window.alert("a<b");
}else if( a > b)
{
window.alert("a>b");
}else if(a = b)
{
window.alert("a = b");
}
}
</script>
- 在HTML中有特殊的规则可以确定<scirpt>元素中哪些内容可以被解析,但是这些特殊的规则在XHTML中不适用.
- 在这里比如a < b中的小于号(<)在XHTML中会被当做开始一个新的标签来解析，小于号后面不能跟空格，因此会导致语法错误.
- 避免XHTML中出现语法的错误有2个，第一个用相应的HTML实体(<)来替代<号,这样是不会报错但是难以理解
- 第二个方法是保证让相同的代码在HTML中正常运行的第二个方法.就是用一个CData片段来包含JS代码.
- 譬如<script type="text/javascript">
<![CDATA[
function comnpare(a,b)
{
if (a < b)
{
window.alert("a<b");
}else if( a > b)
{
window.alert("a>b");
}else if(a = b)
{
window.alert("a = b");
}
}
]]>
</script>
(2)嵌入代码与外部文件
在HTML代码中嵌入JS代码虽然没有问题，但是最好使用外语引入。
- 可维护性:遍及不同HTML页面的JS会造成维护问题，但是吧所有的JS文件都放到一个文件里面，维护起来就会宽松多了。这样便于集中管理
- 可缓存:浏览器能够依据具体的设置缓存链接所有的外部JS文件。也就是说如果有2个页面都使用同一个文件。那么这个文件只需下载一次。因此最终效果就是加快页面加载的速度
- 适应未来:通过外部文件来包含JS无需使用前面提到的XHTML,HTML和XHTML包含的外部文件的语法是相同的。
(3)文档模式
-
混杂模式
要是不区分的话。混杂模式会让IE的行为与IE5相同所以个人不建议使用 -
标准模式
标准模式让IE的行为更接近标准行为。
- 过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
- 严格型
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- HTML5
<!DOCTYPE html>
(4)<noscript>禁止JS
包含在<noscript>里面的元素只有在下面2种情况下显示出来.
- 浏览器不支持脚本
- 浏览器支持脚本但是脚本被禁用
符合上面任何一个条件，浏览器都睡显示<noscript>内容,除此之外在其他的情况下,浏览器不会呈现<noscript>内容
<noscript>
本页面需要浏览器支持JS
</noscirpt>
当用户要是启用了JS，用户永远也看不到他，尽管他是页面的一部分.
第二章小结
- 在包含外部JS文件时，必须将SRC属性设置为指向相应文件的URL，而这个文件既可以是同域文件，也可以是跨域文件.
- 所有<script>都会按照他们在页面中出现的先后顺序依次被解析。在不使用defer和async情况下。只有解析玩<script>的代码之后，才会解析后面的代码
- 所有浏览器会优先解析玩不使用defer的<script>代码，,然后在解析后面的内容,所以一般把<script>元素放在后面即</body>前面
- 使用defer属性可以让脚本在文档完全呈现后在执行，延迟脚本按照他们的顺序执行
- 使用async则不必等待，也不必阻塞文档呈现。不能保证加载顺序
- 使用<noscript>则可以在浏览器禁止JS的时候呈现出来
