前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础(二)

news/2025/1/14 7:34:16/

人生是旷野,不是轨道。  

思维导图

一、运算符

1.1 赋值运算符

1.2 一元运算符

1.3 比较运算符

1.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 num = +prompt('请输入一个数字:')// 2. 弹出结果alert(num % 4 === 0 && num % 100 !== 0)</script>
</body></html>

1.5 运算符优先级

二、语句

2.1 表达式和语句

2.2 分支语句

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

(2)双分支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>Document</title>
</head><body><script>// 1. 用户输入let uname = prompt('请输入用户名:')let pwd = prompt('请输入密码:')// 2. 判断输出if (uname === 'pink' && pwd === '123456') {alert('恭喜登录成功')} else {alert('用户名或者密码错误')}</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>// 1. 用户输入let year = +prompt('请输入年份')// 2. 判断输出if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {alert(`${year}年是闰年`)} else {alert(`${year}年是平年`)}</script>
</body></html>

(3)多分支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>Document</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>

(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 : 代码2// console.log(3 > 5 ? 3 : 5)// if (3 < 5) {//   alert('真的')// } else {//   alert('假的')// }// 3 < 5 ? alert('真的')  : alert('假的')let sum = 3 < 5 ? 3 : 5console.log(sum)</script>
</body></html>

(5)switch语句

case穿透

<!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.用户输入  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>

2.3 循环结构

2.3.1 断点调试

2.3.2 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>Document</title>
</head><body><script>// let age = 18// age = age + 1// age += 1// 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>

2.3.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>// let i = 1// while (i <= 5) {//   console.log(i)//   if (i === 3) {//     break  // 退出循环//   }//   i++// }let i = 1while (i <= 5) {if (i === 3) {i++continue}console.log(i)i++}</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>while (true) {let str = prompt('你爱我吗')// 退出条件 爱if (str === '爱') {break}}</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>// 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>


http://www.ppmy.cn/news/1113331.html

相关文章

OpenCV Series : Target Box Outline Border

角点 P1 [0] (255, 000, 000) P2 [1] (000, 255, 000) P3 [2] (000, 000, 255) P4 [3] (000, 000, 000)垂直矩形框 rect cv2.minAreaRect(cnt)targetColor roi_colortargetThickness 1targetColor (255, 255, 255)if lineVerbose:if …

C语言希尔排序

希尔排序&#xff08;Shell Sort&#xff09;是插入排序的一种&#xff0c;也称缩小增量排序&#xff0c;是直接插入排序算法的一种更高效的改进版本。希尔排序是非稳定排序算法。 希尔排序的基本思想是&#xff1a;先将整个待排序的记录序列分割成为若干子序列&#xff08;由…

运维Shell脚本小试牛刀(十二):awk编程尝鲜

运维Shell脚本小试牛刀(一) 运维Shell脚本小试牛刀(二) 运维Shell脚本小试牛刀(三)::$(cd $(dirname $0)&#xff1b; pwd)命令详解 运维Shell脚本小试牛刀(四): 多层嵌套if...elif...elif....else fi_蜗牛杨哥的博客-CSDN博客 Cenos7安装小火车程序动画 运维Shell脚本小试…

MySQL与Oracle的分页

MySQL与Oracle的分页 当我们通过SQL去查询一个结果集的时候&#xff0c;并不需要查看所有行&#xff0c;可能只是查看前几行&#xff0c;或者中间的几行。则需要像MySQL的limit或Oracle的ROWNUM与FETCH NEXT来实现。 MySQL 语法 SELECT * FROM table_name LIMIT [offset,] ro…

FreeRTOS进阶-创建自己的工程

一、STM32CubeMX配置FreeRTOS 1.配置时钟 选择TIM4作为HAL系统时钟 2.配置时钟树 设置频率为72MHz 3.配置FreeRTOS和参数 FreeRTOS 的参数包括时基频率、任务堆栈大小、是否使能互斥锁…

功率放大器的三种主要类型及其特点

功率放大器是电子系统中常见的一种电路&#xff0c;用于将输入信号的功率级别增加到较高水平。根据不同的应用需求和电路设计&#xff0c;功率放大器可以分为多种类型。下面西安安泰将介绍功率放大器的三种主要类型及其特点。 图&#xff1a;ATA-300系列功率放大器 A类功率放大…

51 单片机 led 灯光操作

led流水灯 #include <REGX52.H> #include "INTRINS.H"void Delay(unsigned int xms) {unsigned char i, j;while(xms--){_nop_();i 2;j 199;do{while (--j);} while (--i);}}void main(){while(1){P20xFE;Delay(500);P20xFD;Delay(500);P20xFB;Delay(500)…

自动化生成代码:MyBatis 的 Generator与MyBatis-Plus 的 AutoGenerator

文章目录 Mybatis Generator自动化生成代码MyBatis Generator概述使用Java代码形式1. 在 Maven 或 Gradle 中添加 MyBatis Generator 的依赖&#xff1a;2. 编写配置文件 GeneratorConfig.xml&#xff0c;配置需要生成的数据库表和对应的生成器&#xff1a;3. 在命令行中使用 M…