加入VIP
注册
> 所有资源 学员日志 | 实习实训

李莎_20210115李莎

学员日志 816 4年前 0 云创动力

知识点总结

## JavaScript的学习

1 DOM编程

1.1 DOM编程概述

1.1.1 DOM编程的基本概念

Document Object Model 文档对象模型，用于操作网页中元素

1.1.2 DOM编程的作用

每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树，我们通过编写JS代码就可以访问这棵树上任何一个节点，并且对节点进行操作。通过 DOM模型，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。新创建的元素对象，要挂到DOM树上才可以在网页上显示出来。

2 JavaScript概述

2.1 JavaScript的作用

| 技术 | 作用 |
|--|--|
| HTML | 用于创建网页的结构 |
|CSS | 对页面进行美化 |
|javaScript | 用于与用户进行交互 |

2.2 JavaScript的历史

1995 年 2 月，Netscape 公司发布 Netscape Navigator 2 浏览器，并在这个浏览器中免费提供了一个开发工具——LiveScript。由于当时 Java 比较流行，Netscape管理层希望它外观看起来像java，因此便把 LiveScript 改名为 JavaScript,但实际上它的语法风格与其他语言更像。这也是最初的 JavaScript 1.0版本。
由于 JavaScript 1.0 很受欢迎，Netscape 在 Netscape Navigator 3 中又发布了 JavaScript 1.1 版本。不久，微软在 Internet Explorer 3 中也加入了脚本编程功能。为了避免与 Netscape 的 JavaScript 产生纠纷，微软特意将其命名为 JScript。
1997 年，欧洲计算机制造商协会（ECMA）以 JavaScript 1.1 为基础制订了脚本语言标准——ECMA-262，并命名为 ECMAScript。
1998 年，国际标准化组织和国际电工委员会（ISO/IEC）采用了 ECMAScript 标准（即 ISO/IEC-16262）。自此，浏览器厂商就以 ECMAScript 作为各自 JavaScript 实现的规范标准。JavaScript 正式从各自为政走向了规范统一。

2.3 ECMAScript 起源

1997 年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了脚本语言的实现标准，并将这种语言命名为 ECMAScript。这个版本就是 ECMAScript 1.0 版。
之所以不叫 JavaScript，主要有以下两个原因：

  • 商标限制。Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法使用JavaScript 这个名字，而且 JavaScript 己经被 Netscape 公司注册为商标。
  • 体现公益性。该标准的制订者是 ECMA 组织，而不是 Netscape 公司，这样有利于确保规范的开放性和中立性。

简单概括，ECMAScript 是 JavaScript 语言的规范标准，JavaScript 是 ECMAScript 的一种实现。注意，这两个词在一般语境中是可以互换的。
以下是JS语言在所有语言中的排行榜。
2020 年 7 月编程语言排行榜

2.4 JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript 灵活轻巧，兼顾函数式编程和面向对象编程。
Java 与 JavaScript 对比：

| 特点 | java | javaScript |
|--|--|--|
| 面向对象 | 完全面向对象的语言：继承、封装、多态 | 基于对象的语言，不完全符合面向对象的思想 |
| 运行方式 | 运行过程需要先生成字节码文件 | 解释型语言，不会生成中间文件，解释一定行数，再执行。|
| 跨平台 | 安装了JVM就可以运行在不同的操作系统中 | 只要有浏览器的地方就可以运行 |
| 大小写 | 区分大小写 | 区分大小写 |
| 数据类型 | 强类型语言，不同的数据类型有严格区分 | 弱类型语言，不同类型的数据可以直接赋值给同一个变量 |

2.5 JavaScript的语法组成

ECMAScript 是 JavaScript 的标准，但它并不等同于 JavaScript，也不是唯一被标准化的规范。
实际上，一个完整的 JavaScript 实现由以下 3 个不同部分组成：
| 组成部分 | 作用 |
|--|--|
| ECMA Script | 构成了JS核心的语法基础|
| BOM | Browser Object Model 浏览器对象模型，用来操作客户端和浏览器窗口上的对象 |
| DOM | Document Object Model 文档对象模型，用来操作网页中的元素 |

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。
Java（由 Sun 发明）是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳

2.5.1 ECMAScript 版本

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化
| 年份 | 名称 | 描述 |
|--|--|--|
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 | 添加正则表达式 添加try/catch |
| | ECMAScript 4 | 没有发布 |
| 2009 | ECMAScript 5 | 添加“strict mode”，严格模式 添加JSON支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 | 增加指数运算符(**) 增加 Array.prototype.includes |

ECMAScript 6 也称为 ECMAScript 2015。
ECMAScript 7 也称为 ECMAScript 2016。

2.6 浏览器支持

目前 5 大主流浏览器都支持 ECMAScript 5，具体说明如下：

  • Opera 11.60+
  • IE 9+
  • Firefox 4+
  • Safari 5.1+
  • Chrome 13+
    练习：编写第一个JavaScript程序
    javascript
    <script type="text/javascript">
    alert("我的第一个 JavaScript 程序");
    </script>

    ### 3 JavaScript的基础语法
    #### 3.1 JavaScript的编写方式
  • 写在HTML内部的脚本,在 <script> 标签体中编写js代码，脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
    html
    <head>
    <script type="text/javascript">
    // JavaScript 代码
    </script>
    </head>

    html
    <body>
    <script type="text/javascript">
    // JavaScript 代码
    </script>
    </body>
  • 以js文件的形式单独存在HTML的外部，使用的时候使用script标签的src属性导入进来即可。
    html
    <script src="myScript.js" type="text/javascript"></scrip>

    myScript.js 是一个 .js 格式的 JavaScript 文件。使用任何文本编辑器都可以编辑
    ##### 3.1.1 < script> 标签:

  • <script> 中的src属性和type属性：

    • src：要导入的外部JS文件,一旦导入了其他的js文件,此标签体中的js代码就失效了
    • type： 指定脚本的类型，固定值：text/javascript
  1. <script> 标签个数： 在一个HTML网页中可以出现多个script标签，每个标签中的脚本都会依次执行。
  2. 出现的位置： 可以出现在网页中的任意位置，甚至是html标签之外,一般根据情况选择，最常用的是出现在 </body> 前
  3. 关于语句后面的分号： 如果一条语句一行，可以省略分号，但不建议省略。

注意：

  1. 使用＜script＞标签包含外部 JavaScript 文件时，默认文件类型为 Javascript。因此，不管加载的文件扩展名是不是 .js，浏览器都会按 JavaScript 脚本来解析。
  2. 定义 src 属性的 <script> 标签不应再包含 JavaScript 代码。如果嵌入了代码，则只会下载并执行外部 JavaScript 文件，嵌入代码将被忽略。
3.1.2 JS文件延迟和异步加载

执行并观察如下代码：

    <!DOCTYPE html> 
    <script> 
        alert("顶部脚本"); 
    </script> 
    <html> 
    <head>
        <meta charset="UTF-8"> 
        <title>test</title> 
        <script> 
            alert("头部脚本"); 
        </script> 
    </head> 
    <body>
        <h1>网页标题</h1> 
        <script> 
            alert("页面脚本"); 
        </script> 
        <p>正文内容</p> 
    </body> 
    <script> 
        alert("底部脚本"); 
    </script> 
    </html>

在浏览器中浏览上面示例网页，首先弹出提示文本“顶部脚本”，然后显示网页标题“test”，接着弹出提示文本“头部脚本”，下面才显示一级标题文本“网页标题”，继续弹出提示文本“页面脚本”， 接着显示段落文本“正文内容”，最后弹出提示文本“底部脚本”。
对于导入的 JavaScript 文件，也将按照 ＜script> 标签在文档中出现的顺序来执行，而且执行过程是文档解析的一部分，不会单独解析或者延期执行。
—般情况下，在文档的 <head> 标签中包含 JavaScript 脚本，或者导入的 JavaScript 文件。这意味着必须等到全部 JavaScript 代码都被加载、解析和执行完以后，才能继续解析后面的 HTML 部分。如果加载的 JavaScript 文件很大， HTML 文档解析就容易出现延迟，网页会出现留白现象。
为了避免这个问题，在开发 Web 应用程序时，建议把导入 JavaScript 文件的操作放在 后面，让浏览器先将网页内容解析并呈现出来后，再去加载JavaScript 文件，以便加快网页响应速度。
如果想改变 JavaScript 文件的执行顺序，可以给 <script> 标签增加 defer 或者 async 属性

3.1.2.1 延迟执行 JavaScript 文件

<script> 标签有一个布尔型属性 defer，设置该属性能够将 JavaScript 文件延迟到页面解析完毕后再运行。

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

注意：defer 属性适用于外部 JavaScript 文件（只有在使用 src 属性时），不适用于 <script> 签包含的 JavaScript 脚本。

在部分网站上你们会发现对于 defer 属性的描述是只有在 IE 浏览器中才生效，这个说法是错误的。

3.1.2.2 异步加载JavaScript文件

在默认情况下，网页都是同步加载外部 JavaScript 文件的，如果 JavaScript 文件比较大， 就会影响后面 HTML 代码的解析。上面提到一种解决方法：就是最后加载 JavaScript 文件。
现在可以为 <script> 标签设置 async 属性，让浏览器异步加载 JavaScript 文件，即在加载 JavaScript文件时，浏览器不会暂停，而是继续解析。这样能节省时间，提升响应速度。

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

注意：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
async 是 HTML5 新增的布尔型属性，通过设置 async 属性，就不用考虑 <script> 标签的放置位置，用户可以根据习惯继续把很多大型 JavaScript 库文件放在 <head> 标签内。

3.1.3 JavaScript代码块

代码块就是使用 <script> 标签包含的 JavaScript 代码段。

3.1.4 JavaScript字符编码

JavaScript 遵循 Unicode 字符编码规则。Unicode 字符集中每个字符使用 2 个字节来表示，这意味着用户可以使用中文来命名 Java 变量。
Unicode 是 Latin-1 字符集的超集，编码数目达到百万级；Latin-1是 ASCII 字符集的扩展，包含 256 个拉丁字母； ASCII 字符集包含 128 个基本字符，即常用英文字母和符号。

var 书名="《JavaScript从入门到精通》", 
    姓名="张三"; 
    function 彩蛋(谁){ 
        document.write("<h1>" + 谁 + "</h1><p> 欢迎你学习 " + 书名 + "。</p>"); 
    }
    彩蛋(姓名);

注意：在 JavaScript第 1、2 版本中，仅支持 ASCII 字符编码，Unicode 字符只能出现在注释或者引号包含的字符串中。考虑到 JavaScript 版本的兼容性以及开发习惯，不建议使用双字节的中文字符命名变量或函数名。

3.2 JavaScript中的几个概念

JavaScript遵循 ECMA-262 规范，目前其最新版是 ECMAScript 2018，而获得所有主流浏览器完全支持的则是 ECMAScript 5。我们将以ECMAScript 5版本为基础，兼顾 ECMAScript 6 版本中获得较大支持的新特性进行介绍

3.2.1 基本词法

JavaScript 语法就是指构成合法的 JavaScript 程序的所有规则和特征的集合，包括词法和句法。简单描述如下：

  • 词法定义了 JavaScript 的基本名词规范，包括字符编码、命名规则、标识符、关键字、注释规则、 运算符和分隔符等。
  • 句法定义了 JavaScript的基本运算逻辑和程序结构，包括短语、句子和代码段的基本规则，如表达式、语句和程序结构等。
    ##### 3.2.2 区分大小写
    JavaScript 严格区分大小写。为了避免输入混乱和语法错误，建议采用小写字符编写代码。在以下特殊情况下可以使用大写形式：
  • 构造函数的首字母建议大写。构造函数不同于普通函数
    javascript
    new Date(); //获取当前日期和时间
  • 如果标识符由多个单词组成，可以考虑使用骆驼命名法——除首个单词外，后面单词的首字母大写
    javascript
    typeOf();
    myGirlFriend;

    上述都是约定俗成的一般习惯，不构成强制性要求，用户可以根据个人习惯进行命名

心得体会

​ 今天我们学习了JavaScript中的DOM编程，和JavaScript的概述以及基础语法。并练习了相关操作，主要有以下几点内容：

​ 一、首先是DOM编程，DOM即Document Object Model 文档对象模型，用于操作网页中元素。我们学习了通过DOM编程查找各种节点，并练习了通过JavaScript实现表单中复选框全选/全不选，反选以及商品结算的功能，还实现了触及鼠标，显示♥的功能，以及实现鼠标放到表格上，表格样式改变，鼠标离开表格，表格又恢复原来样式的功能。

​ 二、我们还了解了JavaScript的作用、历史、起源、版本以及各种语法组成，对JavaScript的基础语法进一步的了解，通过此种语言实现延迟执行、异步加载JavaScript文件的操作。

​ 每天都收获满满，都能了解到一些以前没有接触过的操作。每天进步一小步，争取来云创动力学习的每一天都不辜负。

从青春起步，向梦想进发。

微海报

热门资源

IT特种兵 云创动力前端开发工程师 云创动力后端开发工程师 云创集训 冬令营 开发喵 教育生态服务商

相关推荐

评论