js复习
js阶段的主要内容有：
1.变量的定义和使用
2.循环结构：for forEach map filter
3.分支结构：if...else 三元表达式
4.数组的定义和操作
5.对象的定义和操作
6.函数及函数封装
一：动态生成商品信息
- 以后凡是根据数据生成动态结构，都遵守一个原则： 要动态，先静态
我们需接收用户从键盘输入的四个值，最终生成一个html结构，打印到页面中
1.接收四个值-----定义4个变量 从键盘输入：prompt
2.根据变量生成html结构 ---- 拼接字符串---模板字符串
3.在页面中打印 ---- document.write
// 1.4个变量的定义
let goodsName, goodsPrice, goodsNum, address
// 2.从键盘输入并接收
goodsName = prompt('请输入商品名称')
goodsPrice = prompt('请输入商品价格')
goodsNum = prompt('请输入商品数量')
address = prompt('请输入商品收货地址')
// 3.准备生成网页结构
let htmlStr = `<table>
<thead>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>地址</th>
</thead>
<tbody>
<tr>
<td>${goodsName}</td>
<td>${goodsPrice}</td>
<td>${goodsNum}</td>
<td>${address}</td>
</tr>
</tbody>
</table>`
// 4.将生成的结构输出到页面中
document.write(htmlStr)
`
二：时间补0案例
- 在js中，转换bool值为false的有： '' "" 0 undefined null NaN
- NaN不能与任意值进行比较，比较的结果都是false
接收用户从键盘输入的一个数字，如果数字小于10，则在前面补0
- 接收用户输入：定义变量 + prompt
- prompt接收的值一定是字符串
- 判断是否是数字，如果不是，则给出提示，如果是则补0 -- if + 先转换再判断
- 在前面补一个字符串0，因为如果在数字前面+0，数字不变
let num = prompt('请输入一个数字')
// 判断当前用户输入的是否是数字--先转换再判断
// 1.能够转换 》》
// 2.不能转换 》》
console.log(+num)
if (!+num) {
alert('你输入的不是一个数字')
} else {
// 如果用户输入的是数字，我要再判断值是否小于10
if (num < 10) {
console.log('0' + num)
} else {
console.log(num)
}
}
`
三：for-1-100偶数和
- 变量的使用：先声明 ，赋值，使用
- 有一个变量存储和
- 1-100：加每一个值，应该是一个循环操作，范围固定为1-100，固定循环次数，优先使用for循环
- 循环三要素：变量初始值 判断条件 变量的变化
// for-1-100偶数和
let sum = 0
// 要素可以写在其它位置，但是for中的;不能少
for (let i = 1; i <= 100; i++) {
if (i % 2 == 0) {
sum += i
}
}
console.log(sum)
`
四：ATM
- 需求驱动开发
要根据用户的输入来决定到底重复操作多少次 --- while循环(适合执行不确定次数的循环操作)
判断用户的输入，根据用户输入执行不同的操作 ---- if
建议：
1.先做一次
2.再加循环
3.处理细节
// 定义一个初始金额
let initMoney = 1000
let choice
// 重复让用户进行操作
while (1) {
// 1.用户提示
choice = prompt(`请输入你的选择
1.取款
2.存款
3.查看余额
4.退出`)
// 2.判断用户输入
if (choice == 1) {
let money = +prompt('请输入取款金额')
// 判断取款金额是否小于总金额
if (money < initMoney) {
initMoney -= money
} else {
alert('余额不足')
}
}
else if (choice == 2) {
let money = +prompt('请输入存款金额')
if (money > 0) {
initMoney += money
} else {
alert('输入的存款金额不合理')
}
}
else if (choice == 3) {
alert(initMoney)
}
else if (choice == 4) {
console.log('退出')
break
}
else {
console.log('输入不正确')
}
}
`
五：打印多行多列小星星
- 需求驱动开发
先打印一行N个星星：for循环
再打印多行 -- for循环
// 打印一行col个星星
let col = +prompt('请输入你一行需要打印的星星的数量')
let row = +prompt('请输入你想打印的星星的行数')
for (let j = 0; j < row; j++) {
for (let i = 0; i < col; i++) {
document.write('⭐')
}
document.write('<br>')
}
