js 的介绍

JS是什么

JS是一种运行在客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能
浏览器就是一种运行JS脚本语言的客户端，JS的解释器被称为JS引擎，为浏览器的一部分

JS简史 ==（JS历史，了解为主，感兴趣的可以多看看）==

在WEB日益发展的同时，网页的大小和复杂性不断增加，受制于网速的限制，为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担，当时走在技术革新最前沿的 Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种简单的验证
- 简单概括：网页的功能越来越多，当时的网速又不行，一些常用的功能用当时的技术处理起来极其复杂，所以网景公司需要一个处理这些常用功能对性能影响更低的新语言
1995 年，就职于 Netscape 公司的布兰登·艾奇（Brendan Eich），开始着手为即将于 1996 年 2 月发布的 Netscape Navigator 2 浏览器开发一种名为 LiveScript 的脚本语言。为了尽快完成 LiveScript 的开发，Netscape 与 Sun 公司建立了一个开发联盟。在 Netscape Navigator 2 正式发布前夕，Netscape 为了搭上媒体热炒 Java 的顺风车，临时把 LiveScript 改名为 JavaScript。
- 简单概括：网景的布兰登·艾奇研发了一个新语言叫做 LiveScript （只用了10天）当时网景和 Sun 公司有合作关系，Sun 公司刚好新推出了一个叫做 Java 的语言很火，网景为了蹭热度就把 LiveScript 改名为了 JavaScript
- 所以 Java 和 JavaScript 没有关系，完全是两门不同的语言，它们的区别就像：周杰与周杰伦的区别一样
由于 JavaScript 1.0 获得的关注度越来越高，1996 年，微软就在其 Internet Explorer 3 中加入了名为 JScript 的 JavaScript 实现，这意味着有了两个不同的 JavaScript 版本，导致 JavaScript 没有一个标准化的语法和特性。
- 简单概括：JavaScript 火了后，微软在自家的 IE 浏览器中弄一个和 JavaScript 一样的 JScript，所以就有了两个不同的 JavaScript，导致没有一个标准化的语法和特性了
1997 年，以 JavaScript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufacturers Association）。该协会指定 39 号技术委员会（TC39，Technical Committee #39）负责“ 标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义”。TC39 由来自 Netscape、Sun、微软、Borland 及其他关注脚本语言发展的公司的程序员组成，他们经过数月的努力完成了 ECMA-262 标准，定义一种名为 ECMAScript 的新脚本语言。
- 为了解决上述问题欧洲计算机制造商协会 ECMA 制定了一个标准，定义了名为 ECMAScript 的新脚本语言，可以把 ECMAScript 是 JS 的一个规范

ECMAScript 发展过程

1998 年 6 月，ECMAScript 2.0 版发布。
1999 年 12 月，ECMAScript 3.0 版发布，成为 JavaScript 的通行标准，得到了广泛支持。
2007 年 10 月，ECMAScript 4.0 版草案发布，对 3.0 版做了大幅升级。草案发布后，由于 4.0 版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以 Yahoo、Microsoft、Google 为首的大公司，反对 JavaScript 的大幅升级，主张小幅改动；以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司，则坚持当前的草案。
2008 年 7 月，由于各方分歧太大，争论过于激进，ECMA 开会决定，中止 ECMAScript 4.0 的开发，将其中涉及现有功能改善的一小部分，发布为 ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1 就改名为 ECMAScript 5。
2009 年 12 月，ECMAScript 5.0 版正式发布。Harmony 项目则一分为二，一些较为可行的设想定名为 JavaScript.next 继续开发，后来演变成 ECMAScript 6；一些不是很成熟的设想，则被视为 JavaScript.next.next，在更远的将来再考虑推出。
2011 年 6 月，ECMAscript 5.1 版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。
2013 年 3 月，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript 7。
2013 年 12 月，ECMAScript 6 草案发布。然后是 12 个月的讨论期，听取各方反馈。
2015 年 6 月 17 日，ECMAScript 6 发布正式版本，即ECMAScript 2015。
从 2015 年以后，ECMA 开始每年发布一个小规模增量更新的升级版本，新版本将按照ECMAScript+年份的形式发布，截止目前，已经发布的版本包含 ECMAScript 2016、ECMAScript 2017、ECMAScript 2018、ECMAScript 2019、ECMAScript 2020、ECMAScript 2021、ECMAScript 2022，后续将继续发布新的版本。

JS 的组成

JavaScript 是由 ECMAScript，DOM 和 BOM 三者组成的。
1. ECMAScript: 定义了JavaScript 的语法规范,描述了语言的基本语法和数据类型
2. DOM (Document Object Model): 文档对象模型
  - 有一套成熟的可以操作 ==页面元素的 API==，通过 DOM 可以操作页面中的元素。比如：增加个 div，减少个 div，给 div 换个位置等
    - API:
      - application programming interface 的简写;
      - 翻译：应用程序编程接口；大白话：别人写好的代码，或者编译好的程序，提供给你使用，就叫作api
3. BOM (Browser Object Model): 浏览器对象模型
  - 有一套成熟的可以操作 ==浏览器的 API==，通过 BOM 可以操作浏览器。比如：弹出框、浏览器跳转、获取分辨率等

js 的三种书写方式

行内式

<input type="button" value="按钮" onclick="alert('hello world')" />

内嵌式

<body>
    <script>
        alert('hello world')
    </script>
</body>

外链式
```
<script src="main.js"></script>
```

js 定义变量

什么是变量？

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据；
- 翻译为大白话，我有一个东西需要暂时存储起来，比如说就是一个数字 100，我把它存放到了变量 a 中，我后续想要使用他的时候就可以直接通过变量 a 获取到数字 100
变量其实就相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据。

为什么要定义变量？

使用变量可以方便的获取或者修改内存中的数据

如何定义变量

使用一个 var 的关键字进行定义，后面必须加一个空格，空格后面自定义变量名

var a;
var b;
var c;

变量赋值

变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值，但可以存储数据了
变量赋值的方式：通过等号 = 赋值，等号右边的值赋值给左边的变量 ==（等号在 JS 中叫做赋值号；书写时，等号 = 两侧习惯书写一个空格）==

// 变量定义
var a;
// 变量赋值
a = 1;
// 变量定义并赋值
var b = 2;

使用变量

直接写变量名即可使用变量；变量在使用前，必须先有定义，如果没有定义，会出现引用错误

课堂案例

交换变量, 需求: 交换两个变量所保存的值

变量命名规则（必须遵守，不遵守会报错）

由字母、数字、下划线、$符号组成，不能以数字开头
字母区分大小写
不能是关键字和保留字
- 关键字指的是js中有特殊功能的小词语，比如var、for等
- 保留字指的是现在没有特殊功能，但是将来新语法中有可能作为关键字使用

变量命名规范（建议遵守的，不遵守不会报错）

变量名必须有意义
遵守驼峰命名法

js 数据类型

JS中的值，无论是字面量还是变量，都有明确的类型

数据类型分类(以基本数据类型为主)
- Number 数字类型
  - 不区分整数、浮点数、特殊值，都是 Number 类型
- String 字符串类型
  - 所有的字符串都是 String 类型
- undefined undefined类型
  - ndefined本身就是一个数据，表示未定义，变量只声明不赋值的时候，值默认是 undefined
- Boolean 布尔类型
  - Boolean 字面量：只有 true 和 false 两个字面量的值，必须是小写字母
  - 计算机内部存储：true 为 1，false 为 0
- null null类型
  - null 本身就是一个数据
  - 从逻辑角度，null 值表示一个空对象指针
  - 如果定义的变量准备在将来用于保存对象，最好该变量初始化为 null
- Object 对象类型（后续课程详细讲解）

数据类型检测

为什么要有数据类型检测？
- JS语言是一门动态类型的语言，变量并没有一个单独的数据类型，而是会随着内部存储数据的变化，数据类型也会发生变化
- 变量的数据类型，与内部存储数据有关
- 将来使用变量时，需要知道内部存储的数据是什么类型，避免程序出错
使用 typeof 的方法进行数据检测
- 检测方式：在 typeof 后面加小括号执行，将要检测的数据放在小括号内部

数据类型转换(转数值 / 转字符串 / 转布尔)

转数值

Number(数据)方法
- 转型函数Number()可以用于任何数据类型，将其他数据类型转为数字
- 字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN
- 布尔值：true转为1，false转为0
- undefined：转为NaN
- null：转为0
parseInt()方法：字符串转整数方法
- 对浮点数进行取整操作
  - 对数字取整直接舍弃小数部分，只保留整数
- 将字符串转为整数数字
  - 将字符串转为整数数字，也包含取整功能
- 字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分
- 如果不是数字打头的字符串，会转换为NaN
parseFloat()方法：字符串转浮点数方法
- 将字符串转为浮点数数字
- 满足浮点数数字字符必须在字符串开始，如果不在开始返回值都是NaN

转字符串

变量.toString()方法
String(变量)方法，有些值没有toString()，这个时候可以使用String()。比如undefined和null
+ 号拼接字符串方式
- num + “” ,当 + 两边一个操作符是字符串类型，一个操作符是其他类型的时候，会先把其他类型转换成字符串在进行字符串拼接，返回字符串

转布尔

Boolean(变量)方法
- 转型函数Boolean()可以用于任何数据类型，将其他数据类型转为布尔类型的值
- 转为false：NaN、0、“”空字符串、null、undefined
- 转为true：非0 非NaN数字、非空字符串

js 运算符

什么是运算符？
- 也叫操作符，是 JS 中发起运算最简单的方式，例如： 5 + 6
- 表达式的组成包含操作数和操作符，表达式会得到一个结果，然后用结果参与程序

JS 运算符分类

算数运算符( + / - / * / / / % )
- 运算顺序与数学中的运算顺序一致，先乘除取余，后加减，有小括号先算小括号
赋值运算符( = / += / -= / *= / /= / %= )
比较运算符( > / < / >= / <= / == / === / != / !== )
- 比较结果只会返回一个布尔类型值，true 或者 false
逻辑运算符( && / || / ! )
自增自减运算符( ++ / -- )

初识JS

js 的介绍

JS是什么

JS简史 ==（JS历史，了解为主，感兴趣的可以多看看）==

ECMAScript 发展过程

JS 的组成

js 的三种书写方式

js 定义变量

什么是变量？

为什么要定义变量？

如何定义变量

变量赋值

使用变量

课堂案例

变量命名规则（必须遵守，不遵守会报错）

变量命名规范（建议遵守的，不遵守不会报错）

js 数据类型

数据类型检测

数据类型转换(转数值 / 转字符串 / 转布尔)

转数值

转字符串

转布尔

js 运算符

JS 运算符分类