javascript高级编程3第二章：在html中使用javascript
2.1 <script>元素
向html页面中插入javascript的主要方法，就是使用<script>元素。这个元素被加入到正式的html规范中。html4.01为<script>定义了下列6个属性：
1：async:可选。表示应该立即下载脚本，但不妨碍页面中的其它操作，比如下载其他资源或等待加载其它脚本。只对外部脚本文件有效。
2：charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会会忽略它的值，因此这个属性很少有人用。
3：defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚步文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
4：language:已废弃。原来用于表示编写代码使用的脚本语言。大多数浏览器会忽略这个属性，因此也没有必要再用了。
5：src:可选。表示包含要执行代码的外部文件。
6：type：可选。可以看成language的替代属性；表示编写代码使用的脚本语言的内容类型（也成为MIME类型）。虽然text/javascript和text/ecmascript多已经不被推荐使用，但人们一直以来使用的多还是text/javascript。实际上，服务器在传送javascript文件时使用的MIME类型通常是application/x-javascript,但在type中设置这个值却可能导致脚本被忽略。另外，在非IE浏览器中还可以使用一下值：application/javascript和application/ecmascript。考虑到约定俗成和最大限度的浏览器兼容性，目前type属性的值还是text/javascript。不过，这个属性并不是必需的，，如果没有指定这个属性，则其默认值仍为text/javascript。
PS：（1）包含在<script>元素内部的javascript代码将被从上至下依次解释。
（2）在使用<script>嵌入javascript代码时，记住不要在代码中的任何地方出现"</script>"字符串。e.g,浏览器在加载下面所示的代码时就会产生一个错误：
<script>
function sayScript(){
alert("</script>");
}
</script>
因为按照解析嵌入式代码的规则，当遇到浏览器遇到字符串"</script>"时，就会认为那是结束的</script>标签。而通过转义字符"\"解决这个问题，e.g:
<script>
function sayScript(){
alert("<\/script>");
}
</script>
(3)外部文件与解析嵌入式javascript代码一样，在解析外部javascript文件（包括下载该文件）时，页面的处理也会暂时停止。如果是在XHTML文档中，也可以省略结束标签</script>,但是不能在HTML文档使用这种语法。原因是这种语法不符合HTML规范，而且也得不到一些浏览器(尤其是IE)的正确解析。(不要在带有src属性的"<script>"标签里写javascript代码，会被忽略)
（4）按照惯例，外部javascript文件带有.js扩展名。但是这个扩展名不是必须的，因为浏览器不会检查包含javascript的文件的扩展名。这样一来，使用JSP、PHP或其他服务端语言动态生成javascript代码也就成为了可能。但是服务器通常还是需要看扩展名决定为响应应用哪种MIME类型。如果不使用js扩展名，请确保服务器能返回正确的MIME类型
（5）什么是MIME类型-在把输出结果传送到浏览器上的时候，浏览器必须启动是党的应用程序来处理这个输出文档。这可以通过多种类型MIME（多功能网际邮件扩充协议）来完成。在HTTP中，MIME类型被定义在Content-Type header中。
2.1.1 标签的位置
按照传统的做法，所有<script>元素多应该放在页面的<head>元素中，这种做法的目的就是把所有外部文件（包括CSS文件和javascript文件）的引用多放在相同的地方。可是，在文档的<head>元素中包含所有javascript文件，意味着必须等到全部javascript代码多被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多javascript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代web应用程序一般多把全部javascript引用放在<body>元素中页面内容的后面。这样，在解析包含的javascriptjavascript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感觉到打开页面的速度加快了。
2.1.2 延迟脚本
defer属性用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
2.1.3 异步脚本
async属性：类似于defer,只适用于外部脚本文件，并告诉浏览器立即下载文件，但与defer不同的是，标记为async的脚本并不保证按照指定他们的先后顺序执行。异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。（过去,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发.
domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;
document.addeventListener('DOMContentLoaded',function(){...},false);
值得注意的是,这个网站的行为层可以被更快速地启动,这意味着用户可以更快开始浏览网站,这对于连接速度慢的网络或者包含大量图片并需要一些时间加载图片的网页来说特别重要,如果只想在所有资源都完成加载之后运行脚本, 那么仍然可以使用load.）
2.1.4 在XHTML中的用法
可扩展超文本标记语言，即XHTML；
2.2 外部文件的好处
（1）、可维护性；
（2）、可缓存；（2个页面使用同一个文件，那摩这个文件只需下载一次）
（3）、适应未来
javascript高级编程3第二章：在html中使用javascript的更多相关文章
- 《JavaScript高级程序设计》——第二章在HTML使用JavaScript
这章讲的是JavaScript在HTML中的使用,也就是<script>元素的属性.书中详细讲了async.defer.src和type四个<script>的属性. 下面是对第 ...
- [书籍翻译] 《JavaScript并发编程》 第二章 JavaScript运行模型
本文是我翻译<JavaScript Concurrency>书籍的第二章 JavaScript运行模型,该书主要以Promises.Generator.Web workers等技术来讲解J ...
- JavaScript高级程序设计：第二章
在HTML中使用JavaScript 1.<script>元素:向HTML页面中插入JavaScript的主要方法就是使用<scritp>元素.HTML4.01为<scr ...
- 《JAVASCRIPT高级程序设计》第二章
把javascript应用在网页中,需要涉及web的核心语言-html:如何让javascript既能与html共存,又不影响页面的显示效果,经过长时间的讨论.试错,最终的决定是为web增加统一的脚本 ...
- 《JavaScript 高级程序设计》第二章：在HTML中使用JavaScript
script 标记是 netspace 公司最早为在 html中引入 javascript代码而创造的HTML元素,并最终被 HTML规范采纳. script 标记有四个比较重要的属性: src ty ...
- 第二章 在Html中使用JavaScript
https://www.jianshu.com/p/8247a9401725 2.1 Script元素 https://developer.mozilla.org/en-US/docs/Web/HTM ...
- 《asp.net mvc3 高级编程》第二章 控制器
一.控制器的角色 MVC模式中的控制器(Controller)主要负责响应用户的输入,并且在响应时通常会修改模型(Model).通过这种方式,MVC模式中的控制器主要关注的是应用程序流,输入数据的处理 ...
- 《avascript 高级程序设计（第三版）》 ---第二章 在HTML中使用Javascript
本章主要讲解了,怎么在HTML中使用: 1.<script src=""></script> 属性:defer="defer" 表示脚本 ...
- JavaScript高级程序设计（第三版）第二章 在HTML中使用JavaScript
2.1 <script>元素 <script>定义了下列6个属性: async:可选.表示应该立即下载脚本,但不应妨碍页面的其他操作,比如下载其他资源或等待加载其他脚本.只对外 ...
随机推荐
- 手贱的回忆录 --- L版openrc密码修改（OS_PASSWORD）
---恢复内容开始--- 刚刚部署完L版,发现默认登录的管理员账号在41.42.43的openrc文件中,登录名是admin,登录密码却是一串随机码,于是想修改一个简单易记的密码,手贱的把OS_PAS ...
- rdesktop的使用方法
工作时一般是开两台电脑 ,一台linux,一台windows,以前也用过虚拟机什么的,但是 有时候 跑起来拖泥带水的十分不爽,所以慢慢的就习惯了两台电脑的工作方式,一般我大部时间都在linux下面.用 ...
- Android系统调用
android 中intent是经常要用到的.不管是页面牵转,还是传递数据,或是调用外部程序,系统功能都要用到intent. 在做了一些intent的例子之后,整理了一下intent,希望对大家有用. ...
- Python快速建站系列-Part.Five.3-个人主页及资料页面
|版权声明:本文为博主原创文章,未经博主允许不得转载. 第五部分最后一节,完成个人主页里资料页面的个人资料的展示和修改功能,不过毕竟功能比较少,个人资料其实只有昵称一项,手动滑稽. 一如既往先写出来u ...
- Yii2中多表关联查询（join、joinwith)
我们用实例来说明这一部分 表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer (id customer_name) 订单表Order (id order_name ...
- SSAS中事实表中的数据如果因为一对多或多对多关系复制了多份，在维度上聚合的时候还是只算一份
SSAS事实表中的数据,有时候会因为一对多或多对多关系发生复制变成多份,如下图所示: 图1 我们可以从上面图片中看到,在这个例子中,有三个事实表Fact_People_Money(此表用字段Money ...
- babel 解构赋值无法问题
这个东西需要第二级, babel-preset-stage-2,然后再presets里引入stage-2的设置,再plugins离引入对应的插件 { "presets": [&qu ...
- 使用JDOM操作XML
JDOM介绍 JDOM是使用Java语言编写的,用于读写及操作XML的一套组件,Jdom同时具有DOM修改文件的优点和SAX读取快速的优点. JDOM的使用 首先下载JDOM的JAR包,本文使用的是j ...
- Oracle RAC安装部署文档
1. 部署环境步骤 1.1 软件环境 操作系统:CentOS release 6.5(推荐使用5.*的系统)192.168.1.151 racnode1 192.168.1.152 ...
- 【转】Android选项卡置底的方法
转载地址:http://www.oschina.net/code/snippet_163910_6092 发现很多Android应用的选项卡 都是显示在页面底部的,网上有资料:通过反射获取TabWid ...