JS｜常规函数、嵌套、匿名、字面函数、闭包及函数做为

JS｜常规函数、嵌套、匿名、字面函数、闭包及函数做为对象方法

何计算机语言都会包含大量的内置函数，当然也可以自定义函数。

JS函数是由事件驱动或者当它被调用时执行的可重复使用的代码块。相对来说，JS的函数比较复杂。

目录
1 常规函数
2 JS嵌套函数
3 JSt函数字面值
4 函数对象Function
5 匿名函数，也叫内联函数
6 闭包
7 内联函数作为对象的方法
8 常规函数做为对象的方法
9 对象字面量

1 常规函数

JS函数是先定义后调用。（C语言还要先声明）

function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

JS可以在<script>标签中直接调用函数，也可以在链接或事件中调用。

2 JS嵌套函数

JavaScript允许函数用作数据，也允许在函数中嵌入函数。

function hypotenuse(a, b) {
function square(x) { return x*x; }
return Math.sqrt(square(a) + square(b));
}

hypotenuse(1, 2); // This will produce 2.2360

3 JSt函数字面值

字面值函数的语法很类似的函数声明，不同之处在于它被用作表达，它不是作为一个声明，函数名是必需的。

var func=function(x,y){ return x*y };
你可以在上面函数中调用如下：
func(10,20); // This will produce 200

4 函数对象Function

Function也是一个对象，可以使用new运算符创建一个实例。

<script type="text/javascript">
var variablename=new Function(Arg1, Arg2..., "Function Body");
</script>
下面是创建一个函数的例子：
<script type="text/javascript">
var func=new Function("x", "y", "return x*y;");
</script>

Function()函数构造预期任意数量的字符串参数。最后一个参数是函数体，它可以包含任意JavaScript语句，用分号彼此分开。

请注意，Function()构造不通过任何参数，指定一个名字为它创建函数。使用Function()构造函数创建的未命名的函数称为匿名函数。

5 匿名函数，也叫内联函数

函数(没有名字)定义可以被赋值给一个变量，该变量被用作函数的引用。

匿名函数是指那些无需定义函数名的函数。匿名函数与 Lambda 表达式（拉姆达表达式）是一回事。唯一的不同——语法形式不同。Lambda 表达式更进一步。本质上，它们的作用都是：产生方法——内联方法，也就是说，省去函数定义，直接写函数体。

var abc=function(x,y){
return x+y;
}
alert(abc(2,3)); // "5"

匿名函数也可以作为事件方法：

window.onload=function(){
alert("Welcome");
}

var baz1=function() {
var foo=10;
var bar=2;
return foo * bar;
};
function mutil() {
var foo=10;
var bar=2;
return foo * bar;
};
alert(baz1());
var baz2=mutil();
alert(baz2);

baz1 与 baz2 完全一样，但 baz1 与 baz2 相比，省去了函数定义，直接函数体——看上去多简约。

6 闭包

闭包是定义在另一个函数中的匿名函数。当外部函数退出时，它会返回内部匿名函数的引用，使得通过引用调用内部函数成为可能。闭包意味着局部变量对内部函数仍然可用，即使它已经超出其作用域。闭包可以让变量一直存活到不再需要它们的时候。闭包，其实就是指程序语言中能让代码调用已运行的函数中所定义的局部变量。js中某个函数的内部函数在该函数执行结束后仍然可以访问这个函数中定义的变量，这称为闭包(Closure) 。

闭包可以用在许多地方。它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

请看下面的代码。

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
alert(n);
}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是“nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个

匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

function foo() {
var a=10;
function bar() {
a *=2;
return a;
}
return bar;
}

var baz=foo();
document.write(baz(),"<br>");
document.write(baz(),"<br>");
document.write(baz(),"<br>");
var blat=foo();
document.write(blat(),"<br>");
//20,40,80,20

7 内联函数作为对象的方法

function Distance(r,t){
this.rate=r;
this.time=t;
this.calculate=function() { return r * t;}
}

<body>
var trip1=new Distance(50, 1.5);
var trip2=new Distance(75, 3.2);
document.write("trip 1 distance: "+trip1.calculate(),"<br />");
document.write("trip 2 distance: "+trip2.calculate(),"<br />");
//75,240
</body>

8 常规函数做为对象的方法

var toy=new Object();
toy.name="Lego";
toy.color="red";
toy.shape="rectangle";
toy.display=printObject;
function printObject(){
document.write("<b>The toy is a " + toy.name + ".<br>");
document.write("It is a " + toy.color + " " + toy.shape + ".<br />");
}

<body>
<script>
toy.display();
toy.color="blue";
toy.display();
</script>
</body>

运行结果：

The toy is a Lego.
It is a red rectangle.
The toy is a Lego.
It is a blue rectangle.

9 对象字面量，也用匿名函数做为对象方法

<script>
var soldier={
name: undefined,
rank: "captain",
picture: "keeweeboy.jpg",
fallIn: function(){
document.write("At attention……<br>");
},
fallOut: function(){
document.write("Drop out of ……<br>");
}
};
</script>

<body>
<script>
soldier.name="Tian";
document.write("The soldier's name is ", soldier.name,".<br />");
document.write(soldier.name+"'s name is ", soldier.rank,".<br />");
soldier.fallIn();
soldier.fallOut();
</script>
</body>

－End－

ello, world！

本教程的这一部分内容是关于 JavaScript 语言本身的。

但是，我们需要一个工作环境来运行我们的脚本，由于本教程是在线的，所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令（比如 alert），所以如果你打算专注于另一个环境（比如 Node.js），你就不必多花时间来关心这些特定指令了。我们将在本教程的下一部分中专注于浏览器中的 JavaScript。

首先，让我们看看如何将脚本添加到网页上。对于服务器端环境（如 Node.js），你只需要使用诸如 "node my.js" 的命令行来执行它。

“script” 标签

JavaScript 程序可以在 <script> 标签的帮助下插入到 HTML 文档的任何地方。

比如：

<!DOCTYPE HTML>
<html>
<body>
 <p>script 标签之前...</p>
 <script>
 alert('Hello, world!');
 </script>
 <p>...script 标签之后</p>
</body>
</html>

现代的标记

type 属性：<script type=...>

在老的 HTML4 标准中，要求 <script> 标签有 type 属性。通常是 type="text/javascript"。这样的属性声明现在已经不再需要。而且，现代 HTML 标准 —— HTML5 已经完全改变了此属性的实际含义。现在，该属性可以被用于 JavaScript 模块。但那是一个高级一点的话题，我们将会在此教程的其他章节中探讨 JavaScript 模块。

language 属性：<script language=...>

这个属性是为了显示脚本使用的语言。这个属性现在已经没有任何意义，因为语言默认就是 JavaScript。不再需要使用它了。

脚本前后的注释：

在非常古老的书籍和指南中，你可能会在 <script> 标签里面找到注释，就像这样：

<script type="text/javascript"><!--
 ...
//--></script>

现代 JavaScript 中已经不这样使用了。这些注释是用于不支持 <script> 标签的古老的浏览器隐藏 JavaScript 代码的。由于最近 15 年内发布的浏览器都没有这样的问题，因此这种注释能帮你辨认出一些老掉牙的代码。

外部脚本

如果你有大量的 JavaScript 代码，我们可以将它放入一个单独的文件。

脚本文件可以通过 src 属性添加到 HTML 文件中。

<script src="/path/to/script.js"></script>

这里，/path/to/script.js 是脚本文件从站点根目录开始的绝对路径。当然也可以提供当前页面的相对路径。例如，src=“script.js” 表示当前文件夹中的 “script.js” 文件。

我们也可以提供一个完整的 URL 地址，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

要附加多个脚本，请使用多个标签：

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

请注意：

一般来说，只有最简单的脚本才嵌入到 HTML 中。更复杂的脚本存放在单独的文件中。
使用独立文件的好处是浏览器会下载它，然后将它保存到浏览器的缓存^[1]中。
之后，其他页面想要相同的脚本就会从缓存中获取，而不是下载它。所以文件实际上只会下载一次。
这可以节省流量，并使得页面（加载）更快。

提醒：如果设置了 src 属性，script 标签内容将会被忽略。

一个单独的 <script> 标签不能同时有 src 属性和内部包裹的代码。

这将不会工作：

<script src="file.js">
 alert(1); // 此内容会被忽略，因为设定了 src
</script>

我们必须进行选择，要么使用外部的 <script src="…">，要么使用正常包裹代码的 <script>。

为了让上面的例子工作，我们可以将它分成两个 <script> 标签。

<script src="file.js"></script>
<script>
 alert(1);
</script>

总结

我们可以使用一个 <script> 标签将 JavaScript 代码添加到页面中。
type 和 language 属性不是必需的。
外部的脚本可以通过 <script src="path/to/script.js"></script> 的方式插入。

有关浏览器脚本以及它们和网页的关系，还有很多可学的。但是请记住，教程的这部分主要是针对 JavaScript 语言本身的，所以我们不该被浏览器特定的实现分散自己的注意力。我们将使用浏览器作为运行 JavaScript 的一种方式，这种方式非常便于我们在线阅读，但这只是很多种方式中的一种。

作业题

1. 显示一个提示语

重要程度：??????????

创建一个页面，然后显示一个消息 “I'm JavaScript!”。

在沙箱中或者在你的硬盘上做这件事都无所谓，只要确保它能运行起来。

你可以先看一下 新窗口的演示结果^[2]。

在微信公众号「技术漫谈」后台回复 1-2-1 获取本题答案。

2. 使用外部的脚本显示一个提示语

重要程度：??????????

打开题目 1 的答案。将答案中脚本的内容提取到一个外部的 alert.js 文件中，放置在相同的文件夹中。

打开页面，确保它能够工作。

你可以先看一下 新窗口的演示结果^[3]。

在微信公众号「技术漫谈」后台回复 1-2-1 获取本题答案。

现代 JavaScript 教程：开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程^[4]。
在线免费阅读：https://zh.javascript.info/

参考资料

[1] 缓存: https://en.wikipedia.org/wiki/Web_cache

[2] 新窗口的演示结果: https://zh.js.cx/task/hello-alert/solution/

[3] 新窗口的演示结果: https://zh.js.cx/task/hello-alert/solution/

[4] React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources

关注微信公众号「技术漫谈」，订阅更多精彩内容。

习目标：了解JavaScript是如何与HTML结合来创建动态网页，网页中嵌入JavaScript的不同方式，JavaScript的内容类型及其与<script>的关系

<script>元素

1、async:表示立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或者等待其他脚本加载。只对外部脚本文件有效。

2、charset：使用src属性指定代码字符集。这个属性很少用，因为大多数浏览器不在乎它的值。

3、crossorigin；配置资源请求的CORS（跨源资源共享）设置。默认情况下不使用CORS。crossorigin=“anonymous”配置文件请求不用设置凭据标志。crossorigin=”use-credentials“设置凭据标志，意味着出站请求会包含凭据。

4、defer:表示脚本可以延迟到文档全部解析和显示后再执行。新版本中只能用于外部脚本。

5、integrity:允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource integrity），如果验证签名不匹配则脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。

6、language：此属性已被废止。

7、src:表示包含外部要执行的代码的外部文件。

8、type:代替language，表示代码块中脚本语言的内容类型（也称为MIME类型），按照惯例这个值始终都是”text/JavaScript“，尽管”text/JavaScript“和”text/ecmascript“都已经废弃。JavaScript文件的MIME类型通常是”application/x-javascript“,不过给type属性这个值的话可能会导致脚本被忽略。在非IE的浏览器中有效的值还有”application/JavaScript“和”application/ecmascript"。如果这个值是module，则代码会被当成是ES6模块，而且只有这时候代码中才能出现import和export关键字。

使用<script>的方式有内联和外嵌两种，只要把code写入<script>code</script>中就好，code中要是包含字符串“<script>”,只要加上转义字符“\”即可。

如果要外嵌JavaScript代码只要使用src属性来链接外部文件即可如：

XHTML 文档中，可以忽略结束标签写成<script src=“example.js”/>即可，但是这在HTML中不能使用。

标签位置

过去把JavaScript和CSS一起写在head中，但是这意味着必须下载所有code并解析和解释完成后才开始渲染页面，对于JavaScript很多的页面会导致页面渲染速度过慢，为解决这个问题，JavaScript一般写在body元素的页面内容的最后边，如下

<html>

<body>

message

<\body>

</html>

推迟使用脚本

在外联JavaScript时可以使用defer属性来推迟脚本的运行。可以写成：

<html>

<head>

</head>

<body>

message

<\body>

</html>

异步执行脚本

async属性从脚本处理方式上与defer类似，但是不同的是标记async的脚本并不能保证脚本按照他们的出现顺序执行，比如：

<html>

<head>

</head>

<body>

message

<\body>

</html>

不能保证example1比example2先执行。

动态加载脚本

除了<script>以外还可以用其他方式加载脚本。因为JavaScript可以使用DOM API，所以通过向DOM中动态地加入script元素同样可以加载指定脚本。只要创建一个script元素并将其添加到DOM即可。

let script=document.createElement('script');

script.src='gibberish.js';

document.head.appendChild(script);

当然，在把 HTMLElement 元素添加到 DOM 且执行到这段代码之前不会发送请求。默认情况下，以这种方式创建的<script>元素是以异步方式加载的，相当于添加了 async 属性。不过这样做可能会有问题，因为所有浏览器都支持 createElement()方法，但不是所有浏览器都支持 async 属性。因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载：

let script=document.createElement('script');

script.src='gibberish.js';

script.async=false;

document.head.appendChild(script);

以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用，这种方式可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：

XHTML中的变化

可扩展超文本标记语言（XHTML，Extensible HyperText Markup Language）是将 HTML 作为 XML的应用重新包装的结果。与 HTML 不同，在 XHTML 中使用 JavaScript 必须指定 type 属性且值为text/javascript，HTML 中则可以没有这个属性。XHTML 虽然已经退出历史舞台，但实践中偶尔可能也会遇到遗留代码，为此本节稍作介绍。在 XHTML 中编写代码的规则比 HTML 中严格，这会影响使用<script>元素嵌入 JavaScript 代码。下面的代码块虽然在 HTML 中有效，但在 XHML 中是无效的。

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

</script>

在 HTML 中，解析<script>元素会应用特殊规则。XHTML 中则没有这些规则。这意味着 a < b语句中的小于号（<）会被解释成一个标签的开始，并且由于作为标签开始的小于号后面不能有空格，这会导致语法错误。避免 XHTML 中这种语法错误的方法有两种。第一种是把所有小于号（<）都替换成对应的 HTML实体形式（<）。结果代码就是这样的：

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

</script>

这样代码就可以在 XHTML 页面中运行了。不过，缺点是会影响阅读。好在还有另一种方法。第二种方法是把所有代码都包含到一个 CDATA 块中。在 XHTML（及 XML）中，CDATA 块表示文档中可以包含任意文本的区块，其内容不作为标签来解析，因此可以在其中包含任意字符，包括小于号，并且不会引发语法错误。使用 CDATA 的格式如下：

<script type="text/javascript"><![CDATA[

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

]]></script>

在兼容 XHTML 的浏览器中，这样能解决问题。但在不支持 CDATA 块的非 XHTML 兼容浏览器中则不行。为此，CDATA 标记必须使用 JavaScript 注释来抵消：

//<![CDATA[

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

//]]>

</script>

这种格式适用于所有现代浏览器。虽然有点黑科技的味道，但它可以通过 XHTML 验证，而且对XHTML 之前的浏览器也能优雅地降级。

废弃的语法

自 1995 年 Netscape 2 发布以来，所有浏览器都将 JavaScript 作为默认的编程语言。type 属性使用一个 MIME 类型字符串来标识<script>的内容，但 MIME 类型并没有跨浏览器标准化。即使浏览器默认使用 JavaScript，在某些情况下某个无效或无法识别的 MIME 类型也可能导致浏览器跳过（不执行）相关代码。因此，除非你使用 XHTML 或<script>标签要求或包含非 JavaScript 代码，最佳做法是不指定 type 属性。在最初采用 script 元素时，它标志着开始走向与传统 HTML 解析不同的流程。对这个元素需要应用特殊的解析规则，而这在不支持 JavaScript 的浏览器（特别是 Mosaic）中会导致问题。不支持的浏览器会把<script>元素的内容输出到页面上，从而破坏页面的外观。Netscape 联合 Mosaic 拿出了一个解决方案，对不支持 JavaScript 的浏览器隐藏嵌入的 JavaScript 代码。最终方案是把脚本代码包含在一个 HTML 注释中，像这样：

<script><!--

function sayHi(){

console.log("Hi!");

}

//--></script>

使用这种格式，Mosaic 等浏览器就可以忽略<script>标签中的内容，而支持 JavaScript 的浏览器则必须识别这种模式，将其中的内容作为 JavaScript 来解析。虽然这种格式仍然可以被所有浏览器识别和解析，但已经不再必要，而且不应该再使用了。在XHTML 模式下，这种格式也会导致脚本被忽略，因为代码处于有效的 XML 注释当中。

行内代码与外部文件

虽然可以直接在 HTML 文件中嵌入 JavaScript 代码，但通常认为最佳实践是尽可能将 JavaScript 代码放在外部文件中。不过这个最佳实践并不是明确的强制性规则。推荐使用外部文件的理由如下。

? 可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。

? 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。

? 适应未来。通过把 JavaScript 放到外部文件中，就不必考虑用 XHTML 或前面提到的注释黑科技。包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。在配置浏览器请求外部文件时，要重点考虑的一点是它们会占用多少带宽。在 SPDY/HTTP2 中，预请求的消耗已显著降低，以轻量、独立 JavaScript 组件形式向客户端送达脚本更具优势。比如，第一个页面包含如下脚本：

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

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

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

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

...

后续页面可能包含如下脚本：

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

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

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

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

...

在初次请求时，如果浏览器支持 SPDY/HTTP2，就可以从同一个地方取得一批文件，并将它们逐个放到浏览器缓存中。从浏览器角度看，通过 SPDY/HTTP2 获取所有这些独立的资源与获取一个大JavaScript 文件的延迟差不多。在第二个页面请求时，由于你已经把应用程序切割成了轻量可缓存的文件，第二个页面也依赖的某些组件此时已经存在于浏览器缓存中了。当然，这里假设浏览器支持 SPDY/HTTP2，只有比较新的浏览器才满足。如果你还想支持那些比较老的浏览器，可能还是用一个大文件更合适。

文档模式

IE5.5 发明了文档模式的概念，即可以使用 doctype 切换文档模式。最初的文档模式有两种：混杂模式（quirks mode）和标准模式（standards mode）。前者让 IE 像 IE5 一样（支持一些非标准的特性），后者让 IE 具有兼容标准的行为。虽然这两种模式的主要区别只体现在通过 CSS 渲染的内容方面，但对JavaScript 也有一些关联影响，或称为副作用。本书会经常提到这些副作用。

IE 初次支持文档模式切换以后，其他浏览器也跟着实现了。随着浏览器的普遍实现，又出现了第三种文档模式：准标准模式（almost standards mode）。这种模式下的浏览器支持很多标准的特性，但是没有标准规定得那么严格。主要区别在于如何对待图片元素周围的空白（在表格中使用图片时最明显）。

混杂模式在所有浏览器中都以省略文档开头的 doctype 声明作为开关。这种约定并不合理，因为混杂模式在不同浏览器中的差异非常大，不使用黑科技基本上就没有浏览器一致性可言。标准模式通过下列几种文档类型声明开启：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

准标准模式通过过渡性文档类型（Transitional）和框架集文档类型（Frameset）来触发：

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

准标准模式与标准模式非常接近，很少需要区分。人们在说到“标准模式”时，可能指其中任何一个。而对文档模式的检测（本书后面会讨论）也不会区分它们。本书后面所说的标准模式，指的就是除混杂模式以外的模式。

<noscript>元素

针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案。最终，<noscript>元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容。虽然如今的浏览器已经 100%支持JavaScript，但对于禁用 JavaScript 的浏览器来说，这个元素仍然有它的用处。<noscript>元素可以包含任何可以出现在<body>中的 HTML 元素，<script>除外。在下列两种情况下，浏览器将显示包含在<noscript>中的内容：

? 浏览器不支持脚本；

? 浏览器对脚本的支持被关闭。任何一个条件被满足，包含在<noscript>中的内容就会被渲染。否则，浏览器不会渲染<noscript>中的内容。

下面是一个例子：

<!DOCTYPE html>

<html>

<head>

<title>Example HTML Page</title>

</head>

<body>

<noscript>

<p>This page requires a JavaScript-enabled browser.</p>

</noscript>

</body>

</html>

这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本，则用户永远不会看到它。

小结

JavaScript 是通过<script>元素插入到 HTML 页面中的。这个元素可用于把 JavaScript 代码嵌入到HTML 页面中，跟其他标记混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重点可以总结如下。

? 要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。

? 所有<script>元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下，包含在<script>元素中的代码必须严格按次序解释。

? 对不推迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签之前。

? 可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。

? 可以使用 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。

? 通过使用<noscript>元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内容都不会被渲染。

在线咨询

上一篇：Web前端设计-如何快速实现网站页面变灰？
下一篇：“大车”大梁开裂，服务站说不担心曝光

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JS｜常规函数、嵌套、匿名、字面函数、闭包及函数做为

1 常规函数

2 JS嵌套函数

3 JSt函数字面值

4 函数对象Function

5 匿名函数，也叫内联函数

6 闭包

7 内联函数作为对象的方法

8 常规函数做为对象的方法

9 对象字面量，也用匿名函数做为对象方法

ello, world！

<script>元素

标签位置

推迟使用脚本

异步执行脚本

动态加载脚本

XHTML中的变化

废弃的语法

行内代码与外部文件

文档模式

<noscript>元素

小结

您的项目需求