【JS基础】（一）JavaScript简介及在HTML中使用JavaScript

本文链接：https://blog.csdn.net/hutubiancheng/article/details/124494411

（一）JavaScript简介

1. JavaScript的实现

JavaScript 是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：

(1) 核心（ECMAScript），由 ECMA-262 定义，提供核心语言功能，描述了该语言的语法和基本对象；
规定了该语言的以下组成部分：

语法
类型
语句
关键字
保留字
操作符
对象

(2) 文档对象模型（DOM），提供访问和操作网页内容的方法和接口；

DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点。

(3) 浏览器对象模型（BOM），提供与浏览器交互的方法和接口。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

弹出新浏览器窗口的功能；
移动、缩放和关闭浏览器窗口的功能；
提供浏览器详细信息的 navigator 对象；
提供浏览器所加载页面的详细信息的 location 对象；
提供用户显示器分辨率详细信息的 screen 对象；
对 cookies 的支持；
像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象。

2. ECMAScript与JavaScript的关系

ECMAScript是JavaScript语言的国际标准，为JavaScript提供核心语言功能；JavaScript是ECMAScript的实现。

（二）在HTML中使用JavaScript

1. 使用<script>元素

(1) <script>的属性

async：（可选）表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
src：（可选）表示包含要执行代码的外部文件。
charset：（可选）表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
defer：（可选）表示脚本可以延迟到文档完全被解析显示之后再执行。只对外部脚本文件有效。
language（已废弃）用于表示编写代码使用的脚本语言。
type：（可选）可以看作是language的替代属性：表示编写代码使用的脚本语言的内容类型（也称MIME类型）。

(2) 使用<script>元素的方式

直接在页面中页面中嵌入JavaScript代码

在使用<script>元素嵌入JavaScript时，只须为<script>指定type属性。然后把JavaScript代码直接放在元素内部即可。

<script type="text/javascript">//此为type属性的一个默认值
    function  sayHi(){
        alert("Hi!");
        
        // alert("</script>"); 
        // 代码中不能出现"</script>"字符串，否则为错误；
        
        alert("<\/script>"); 
        // 若遇到可通过转义字符"\"解决这个问题。
    }
</script>

包含外部JavaScript文件

如果要通过<script>元素来包含外部JavaScript文件，那么src属性是必需的。其属性值是一个指向外部JavaScript文件的URL，这个文件既可以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。。

<script type="text/javascript"  src="example.js"></script>

带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

(3) 延迟脚本(defer属性)

在<script>元素中设置defer属性，脚本会被延迟到整个页面都解析完毕后再运行，相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html>
   <head>
      <title>Example HTML Page</title>
      <!--虽然放在了<head>中，但将延迟到浏览器遇到</html>后再执行-->
      <!--第一个延迟脚本会先于第二个延迟脚本执行-->
      <script type="text/javascript" defer="defer" src="example1.js"></script>
      <script type="text/jaavascript" defer="defer" src="example2.js"></script>
   </head>
   <body>
   <!--这里放页面内容-->
   </body>
</html>

把延迟脚本放在页面底部是最佳选择

(4) 异步脚本(async属性)

async属性告诉浏览器立即下载文件，且标记为async的脚本并不保证按照指定它们的先后顺序执行。

<!DOCTYPE html>
<html>
   <head>
      <title>Example HTML Page</title>
      <!--第二个脚本文件可能会在第一个脚本文件之前执行-->
      <script type="text/javascript" async src="example1.js"></script>
      <script type="text/jaavascript" async src="example2.js"></script>
   </head>
   <body>
   <!--这里放页面内容-->
   </body>
</html>

指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。

JavaScript解析顺序

所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用 defer 和 async 属性的情况下，只有在解析完前面<script>元素中的代码之后，才会开始解析后面 <script>元素中的代码。
由于浏览器会先解析完不使用defer属性的<script>元素中的代码，然后再解析后面的内容，所以一般应该把<script>元素放在页面最后，即主要内容后面，</body>标签前面。

嵌入代码和外部文件

推荐使用外部文件来包含 JavaScript 代码，有以下优点：

可维护性：把所有 JavaScript文件都放在一个文件夹中，更易于维护。
可缓存：浏览器能够根据具体的设置缓存链接的所有外部 JavaScript 文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。
适应未来