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的三种书写方式

行内式:

<div onclick="alert('行内样式')">弹出框</div>

内嵌式:

在body的标签尾部书写<script></script>

外链式:

<script src="路径地址"></script>

JS定义变量

什么是变量?

变量是计算机中存储数据的一个标识符,通过这个标识符可以找到内存中存储的数据
变量就相当于一个容器,内部可以存储任何类型的值,使用变量的时候,用的是内部储存的数据

为什么要定义变量？

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

如何定义变量

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

var num1;
var num2;
var num3;

变量赋值

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

var = num;  //定义变量但未赋值
num = 100;  //给定义好的变量进行赋值操作
var num = 100;  //变量定义并赋值

使用变量

直接写变量名即可使用变量里面存储的值；变量在使用前，必须先有定义.

课堂案例 ---交换变量

var num1 = 100;
var num2 = 200;
var temp = num1;  //声明一个临时变量,用来交换两个变量的值
num1 = num2;
num2 = temp;

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

由字母、数字、下划线、$符号组成，不能以数字开头
字母区分大小写
不能是关键字和保留字
- 关键字指的是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 的方法进行数据检测
- 语法：typrof(想要检测的数据)

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

转数值

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 代码是从上往下按照顺序依次执行的, 从第一行代码一直执行到最后一行
如果有一种情况是我有两段代码, 我只需要执行其中一个即可, 那么就可以用到分支语句
简单来说: 分支语句就是根据我们设定好的条件来决定要不要执行某些代码 if 分支语句的基本书写

if 分支语句

if 分支语句的基本书写

语法: if (条件) { 满足条件后要执行的代码 }

if(true){
    console.log('条件成立执行代码')
}
语法分析:
    if: 关键字,表明后续执行的是一个if分支语句
    (): 小括号里是判断条件,如果判断条件符合,将会执行后续代码
    {}: 花括号内部填写要执行的分支代码, 如果条件为真, 则会执行

if ... else 语句的基本书写

语法: if (条件) { 条件满足时执行的代码 } else { 条件不满足时执行的代码 }

if(true){
    console.log('条件成立执行代码')
} else{
    console.log('条件成立,上面分支执行,这里代码不会被执行')
}

if(flase){
    console.log('条件不成立,这里代码不会被执行')
} else{
    console.log('条件成立,这里代码执行')
}
语法分析:
    if: 关键字,表明后续执行的是一个if分支语句
    (): 小括号里是判断条件,如果判断条件符合,将会执行后续代码
    {}: 花括号内部填写要执行的分支代码, 如果条件为真, 则会执行
    如果上述条件都不满足,则会执行else里面的代码

- if 嵌套语句的基本书写

-   可以通过 `if` 和 `else if` 来设置多个条件进行判断

-   语法: `if(条件1){条件1为true时执行} else if (条件2){条件2为true时执行}`

-   会从头开始依次判断条件

    -   如果第一个条件为 true 了, 那么就会执行后面的 {} 的内容
    -   如果第一个条件为 false, 那么就会判断第二个条件
    -   如果第二个条件也为 false, 那么会依次往后执行

-   注意

    -   多个 {} 只会有一个被执行, 一旦有一个条件为 true 了, 后面的就不再判断了
    -   如果所有的 条件都为 false, 那么会执行最后的 else {} 分支
    -   如果所有的条件都为 false, 且没有最后的 else {} 分支, 那么当前 if 分支不会有任何代码段会被执行

switch分支语句

判断逻辑: 判断的变量是否全等 === case 上说明的情况

switch 分支语句的书写

var a = 100;
switch(a){
    case 1:
        console.log('如果a === 1,会输出这个');
        break;
    case 2:
        console.log('如果a === 10,会输出这个')
        break;
    case 3:
        console.log('如果a === 100,会输出这个')
        break;
    default:
        consloe.log('如果以上情况都不满足,会输出这个')
        break;
}

switch穿透语句
- 找到第一个满足的 case 的时候,开始执行这个代码,
- 执行完毕如果没有 break 会继续执行下一个 case,
- 直到遇到一个 break 或者分支语句全部执行完毕

        var month = 2
        switch(month){
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                console.log('有31天')
                break;


            case 4:
            case 6:
            case 9:
            case 11:
                console.log('有30天')
                break; 


            case 2:
                console.log('有28天')
                break;
        }

三元表达式/三目表达式/三目运算符/三目/问号冒号表达式

语法: 条件 ? 条件为真时执行的代码 : 条件为假时执行的代码

注意:不管条件真还是假的代码,都只能写一行

意义: 对 if 分支语句做一个简化操作

常用场景
- 利用三目执行代码(对if else 的优化)
- 利用三目给变量赋值

//利用三目执行代码
var num = 100;
num > 10 ? console.log('正确') : console.log('错误')

//利用三目给变量赋值
var num1 = 1   //num = 1的时候性别为男, num != 1的时候性别为女
var sex = num1 === 1 ? '男' : '女' 
console.log(sex)

javaScript-简单入门介绍