ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ♡ﻌﻌﻌﻌ
每个人的内心都有一则好消息
好消息是你不知道自己能有多厉害！
你能有多爱这个世界！
你能到达什么成就！
你的潜力有多少！
——安妮弗兰克
思维导图
一、JavaScript介绍
1.1 JavaScript 是什么
体验JS代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.pink {background-color: pink;}</style>
</head><body><button class="pink">按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><script>let bts = document.querySelectorAll('button')for (let i = 0; i < bts.length; i++) {bts[i].addEventListener('click', function () {document.querySelector('.pink').className = ''this.className = 'pink'})}</script>
</body></html>效果：点击按钮，按钮唯一高亮
1.2 JavaScript 书写位置
（1）内部 JavaScript
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 内部js --><script>// 页面弹出警示框alert('你好，js~')</script>
</body></html>效果：
（2）外部 JavaScript
js文件位置：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="./js/my.js">// 中间不要写内容</script>
</body></html>（3）内联 JavaScript
总结
练习
1.3 JavaScript 的注释
1.4 JavaScript的结束符
1.5 输入和输出语法
输出语法
输入语法
练习
JavaScript 代码执行顺序
实操代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1. 文档输出内容document.write('我是div标签')document.write('<h1>我是标题</h1>')// 2. 控制台打印输出 给 程序员console.log('看看对不对')console.log('日志')// 3. 输入语句prompt('请输入您的年龄：')</script>
</body></html>效果：
进入页面先弹出提示框
点击确定后页面再渲染、控制台打印
1.6 字面量
二、变量
2.1 变量是什么？
2.2 变量基本使用☆
（1）声明变量
（2）变量赋值
赋值运算符
变量初始化
总结
实践代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1. 声明一个年龄变量// let age// // 2. 赋值 = 赋值// age = 18// console.log(age)// 3. 声明的同时直接赋值 变量的初始化// let age = 18// 小案例let num = 20let uname = 'pink老师'console.log(num)console.log(uname)</script>
</body></html>效果：
练习
（3）更新变量
实操代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1 声明的同时直接赋值 变量的初始化// let age = 18// age = 19// // let age = 19// console.log(age)// 2. 声明多个变量 // let age = 18, uname = '迪丽热巴'// console.log(age, uname)// 提倡声明的方式let age = 19let uname = '迪丽热巴'console.log(age, uname)</script>
</body></html>效果：
（4）声明多个变量
练习
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 输出用户名案例// 1. 用户输入// prompt('请输入姓名')// 2. 内部处理保存数据let uname = prompt('请输入姓名')// 3. 打印输出document.write(uname)</script>
</body></html>效果：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// let if = 10let num1 = 'pink老师'let num2 = '戚薇'let temp// 都是把右边给左边temp = num1num1 = num2num2 = tempconsole.log(num1, num2)</script>
</body></html>2.3 变量的本质
2.4 变量命名规则与规范
不能以关键字命名变量
严格区分大小写
练习代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1. 姓名let uname = prompt('请输入姓名')let age = prompt('请输入年龄')let gender = prompt('请输入性别')document.write(uname, age, gender)</script>
</body></html>
二. 变量拓展-let和var的区别
先使用，再声明
声明过的变量可以重复声明
let不允许声明前使用
也不允许重复声明
二. 变量拓展-数组
1.1 数组的基本使用
练习：
术语：
数组实操代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// let arr = [10, 20, 30]// 1. 声明数组 有序 let arr = ['刘德华', '张学友', '黎明', '郭富城', 'pink老师', 10]// 2. 使用数组 数组名[索引号] 从0// console.log(arr)console.log(arr[0]) // 刘德华console.log(arr[4])// 3. 数组长度 = 索引号 + 1 console.log(arr.length) // 6// let 刘德华 = 10// console.log(刘德华)</script>
</body></html>效果：
三、常量
常量不允许再次赋值（不会改变）
常量声明的时候必须赋值
四、数据类型☆
4.1 数据类型 – 数字类型（Number）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1. 页面弹出输入框let r = prompt('请输入圆的半径：')// 2. 计算圆的面积（内部处理）let re = 3.14 * r * r// 3. 页面输出document.write(re)// NaN not a number </script>
</body></html>效果：
4.1 数据类型 – 字符串类型（string）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// let age = 20// // 模板字符串 外面用`` 里面 ${变量名}// document.write(`我今年${age}岁了`)let uname = prompt('请输入您的姓名:')let age = prompt('请输入您的年龄:')// 输出document.write(`大家好，我叫${uname}， 我今年贵庚${age}岁了`)</script>
</body></html>4.1 数据类型 – 布尔类型（boolean）
4.2 检测数据类型
五、类型转换
5.1 为什么需要类型转换
5.2 隐式转换
5.3 显式转换
转换为数字型
代码（隐式转换）：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1. 用户输入 prompt 得到是字符串类型 要转换为 数字型let num1 = +prompt('请输入第一个数字：')let num2 = +prompt('请输入第二个数字：')// 2. 输出alert(`两个数相加的和是:${num1 + num2}`)</script>
</body></html>
综合案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2 {text-align: center;}table {/* 合并相邻边框 */border-collapse: collapse;height: 80px;margin: 0 auto;text-align: center;}th {padding: 5px 30px;}table,th,td {border: 1px solid #000;}</style>
</head><body><h2>订单确认</h2><script>// 1 用户输入let price = +prompt('请输入商品价格：')let num = +prompt('请输入商品数量：')let address = prompt('请输入收获地址：')// 2.计算总额let total = price * num// 3.页面打印渲染document.write(`<table><tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总价</th><th>收货地址</th></tr><tr><td>小米青春版PLUS</td><td>${price}元</td><td>${num}</td><td>${total}元</td><td>${address}</td></tr></table>`)</script>
</body></html>六、常见错误
)