JavaScript高级程序设计(二)：在HTML中使用JavaScript
一、使用<script>元素
1、<script>元素定义了6个属性：
async:可选。表示应该立即下载脚本，但不应该妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
charset:可选。表示通过src属性指定的代码的字符集。很少人用。
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部文件有效。
language：已废弃。
src:可选。表示包含要执行代码的外部文件。
type:可选。表示编写代码使用的脚本语言的内容类型【MIME类型】。例如：text/javascript、text/ecmascript。实际上服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript。但是为了兼容性和约定俗称，目前type属性的值依旧还是text/javascript。
2、<script>元素的使用
使用<script>元素的方式有两种：直接在页面引入和外部js的引入。
1）页面直接引入js时，只须为<script>指定type属性。例如：
<scritpt type="text/javascript">
function sayhi(){
alert('hi,world!');
}
</script>
注意：A、直接引入的js的解析是从上到下的。
B、在使用<script>嵌入JavaScript代码时，记住不要在代码中的任何地方出现“</script>”字符串。例如：浏览器在加载下面代码时就会产生一个错误：
<script type="text/javascript">
function sayScript(){
alert('</script>');
}
</script>
因为按照解析嵌入式代码的规则，当浏览器遇到字符串“</script>”时，就会认为那是结束的</script>标签。但是通过把这个字符串分割为两部分可以解决这个问题，例如：
<script type="text/javascript">
function sayScript(){
alert('<\/script>');
}
</script>
2）外部引入js，src属性是必需的，这个属性的值是一个指向外部JavaScript文件的链接，例如：
<script type='text/javascript' src='example.js'></script>
特别提示：
1)、 通过<script>元素的src属性还可以包含来自外部域的JavaScript。这一点即使<script>元素倍显强大，又让它备受争议。在这一点上，<script>与<img>元素非常相似，即它的src属性可以是指向当前HTML页面所在域之外的某个域中的URL，例如：
<script type='text/javascript' src="http://www.joyplus.com/example.js"></script>
不过，在访问自己不能控制的服务器上的JavaScript文件时则要多加小心。
2)、 无论如何包含代码，只要不存在defer和ansync属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。
3、<script>元素标签的位置
按照惯例，所有<script>元素都应该放在页面<head>元素中。例如：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type='text/javascript' src='example1.js'></script>
<script type='text/javascript' src='example2.js'></script>
</head>
<body>
<!--主题内容-->
</body>
</html>
这种做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。可是，在文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容。这无疑导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代web应用程序一般都把全部JavaScript引用到<body>元素内容后面，例如：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<!--主题内容-->
</body>
<script type='text/javascript' src='example1.js'></script>
<script type='text/javascript' src='example2.js'></script>
</html>
这样就加快了用户看到页面的时间。
4、<script>延迟脚本【属性defer】
defer属性和async属性都可以起到页面不受<head>元素中外部引入的js文件的下载而现实缓慢。例如：
defer属性：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</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>
外部脚本文件延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行。但在实际中，延迟脚本并不一定会按照顺序执行。因此最好只包含一个延迟脚本。
由于并非所有浏览器都支持defer属性，所以，把延迟脚本放在页面底部仍然是最佳选择。
5、异步脚本【属性async】
async属性：只适用于外部脚本，并告诉浏览器立即下载文件。但是js脚本的执行的先后顺序就不能保证了。因此，使用async属性的脚本之间确保不能相互依赖。
async属性:目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script type='text/javascript' async='async' src='example1.js'></script>
<script type='text/javascript' async='async' src='example2.js'></script>
</head>
<body>
<!--主题内容-->
</body>
</html>
6、<script>元素在XHTML中的使用
XHTML，是将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 equals to b!");
}
}
</script>
在XHTML中无效的原因是：
比较语句a<b中的小于号（<）在XHTML中被当做开始一个新标签来解析。但是作为标签来讲，小于号后面不能跟空格，因此就会导致语法错误。
避免在XHTML中出现类似语法错误的方法有两个：
一是用相应的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 equals to b!");
}
}
</script>
这种方法，是代码不好理解。因此，我们可以使用另一种方法。
二是使用CDATA片段来包含js代码。在CDATA片段中可以使用任意字符，且不会导致语法错误。具体代码如下：
<script type='text/javascript'>
//<![CDATA[
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 equals to b!");
}
}
//]]>
</script>
但是由于不是所有浏览器都兼容XHTML的CDATA片段的语法，因此，在使用js注释将CDATA标记注释掉就可以了。
二、嵌入脚本与外部脚本
Js嵌入代码与外部文件，最好的做法还是尽可能使用外部文件包含js代码。优点是：
可维护性强：单独将js放到一个文件中，维护方便，且变成也方便。
可缓存：多个HTML都是用一个js文件时，那么js文件只需下载一次。加快了页面加载的速度。
适应未来：外部文件无须使用XHTML或注释hack。Html和XHTML包含外部文件的语法相同。【注释hack：CDATA片段】
三、考虑禁用JavaScript的场景【<noscript>元素】
<noscript>元素只有在下列情况下才会显示出来：
1） 浏览器不支持脚本；
2） 浏览器支持脚本，但脚本被禁用。
符合上述任何一个条件，浏览器都会显示<noscript>中的内容。而除此之外的请他情况下，浏览器不会呈现<noscript>中的内容。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</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。</p>
</noscript>
<!--主题内容-->
</body>
</html>
这个页面会在脚本无效的情况下向用户显示一条消息。而在启用了脚本的浏览器中，用户永远也不会看到它。
JavaScript高级程序设计(二)：在HTML中使用JavaScript的更多相关文章
- JavaScript 入门教程二 在HTML中使用 JavaScript
一.使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件. 二.使用内嵌方式,一般写法为: <script t ...
- javascript 高级程序设计 二
这里我们直接进入主题: 在JS刚刚开始的时候,必须面临一个问题,那就是如何使的JS的加载和执行不会影响web核心语言HTML的展示效果,和HTML和谐共存. 在这个背景下<script>标 ...
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- javascript 高级程序设计 十二
1.组合使用原型模式和构造函数模式: 由于原型模式创建对象也有它的局限性------有智慧的人就把原型模式和构造函数模式进行了组合. function Person(name, age, job){/ ...
- 《Javascript高级程序设计》阅读记录（二）：第四章
这个系列之前文字地址:http://www.cnblogs.com/qixinbo/p/6984374.html 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较 ...
- 《JavaScript高级程序设计（第3版）》笔记-序
很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...
- 读javascript高级程序设计08-引用类型之Global、Math、String
一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encod ...
- JavaScript高级程序设计学习(三)之变量、作用域和内存问题
这次讲的主要是变量,作用域和内存问题. 任何一门编程语言,都涉及这三个. 变量,比如全局变量,局部变量等,作用域,也分全局作用域和方法作用域,内存问题,在java中就涉及到一个垃圾回收的问题,由于ja ...
随机推荐
- 2DPlatformer-SLua 编辑器 UI 美化
在我的开源项目 2DPlatformer-SLua 中,YwLuaMonoBehaviour 是非常重要的一个组件,它负责从 MonoBehaviour 中直接驱动内建的事件到 Lua 中的类和逻辑, ...
- 关于 unity5.3.1 录制 animation 带有 rotation 信息打包 Android 会运动错乱的问题
Unity5.3.1 录制 animation 带有 rotation 信息打包 Android 会运动错乱的问题 ,临时解决方法是:在动画面板中点击 rotation 属性,右键选择菜单中 ...
- D3D12 图形编程
D3D 11到D3D 12的重大改进 Direct3D 12 的编程模型和 Direct3D 11大相径庭.在Direct3D 12中,应用程序和硬件靠得近多了,这在以前是从未有过的. 这让D3D12 ...
- （转载）自己实现spring
您还 « 上一页 1 2 3 下一页 » 浏览 9671 次 锁定老帖子 主题:spring深入源码1 简单实现ioc机制 精华帖 (0) :: 良好帖 (2) :: 新手帖 (0) :: 隐藏帖 ( ...
- NOIP2002 字串变换
题二 字串变换 (存盘名: NOIPG2) [问题描述]: 已知有两个字串 A$, B$ 及一组字串变换的规则(至多6个规则): A1$ -> B1$ A2$ -> B2$ 规则的含义为: ...
- mac osx App store 安装软件 发生错误
app store 安装软件时发生错误 解决办法: 1. 进入如下目录: sh-3.2# cd Library/Application\ Support/App\ Store/ sh-3.2# pwd ...
- jquery ajax return值不能取得的解决方案
jQuery ajax - ajax() 方法 http://www.w3school.com.cn/jquery/ajax_ajax.asp http://www.cnblogs.com/fqw19 ...
- VC++深入详解-第一章学习心得(一)
句柄是系统为资源分配内存的标识号. 相当于一个指针指向一块内存空间,我暂时理解成一个地址,一个门牌号 HWND 窗口句柄 HICON 图标句柄 HCURSOR 光标句柄 HBRUSH 画刷句柄 消息的 ...
- PAT 1003. Emergency (25)
1003. Emergency (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue As an emerg ...
- org.openqa.selenium.remote.SessionNotFoundException: The FirefoxDriver cannot be used after quit() was called.
该问题已经困扰了我很多天 问题终于解决了,全局变量导致的,碰到这种问题很难再自己本身的机器上发现错误,所以,应该看一下自己写的方法是否涉及到了全局变量出现不一致的情况,让其统一即可.