JavaScript使用方法

1 <script> 标签
　　<script> 标签用于定义客户端脚本，比如 JavaScript。
　　在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
　　script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

　　注：旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。
　　 type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

1.1 <script> 属性　　

属性	是否必填	适用范围	说明
async	可选	外部文件	表示应该立即下载脚本，但不应妨碍页面中的其它操作，比如下载资源或其它脚本文件
charset	可选	外部文件	表示通过src指定的代码的字符集
defer	可选	外部文件，IE4-7也支持嵌入代码	表示脚本可以延迟到文档完全解析和显示之后再执行
language	可选（已废弃）		原用于表示编写代码的脚本语言
src	可选，使用外部文件时为必填选项	外部文件	表示包含要执行的外部文件
type	可选，默认text/javascript		可以看成是language的替代属性，表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。

(1) 关于type属性，虽然text/javascript和java/ecmascript都已经不被推荐使用，但一直以来使用的都还是text/javascript，实际上，服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript，但在type中设置这个值可能导致脚本被忽略，另外，在非IE浏览器中还可以使用application/javascript和application/ecmascript。type如果没有指定，默认值为text/javascript。

(2) 只要不包含async和defer，浏览器会按照<script>在页面中出现的顺序依次解析；设置了defer时，会立即下载<script>元素，但是延迟执行，在规范中，要求多个含defer属性的脚本顺序执行且在DOMContentLoaded事件前执行，但是在实现中不一定满足这些要求；在HTML5中添加了async属性，和defer类似，也只是适用于外部文件，告诉浏览器立即下载文件，但延迟执行，不同的是，多个含async的脚本即便在规范中也没有规定执行的顺序，异步脚本再load事件前执行，但可能在DOMContentLoaded之前或之后执行。

(3) 在阅读之前的代码或者用一些IDE生成代码时，常常可以看到下面的结构：

显示	说明	实体名称	实体编号
	半方大的空白	&ensp;
	全方大的空白	&emsp;
	不断行的空白
<	小于	<	<
>	大于	>	>
&	&符号	&	&
"	双引号	"	"

　　有些不支持JavaScript的浏览器，可以将JavaScript代码包含在一个HTML注释中（由于所有主流浏览器均支持JavaScript，所以不再推荐使用）：　　

<script><!--
//--></script>

　　对于一些老旧浏览器或者禁用了JavaScript的浏览器，还可以使用<noscript></noscript>元素来呈现相关的说明。

1.2 <script> 位置

　　脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。

　　注：把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

(1) <head> 中的 JavaScript
　　JavaScript 函数被放置于 HTML 页面的 <head> 部分

　　例：　

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

(2) <body> 中的 JavaScript
　　JavaScript 函数被放置于 HTML 页面的 <body> 部分。

　　例：　　

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

2 JavaScript 使用方法

　　在HTML中使用JavaScript的方式主要有：

2.1 引入外部脚本
　在Html中使用<script>标签元素引入外部文件（推荐），将代码写入外部文件中，JavaScript 文件的文件扩展名是 .js。

　　如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称。

　　可通过完整的 URL 或相对于当前网页的路径引用外部脚本：

(1) 使用完整的 URL 来链接至脚本

　　例：　　

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

(2) 使用位于当前网站上指定文件夹中的脚本

　　例：

<script src="/js/myScript1.js"></script>

(3) 链接了与当前页面相同文件夹的脚本：

　　例：

<script src="myScript1.js"></script>

备注：

a. 可以在 <head> 或 <body> 中放置外部脚本引用。

b. 在XHTML文档中，导入外部文件时，可以使用简写方式<script/>但是在HTML中只能<script></script>。

c. 导入外部文件时，src属性是必须的，这个时候嵌入在<script></script>中的代码（如果有）会被忽略。

d. src属性也可以指定来自外部域的JavaScript文件，这一点让<script>元素异常强大，也备受争议，因为可能会让人恶意注入脚本。

e. 外部文件只需要包含<script></script>中的代码即可，不需要包括<script>元素本身，意思就是外部脚本不能包含 <script> 标签。

f. 外部文件一般扩展名为.js，但这不是强制的。

引入外部脚本优势：

a. 分离了 HTML 和代码
b. 使 HTML 和 JavaScript 更易于阅读和维护
c. 已缓存的 JavaScript 文件可加速页面加载

2.2 在<script>内写入JavaScript代码。

　　在<script>元素中内嵌代码时，只需要指定type属性，但代码中不能出现</script>字符串，否则会解析出错。

　　例：　　

<script type="text/javascript">
    //document.writeln('</script>');会将字符串中的</script>作为前面的标签结束符来解析，从而出现异常
    document.writeln('</scr'+'ipt>');//通过将</script>分开，从而避免作为<script>的结束标签解析
</script>

2.3 将脚本程序代码作为某个元素的事件属性值或超链接的href属性值

　　超链接<a>的href属性除了可以使用http和mailto等协议之外，还可以使用Javascript协议。

　　例：

<a href=”javascript:alert(new Date())”;>javascript</a>

　　单击这个超链接，浏览器将会执行JavaScript:后面的脚本程序代码。

3 文档模式　

　　在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">

参考来源：https://www.cnblogs.com/linjisong/archive/2012/08/23/2642355.html

posted @ 2019-07-18 18:49 iamspecialone 阅读(587) 评论(0) 编辑收藏举报

刷新页面返回顶部

iamspecialone

JavaScript使用方法

公告