JavaScript高级程序设计：第二章
在HTML中使用JavaScript
1.<script>元素：向HTML页面中插入JavaScript的主要方法就是使用<scritp>元素。HTML4.01为<script>定义了下列6个属性。
（1）async：可选。表示立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
（2）charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
（3）defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
（4）language：已废弃。原来用于表示编写代码使用的脚本语言，大多数浏览器会忽略这个属性。
（5）src：可选。表示包含要执行代码的外部文件。
（6）type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型。目前type的值大多数仍旧使用text / javascript属性。这个属性并不是必须的，如果没有指定这个属性，则其默认值为text / javascript。
2.使用<script>元素的方式有两种：
（1）直接在页面中嵌入JavaScript代码：
在使用<script>元素嵌入JavaScript代码时，只需为<script>指定type属性值。然后，像下面这样把JavaScript代码直接放在元素内部即可：
<script type=” text / javascript”>
function sayHi ( ) {
alert ( “Hi! “ ) ;
}
</script>
包含在<script>元素内部的代码将被从上至下一次解析。注意，不要在代码中任何地方出现“</script>”字符串，否则会产生错误。因为浏览器遇到</script>时会认为这是结束标签。可以通过吧这个字符串分隔为两个部分可以解决这个问题，例如：
<script type=”text / javascript ”>
function sayScript（）{
alert（“<\ /script>”）;
}
这样就不会早晨浏览器的误解。
（2）包含外部JavaScript文件：如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必须的。这是属性的值是一个指向外部JavaScript文件的链接。例如：
<script type=”text / javascript” src=”example.js”> </script>
外部文件只需包含通常要放在开始的<script>和结束的</script>之间的那些JavaScript代码即可。可以在XHTML文档中省略</script>标签，例如：
<script type=” text / javascript ” src=”example.js” />
但是不能再HTML文档使用这种语法，原因是这种语法不符合HTML规范。而且也得不到某些浏览器的正确解析。
需要注意的是：带有src属性的<script>元素不应该只在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。
3.标签的位置：
所有<script>元素都应该放在界面的<head>元素中。例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page </title>
<script type=”text / javascript” src=”example.js”></script>
<script type=”text / javascript” src=”example2.js”></script>
</head>
<body>
<!—这里放内容-->
</body>
</html>
这种做法就是要把所有外部文件的引用都放在相同的地方。这意味着必须等到所有JavaScript代码都被下载、解析和执行完成以后才能开始呈现页面的内容。对于需要很多JS代码的页面来说无疑会导致延迟。
为了避免这个问题，现代Web应用程序一般都把全部JavaScript引用放在<body>元素中页面的内容后面。如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page </title>
</head>
<body>
<!—这里放内容 -->
<script type=”text / javascript” src=”example.js” ></script>
<script type=”text / javascript” src=”example.js ” ></script>
</body>
</html>
这样，在解析包含JavaScript代码之前，页面的内容将完全呈现在浏览器中，而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
4.脚本：
（1）延迟脚本：
HTML4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延期执行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page </title>
<script type=”text / javascript” defer=”defer” src=”example1.js”></script>
<script type=”text / javascript” defer=”defer” src=”example2.js”></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
html5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，在现实当中，延迟脚本不一定按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。
（2）异步脚本：
HTML5为<script>元素定义了async属性。这个属性与defer属性类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page </title>
<script type=”text / javascript” async src=”example1.js” ></script>
<script type=”text / javascript” async src=”example2.js” ></script>
</head>
<body>
<- - 这里放内容 - ->
</body>
</html>
在以上代码中，第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在页面的load事件之前执行。但可能会在DOMContentLoaded事件触发之前或之后执行。
5.嵌入代码与外部文件：
尽可能使用外部文件来包含JavaScript代码，有以下优点：可维护性、可缓存、适应未来。
6.文档模式：最初的两种文档模式是：混杂模式和标准模式。这两种模式主要影响CSS内容的呈现，某些情况下也会影响JavaScript的解释执行。
7.<noscript>元素：
早期浏览器都面临一个特殊问题，当浏览器不支持JavaScript时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript>元素，用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>中的任何HTML元素——<script>元素除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来：
（1）浏览器不支持脚本；
（2）浏览器支持脚本，但是脚本被禁用。
符合上述任何一个条件，浏览器都会显示<noscript>中的内容。而在除此之外的情况下，浏览器不会呈现<noscript>中的内容。例如：
<html>
<head>
<title>Example HTML Page </title>
<script type=” text / javascript ” defer=”defer” src=”example1.js”> </script>
<script type=” text / javascript ” defer=”defer” src=”example2.js”> </script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持（启用）JavaScript。
</noscript>
</body>
</html>
这个页面会在脚本无效的情况下向用户显示一条消息。而在启用了脚本的浏览器中，用户永远也不会看到它——尽管它是页面的一部分。
JavaScript高级程序设计：第二章的更多相关文章
- javascript高级程序设计第二章知识点提炼
这是我整理的javascript高级程序设计第二章的脑图,内容也是非常浅显与简单.希望您看了我的博客能够给我一些意见或者建议.
- javascript高级程序设计第二章
看后总结: 1.js代码用得最多的两种加载方式: a)外部文件形式:<script type="text/javascript" src="jquery.min.j ...
- 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript
1 <script>的6个属性 async 立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer 文档显示之后再执行脚本,只对外部脚本有效 lan ...
- javascript高级程序设计---第二、三章
在HTML中引用javaScript javascript的几个属性 type async(异步加载 只适用于外部JS且IE8以上 HTML5规范 先于load执行) src defer(延迟加载 ...
- JavaScript 高级程序设计第二版
20.4 部署 20.4.1 构建 构建过程始于在源控制中定义用于存储文件的逻辑结构.最好避免使用一个文件存放所有的JavaScript,遵循以下面向对象语言中的典型模式:将每个对象或自定义了类别分别 ...
- javascript高级程序设计第一章有感
第一章JavaScript简介 Javascript的诞生最早是为了处理表单数据验证的问题,以前主要是使用perl这个强大的服务端脚本语言处理的.在未诞生javascript之前, 人们每次提交表单就 ...
- javascript 高级程序设计1--14章重点总结
js简介 首先介绍了js是一种专门与网页交互而设计的脚本语言.主要由ECMAScript 文档对象模型(DOM) 浏览器对象模型(BOM)三部分组成.分别用来提供核心语言,提供访问和操作网页内容的方法 ...
- JavaScript 高级程序设计 第二版
function outputNumbers(count) { (function () { for (var i =0;i < count; i++) { ...
- javascript高级程序设计第一章
看后总结: 1.javascript的组成成分:ECMAscript+DOM+BOM
- 读书笔记 - javascript 高级程序设计 - 第一章 简介
第一章 简介 诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262 一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...
随机推荐
- 为什么要html语义化？
1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...
- Output\TEST.sct(7): error: L6236E: No section matches selector - no section to be FIRST/LAST.
点击错误信息,跳转到了一个.sct文件:*.o (RESET, +First) 按照如下操作,也不能解决问题.对比别的工程,也没找出问题. "操作是: Options for Target ...
- C++编程技巧（长期更新）
1.数组使用 int* p = new int[5](); // 数组新建并全部初始化为0 等价于: int* p; p = new int[5](); int* q = new int[5]; ...
- dom4j操作xml文档
java Dom4j解析XML文件 标签(空格分隔):java进阶 xml文档: <?xml version="1.0" encoding="UTF-8" ...
- (转载)#include机制，#ifndef...#define...#endif防止重复引用，声明，定义等概念
一.来自百度知道的问题:全局变量可以声明定义在头文件中? 答案: 注意头文件中不可以放变量的定义!!!一般情况下头文件中只放变量的声明,因为头文件要被其他文件包含(即#include).如果把定义放到 ...
- 学到的较复杂的 mysql 语名
需求是这样的:需要找出没有发任务的店铺是哪些.好让客服去联系他们,询问情况. 每个商家可以有N个店铺,每个店铺可以放N个任务,一个任务会生成N个任务订单,会员接到任务去完成 SELECT *FROM ...
- Linux服务器操作系统
Linux服务器操作系统 今日大纲 ● 服务器操作系统的系列.Linux的主流产品.虚拟机软件 ● 安装linux ● linux基本命令 ● 用户管理及权限(多用户) ● ...
- js nextSibling属性和previousSibling属性概述及使用注意
1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不 ...
- Java JVM 请别拿“String s=new String("z");创建了多少实例”来面试 [ 转载 ]
Java 请别再拿“String s = new String("xyz");创建了多少个String实例”来面试了吧 [ 转载 ] @author RednaxelaFX 原文链 ...
- hdu_5036_Explosion(bitset优化传递闭包)
题目链接:hdu_5036_Explosion 题意: 一个人要打开或者用炸弹砸开所有的门,每个门里面有一些钥匙,一个钥匙对应一个门,有了一个门的钥匙就能打开相应的门,告诉每个门里面有哪些门的钥匙,问 ...