一.JavaScript简介
1.什么是JavaScript
-
介绍：JavaScript 是互联网上流行的轻量级脚本语言，可用于 HTML 与 Web，广泛应用于服务器及各类设备。它能作为编程代码插入 HTML 页面，可被现代浏览器执行，且易于学习。
-
组成：
- ECMScript：脚本程序设计语言（JavaScript的核心）
- BOM：浏览器对象模型（ Browser Object Model）
- DOM：文档对象模型（ Document Object Model）
2.JavaScript应用方式
行内应用
-
在 HTML 代码中嵌入 JS 代码，不使用 script 标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS行内应用</title> </head> <body> <input type="button" value="button" onclick="alert('hello world!')"> </body> </html>
内部应用（内嵌）
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS内部应用</title> </head> <body> <!-- script标签用于执行脚本代码，默认的type值为"text/javascript"，指定按照js的语法执行 --> <script> // window.alert 等价于 alert alert('hello world!'); </script> </body> </html>
外部应用（外联）
-
先创建一个 hello.js 文件（内容必须遵守JS的语法规范）
alert("hello world!"); -
在 js3.html 文件中引用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>外部引用</title> </head> <body> <script type="text/javascript" src="./hello.js"></script> </body> </html>
二.JavaScript变量
1.变量的声明
-
使用 var关键词：var 变量名称=变量值
- PS：当只使用var test;声明变量时，该变量会被初始化为undefined。
2.变量的数据类型
-
基本数据类型
- 数值（Number）：用于表示整数和浮点数，如10、3.14等。
- 字符串（String）：用于表示文本，用单引号或双引号括起来，如'Hello'、"World"。
- 布尔值（Boolean）：只有true和false两个值，用于表示逻辑判断。
- null：表示一个空值，是一个特殊的关键字。
- undefined：表示变量已声明但未赋值的状态。
- Symbol：ES6 中引入的新类型，用于创建唯一的标识符。
-
引用数据类型
- 对象（Object）：用于存储键值对，如{name: 'John', age: 30}。
- 数组（Array）：用于存储一组数据，如[1, 2, 3, 4, 5]。
- 函数（Function）：用于封装可复用的代码块，是一种特殊的对象。
3.变量的命名规则
- 变量名必须以字母、$或_开头，后面可以跟字母、数字、$或_。例如：myVariable、_name、$age是合法的变量名，而123abc是不合法的。
- 变量名不能是 JavaScript 中的关键字和保留字，如if、else、for等不能作为变量名。
- 变量名应具有描述性，以便于理解变量的用途，比如用totalAmount表示总金额比用t更易理解。
4.转义字符
-
介绍：转义字符即以 \ 开头用于在字符串中需要输出特殊的符号使用。
-
常用的转义字符：
转义字符 意义 ASCII码值（十进制） \n 换行(LF)，将当前位置移到下一行开头 010 \r 回车(CR)，将当前位置移动到本行开头 013 \t 水平制表(HT)(跳到下一个TAB位置) 009 \\ 代表一个反斜杠字符"\" 092 \' 代表一个单引号字符 039 \" 代表一个双引号字符 034 \? 代表一个问号 063 \0 空字符(NULL) 000
三.JavaScript运算符
1.赋值运算
-
符号 含义 = 直接赋值，将右边的表达式计算后的值赋值给左边的变量 += 将左侧变量与右侧相加之后的结果赋值给左侧变量 a += b；等价于 a = a + b -= 将左侧变量与右侧相减之后的结果赋值给左侧变量 a -= b；等价于 a = a - b *= 将左侧变量与右侧相乘之后的结果赋值给左侧变量 a *= b；等价于 a = a * b /= 将左侧变量与右侧相除之后的结果赋值给左侧变量 a /= b；等价于 a = a / b %= 将左侧变量与右侧求余之后的结果赋值给左侧变量 a %= b；等价于 a = a % b
2.算术运算符
A.基本算术运算符
-
符号 含义 = 相加（在 JS 中，+ 还表示拼接） - 相减 * 相乘 / 相除 % 取模，求余数
B.自增运算符
- 介绍：自增运算符分为前++和后++
-
符号 含义 ++i 先加1，后赋值 i++ 先赋值，后加1
C.自减运算符
- 介绍：自减运算符分为前--和后--
-
符号 含义 --i 先减1，再赋值 i-- 先赋值，再减1
3.字符串运算符
-
符号 含义 + 直接进行字符串的拼接 += 左侧与右侧的字符串拼接之后赋值给左侧的变量
4.比较运算符
-
符号 含义 > 大于 < 小于 >= 大于等于 <= 小于等于 == 判断是否相等，只对值进行判断 != 判断是否不相等，只对值进行判断 === 判断是否全等，需要判断值以及类型 !== 判断不全等，需要判断值以及类型 - PS：比较运算符得到的结果为布尔值
5.逻辑运算符
-
符号 含义 && 表示并且(与)，左右两边的表达式都为真，最终结果才为真 || 表示或者(或)，左右两边的表达式有一个为真时，最终结果就为真 ！ 表示取反(非)，表达式为真时，结果为假；表达式为假时，结果为真
6.三元运算符
-
格式：表达式1?表达式2 : 表达式3
-
解释：当表达式1为真时，则执行表达式2；否则执行表达式3
-
示例：
<script type="text/javascript"> var i = 2; i>2 ? i=i*5 : i*=4 // i>2为假，执行表达式3 --> i=4*i --> 8 console.log(i); // 8 </script>