【JavaScript】入门篇

最新推荐文章于 2024-09-13 08:33:26 发布

JPengp

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量592

点赞数 6

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

本文链接：https://blog.csdn.net/JPengp/article/details/126921439

版权

JavaScript 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

第一章 JavaScript简介

1.1、什么是JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

1.2、JavaScript实现

核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）

我们所要学习的内容就是这三部分，它们具体的含义后边章节会具体介绍。

1.2.1、 ECMAScript

ECMAScript是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言。ECMAScript最先被设计成一种Web脚本语言，用来支持Web页面的动态表现以及为基于Web的客户机—服务器架构提供服务器端的计算能力，Web浏览器只是ECMAScript实现可能存在的一种宿主环境，宿主环境提供ECMAScript的基准实现与环境自身交互必需的扩展。扩展（比如DOM）使用ECMAScript核心类型和语法。但作为一种脚本语言， ECMAScript具备同其他脚本语言一样的性质，即“用来操纵、定制一个已存在系统所提供的功能，以及对其进行自动化”。

1.2.2、DOM

文档对象模型（DOM，Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的XML。DOM将整个页面抽象为一组分层节点。HTML或XML页面的每个组成部分都是一种节点，包含不同的数据。比如下面的HTML页面：

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API，可以轻松的删除、添加、替换、修改节点。

1.2.3、BOM

浏览器对象模型（BOM）API，BOM主要针对浏览器窗口和子窗口（frame），不过人们通常会把任何特定于浏览器的扩展都归在BOM的范畴内。比如，以下的一些扩展

弹出新浏览器窗口的能力；
移动、缩放和关闭浏览器窗口的能力；
navigator对象，提供关于浏览器的详尽信息；
location对象，提供浏览器加载页面的详尽信息；
screen对象，提供关于用户屏幕分辨率的详尽信息；
performance对象，提供浏览器内存占用、导航行为和时间统计的详尽信息；
对cookie的支持；
其他自定义对象，如XMLHttpRequest和IE的ActiveXObject

第二章 JavaScript的使用

2.1、<script>元素

将JavaScript插入HTML的主要方法是使用<script>元素，<script>元素有以下8个属性。

属性名	是否可选	功能
src	可选	表示包含要执行代码的外部文件。
async	可选	表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
charset	可选	使用src属性指定的代码字符集。这个属性很少使用，因为大多数浏览器并不在乎它的值。
crossorigin	可选	配置相关请求的CORS（跨源资源共享）设置。默认不适用CORS。crossorigin="anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
defer	可选	表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
integrity	可选	允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresourece Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。
language	废弃	最初用于表示代码块中的脚本语言（如"JavaScript"、"JavaScript1.2"或"VBScript"）。大多数浏览器都会忽略这个属性，不应该再使用它。
type	可选	代替language，表示代码块中的脚本语言的内容类型（也称MIME类型）。如果这个值是module，则代码会被当做ES6模块，而且只有这时候代码中才能出现import和export关键字。

2.2、<script>的使用方式

直接在网页中嵌入JavaScript代码
通过外部JavaScript文件引入

2.2.1、标签引入

要嵌入行内JavaScript代码，直接把代码放在<script>元素中就行：

<script>
    function sayHi(){
        console.log("Hi!");
    }
</script>

包含在<script>内的代码会被从上到下解释。在上面的例子中，被解释的是一个函数定义，并且该函数会被保留在解释器环境中。在<script>元素中的代码被计算完成之前页面的其余内容不会被加载，也不会被显示。

2.2.2、文件引入

包含在外部文件中的JavaScript，就必须使用src属性。这个属性的值是一个URL，指向包含JavaScript代码的文件，比如：

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

这个例子在页面中加载了一个名为 example.js 的外部文件。文件本身只需包含要放在<script>的起始及结束标签中的JavaScript代码。与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。（阻塞时间也包含下载文件的时间。）

2.2.3、标签位置

过去，所有的<script>元素都被放在页面的<head>标签内，如下面的例子所示：

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

主要目的时把外部的CSS 和 JavaScript文件都集中放到一起。这种做法意味着必须把所有的JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）对于需要很多JavaScript的页面，会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。

解决办法：将所有JavaScript引用放在<body> 元素的页面内容后面

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

这样一来，页面会在处理JavaScript代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白的时间更短了

2.2.4、推迟执行脚本

defer属性在脚本执行的时候不会改变页面的结构，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素上设置defer属性，相当于告诉浏览器立即下载，但延迟执行。示例代码如下：

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

虽然这个例子中的<script>元素包含在页面的<head>中，但它们会在浏览器解析到结束的</html>标签后才会执行，HTML5规范要求脚本应该按照它们出现的顺序执行。

2.2.5、异步执行脚本

HTML5为<script>元素定义了async属性。从改变脚本处理方式上看，async属性与defer类似。当然，它们两者也都只适用于外部脚本，都会告诉浏览器立即开始下载。不过，与defer 不同的是，标记为async的脚本并不保证能按照它们出现的次序执行，示例代码如下：

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

在这个例子中，第二个脚本可能先于第一个脚本执行。因此，重点在于它们之间没有依赖关系。给脚本添加async属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改DOM。

2.2.6、动态加载脚本

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

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

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

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

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

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

2.3、行内代码与外部文件

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

可维护性：JavaScript代码如果分散到很多HTML页面，会导致维护困难。而用一个目录保存所有的JavaScript文件，则更容易维护，这样开发者就可以独立于使用它们的HTML页面来编辑代码。
缓存：浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，这意味着如果两个页面都用到同一个文件，该文件只需要下载一次。这最终意味着页面加载更快。