当前位置： 首页 > news >正文

做影视网站的软件/百度广告位价格表

news 文章来源：https://blog.csdn.net/liyou123456789/article/details/129363413 2025/3/14 20:55:51
做影视网站的软件,百度广告位价格表,怎么做网站评估,做养生网站怎么样零、文章目录 文章地址 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee：https://gitee.com/bluecusliyou/TechLearnGithub：https:…

零、文章目录

文章地址

  • 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
  • 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

  • Gitee：https://gitee.com/bluecusliyou/TechLearn
  • Github：https://github.com/bluecusliyou/TechLearn

JavaScript基础五、语句

1、表达式和语句

（1）表达式和语句

  • 表达式：可以被求值的代码，JavaScript 引擎会将其计算出一个结果。
  • 语句：一段可以执行的代码。
  • 表达式和语句区别：
    • 表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。
    • 语句：而语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。

（2）三大流程控制语句

  • 顺序结构：从上往下顺序执行代码

  • 分支结构：根据条件选择性执行代码

    • If分支语句

    • 三元运算符

    • switch 语句

  • 循环结构：重复执行代码

    • while循环
    • for循环

image-20230228182016158

2、分支语句

（1）if分支语句

  • if分支语句有三种使用：单分支、双分支、多分支

  • 单分支使用语法：

    • 括号内的条件为true时，进入大括号里执行代码

    • 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

    • 如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做

image-20230228182314640

if单分支语句案例如下：

<!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>if单分支语句</title>
</head><body><script>// 单分支语句if (false) {console.log('执行语句1')}if (3 > 5) {console.log('执行语句2')}if (2 === '2') {console.log('执行语句3')}//1. 除了0 所有的数字都为真if (1) {console.log('执行语句4')}if (0) {console.log('执行语句5')}//2.除了 '' 所有的字符串都为真 trueif ('pink老师') {console.log('执行语句6')}if ('') {console.log('执行语句7')}//输入单分支判断// 1. 用户输入let score = +prompt('请输入成绩')// 2. 进行判断输出if (score >= 700) {alert('恭喜高考成功')}</script>
</body></html>
  • 双分支使用语法：

image-20230228183000840

if双分支语句案例如下：

<!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>if双分支语句</title>
</head><body><script>// 1. 用户输入let uname = prompt('请输入用户名:')let pwd = prompt('请输入密码:')// 2. 判断输出if (uname === 'pink' && pwd === '123456') {alert('恭喜登录成功')} else {alert('用户名或者密码错误')}</script>
</body></html>

闰年案例如下：

image-20230228183218711

<!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>闰年案例</title>
</head><body><script>// 1. 用户输入let year = +prompt('请输入年份')// 2. 判断输出if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {alert(`${year}年是闰年`)} else {alert(`${year}年是平年`)}</script>
</body></html>

  • 多分支使用语法：适合于有多个结果的时候， 比如学习成绩可以分为： 优 良 中 差

    • 先判断条件1，若满足条件1就执行代码1，其他不执行

    • 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行

    • 若依然不满足继续往下判断，依次类推

    • 若以上条件都不满足，执行else里的代码n

    • 注：可以写N个条件，但这里演示只写2个

image-20230228183443867

判断成绩案例案例如下：

image-20230228183615847

<!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>判断成绩案例</title>
</head><body><script>// 1. 用户输入let score = +prompt('请输入成绩：')// 2. 判断输出if (score >= 90) {alert('成绩优秀，宝贝，你是我的骄傲')} else if (score >= 70) {alert('成绩良好，宝贝，你要加油哦~~')} else if (score >= 60) {alert('成绩及格，宝贝，你很危险~')} else {alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~')}</script>
</body></html>

（2）三元运算符

  • 使用场景： 是比 if 双分支更简单的写法，能够满足简单双分支的需求
  • 符号：? 与 : 配合使用
  • 语法：

image-20230228183733774

案例如下：

<!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>三元运算符</title>
</head><body><script>// 三元运算符// 条件 ? 代码1 : 代码2// if双分支实现// if (3 < 5) {//   alert('真的')// } else {//   alert('假的')// }// 三元运算符3 < 5 ? alert('真的')  : alert('假的')</script>
</body></html>

求最大值案例：

image-20230228184227616

<!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>求最大值案例</title>
</head><body><script>// 1. 用户输入let num1 = +prompt('请您输入第一个数：')let num2 = +prompt('请您输入第二个数：')// 2. 判断输出-三元运算符num1 > num2 ? alert(`最大值是: ${num1}`) : alert(`最大值是: ${num2}`)</script>
</body></html>

数字补0案例：

image-20230228184241699

<!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>数字补0案例</title>
</head><body><script>// 1. 用户输入 let num = prompt('请您输入一个数字:')// 2. 判断输出- 小于10才补0num = num < 10 ? 0 + num : numalert(num)</script>
</body></html>

（5）switch语句

  • 找到跟小括号里数据全等的case值，并执行里面对应的代码
  • 若没有全等 === 的则执行default里的代码
  • 例：数据若跟值2全等，则执行代码2

image-20230228184451597

  • 注意事项：
    • switch case语句一般用于等值判断,不适合于区间判断，if适合区间判断
    • switch case一般需要配合break关键字使用 没有break会造成case穿透，也就是从匹配到的值一直往下执行直到break或者结束。

案例如下：

<!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>switch选择语句</title>
</head><body><script>switch (2) {case 1:console.log('您选择的是1')break // 退出switchcase 2:console.log('您选择的是2')break // 退出switchcase 3:console.log('您选择的是3')break // 退出switchdefault:console.log('没有符合条件的')}</script>
</body></html>

简单计算器案例：

image-20230228184928481

<!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>简单计算器案例</title>
</head><body><script>// 1.用户输入  2个数字 +  操作符号  + - *  / let num1 = +prompt('请您输入第一个数字:')let num2 = +prompt('请您输入第二个数字:')let sp = prompt('请您输入 + - * / 其中一个:')// 2. 判断输出switch (sp) {case '+':alert(`两个数的加法操作是${num1 + num2}`)breakcase '-':alert(`两个数的减法操作是${num1 - num2}`)breakcase '*':alert(`两个数的乘法操作是${num1 * num2}`)breakcase '/':alert(`两个数的除法操作是${num1 / num2}`)breakdefault:alert(`你干啥咧，请输入+-*/`)}</script>
</body></html>

3、循环语句

（1）断点调试

  • 作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

  • 浏览器打开调试界面

    • 按F12打开开发者工具
    • 点到sources一栏
    • 选择代码文件

  • 断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

image-20230228185524820

（2）while循环

  • while循环： 就是在满足条件期间，重复执行某些代码。

  • while 循环基本语法

    • 跟if语句很像，都要满足小括号里的条件为true才会进入 循环体 执行代码

    • while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

    image-20230228190004559

  • while 循环三要素：循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

    • 变量起始值

    • 终止条件（没有终止条件，循环会一直执行，造成死循环）

    • 变量变化量（用自增或者自减）

image-20230228190326040

案例如下：

<!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>while循环</title>
</head><body><script>// // 1. 变量的起始值// let i = 1// // 2. 终止条件// while (i <= 3) {//   document.write('我要循环三次 <br>')//   // 3. 变量的变化量//   i++// }// 1. 变量的起始值let end = +prompt('请输入次数:')let i = 1// 2. 终止条件while (i <= end) {document.write(`我要循环${end}次 <br>`)// 3. 变量的变化量i++}</script>
</body></html>

while循环练习：

<!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>while循环练习</title>
</head><body><script>// 1. 页面输出1~100// let i = 1// while (i <= 100) {//   document.write(`这是第${i}个数<br>`)//   i++// }// 2. 页面输出1~100 累加和// let i = 1  // 变量的起始值// let sum = 0  // 累加和变量// while (i <= 100) {//   // 把i 累加到 sum 里面//   // sum = sum + i//   sum += i//   i++// }// console.log(sum) // 5050// 3. 页面输出1~100 偶数和let i = 1let sum = 0while (i <= 100) {// 筛选偶数 只有偶数才累加if (i % 2 === 0) {sum = sum + i}// 每次循环都要自加i++}console.log(sum)</script>
</body></html>

（3）for循环

  • **作用：**重复执行代码
  • **好处：**把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

image-20230228194102899

案例如下：

<!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>for循环的基本使用</title>
</head><body><script>// 利用for循环输出for (let i = 1; i <= 3; i++) {document.write('for循环输出<br>')}</script>
</body></html>

for循环练习：

<!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>for循环练习</title>
</head><body><script>// 1. 输出1~100岁for (let i = 1; i <= 100; i++) {document.write(`今年我${i}岁了 <br>`)}// 2. 求1~100之间的偶数和let sum = 0for (let i = 1; i <= 100; i++) {if (i % 2 === 0) {// 把i加到sum里面去// sum = sum + isum += i}}document.write(`1~100之间的偶数和是: ${sum}`)// 3. 页面打印5个小星星for (let i = 1; i <= 5; i++) {document.write('★')}// 4. 打印数组let arr = ['刘德华', '刘晓强', '刘晓庆', '刘若英', '刘热巴', 'pink老师']    // 必须从0开始，因为数组索引号从0开始  arr.length = 6// 遍历数组：从第一个循环到最后一个for (let i = 0; i < arr.length; i++) {console.log(arr[i])}//超出索引let arr1 = []console.log(arr1)console.log(arr1[0]) // undefinedconsole.log(arr1[1]) // undefined</script>
</body></html>
  • for循环嵌套：一个循环里再套一个循环，一般用在for循环里

image-20230228195027294

案例如下：

<!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>for循环的嵌套</title>
</head><body><script>// 外层循环打印 第 n 天for (let i = 1; i <= 3; i++) {document.write(`第${i}天<br>`)// 里层循环打印 第几个单词for (let j = 1; j <= 5; j++) {document.write(`记住了第${j}个单词<br>`)}}</script>
</body></html>

打印五行五列小星星：

image-20230228195347717

<!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>打印五行五列小星星</title>
</head><body><script>// // 外层循环打印行数// for (let i = 1; i <= 5; i++) {//   // 里层循环打印几个星星//   for (let j = 1; j <= 5; j++) {//     document.write('☆')//   }//   // 进行换行显示//   document.write('<br>')// }let row = +prompt('请输入行数:')let col = +prompt('请输入列数:')// 外层循环打印行数for (let i = 1; i <= row; i++) {// 里层循环打印几个星星for (let j = 1; j <= col; j++) {document.write('☆')}// 进行换行显示document.write('<br>')}</script>
</body></html>

打印直角三角形：

image-20230228195502134

<!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>打印直角三角形</title>
</head><body><script>// 1. 外层循环控制行数for (let i = 1; i <= 5; i++) {// 2. 里层循环控制列数（几个星星）for (let j = 1; j <= i; j++) {document.write('◆')}// 换行document.write('<br>')}</script>
</body></html>

99乘法表：

image-20230301092512331

<!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>99乘法表</title><style>span {display: inline-block;width: 100px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);background-color: rgba(255, 192, 203, .1);text-align: center;color: hotpink;}</style>
</head><body><script>// 1. 外层循环控制行数for (let i = 1; i <= 9; i++) {// 2. 里层循环控制列数for (let j = 1; j <= i; j++) {document.write(`<span>${j} X ${i} = ${i * j}</span>`)}// 换行document.write('<br>')}</script>
</body></html>

（5）循环退出

  • 循环结束：

    • break：退出循环
    • continue：结束本次循环，继续下次循环

  • 区别：

    • continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
    • break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

  • for和while

    • while(true) 来构造“无限”循环，需要使用break退出循环。

      • for(;😉 也可以来构造“无限”循环，同样需要使用break退出循环。

案例如下：

<!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>while退出循环</title>
</head><body><script>let i = 1while (i <= 5) {console.log(i)if (i === 3) {break  // 退出循环}i++}let j = 1while (j <= 5) {if (j === 3) {j++continue //继续下一次循环}console.log(j)j++}</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>for退出循环</title>
</head><body><script>for (let i = 1; i <= 5; i++) {if (i === 3) {continue  // 退出本次循环，本次循环中 continue下面的语句不在执行}console.log(i)}for (let i = 1; i <= 5; i++) {if (i === 3) {break  // 退出整个循环 结束循环}console.log(i)}// 无限循环for (;;) {console.log(11)}</script>
</body></html>

（6）for遍历数组

数组大于10筛选案例：

image-20230301105320017

<!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>数组大于10筛选案例</title>
</head><body><script>let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]// 1. 声明新的空的数组let newArr = []// 2. 遍历旧数组for (let i = 0; i < arr.length; i++) {if (arr[i] >= 10) {// 3. 满足条件 追加给新的数组newArr.push(arr[i])}}// 4. 输出新的数组console.log(newArr)</script>
</body></html>

数组去0案例：

image-20230301105440947

<!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>数组去0案例</title>
</head><body><script>let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]// 1. 声明一个新的数组let newArr = []// 2. 遍历筛选for (let i = 0; i < arr.length; i++) {if (arr[i] !== 0) {newArr.push(arr[i])}}// 输出新数组console.log(newArr)</script>
</body></html>

数组求和以及平均值：

image-20230301102654504

<!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>数组求和以及平均值</title>
</head><body><script>let arr = [2, 6, 1, 7, 4]// 1. 求和的变量 sumlet sum = 0// 2.遍历累加for (let i = 0; i < arr.length; i++) {sum += arr[i]}console.log(`数组的和的结果是: ${sum}`)// 3. 平均值  和 / arr.length  = 4console.log(`数组的平均值结果是: ${sum / arr.length}`)</script>
</body></html>

数组最大值最小值：

image-20230301102717355

<!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>数组最大值最小值</title>
</head><body><script>let arr = [2, 6, 1, 7, 400, 55, 88, 100]// max 里面要存的是最大值let max = arr[0]// min 要存放的是最小值let min = arr[0]// 遍历数组for (let i = 1; i < arr.length; i++) {// 如果max 比 数组元素里面的值小，我们就需要把这元素赋值给 max// if (max < arr[i]) max = arr[i]max < arr[i] ? max = arr[i] : max// 如果min 比 数组元素大， 我们就需要把数组元素给min// if (min > arr[i]) {//   min = arr[i]// }min > arr[i] ? min = arr[i] : min}// 输出console.log(`最大值是: ${max}`)console.log(`最小值是: ${min}`)</script>
</body></html>

冒泡排序：

image-20230301132050672

image-20230301132147061

案例如下：

<!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>冒泡排序</title>
</head><body><script>// 冒泡排序let arr = [2, 4, 3, 5, 1]for (let i = 0; i < arr.length - 1; i++) {for (let j = 0; j < arr.length - i - 1; j++) {// 开始交换 但是前提 第一个数大于第二个数才交换if (arr[j] > arr[j + 1]) {// 交换2个变量let temp = arr[j]arr[j] = arr[j + 1]arr[j + 1] = temp}}}</script>
</body></html>

生成柱形图案例：

image-20230301131638607

<!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>生成柱形图案例</title><style>* {margin: 0;padding: 0;}.box {display: flex;width: 700px;height: 300px;border-left: 1px solid pink;border-bottom: 1px solid pink;margin: 50px auto;justify-content: space-around;align-items: flex-end;text-align: center;}.box>div {display: flex;width: 50px;background-color: pink;flex-direction: column;justify-content: space-between;}.box div span {margin-top: -20px;}.box div h4 {margin-bottom: -35px;width: 70px;margin-left: -10px;}</style>
</head><body><script>        // 声明一个新的数组let arr = []for (let i = 1; i <= 4; i++) {// 四次弹框采集数据// let num = prompt(`请输入第${i}季度的数据:`)// arr.push(num)arr.push(prompt(`请输入第${i}季度的数据:`))}// 盒子开头document.write(` <div class="box">`)// 盒子中间 利用循环的形式  跟数组有关系for (let i = 0; i < arr.length; i++) {document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i + 1}季度</h4></div>          `)}// 盒子结尾document.write(` </div>`)</script>
</body></html>

image-20230301132014008

（7）for遍历对象

  • for 遍历对象的问题：

    • 对象没有像数组一样的length属性,所以无法确定长度
    • 对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标

  • for 遍历对象的方法

    • 一般不用这种方式遍历数组、主要是用来遍历对象

    • for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名

    • 由于 k 是变量, 所以必须使用 [ ] 语法解析

    • 一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值

image-20230303133139526

案例如下：

<!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>遍历对象</title>
</head><body><script>// for in 我们不推荐遍历数组// let arr = ['pink', 'red', 'blue']// for (let k in arr) {//   console.log(k)  // 数组的下标 索引号  但是是字符串 '0'//   console.log(arr[k])  // arr[k]// }// 1. 创建对象let obj = {uname: 'pink老师',age: 18,gender: '男'}// 2. 遍历对象for (let k in obj) {console.log(k) // 属性名  'uname'   'age'console.log(obj[k])  // 输出属性值  obj[k]}</script>
</body></html>

遍历数组对象：

image-20230303133732199

<!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>遍历数组对象</title>
</head><body><script>let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小红', age: 19, gender: '女', hometown: '河南省' },{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }]for (let i = 0; i < students.length; i++) {// console.log(i)  // 下标索引号// console.log(students[i]) // 每个对象console.log(students[i].name)console.log(students[i].hometown)}</script>
</body></html>

渲染学生信息表：

image-20230303133844756

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渲染学生信息表</title><style>table {width: 600px;text-align: center;}table,th,td {border: 1px solid #ccc;border-collapse: collapse;}caption {font-size: 18px;margin-bottom: 10px;font-weight: 700;}tr {height: 40px;cursor: pointer;}table tr:nth-child(1) {background-color: #ddd;}table tr:not(:first-child):hover {background-color: #eee;}</style>
</head><body><h2>学生信息</h2><p>将数据渲染到页面中...</p><table><caption>学生列表</caption><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>家乡</th></tr><!-- script写到这里 --><script>// 1. 数据准备let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小红', age: 19, gender: '女', hometown: '河南省' },{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },{ name: '小丽', age: 18, gender: '女', hometown: '山东省' },{ name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }]// 2. 渲染页面for (let i = 0; i < students.length; i++) {document.write(`<tr><td>${i + 1}</td><td>${students[i].name}</td><td>${students[i].age}</td><td>${students[i].gender}</td><td>${students[i].hometown}</td></tr>`)}</script></table></body></html>

学成在线精品推荐：

image-20230303135425109

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>学成在线精品推荐</title><link rel="stylesheet" href="./css/style.css">
</head><body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><!-- <li><a href="#"><img src="images/course01.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • <span>1125</span>人在学习</div></a></li> --><script>let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125}, {src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357}, {src: 'images/course03.png',title: 'Angular2大前端商城实战项目演练',num: 22250}, {src: 'images/course04.png',title: 'AndroidAPP实战项目演练',num: 389}, {src: 'images/course05.png',title: 'UGUI源码深度分析案例',num: 124}, {src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432}, {src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888}, {src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590}, {src: 'images/course04.png',title: '自动添加的模块',num: 1000}]for (let i = 0; i < data.length; i++) {document.write(`<li><a href="#"><img src=${data[i].src} title="${data[i].title}"><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a></li>`)}</script></ul></div></div></body></html>

4、综合案例

image-20230228193047085

<!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>ATM取款机综合案例</title>
</head><body><script>// 1. 开始循环 输入框写到 循环里面// 3. 准备一个总的金额let money = 100while (true) {let re = +prompt(`请您选择操作：1.存钱2.取钱3.查看余额4.退出`)// 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面 因为4需要break退出循环if (re === 4) {break}// 4. 根据输入做操作switch (re) {case 1:// 存钱let cun = +prompt('请输入存款金额')money = money + cunbreakcase 2:// 存钱let qu = +prompt('请输入取款金额')money = money - qubreakcase 3:// 存钱alert(`您的银行卡余额是${money}`)break}}</script>
</body></html>

相关文章：

JavaScript基础五、语句

零、文章目录 文章地址 个人博客-CSDN地址&#xff1a;https://blog.csdn.net/liyou123456789个人博客-GiteePages&#xff1a;https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee&#xff1a;https://gitee.com/bluecusliyou/TechLearnGithub&#xff1a;https:…...

编程日记 2023/5/9 2:19:59

青龙面板399乐园

1.拉库 ql raw https://wjkjy.cn/wp-content/uploads/2023/03/1678104978-afaecb98a9df61e.js 2.抓包 7.26 399乐园 每天 七八毛左右 脚本已完成全部任务&#xff0c;自动提现 下载链接&#xff1a;https://3mao.lanzoul.com/izGDh084oogh 抓包链接 https://339.mhhuanyue.c…...

编程日记 2023/5/9 2:19:57

自动化注册组件

// components/index.js export default { install(app) { const req require.context(‘./’, false, /.vue$/) // console.log(req, ‘req’) req.keys().forEach((item) > { // console.log(item, ‘item’) const com req(item).default // console.log(com, ‘com’)…...

编程日记 2023/5/9 2:19:55

【JS代码优化一】分支优化篇

序&#xff1a;如何让代码看起来更优雅&#xff1f;代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息&#xff08;状态&#xff09;、表达相关的情绪&#xff08;函数&#xff09;&#xff0c;所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系…...

编程日记 2023/5/9 2:19:52

软件测试-接口测试-补充

文章目录 1.持续集成2. mock测试3.Fiddler 抓包工具3.1 弱网测试4. webservice1.持续集成 持续集成概念 重复执行开发提交代码并集成到主干； aim 加速产品迭代 好处 快速发现问题 避免分支大幅度偏离主干 加速产品发布 工具 git：源代码版本工具github：代码仓库jenkins：持续…...

编程日记 2023/5/9 2:19:50

Spring笔记（5）：Beans自动装配

为什么需要使用自动装配 在通过XML配置文件进行设置Bean元素注入与声明注册后&#xff0c;我们能够发现一个问题&#xff0c;在项目中是会存在大量对象的&#xff0c;不可能全部都写在XML文件中&#xff0c;那会显得非常的臃肿&#xff0c;不利于后期维护&#xff0c;所以需要用…...

编程日记 2023/5/9 2:19:48

Spark+Vue+Springboot 协同过滤额音乐推荐大数据深度学习项目

一、项目背景 随着互联网的发展,大数据的到来,传统的音乐行业受到了很大的冲击,原有的音乐数字化给人们生活带来了极大的便利。随着数字音乐的兴起,各大音乐平台层出不穷,人们在音乐平台上收听音乐的时,常常因为歌曲信息繁杂,而不能找到自己想听的音乐。为了解决这个问题,音乐…...

编程日记 2023/5/9 2:19:45

JDBC的实现（IDEA版）

前期准备 开发环境&#xff1a; IDEA 2021.1.3 JAVA 1.8 MYSQL 8.0.32 msql用户名:root 密码&#xff1a;123 下载MySQL JDBC 驱动 前往MySQL官网下载对应版本的MySQL Connector/J驱动 &#xff08;下载地址&#xff1a;https://dev.mysql.com/downloads/connector/j/&#xff…...

编程日记 2023/5/9 2:19:43

人员摔倒识别预警系统 人员跌倒检测算法 yolov7

人员摔倒识别预警系统 人员跌倒检测算法基于yolov7网络模型计算机识别技术&#xff0c;人员摔倒识别预警系统 人员跌倒检测算法对画面中人员摔倒进行实时检测识别抓拍告警。YOLOv7 的策略是使用组卷积来扩展计算块的通道和基数。研究者将对计算层的所有计算块应用相同的组参数和…...

编程日记 2023/5/9 2:19:41

Spring-Cloud-Gateway集成Nacos如何做负载均衡？

spring-cloud-alibaba的低版本 如果所用的SpringCloud和Nacos的版本信息如下&#xff1a; <spring-cloud.version>Hoxton.SR10</spring-cloud.version> <spring-cloud-alibaba.version>2.2.6.RELEASE</spring-cloud-alibaba.version>网关的依赖如下&…...

编程日记 2023/5/9 2:19:38

【数据挖掘与商务智能决策】第四章 逻辑回归模型

逻辑回归模型算法原理 逻辑回归模型的数学原理 %matplotlib inline# 补充知识点：Sigmoid函数绘制 import matplotlib.pyplot as plt import numpy as npx = np.linspace(-6, 6) # 通过linspace()函数生成-6到6的等差数列，默认50个数 y = 1.0...

编程日记 2023/5/9 2:19:36

滚动升级回滚

滚动升级回滚 ReplicationController 资源文件 apiVersion: v1 kind: ReplicationController metadata:name: kubia-v1labels:app: kubia spec:replicas: 3template:metadata:name: kubialabels:app: kubiaspec:containers:- image: luksa/kubia:v1name: nodejes --- apiVer…...

编程日记 2023/5/9 2:19:33

2023/3/6 VUE - 组件传值【通信】方式

1 父亲传子代传值【子代使用父代的数据】 1.1 props传值 父亲给儿子传值&#xff1a; 爷爷给孙子传值&#xff1a; 这个props传值的方式&#xff0c;只能一代一代的往下传&#xff0c;不能跨代传值。 有一个问题&#xff1a;子组件不能修改父组件的值&#xff1a; 1.2 …...

编程日记 2023/5/9 2:19:31

MedCalc v20.217 医学ROC曲线统计分析参考软件

MedCalc是一款医学 ROC 曲线统计软件，用于ROC曲线分析的参考软件，医学工作者设计的医学计算器，功能齐全。它可以帮助医生快速作出普通的医学计算，从而对症下药。提供超过76种常用的规则和方法，包括：病人数据、单位参数、费用计算等等。甚至可以将图形另存为BMP，PNG，GIF…...

编程日记 2023/5/9 2:19:29

欢乐消除开心假日协议解密

欢乐消除开心假日协议解密协/议/流/量/解/密分析欢乐消除开心假日这款游戏流量的协议加密方式。序欢乐消除开心假日是一款合成模拟家装的游戏&#xff0c;在这个游戏中&#xff0c;你将成为一位充满热情的设计师&#xff0c;与好友一起经营工作室。你需要根据客户的需求重新设计…...

编程日记 2023/5/9 2:19:26

Android Service知识

一. 概览 Service 是一种可在后台执行长时间运行操作而不提供界面的应用组件。服务可由其他应用组件启动&#xff0c;而且即使用户切换到其他应用&#xff0c;服务仍将在后台继续运行。此外&#xff0c;组件可通过绑定到服务与之进行交互&#xff0c;甚至是执行进程间通信 (IPC…...

编程日记 2023/5/9 2:19:23

axios的get请求传入数组参数后端无法接收的问题

问题描述 在做项目时&#xff0c;需要把前端的数组通过axios的get请求发送到后端处理&#xff0c;于是像这样直接发送&#xff1a; axios.get(url,{params:{arr: update_arr}})这时在后端接收后报错说&#xff1a;没有 ‘arr’ 这个key&#xff1a; arr request.GET[arr] pr…...

编程日记 2023/5/11 6:48:01

奖金发放-课后程序(Python程序开发案例教程-黑马程序员编著-第3章-课后作业)

实例2&#xff1a;奖金发放 某企业发放的奖金是根据利润和提成计算的&#xff0c;其规则如表1所示。 表1 奖金发放规则 利润&#xff08;万元&#xff09; 奖金提成&#xff08;%&#xff09; I≤10 10% 10&#xff1c;I≤20 7.5% 20&#xff1c;I≤20 5% 10&#xf…...

编程日记 2023/5/9 2:19:21

第十四届蓝桥杯第三期模拟赛 【python】

第十四届蓝桥杯第三期模拟赛 【python】 文章目录第十四届蓝桥杯第三期模拟赛 【python】✨最小的十六进制&#xff08;python的16进制&#xff09;❓️问题描述答案提交&#x1f9e0;思路&#x1f5a5;︎参考答案✨Excel的列&#xff08;进制转化&#xff09;❓️问题描述答案…...

编程日记 2023/5/9 2:19:18

Python——函数（重点内容）

函数 函数是组织好的&#xff0c;可重复使用的&#xff0c;用来实现单一&#xff0c;或相关联功能的代码段。 函数能提高应用的模块性&#xff0c;和代码的重复利用率。你已经知道Python提供了许多内建函数&#xff0c;比如print()。但你也可以自己创建函数&#xff0c;这被叫…...

编程日记 2023/5/9 2:19:16

2023年如何在Google做外贸

2023年如何在Google做外贸 答案是&#xff1a;利用谷歌SEO获取自然流量促进成交。 随着全球化和数字化的发展&#xff0c;外贸行业越来越重视互联网的渠道拓展。 在Google搜索引擎上做好SEO优化&#xff0c;是吸引国际客户和提高品牌知名度的关键。 本文将探讨2023年如何在…...

编程日记 2023/5/9 2:19:13

Linux操作系统学习（线程池）

文章目录线程池线程池原理代码示例单例模式饿汉模式懒汉模式饿汉懒汉对比其他的锁线程池 线程池原理 ​ 线程池是一种线程使用模式。在多线程应用中&#xff0c;若每有一个任务&#xff0c;线程就去调度相应的函数去创建&#xff0c;当任务过多时&#xff0c;每次都去调度且每…...

编程日记 2023/5/8 11:35:40

JVM运行时数据区—Java虚拟机栈

虚拟机栈的背景 由于跨平台性的设计&#xff0c;java的指令都是根据栈来设计的。不同平台CPU架构不同&#xff0c;所以不能设计为基于寄存器的。 根据栈设计的优点是跨平台&#xff0c;指令集小&#xff0c;编译器容易实现&#xff0c;缺点是性能下降&#xff0c;实现同样的功…...

编程日记 2023/5/9 2:19:10

gitlab中文社区

1、获取gitlab中文社区项目 中文社区版项目&#xff1a;https://gitlab.com/xhang/gitlab 2、克隆中文仓库 git clone https://gitlab.com/xhang/gitlab.git 3、查看gitlab版本 diff 获取对应版本的中文 head -1 /opt/gitlab/version-manifest.txt #安装的是gitlab-ce…...

编程日记 2023/5/9 2:19:07

深度学习-第T2周——彩色图片分类

深度学习-第T2周——彩色图片分类深度学习-第P1周——实现mnist手写数字识别一、前言二、我的环境三、前期工作1、导入依赖项并设置GPU2、导入数据集3、归一化4、可视化图片四、构建简单的CNN网络五、编译并训练模型1、设置超参数2、编写训练函数六、预测七、模型评估深度学习-…...

编程日记 2023/5/9 2:19:04

GNU C编译器扩展关键字：__attribute__

目录 一、section 二、aligned 三、packed 四、format 五、weak 六、alias 七、noinline和always_inline GNU C增加了一个__attribute__关键字用来声明一个函数、变量或类型的特殊属性&#xff0c;可以知道编译器在编译过程中进行特定方面的优化或代码检查。 目前&…...

编程日记 2023/5/9 2:19:01

C++基础 | 从C到C++快速过渡

一、开发环境 c使用的编译器是g。 vim或者vscodeclionVS 二、C版本的Hello World /*** brief c版本helloworld示例* author Mculover666* date 2023/2/26*/#include <iostream> using namespace std;int main() {int a 1;double b 3.14;char c[] "str…...

编程日记 2023/5/9 2:18:57

【C++】仿函数 -- priority_queue

文章目录一、priority_queue 的介绍和使用1、priority_queue 的介绍2、priority_queue 的使用3、priority_queue 相关 OJ 题二、仿函数1、什么是仿函数2、仿函数的作用三、priority_queue 的模拟实现一、priority_queue 的介绍和使用 1、priority_queue 的介绍 priority_queu…...

编程日记 2023/5/9 2:18:55

盘一盘C++的类型描述符（一）

前言 C的类型描述方式是从C语言继承来的&#xff0c;并且进行了扩充&#xff08;例如引用、非静态成员函数、模板实参等&#xff09;。但由于C语言中的类型描述方式就略微有点「反人类」&#xff0c;再经C扩展后就有点「反碳基生物」了~ 是的&#xff0c;当我第一次看到这种描…...

编程日记 2023/5/9 2:18:51

Peppol的发展史和基本框架

Peppol&#xff08;Pan-European Public Procurement Online&#xff09;是欧洲区域内的一个跨境公共采购电子商务平台试点项目&#xff0c;由欧盟委员会和Peppol联盟成员国共同资助建立&#xff0c;旨在通过制定标准化框架&#xff0c;推动欧盟成员国在公共采购相关的电子目录…...

编程日记 2023/5/9 2:18:48