js復(fù)習(xí)
js階段的主要內(nèi)容有：
1.變量的定義和使用
2.循環(huán)結(jié)構(gòu)：for forEach map filter
3.分支結(jié)構(gòu)：if...else 三元表達(dá)式
4.數(shù)組的定義和操作
5.對(duì)象的定義和操作
6.函數(shù)及函數(shù)封裝
一：動(dòng)態(tài)生成商品信息
- 以后凡是根據(jù)數(shù)據(jù)生成動(dòng)態(tài)結(jié)構(gòu)，都遵守一個(gè)原則： 要?jiǎng)討B(tài)，先靜態(tài)
我們需接收用戶從鍵盤(pán)輸入的四個(gè)值，最終生成一個(gè)html結(jié)構(gòu)，打印到頁(yè)面中
1.接收四個(gè)值-----定義4個(gè)變量 從鍵盤(pán)輸入：prompt
2.根據(jù)變量生成html結(jié)構(gòu) ---- 拼接字符串---模板字符串
3.在頁(yè)面中打印 ---- document.write
// 1.4個(gè)變量的定義
let goodsName, goodsPrice, goodsNum, address
// 2.從鍵盤(pán)輸入并接收
goodsName = prompt('請(qǐng)輸入商品名稱')
goodsPrice = prompt('請(qǐng)輸入商品價(jià)格')
goodsNum = prompt('請(qǐng)輸入商品數(shù)量')
address = prompt('請(qǐng)輸入商品收貨地址')
// 3.準(zhǔn)備生成網(wǎng)頁(yè)結(jié)構(gòu)
let htmlStr = `<table>
<thead>
<th>名稱</th>
<th>價(jià)格</th>
<th>數(shù)量</th>
<th>地址</th>
</thead>
<tbody>
<tr>
<td>${goodsName}</td>
<td>${goodsPrice}</td>
<td>${goodsNum}</td>
<td>${address}</td>
</tr>
</tbody>
</table>`
// 4.將生成的結(jié)構(gòu)輸出到頁(yè)面中
document.write(htmlStr)
`
二：時(shí)間補(bǔ)0案例
- 在js中，轉(zhuǎn)換bool值為false的有： '' "" 0 undefined null NaN
- NaN不能與任意值進(jìn)行比較，比較的結(jié)果都是false
接收用戶從鍵盤(pán)輸入的一個(gè)數(shù)字，如果數(shù)字小于10，則在前面補(bǔ)0
- 接收用戶輸入：定義變量 + prompt
- prompt接收的值一定是字符串
- 判斷是否是數(shù)字，如果不是，則給出提示，如果是則補(bǔ)0 -- if + 先轉(zhuǎn)換再判斷
- 在前面補(bǔ)一個(gè)字符串0，因?yàn)槿绻跀?shù)字前面+0，數(shù)字不變
let num = prompt('請(qǐng)輸入一個(gè)數(shù)字')
// 判斷當(dāng)前用戶輸入的是否是數(shù)字--先轉(zhuǎn)換再判斷
// 1.能夠轉(zhuǎn)換 》》
// 2.不能轉(zhuǎn)換 》》
console.log(+num)
if (!+num) {
alert('你輸入的不是一個(gè)數(shù)字')
} else {
// 如果用戶輸入的是數(shù)字，我要再判斷值是否小于10
if (num < 10) {
console.log('0' + num)
} else {
console.log(num)
}
}
`
三：for-1-100偶數(shù)和
- 變量的使用：先聲明 ，賦值，使用
- 有一個(gè)變量存儲(chǔ)和
- 1-100：加每一個(gè)值，應(yīng)該是一個(gè)循環(huán)操作，范圍固定為1-100，固定循環(huán)次數(shù)，優(yōu)先使用for循環(huán)
- 循環(huán)三要素：變量初始值 判斷條件 變量的變化
// for-1-100偶數(shù)和
let sum = 0
// 要素可以寫(xiě)在其它位置，但是for中的;不能少
for (let i = 1; i <= 100; i++) {
if (i % 2 == 0) {
sum += i
}
}
console.log(sum)
`
四：ATM
- 需求驅(qū)動(dòng)開(kāi)發(fā)
要根據(jù)用戶的輸入來(lái)決定到底重復(fù)操作多少次 --- while循環(huán)(適合執(zhí)行不確定次數(shù)的循環(huán)操作)
判斷用戶的輸入，根據(jù)用戶輸入執(zhí)行不同的操作 ---- if
建議：
1.先做一次
2.再加循環(huán)
3.處理細(xì)節(jié)
// 定義一個(gè)初始金額
let initMoney = 1000
let choice
// 重復(fù)讓用戶進(jìn)行操作
while (1) {
// 1.用戶提示
choice = prompt(`請(qǐng)輸入你的選擇
1.取款
2.存款
3.查看余額
4.退出`)
// 2.判斷用戶輸入
if (choice == 1) {
let money = +prompt('請(qǐng)輸入取款金額')
// 判斷取款金額是否小于總金額
if (money < initMoney) {
initMoney -= money
} else {
alert('余額不足')
}
}
else if (choice == 2) {
let money = +prompt('請(qǐng)輸入存款金額')
if (money > 0) {
initMoney += money
} else {
alert('輸入的存款金額不合理')
}
}
else if (choice == 3) {
alert(initMoney)
}
else if (choice == 4) {
console.log('退出')
break
}
else {
console.log('輸入不正確')
}
}
`
五：打印多行多列小星星
- 需求驅(qū)動(dòng)開(kāi)發(fā)
先打印一行N個(gè)星星：for循環(huán)
再打印多行 -- for循環(huán)
// 打印一行col個(gè)星星
let col = +prompt('請(qǐng)輸入你一行需要打印的星星的數(shù)量')
let row = +prompt('請(qǐng)輸入你想打印的星星的行數(shù)')
for (let j = 0; j < row; j++) {
for (let i = 0; i < col; i++) {
document.write('?')
}
document.write('<br>')
}
