前言
上次直接带大家做的留言板项目，可能很多同学已经忘了，其实我们根本就没有做到留言板的功能，因为留言板需要登录才能留言，但是登录的话又需要注册，我们花了一学期的时间终于把登录注册的页面完成了，实际上完成的还只是一个静态的页面而已，不知道大家还记得吗？网页包括三个部分：html、css、JavaScript，html是网页的结构，css是网页的样式，javascript是网页的逻辑交互，我们只是写好了网页的结构，我们给网页中加入了标题标签，图片标签，输入标签，按钮标签等等，并通过css对其进行了美化，看起来是一个很漂亮的网页，但是它还不具备登录的功能，因为我们还没有学习JavaScript。
对于学习软件专业的同学，都想开发一款属于自己的软件，这的确是一件很酷的事情，这是你努力学习的成果，也是你智慧的结晶。可是，我们到底要做一个什么样的东西？每个人都有无数的奇思妙想，各种软件应用千奇百怪，但是你目前需要学习基础的知识，需要跟着我一起做我设计的项目，之后便可触类旁通，将你的想象变成现实。
如果你很好奇，在做之前就想知道项目的成品是什么，那没问题，请使用微信小程序搜索海职同学圈，这实际上就是一个仿照版的朋友圈，我甚至对朋友圈的一些我不满意的地方进行了优化改造，变得更加的简洁易用。这里也多提一句，以前我总是喜欢把一款软件做得很复杂，有很多我认为很厉害的功能，但是用户实际使用体验不好，举一个例子，从程序的角度来说，qq绝对很牛，功能非常强大，最后却被一个只能发消息，发朋友圈的微信打败了，我悟出一个道理，总结为一句话：作为软件的开发者，在设计程序时，请把用户都当作是弱智。软件开发要学会做减法，我们制作的软件要尽可能简单易用，以后你对这一点一定会深有体会。
我整个假期很忙，终于在8月初的时候有点时间，我是在8月几号的时候新建的项目文件夹，然后用了两周的时间开发出来，实际上是一周时间开发，一周时间调试，因为在8月20号的时候有一款国产的3A游戏上架，我要玩，所以就赶工完成了，可能还会有很多bug，懒得找了，你们在使用过程中遇到就给我说吧，我前前后后已经排查了几十个bug了，是真滴累。
任务一：ATM存取款机
引入方式
内部方式
将script标签直接放在页面的body标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript引入方式</title>
</head>
<body>
<!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('你好世界')
</script>
</body>
</html>外部形式
将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入
// hello.js
alert('你好世界')<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript引入方式</title>
</head>
<body>
<script src="./hello.js"></script>
</body>
</html>如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript引入方式</title>
</head>
<body>
<script src="./hello.js">
// 此处的代码会被忽略掉！！！！
alert(666);
</script>
</body>
</html>注释
注释是在程序中添加备注的方法，被注释的行不会被当作程序执行。
使用 // 注释单行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript引入方式</title>
</head>
<body>
<script>
// 弹框显示一段信息呈现给用户
alert('你好世界')
</script>
</body>
</html>注：编辑器中单行注释的快捷键为 ctrl + /
输入和输出
输出和输入人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
输出
| 代码 | 含义 |
|---|---|
| alert(‘要输出的内容’) | 弹框 |
| document.wirte(‘要输出的内容’) | 直接打印在页面上 |
| console.log(‘要输出的内容’) | 输出到控制台（要按F12查看） |
输入
| 代码 | 含义 |
|---|---|
| prompt(’提示信息‘) | 以弹框的形式收集用户信息 |
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript输入输出</title>
</head>
<body>
<script>
prompt('这是输入框的提示:')
document.write('要打印在页面上的内容')
alert('要通过弹框输出的内容');
console.log('这是要打印在控制台的内容')
</script>
</body>
</html>变量
变量是计算机存储数据的“容器”。就像搬家一样，不同的东西放在不同的箱子中，为了能够从箱子中准确找到我们需要的东西，我们会在箱子上贴上不同的标签，放衣服的箱子就贴上一张“衣服”的标签，放鞋子的箱子就贴上“鞋子”的标签。那么变量名其实是标签纸。
变量的声明(定义)
声明(定义)变量有两部分构成：声明关键字、变量名（标识）
| 声明关键字 | 含义 |
|---|---|
| var（废弃） | 以前老的规范中用于声明变量的关键字，有很多毛病，现在基本不用了 |
| let | 声明一个变量（var的升级版） |
| const | 声明一个常量，常量是不可以被改变的 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript输入输出</title>
</head>
<body>
<script>
// 将一个数字保存在变量a中
let a = 3
// 试一试，打印看看a中存放的是什么？
document.write(a)
// 接着再往a中放一个数字（注意a已经定义了，不要再用let重复定义）
a = 5
// 试一试，打印看看a中存放的是什么？
document.write(a)
</script>
</body>
</html>注意：一个东西要怎么样才能放到变量里呢？是通过赋值语句，也就是=，=的作用是将右边的东西放到左边的容器中，也就是说左边一定是一个变量或者常量
练习：定义一个变量c，并赋初始值为9，最后通过弹框显示出来。
常量的声明(定义)
再来看看常量是怎么定义的吧，其实就是用const来声明
但是需要注意一点，常量是不允许重新赋值的，声明的时候必须赋值（初始化）
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
const PI = 3.14变量名命名规则
关于变量的名称（标识符）有一系列的规则需要遵守：
- 只能是字母、数字、下划线、$，且不能能数字开头
- 字母区分大小写，如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词（关键字或保留字）不允许使用
- 尽量保证变量具有一定的语义，见字知义
注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body>
<script>
let age = 18 // 正确
let age1 = 18 // 正确
let 7age = 18; // 错误，不可以数字开头
let age = 19 // 错误，不可以重复定义
let Age = 24 // 正确，它与小写的 age 是不同的变量
let let = 18; // 错误，let 是关键字
</script>
</body>
</html>小练习
通过弹框收集用户的姓名，并展示在页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
// 通过提示框手机用户的名字，并保存在变量里
let name = prompt('请问您尊姓大名:')
// 打印在页面上
document.write(name)
</script>
</body>
</html>数据类型
计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：
注：通过 typeof 关键字检测数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
// 检测 1 是什么类型数据，结果为 number
document.write(typeof 1)
</script>
</body>
</html>数值类型
即我们数学中学习到的数字，可以是整数、小数、正数、负数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
let score = 100 // 正整数
let price = 12.345 // 小数
let money = -40 // 负数
document.write(typeof score) // 结果为 number
document.write(typeof price) // 结果为 number
document.write(typeof money) // 结果为 number
</script>
</body>
</html>JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。
字符串类型
通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
注意事项：
- 无论单引号或是双引号必须成对使用
- 必要时可以使用转义符
\，输出单引号或双引号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
let user_name = '小明' // 使用单引号
let gender = "男" // 使用双引号
let str1 = '123' // 看上去是数字，但是用引号包裹了就成了字符串了
let str2 = '' // 这种情况叫空字符串
document.write(typeof user_name) // 结果为 string
document.write(typeof gender) // 结果为 string
document.write(typeof str1) // 结果为 string
document.write(typeof str2) // 结果为 string
</script>
</body>
</html>布尔类型
表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
let isCool = true
isCool = false
document.write(typeof isCool) // 结果为 boolean
</script>
</body>
</html>undefined
未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 数据类型</title>
</head>
<body>
<script>
// 只声明了变量，并末赋值
let tmp;
document.write(typeof tmp) // 结果为 undefined
</script>
</body>
</html>注：JavaScript 中变量的值决定了变量的数据类型。
课后练习
任务：请编写程序，验证之后回答，通过prompt收集的用户输入数据，是什么类型？
类型转换
在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。
Number
通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
let t = '12'
// 将字符串 12 转换成数值 12
t = Number(t)
// 检测转换后的类型
console.log(typeof t);
// 并不是所有的值都可以被转成数值类型
let s = 'hello'
// 将 hello 转成数值是不现实的，当无法转换成数值时，得到的结果为 NaN （Not a Number）
console.log(Number(s))
</script>
</body>
</html>String
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
let t = 12
// 显式将数值 12 转换成字符串 12
t = String(t)
// 检测转换后的类型
console.log(typeof t);
</script>
</body>
</html>Boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
let t = 12
// 显式将数值 12 转换成字符串 12
t = Boolean(t)
// 检测转换后的类型
console.log(typeof t);
console.log(t);
</script>
</body>
</html>总结：对于数字来说，只要不是0，转换为布尔值都是true，对于字符串来说，只要不是’’（空字符串），转换为布尔值都是true
课后练习：
请用户输入自己有多少岁，然后我们帮其计算出他已经出生了多少天。（一年就当作365天）
运算符
算术运算符
算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等
| 运算符 | 作用 |
|---|---|
| + | 求和 |
| - | 求差 |
| * | 求积 |
| / | 求商 |
| % | 取模（取余数），开发中经常用于作为某个数字是否被整除 |
注意：在计算失败时，显示的结果是 NaN （not a number）
练习：
将用户输入的摄氏温度转换为华氏温度（公式f = 9 / 5 * c + 32，f是华氏温度，c是摄氏温度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
// 第一步、让用户输入摄氏温度，但是提醒一下，还记得prompt收集的数据是什么类型吗？
let c = Number(prompt('请输入摄氏温度：'))
// 第二步、根据公式计算华氏温度
let f = 9 / 5 * c + 32
// 第三步、显示结果
alert(f)
</script>
</body>
</html>任务：BMI计算器
通过弹框收集用户的体重，然后计算出BMI值
BMI值的计算公式为：BMI=体重（公斤）除以身高（米）的平方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
<script>
// BMI值的计算公式为：BMI=体重（公斤）除以身高（米）的平方
// 第一步、让用户输入摄氏温度，但是提醒一下，还记得prompt收集的数据是什么类型吗？
let weight = Number(prompt('请输入你的体重（kg）：'))
let height = Number(prompt('请输入你的身高（米）：'))
// 第二步、根据公式计算华氏温度
let BMI = weight / (height * height)
// 第三步、显示结果
document.write('你的BMI是：' + BMI)
</script>
</body>
</html>赋值运算符
| 运算符 | 作用 |
|---|---|
| += | 加法赋值 |
| -+ | 减法赋值 |
| *= | 乘法赋值 |
| /= | 除法赋值 |
| %= | 取余赋值 |
<script>
let num = 1
// num = num + 1
// 采取赋值运算符
num += 1
console.log(num)
</script>自增/自减运算符
| 符号 | 作用 | 说明 |
|---|---|---|
| ++ | 自增 | 变量自身的值加1，例如: x++ |
| – | 自减 | 变量自身的值减1，例如: x– |
注意：只有变量能够使用自增和自减运算符
<script>
let num = 1
num ++
console.log(num)
</script>比较运算符
使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）
| 运算符 | 作用 |
|---|---|
| > | 左边是否大于右边 |
| < | 左边是否小于右边 |
| >= | 左边是否大于或等于右边 |
| <= | 左边是否小于或等于右边 |
| === | 左右两边是否类型和值都相等 |
| == | 左右两边值是否相等 |
| != | 左右值不相等 |
| !== | 左右两边是否不全等 |
<script>
console.log(3 > 5)
console.log(3 >= 3)
console.log(2 == 2)
console.log(2 === '2')
console.log(2 == '2')
</script>逻辑运算符
使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
|---|---|---|---|---|
| && | 逻辑与 | 并且 | 符号两边有一个假的结果为假 | 同真为真，一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个真的结果为真 | 同假为假，一真则真 |
| ! | 逻辑非 | 取反 | true变false false变true | 真变假，假变真 |
| A | B | A && B | A || B | !A |
|---|---|---|---|---|
| false | false | false | false | true |
| false | true | false | true | true |
| true | false | false | true | false |
| true | true | true | true | false |
逻辑运算符优先级： ！> && > ||
语句
分支语句
分支语句可以根据条件判定真假，来选择性的执行想要的代码
分支语句包含：
- if分支语句（重点）
- 三元运算符
if 分支语句
if(条件表达式) {
// 满足条件要执行的语句
}小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为false，则不执行大括号里面代码
小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()
<script>
// 单分支语句
// 1. 除了0 所有的数字都为真
if (0) {
console.log('成功执行if条件内的语句')
}
// 2.除了 '' 所有的字符串都为真 true
if ('ggg') {
console.log('成功执行if条件内的语句')
}
</script>if双分支语句
如果有两个条件的时候，可以使用 if else 双分支语句
if (条件表达式){
// 满足条件要执行的语句
} else {
// 不满足条件要执行的语句
}练习一：用户通过弹框输入自己的名字和年龄，如果年龄小于18，页面上显示欢迎你，小老弟xxx，否则显示欢迎你，小老哥xxx
注意：对于字符串来说，+的作用是将两个字符串拼接在一起
<script>
// 1. 用户输入
let name = prompt('请输入你的名字:')
let age =Number(prompt('请输入你的年龄:'))
// 2. 判断年龄
if (age < 18) {
document.write('欢迎你，小老弟' + name)
} else {
document.write('欢迎你，小老哥' + name)
}
</script>练习二：让用户输入用户名和密码，如果用户名和密码都对（正确的账号是zhangsan，密码：123456），那么就弹框提示用户登录成功
<script>
// 1. 用户输入
let uname = prompt('请输入用户名:')
let pwd = prompt('请输入密码:')
// 2. 判断输出
if (uname === 'zhangsan' && pwd === '123456') {
alert('恭喜登录成功')
} else {
alert('用户名或者密码错误')
}
</script>if 多分支语句
使用场景： 适合于有多个条件的时候
<script>
// 1. 用户输入
let score = Number(prompt('请输入成绩：'))
// 2. 判断输出
if (score >= 90) {
alert('成绩优秀')
} else if (score >= 70) {
alert('还行吧')
} else if (score >= 60) {
alert('成绩及格')
} else {
alert('成绩不及格，要加油了')
}
</script>任务：请完善之前的BMI计算器，新增一个温馨小提示，胖了提醒用户太胖了，瘦了提醒用户太瘦了
根据BMI值的计算结果，人们被划分为不同的体重分类。体重分类标准如下：BMI值小于18.5，为过轻；BMI值介于18.5至24.9，为正常体重；BMI值大于25至29.9，为超重；BMI值大于或等于30，为肥胖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
<script>
// BMI值的计算公式为：BMI=体重（公斤）除以身高（米）的平方
// 第一步、让用户输入摄氏温度，但是提醒一下，还记得prompt收集的数据是什么类型吗？
let weight = Number(prompt('请输入你的体重（kg）：'))
let height = Number(prompt('请输入你的身高（米）：'))
// 第二步、根据公式计算华氏温度
let BMI = weight / (height * height)
if (BMI < 18.5) {
document.write('你的BMI是：' + BMI + ',你太瘦了')
}
else if (18.5 < BMI < 24.9) {
document.write('你的BMI是：' + BMI + ',你的BMI很好')
}
else {
document.write('你的BMI是：' + BMI + ',你太胖了')
}
</script>
</body>
</html>三元表达符（了解）
使用场景： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else双分支 更简单
// 三元运算符（三元表达式）
// 1. 语法格式
// 条件 ? 表达式1 : 表达式2
// 2. 执行过程
// 如果条件为真，则执行表达式1
// 如果条件为假，则执行表达式2循环语句
使用场景：重复执行指定的一段代码
while循环
while : while循环就是在满足条件期间，重复执行某些代码。
语法：
while (条件表达式) {
// 循环体
}例如：
<script>
// while循环: 重复执行代码
// 1. 需求: 利用循环重复打印3次 '你好'
let i = 1
while (i <= 3) {
document.write('你好<br>')
i++ // 这里千万不要忘了变量自增否则造成死循环
}
</script>循环三要素：
1.初始值 （经常用变量）
2.终止条件
3.变量的变化量
练习：吴亦凡在进去之前有很多忠实的铁粉，他们很想念吴亦凡，甚至提出想到监狱里去陪吴亦凡（但是不清楚后面怎么没人去），所以请用程序实现，在页面上输出“想念凡凡的第1天”，一直到“想念凡凡的第100天”，最后打印“凡凡，你在里面好好改造，争取早日重新做人”。（真实社会事件，吴亦凡的粉丝在吴亦凡被羁押期间一直为吴亦凡声援，但是吴亦凡进去之后就没声了，她们的沉默让凡凡很受伤）
<script>
// while循环: 重复执行代码
// 1. 需求: 利用循环重复打印3次 '你好'
let i = 1
while (i <= 100) {
document.write('想念凡凡的第' + i + '天<br>')
i++ // 这里千万不要忘了变量自增否则造成死循环
}
document.write('凡凡，你在里面好好改造，争取早日重新做人')
</script>for循环
<script>
// 1. 语法格式
// for(起始值; 终止条件; 变化量) {
// // 要重复执行的代码
// }
// 2. 示例：在网页中输入标题标签
// 起始值为 1
// 变化量 i++
// 终止条件 i <= 6
for(let i = 1; i <= 6; i++) {
document.write(i)
}
</script>结论：
JavaScript提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别。- 起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。
- 当如果明确了循环的次数的时候推荐使用
for循环,当不明确循环的次数的时候推荐使用while循环
注意：
for的语法结构更简洁，故for循环的使用频次会更多。
中止循环
break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）
continue 中止本次循环，一般用于排除或者跳过某一个选项的时候
<script>
// 1. continue
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue // 结束本次循环，继续下一次循环
}
console.log(i)
}
// 2. break
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break // 退出结束整个循环
}
console.log(i)
}
</script>任务：打印1-100，但是不要打印7
<script>
// 1. continue
for (let i = 1; i <= 100; i++) {
if (i === 7) {
continue // 结束本次循环，继续下一次循环
}
console.log(i)
}
</script>无限循环
while(true) 来构造“无限”循环，需要使用break退出循环。
任务：页面会一直弹窗询问“如果我是程序员，你会爱我吗？”
- 如果用户输入的是 ‘爱’，则退出弹窗
- 否则一直弹窗询问
<script>
while (true) {
let love = prompt('如果我是程序员，你会爱我吗？')
if (love === '爱') {
break
}
}
</script>综合案例-ATM存取款机
甲方：我需要你编写一个网页，实现以下功能
通过提示框让用户选择，可以存钱、取钱、查看余额，退出（初始资金是100）
<script>
// 定义初始资金
let money = 100
while (true) {
let choose = prompt('请您选择操作：1.存钱、2.取钱、3.查看余额、4.退出')
// 根据输入做操作
if (choose == 4) {
break
}
else if (choose == 1) {
let cun = Number(prompt('请输入存款金额：'))
money += cun
alert('您的银行卡余额是' + money)
}
else if (choose == 2) {
let qu = Number(prompt('请输入取款金额：'))
if (money < qu) {
alert('您的银行卡余额不够')
continue
}
money -= qu
alert('您的银行卡余额是' + money)
} else {
alert('您的银行卡余额是' + money)
}
}
</script>任务二 超级英雄抽卡
获取DOM对象
document.querySelector满足条件的第一个元素document.querySelectorAll满足条件的元素集合 返回伪数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
</head>
<body>
<h2 id="city">我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>
</body>
</html>
<script>
// querySelector 满足条件的第一个元素
//方法一：id选择器，获取id为city的元素，#为id选择器
const city1 = document.querySelector('#city')
console.log(city1)
// 方法二：元素选择器，获取第一个h2元素
const city2 = document.querySelector('h2')
console.log(city2)
// querySelectorAll 满足条件的元素集合,返回伪数组
// 获取所有的li标签
const li_list = document.querySelectorAll('li')
console.log(li_list)
</script>技巧
如果使用id来标记元素，选中元素的时候可以简写，但是代码提示会没有，所有不推荐这样写，了解即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
</head>
<body>
<h2 id="city">我想去的几个城市</h2>
</body>
</html>
<script>
console.log(city)
</script>操作元素内容
通过修改 DOM 的文本内容，动态改变网页的内容。
标签节点的innerText 或innerHTML就是标签的内容
获取到标签内容之后，在通过赋值语句赋值一个新的字符串就替换掉以前的内容了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
</head>
<body>
<h2 id="city">我想去的几个城市</h2>
</body>
</html>
<script>
// querySelector 满足条件的第一个元素
// 获取id为city的元素，#为id选择器
const city = document.querySelector('#city')
// 用一个新的字符串替换掉标签原来的内容
city.innerText = '你好'
</script>操作元素属性
常用属性修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
</head>
<body>
<img id="ao" src="image/ao1.jpg" >
</body>
</html>
<script>
// 修改图片的src属性（这里偷懒用了简写的方式）
ao.src = './image/ao2.jpg'
</script>拓展：我经常修改video标签的playbackRate属性，来实现快速刷网课
控制样式属性
应用【修改样式】，通过修改行内样式 style 属性，实现对样式的动态修改。
通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习 - 修改样式</title>
</head>
<body>
<h2 id="name">李强</h2>
</body>
</html>
<script>
// 获取 DOM 节点
const box = document.querySelector('#name')
box.style.color = 'red'
box.style.width = '300px'
// css 属性的 - 连接符与 JavaScript 的 减运算符
// 冲突，所以要改成驼峰法
box.style.backgroundColor = 'pink'
</script>任何标签都有 style 属性，通过 style 属性可以动态更改网页标签的样式，如要遇到 css 属性中包含字符 - 时，要将 - 去掉并将其后面的字母改成大写，如 background-color 要写成 box.style.backgroundColor
延时函数
延时多少时间执行某个函数
setTimeout(回调函数, 延迟时间)
<script>
setTimeout(function(){
alert('三秒之后再弹框')
},3000)
</script>任务：你是美国联邦特勤局顶级黑客，2024年的美国大选中，特朗普成功竞选美国总统，并在网页上放上了自己帅气的照片，这一举动，无疑引起了民主党的极度不满，于是，哈里斯花了重金聘请了你，希望你入侵到该网站，用代码实现，延时五秒之后，将标题文字替换为“爱笑的女孩，运气一定不会差”，并照片替换为“微笑女孩.jpg”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习 - 修改样式</title>
</head>
<body>
<h2 id="title">American first，MAGA！让美国再次伟大</h2>
<img id="tupian" src="image/特朗普.jpg" >
</body>
</html>
<script>
setTimeout(function(){
title.innerText = '爱笑的女孩，运气一定不会差'
tupian.src = 'image/微笑女孩.jpg'
},5000)
</script>间歇函数
间隔多少时间执行一次某个函数
setInterval(回调函数, 延迟时间)
<script>
setInterval(function(){
alert('关了没用的，我会每隔三秒弹一个框的')
},3000)
</script>注意：默认的时间单位是毫秒
任务：我是FBI美国联邦调查局的特工，我们现在遇到了一点小麻烦，我们想实现，在美国时代广场循环播放一段滚动文字“感谢马斯克送的一亿发火箭，并且文字的颜色能在红蓝绿之间不断变化”，美国计算机科学研究中心讨论了七七四十九天，暂无有效的进展，但接到可靠的情报，在海盐职教中心有一个班级的同学能实现这一效果，我们需要你的帮助，特朗普总统会感谢你的，我的朋友。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<marquee>
<img src="image/火箭.png" style="width: 2em;">
<span id="content">土豪马斯克为特朗普主播送上一亿枚火箭</span>
</marquee>
</body>
</html>
<script type="text/javascript">
setInterval(function(){
content.style.color = 'red'
},100)
setInterval(function(){
content.style.color = 'blue'
},200)
setInterval(function(){
content.style.color = 'green'
},300)
</script>事件
先试一下下面这段代码
<body>
<button id="nihao">点我给你问好</button>
</body>
<script>
document.querySelector('#nihao').addEventListener('click',function(){
alert('你好，吃了吗？')
})
</script>都看到效果了吧，点击按钮会弹框，我们只需要给按钮添加一个点击事件就可以实现，非常简单
一个事件可以分为事件监听、事件类型、事件回调
addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】
第一个参数是事件类型，事件类型又分为鼠标事件、键盘事件、文本框输入事件等等，我们这里就是就是添加了一个click 点击事件
第二个参数是事件回调，事件回调就是事件被触发时立即被调用的函数，在这里我们弹了一个对话框
好了，事件就讲到这里了，我们开始做一个小任务吧
任务：我是哈里斯竞选团队总负责人，现在正在选举”阿迈瑞看“村的村长，我们想委托你们帮我们做一个民意调查的网站，民众可以给哈里斯和特朗普投票，但是，不管使用什么样的方法，请使得哈里斯获得更高的票数，如果你让哈里斯副总统不高兴了，后果你知道的，我的朋友。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
<img src="./image/特朗普.jpg" alt="" />
<span>特朗普得票：</span>
<span id="dashu_piao">0</span>
</li>
<li>
<img src="./image/微笑女孩.jpg" alt="" />
<span>哈里斯得票：</span>
<span id="dama_piao">0</span>
</li>
</ul>
<button id="button_dashu">给大叔投票</button>
<button id="button_dama">给大妈投票</button>
</body>
</html>
<script>
// 给特朗普投票
document.querySelector('#button_dashu').addEventListener('click',function(){
dashu_piao.innerText++
})
// 给哈里斯投票
document.querySelector('#button_dama').addEventListener('click',function(){
dama_piao.innerText++
})
</script>
<style type="text/css">
button{
font-size: 30px;
padding: 10px;
}
img{
width: 50vw;
}
span{
font-size: 30px;
}
</style>完成了吧，很简单对吗？但是估计很多同学也发现了这段代码的问题，就是一旦刷新，票数就清零了，那是因为我们还没有数据库，也没有写后端，数据就是暂时存放在用户的浏览器上的，一旦用户刷新，数据就没了。
JavaScript随机数
Math.random()
作用：生成0-1之间的随机数
注意：其范围是左闭右开，即[0,1)，有可能会渠道0，但永远取不到1
示例：产生一个0-8之间的随机数
random_number = Math.random()*8
console.log(random_number);Math.floor()
作用：对一个浮点数向下取整
示例：产生一个随机数，其可能的值为0，1，2，3，4
random_number = Math.random()*5 // [0,5)
random_number_int = Math.floor(Math.random()*5) //0,1,2,3
console.log(random_number_int);任务：随机背景颜色
要求每一次刷新网页，背景颜色都改变
<script>
bac_list = ['red','blue','green']
random_number_int = Math.floor(Math.random()*3) // 产生0，1，2
document.querySelector('body').style.backgroundColor = bac_list[random_number_int]
</script>任务：每天一句土味情话(程序员版)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>每天一句土味情话</h1>
<h1 id="tuwei_content"></h1>
</body>
</html>
<script>
let random_number =Math.floor(Math.random()*20) //0-19的整数
let loveWords = [
"我是九你是三，除了你还是你，就像代码里的循环，永远围着你转。",
"宝，你知道我为什么感冒了吗？因为我对你完全没有抵抗力，就像防火墙遇到你的爱，瞬间崩塌。",
"你一定是偷了太阳的光芒，不然怎么会这么耀眼，把我的心照得透亮，让我满心满眼都是你，像网页离不开 CSS 样式。",
"甜有 100 种方式，有吃糖、吃蛋糕，还有每天 98 次的想你，就像函数的调用，时刻在我脑海里运行。",
"我觉得你接近我就是为了害我，害得我好喜欢你，像程序陷入死循环，无法自拔地爱着你。",
"宝，你猜我是什么星座？是为你量身定做，就像代码为特定功能而生，我只为你存在。",
"你知道我为什么老是摔跤吗？因为一见到你我就被你的魅力绊倒了，摔进了你的温柔陷阱里，像程序陷入了错误但甘之如饴。",
"我生在边疆，活在边疆，栽在你手里，总算是去过不一样的地方了，你就是我代码里的意外，却又让我无比着迷。",
"宝，你是磁铁吗？不是啊，那你怎么把我的心吸得紧紧的，让我无法逃脱，像数据被锁在数据库里，只为你一人开放。",
"你知道我的心有多大吗？很大很大，装得下整个世界，但我的心里，满满的都是你，像内存被你占满，其他都不重要了。",
"我一点也不想你，一点半再想，哈哈，其实从睁开眼的那一刻，你就像弹窗广告一样，在我脑海里挥之不去。",
"宝，你猜我想吃什么？痴痴地望着你，就像程序等待输入，而你就是我唯一的期待。",
"你知道我为什么要吃素吗？因为你是我的菜，而且是唯一的那道菜，像关键代码不可或缺。",
"我觉得你像一本书，越看越让人着迷，我想每天都翻着你，了解你的每一页，像读取代码文档，永远都读不够。",
"宝，你知道你和星星有什么区别吗？星星在天上，你在我心里，像变量存在于内存中，时刻被我调用。",
"亲爱的，你晓得不？我上辈子可能是个碳酸饮料，为啥？因为一见到你，我就开心得冒泡，像程序执行成功的提示。",
"宝，你一定是偷了月亮的魔法，把我的魂儿都勾走了。我现在看啥都像你，吃饭想你，睡觉想你，就连走路都觉得你在我旁边，像代码里的全局变量，无处不在。",
"我感觉我是一个糖，为啥？因为你太甜了，甜得我都化了，像数据在高温下失去原有的形态，只因为你。",
"宝，你知道吗？你就是我的核心代码，没有你，我的生活就像失去了主函数，无法运行下去。",
"你是我写过最美的代码片段，优雅、独特，让我忍不住一遍又一遍地回味，就像对你的爱，永不停息。",
"宝，你晓得我为啥最近总失眠不？因为你在我心里一直跑马灯似的闪，让我根本睡不着，就像程序里的死锁，心被你占得死死的。",
"我跟你讲，你就是我的‘系统漏洞’，别人进不来，我也出不去，满心满眼都是你，像被黑客攻击了一样，对你毫无防备。",
"宝，你猜我的心分成了几部分？一部分是你，一部分还是你，就像代码里的分支结构，不管怎么选，都是通向爱你的路。",
"你知道你和游戏有啥区别不？游戏让我沉迷一时，而你让我沉迷一世，像后台进程一样，一直在我生活里运行。",
"我觉得你像我电脑的主机，没了你，我的世界就黑屏了，啥也干不了，因为你是我生活运转的核心。",
"宝，你是我的‘404 错误’，每次找不到你，我就心慌意乱，像迷失在网络里的数据包，只盼着找到你这个目的地。",
"你知道我为啥喜欢数学不？因为我算来算去，都算不出我有多爱你，像个无解的算法，爱你无穷无尽。",
"我觉得你像我的‘代码注释’，虽然平时不显眼，但没了你，我的生活代码就没人能读懂，你是我生活意义的说明。",
"宝，你是我的‘加密文件’，别人看不到你的好，只有我能解开，像拥有专属密码，你是我心底的宝藏。",
"你知道我为啥总盯着手机不？因为怕错过你的消息，就像服务器等待客户端请求，时刻准备着回应你。",
"宝，你猜我用什么语言表达爱最合适？不是 Java，不是 Python，是爱你无‘语’伦比，像独特的编程语言，专为你创造。",
"你知道我为啥喜欢春天不？因为春天花会开，而你就是我心中永不凋谢的花，像常量一样，永远美好。",
"我觉得你像我的‘数据库索引’，有了你，我能快速找到生活的方向，像数据检索一样高效，你是我的生活导航。",
"宝，你是我的‘程序优化器’，自从有了你，我的生活变得顺畅无比，像代码被优化后高效运行，你让一切都变得美好。",
"我是‘代码里的变量’，因你而有了值，你就是赋予我意义的那个人，像给变量初始化，让我变得完整。"
];
// 用随机数作为数组的下标，随机从数组中取出元素，然后挂载到相应的节点上
tuwei_content.innerHTML = loveWords[random_number]
</script>
<style>
#tuwei_content{
color: white;
background-color: pink;
line-height: 2;
padding: 20px;
}
</style>综合案例—超级英雄抽卡
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽卡</title>
</head>
<body>
<h1>超级英雄抽卡</h1>
<span>您的余额为：</span>
<span id="yue_text">0</span>
<h2>玩之前请先充值，没钱玩不了</h2>
<a>点击此处办理轻松信用贷</a>
<hr />
<input id="chongzhi_input" type="text" placeholder="请输入你要充值的金额"/>
<button id="chongzhi_button">充值</button>
<marquee>388元一抽，688元两抽，价格实惠，童叟无欺啊，快来抽卡</marquee>
<button id="chouka_button">花费388元抽卡</button>
<hr />
<span>恭喜您抽中了：</span>
<span id="chouka_text">还没抽呢</span>
<img id="chou_img" src="" alt="" />
</body>
</html>
<script>
// 充值按钮
document.querySelector('#chongzhi_button').addEventListener('click',function(){
yue_text.innerText = Number(yue_text.innerText) + Number(chongzhi_input.value)
})
// 抽奖按钮
document.querySelector('#chouka_button').addEventListener('click',function(){
// 如果没钱
if(Number(yue_text.innerText) < 388){
alert('先生您好，实在不好意思，没钱充值的穷人没资格玩我们的抽卡游戏')
// 终于程序往下运行，因为函数一旦遇到return就结束了
return
}
// 抽奖
let player_list = ['钢铁侠','蝙蝠侠','蜘蛛侠']
let random_number_int = Math.floor(Math.random()*3) // 随机产生0，1，2
// 从数组中随机抽取，并替换节点文字，替换图片地址
chouka_text.innerHTML = player_list[random_number_int]
chou_img.src = './image/'+ player_list[random_number_int] +'.jpg'
// 扣款
yue_text.innerText = Number(yue_text.innerText) - 388
})
</script>
<style>
img{
width: 50vw;
}
a{
font-size: 40px;
color: red;
}
span{
font-size: 30px;
}
input{
margin: 10px;
padding: 10px;
font-size: 25px;
}
button{
padding: 5px 10px;
font-weight: bold;
font-size: 25px;
}
marquee{
font-size: 20px;
margin: 20px;
}
</style>
