JavaScript基础（一）

1. JavaScript简介

简述：JavaScript（简称“JS”）是解释型轻量级的函数式编程语言。

特点：

脚本语言：JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行，JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。
基于对象：JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。
弱类型：JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。
事件驱动：JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
跨平台性：JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

1.1 组成部分

组成：JS由ECMA核心、BOM、DOM三部分组成。

ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象。
DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程。
BOM编程是Browser Object Model的简写，即浏览器对象模型，有一系列对象组成，是访问、控制、修改浏览器的属性和方法。

1.2 JS的引入方式

1. 内部脚本方式引入：

在页面中，通过一对script标签来引入JS代码（script代码的放置有一定的随机性，但一般放在head标签中。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    	function A(){
            alert("这是一个内部脚本引入的例子")
        }
    </script>
</head>
<body>
    <button onclick="A()">请点击</button>
</body>
</html>

解释：这是一个简单的内部引入的例子，首先我们在script标签中创建了一个A()函数，这个函数的作用是在页面弹框输出一段话，之后我们又通过button创建一个按钮来调用这个函数，这样我们就达成了在页面中弹框输出的效果，进入到页面中我们只要点击按钮就可以触发弹窗输出效果：

2. 外部脚本方式引入：

我们可以将脚本放在独立的js文件中，通过script标签引入外部脚本文件（一对script标签要么用于定义内部脚本，要么用于引入外部js文件，不能混用，一个html文档中，可以有多个script标签）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./外部引入.js"></script>
</head>
<body>
    <button onclick="B()">请点击</button>
</body>
</html>

解释：首先我我们在script标签中通过src来找到我们需要引入的外部js文件，然后之后就可以调用js文件了，在页面中的效果如下：

2. JS的数据类型和运算符

2.1 JS的变量

关键字：JS通过var和let定义变量。但这里我们推荐使用let因为var可能会导致变量的重复使用而出现问题。
数据类型：JS的变量是弱类型的，可以接收任意类型的数据
标识符：严格区分大小写
变量使用规则
- 如果使用了一个没有声明的变量，那么会在运行时报错。
- 如果声明一个变量没有初始化，那么这个变量的值就是undefined。

2.2 JS的数据类型

JS的数据类型统一为number，没有整数和浮点数之分；它同时也不区分字符和字符串；单引号和双引号也没有具体的区别。

<script>
    // 1.定义数值型
	let num1 = 100
    let num2 = 10000.00000000000000001111111
    alert(num1 + num2) // 页面弹窗的结果为 10100
    
     //2.字符串
     let str1 = "你好世界"
     let str2 = '我的世界'
     alert(str1 + str2) // 页面弹窗的结果为 你好世界我的世界
</script>

JS的布尔类型为boolen，包含true和false。

<script>
    // 3.布尔类型   
	let b1 = true   //1
    let b2 = false  //0
    let b3 = true + false
    alert(b3) // 弹窗结果为 1
    
    let flag = false
    if(flag){
        alert('恭喜你-顺利毕业')
    }
    else{
        alert('很遗憾-考试没过')
    } // 弹窗结果为 很遗憾-考试没过
</script>

在JS中其他类型和布尔类型可以自动转换：

true：非零的数值，非空字符串，非空对象。
false：0，空字符串（''），null，undefined，NaN。

<script>
	let str = '            '//true
    if(str){
        alert("我是true的")
    }
    else{
        alert("我是false的")
    } // 弹框输出的结果为 我是true的
</script>

解释：if中会将str类型自动转化为布尔类型，在这里str中有空格，所以属于非空字符串，JS会视为一个真值，所以会输出if里的内容。

2.3 JS的运算符

算数运算符

运算符	名称	功能	特殊规则
`+`	加法运算符	数值相加/字符串拼接	字符串优先拼接
`-`	减法运算符	数值相减	非数值自动转数值
`*`	乘法运算符	数值相乘	非数值自动转数值
`/`	除法运算符	数值相除	除零返回 `Infinity`
`%`	取模运算符	求余数	余数符号与被除数一致

注意：
- / 在除0时，结果是Infinity ，而不是报错。
- %在模0时，结果是NaN，意思为 not a number ，而不是报错。
复合算术运算符

运算符	名称	等价形式	示例
`++`	自增运算符	`a = a + 1`	`a++` 或 `++a`
`--`	自减运算符	`a = a - 1`	`a--` 或 `--a`
`+=`	加法赋值运算符	`a = a + b`	`a += b`
`-=`	减法赋值运算符	`a = a - b`	`a -= b`
`*=`	乘法赋值运算符	`a = a * b`	`a *= b`
`/=`	除法赋值运算符	`a = a / b`	`a /= b`
`%=`	取模赋值运算符	`a = a % b`	`a %= b`

符合算数运算符基本和JAVA一致,同样需要注意 /=和%=
- 在/=0时，结果是Infinity ，而不是报错。
- 在%=0时，结果是NaN，意思为 not a number ，而不是报错。
关系运算符

运算符	名称	作用	示例	注意事项
`>`	大于运算符	判断左侧是否大于右侧	`5 > 3 → true`	字符串按 Unicode 顺序比较
`<`	小于运算符	判断左侧是否小于右侧	`2 < 10 → true`	数值和字符串比较时会自动转换
`>=`	大于等于运算符	判断左侧是否≥右侧	`5 >= 5 → true`	优先级低于算术运算符
`<=`	小于等于运算符	判断左侧是否≤右侧	`4 <= 4 → true`	同上
`==`	松散相等	类型转换后比较值	`"5" == 5 → true`	`NaN` 不等于自身
`===`	严格相等	值和类型都相同	`"5" === 5 → false`	推荐使用
`!=`	松散不等	类型转换后比较值	`5 != "5" → false`	实际是 `!(a == b)`
`!==`	严格不等	值或类型不同	`5 !== "5" → true`	推荐使用

注意：
- ==判断其中的数值是否相等，如果两端的数据类型不一致，会尝试将两端的数据转换成number，再对比number大小。
  - ‘123’ 这种字符串可以转换成数字；
  - true会被转换成1 ，false会被转换成0；
- ===判断值是否相同并且判断类型是否相同，如果两端数据类型不一致，直接返回false，数据类型一致再比较是否相同。
逻辑运算符

运算符	类型	操作对象	短路特性	返回值规则
`\|\|`	逻辑或	真值/假值	✔️	返回第一个真值
`&&`	逻辑与	真值/假值	✔️	返回第一个假值
`\|`	按位或	二进制位	❌	按位或运算（转32位整数）
`&`	按位与	二进制位	❌	按位与运算（转32位整数）

注意：
- ||如果发现有一个为true，直接返回true
- &&如果发现有一个为false，直接返回false
| &这两个运算符则需要判断两边的真假值才会输出结果，所以||和&&的效率更快，推荐在大部情况使用。
条件运算符
- 语法：条件 ? 表达式1 : 表达式2
  - 如果条件为真（true），返回 表达式1 的值。
  - 如果条件为假（false），返回 表达式2 的值。

1
2
3

let a = true
let str = a ? '是真的' : '是假的'
console.log(str)

解释：由于 a 是 true，三元运算符会选择第一个表达式 '是真的'，将其赋值给 str，代码运行后会在控制台输出：'是真的'。