JavaScript高程设计第二章---HTML中的JavaScript

最新推荐文章于 2023-02-21 18:53:59 发布

聊逍遥兮容与，时不可兮骤得

最新推荐文章于 2023-02-21 18:53:59 发布

阅读量168

点赞数

分类专栏： Web前端之JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44649697/article/details/117603194

版权

Web前端之JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

前言
一、<script>元素
二、行内代码与外部文件
三、文档模式
四、<noscript>元素

前言

通过前面第一章的学习，我对JavaScript有了一定的了解和认识。紧接着我又学习了第二章的内容，下面我就总结一下里面的知识点，希望能帮助到大家。

提示：以下是本篇文章正文内容，下面案例可供参考

一、<script>元素

1.<script>元素由来和属性

将JavaScript插入HTML的主要方法就是使用<script>元素。这个元素由网景公司创造，最早在Netscape Navigator 2中实现。后来，正式加入到HTML规范。<script>元素有以下8个属性：

async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚加载。只对外部文件有效。
charset：可选。使用src属性指定的代码字符集。这个属性很少用，因为大多数浏览器不在乎它的值。
crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin="anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
defer：可选。表示在文档解析和显示完成后再执行脚本是没有问题的。只对外部文件有效。在IE7甚至更早的版本中，也可以指定这个属性。
integrity：可选。允许比对接收到的资源和指定的加密名以验证子资源完整性（SRI，SubResource Intergrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN, Content Delivery Network）不会提供恶意内容。
language：废弃。最初用于表示代码块中的脚本语言。大多数浏览器都会忽略这个属性，不再使用它。
src：可选。表示包含要执行的外部代码文件。
type：可选。代替language，表示代码块中脚本语言的内容类型（也称MIME类型）。按照惯例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript"都已经废弃了。JavaScript文件的MIME类型通常是"application/x-javascript"，不过给type属性这个值有可能导致脚本被忽略。在非IE的浏览器中有效的其他值还有"application/javascript"和"application/ecmascript"。如果这个值是module，则代码会被当成ES6模块，而且只有这时候代码中才能出现import和export关键字。

2.<script>元素使用方式

直接在网页中嵌入JavaScript代码

<script>
function Say() {
	console.log("hello");
}
</script>
// 使用行内JavaScript代码时，不能出现字符串</script>;如果非要使用</script>，则应使用转义字符\
<script>
function Say() {
	console.log("<\/script>");
}
</script>

通过<script>元素引入外部js文件

<script src="tool.js"></script>
// <script>和</script>之间不能再有JavaScript代码，如果中间再有代码，会忽略里面的代码，只执行外部文件里面的代码。

<script src="tool.js"/>
// 此代码不可以在HTML文件中使用，因为它是无效的HTML，IE浏览器无法正常处理！

<script src="http://www.somewhere.com/file.js"></script>
// <script>元素的src属性值可以是一个完整的URL，而且这个URL指向的资源可以跟包含它的HTML页面不在同一个域中

浏览器在解析这个资源时，会向src指定的路径发送一条GET请求，以取得相应资源，假定是一个JavaScript文件。这个初始的请求不受同源策略的限制，但返回并被执行的JavaScript文件受限制。当然，这个请求仍然受HTTP/HTTPS协议限制。

来自外部域的代码会被当成加载他的页面的一部分来加载和解释，从而使我们可以通过不同的域分发JavaScript。不过，引用了放在别人服务器上的JavaScript文件时要格外小心，因为恶意的程序员随时可能替换这个文件。在包含外部域的JavaScript文件时，要确保该域是自己所有的，或者该域是一个可信的来源。

3.标签位置

以前所有的<script>元素都被放在<head>标签内。如下面例子：

    <! DOCTYPE html>
    <html>
      <head>
      <title>Example HTML Page</title>
      <script src="example1.js"></script>
      <script src="example2.js"></script>
      </head>
      <body>
      <! -- 这里是页面内容 -->
      </body>
    </html>

这种做法意味着必须把所有的JavaScript代码都下载、解析、解释完成后，才能渲染页面。如果遇到含有过多JavaScript的页面，就会造成页面渲染的明显延迟，在此期间浏览器窗口会出现完全空白。为了解决此问题，先代Web应用程序通常将所有的JavaScript代码放在<body>元素中的页面内容后面：

    <! DOCTYPE html>
    <html>
      <head>
      <title>Example HTML Page</title>
      </head>
      <body>
      	<! -- 这里是页面内容 -->
      	<script src="example1.js"></script>
      	<script src="example2.js"></script>
      </body>
    </html>

4.推迟执行脚本

<! DOCTYPE html>
    <html>
      <head>
      	<title>Example HTML Page</title>
      	<script defer src="example1.js"></script>
      	<script defer src="example2.js"></script>
      </head>
      <body>
      	<! -- 这里是页面内容 -->
      	// 在XHTML里面，指定defer属性，需要这样指定defer = "defer"
      </body>
    </html>

5.异步执行脚本

<! DOCTYPE html>
    <html>
      <head>
      	<title>Example HTML Page</title>
      	<script async src="example1.js"></script>
      	<script async src="example2.js"></script>
      </head>
      <body>
      	<! -- 这里是页面内容 -->
      	// 在XHTML里面，指定async属性，需要这样指定async = "async"
      </body>
    </html>

6.动态加载脚本

因为JavaScript可以使用DOM API，所以通过向DOM中动态添加script元素同样可以加载指定的脚本。只需要创建一个script元素并将其添加到DOM即可。

let script = document.createElement('script');
script.src = 'tool.js';
document.head.appendChild(script);

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

let script = document.createElement('script');
script.src = 'tool.js';
script.async = false;
document.head.appendChild(script);

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

<link rel="preload" href="tool.js">

7.XHTML中的变化

可扩展超文本标记语言（XHTML, Extensible HyperText Markup Language）是将HTML作为XML的应用重新包装的结果。与HTML不同，在XHTML中使用JavaScript必须指定type属性且值为text/javascript, HTML中则可以没有这个属性。

二、行内代码与外部文件

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

可维护性。JavaScript代码如果分散到很多HTML页面，会导致维护困难。而用一个目录保存所有JavaScript文件，则更容易维护，这样开发者就可以独立于使用它们的HTML页面来编辑代码。
缓存。浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。
适应未来。通过把JavaScript放到外部文件中，就不必考虑用XHTML或前面提到的注释黑科技。包含外部JavaScript文件的语法在HTML和XHTML中是一样的。

三、文档模式

IE5.5发明了文档模式的概念，即可以使用doctype切换文档模式。最初的文档模式有两种：混杂模式（quirks mode）和标准模式（standards mode）。前者让IE像IE5一样（支持一些非标准的特性），后者让IE具有兼容标准的行为。

虽然这两种模式的主要区别只体现在通过CSS渲染的内容方面，但对JavaScript也有一些关联影响，或称为副作用。

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

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

标准模式通过下列几种文档类型声明开启：

    <! -- HTML 4.01 Strict -->
    <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <! -- XHTML 1.0 Strict -->
    <! DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <! -- HTML5-->
    <! DOCTYPE html>

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

    <! -- HTML 4.01 Transitional -->
    <! DOCTYPE HTML PUBLIC
    "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <! -- HTML 4.01 Frameset -->
    <! DOCTYPE HTML PUBLIC
    "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
    <! -- XHTML 1.0 Transitional -->
    <! DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <! -- XHTML 1.0 Frameset -->
    <! DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

四、<noscript>元素

针对早期浏览器不支持JavaScript的问题，需要一个页面优雅降级的处理方案。最终，元素出现，被用于给不支持JavaScript的浏览器提供替代内容。

<noscript>元素可以包含任何可以出现在中的HTML元素，<script>除外。在下列两种情况下，浏览器将显示包含在中的内容：

浏览器不支持脚本；
浏览器对脚本的支持被关闭。

任何一个条件被满足，包含在<noscript>中的内容就会被渲染。否则，浏览器不会渲染中的内容。

    <! DOCTYPE html>
    <html>
      <head>
      <title>Example HTML Page</title>
      <script defer="defer" src="example1.js"></script>
      <script defer="defer" src="example2.js"></script>
      </head>
      <body>
      <noscript>
        <p>This page requires a JavaScript-enabled browser.</p>
      </noscript>
      </body>
    </html>

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

聊逍遥兮容与，时不可兮骤得

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JavaScript高程设计第二章---HTML中的JavaScript

文章目录前言一、<script>元素1.<script>元素由来和属性2.<script>元素使用方式3.标签位置4.推迟执行脚本5.异步执行脚本6.动态加载脚本7.XHTML中的变化二、行内代码与外部文件三、文档模式四、<noscript>元素前言通过前面第一章的学习，我对JavaScript有了一定的了解和认识。紧接着我又学习了第二章的内容，下面我就总结一下里面的知识点，希望能帮助到大家。提示：以下是本篇文章正文内容，下面案例可供参考一、&lt
复制链接

扫一扫