李莎_20210115李莎

知识点总结

## 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文件的操作。

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

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1