JavaScript高级程序设计学习笔记——第2章 在HTML中使用JavaScript
2013-3-4 | 发布者:www.sealiu.tk
我的笔记:
-
使用<script>元素的方式有两种;直接在页面中嵌入JavaScript代码和包含外部的JavaScript文件
-
还有一种方法就是直接在HTML元素中嵌入JavaScript代码,如:在HTML元素中的事件处理程序
-
在XHTML文档中,可省略</script>标签。如:<script ... .../>; 但是不能再HTML文档中使用这语法。不符合规范,IE不能正确解析。
-
※JavaScript内容类型(content-type)
Text:用于标准化表示文本信息
Multipart:用于连接消息体(可以是不同类型)的多个部分构成一个信息
Application:传输应用程序数据或者二进制数据
Message:用于包装一个E-mail消息
Image:用于传输静态图像数据
Audio:用于传输音频或者声音数据
Video:传输动态影像,可以是与音频编辑在一起的视频格式
来源:维基百科 -
带有src属性的<script>元素不应该在其标签之间包含有额外的JavaScript代码,即使有浏览器也会忽略。
-
另外通过src可以包含来自外部域的Js文件,即通过src指向整个完整URL,但是可能有恶意代码注入的风险。
-
只要不存在defer和async属性,浏览器就会按照<script>元素在页面中出现的先后顺序依次对他们进行解析。
7.1 如果async属性为true,则脚本会相对于文档的其余部分异步执行,这样的脚本会在 页面继续解析的过程中执行。
7.2 如果async属性为false,而defer属性为true,则脚本会在完成解析时得到执行。
7.3 如果async,defer属性均为false,那么脚本会立即执行,页面会在脚本执行完毕后 继续解析。
7.4 async和defer属性都只适用于外部脚本文件。
-
<noscript>内容</noscript>用以在不支持JavaScript的浏览器中显示替换内容。
情况:浏览器不支持脚本,
浏览器支持脚本,但被禁用。
扩展阅读:
“JavaScript高级程序设计(第3版)学习笔记1——概述”
在HTML中使用JavaScript的方式主要有:
使用<script>标签元素引入外部文件(推荐),将代码写入外部文件中。
使用<script>标签元素嵌入JavaScript代码。
直接在HTML中嵌入JavaScript代码,比如在HTML元素中的事件处理程序。
<script>标签元素:
async charset defer language src type
说明:
(1)外部文件
A、在XHTML文档中,导入外部文件时,可以使用简写方式<script/>但是在HTML中只能<script></script>。
B、导入外部文件时,src属性是必须的,这个时候嵌入在<script></script>中的代码(如果有)会被忽略。
C、src属性也可以指定来自外部域的JavaScript文件,这一点让<script>元素异常强大,也备受争议,因为可能会让人恶意注入脚本。
D、外部文件只需要包含<script></script>中的代码即可,不需要包括<script>元素本身;外部文件一般扩展名为.js,但这不是强制的。
(2)在<script>元素中内嵌代码时,只需要指定type属性,但代码中不能出现</script>字符串,否则会解析出错。例如:
<script type="text/javascript"> //document.writeln('</script>');会将字符 串中的</script>作为前面的标签结束符来解析,从而出现异常 document.writeln('</scr'+'ipt>');//通过将</script>分开,从而避免作 为<script>的结束标签解析
</script>(3)关于type属性,虽然 text/javascript和java/ecmascript都已经不被推荐使用,但一直以来使用的都还是 text/javascript,实际上,服务器在传送JavaScript文件时使用的MIME类型通常是application/x- javascript,但在type中设置这个值可能导致脚本被忽略,另外,在非IE浏览器中还可以使用application/javascript和 application/ecmascript。type如果没有指定,默认值为text/javascript。
(4)只要不包含 async和defer,浏览器会按照<script>在页面中出现的顺序依次解析;设置了defer时,会立即 下 载<script>元素,但是延迟执行,在规范中,要求多个含defer属性的脚本顺序执行且在DOMContentLoaded事件前 执 行,但是在实现中不一定满足这些要求;在HTML5中添加了async属性,和defer类似,也只是适用于外部文件,告诉浏览器立即下载文件,但延 迟执 行,不同的是,多个含async的脚本即便在规范中也没有规定执行的顺序,异步脚本再load事件前执行,但可能在 DOMContentLoaded之前 或之后执行。
(5)在阅读之前的代码或者用一些IDE生成代码时,常常可以看到下面的结构:
<script type="text/javascript"> //<![CDATA[// 这里首先是以//开始的JavaScript注释 // 然后<![CDATA[...]]>结构是XHTML(XML)的一个特殊区域,区域内的文本不需要做任何解析,以防止XHTML将代 码中的类似小于号“<”的这种特殊符号解析为元素标签// 若不使用CDATA结构,则需要转义成相应实体,比如小于号(<)需要使用 (<)// 对于不兼容XHTML的,由于最开始的//注释,也能够平稳退化//]]></script>
有些不支持JavaScript的浏览器,可以将JavaScript代码包含在一个HTML注释中(由于所有主流浏览器均支持JavaScript,所以不再推荐使用):
<script><!--//--></script>
对于一些老旧浏览器或者禁用了JavaScript的浏览器,还可以使用<noscript></noscript>元素来呈现相关的说明。
文档模式
在 IE5.5中开始引入文档模式的概念,通过使用通过文档类型(doctype)切换实现的,最初包括混杂 模式(quirks mode)和标准模式(standards mode),混杂模式让IE的行为与包括非标准特性的IE5相同,标准模式则让IE的行为更接近标准行为。在IE引入文档模式之后,其他浏览器也纷纷 仿 效。之后,IE又提出一种所谓准标准模式(almost standards mode),这种模式下的浏览器特性有很多是符合标准的,但也不尽然。所有浏览器默认开启混杂模式。
可以通过下面的方法启动标准模式:
<!-- HTML 4.01 严格型--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 严格型--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5 --><!DOCTYPE html>通过过渡性或框架集型来触发准标准模式:
<!-- HTML 4.01 过渡型--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 框架集型--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FrameSet//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 过渡型--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 框架集型--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 FrameSet//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">来源:linjisong
参考书籍:
[1]Professional JavaScript for Web Developers 3rd Edition:JavaScript高级程序设计(第3版)[美]Nicholas C.Zakes 著 李松峰 曹力译 人民邮电出版社。