JavaWeb(3)——HTML、CSS、JS 快速入门

一、JavaScript 运算符 

• 赋值运算符( = )

= 赋值运算符执行过程? 将等号右边的值赋予给左边, 要求左边必须是一个容器
+= 出现是为了简化代码, 比如让 let age = 18 ,age 加 2 怎么写呢
    let age = 18age += 2console.log(age)age *= 2console.log(age)age /= 2console.log(age)age %= 2console.log(age)age -= 2console.log(age)

• 一元运算符 (自增和自减,并明白区别)

众多的 JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符。而一元、二元和三元运算符是根据操作数(表达式)的个数来进行分类的。

一元运算符只需要一个操作数。它对操作数进行单一的操作或转换。例如,一元运算符可以用于递增或递减变量的值,取负数、求反等操作。常见的一元运算符有:++(递增)、--(递减)、+(正数)、-(负数)、!(逻辑非)等。

二元运算符需要两个操作数。例如,加法运算符(+)、减法运算符(-)、乘法运算符(*)、除法运算符(/)、赋值运算符(=)等。二元运算符在两个操作数之间进行某种计算或比较操作。

三元运算符即条件运算符,也是 JavaScript 中唯一的三元运算符。它需要三个操作数,形式为 条件表达式 ? 表达式1 : 表达式2。根据条件表达式的结果,选择返回表达式1或表达式2的值。它类似于 if-else 语句的简写形式。

举例说明:

<!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. 判断输出- 小于10才补0// num = num < 10 ? 0 + num : numnum = num >= 10 ? num : 0 + numalert(num)</script>
</body></html>

还举例:(用户输入两个数字,判断二者最大值) 

    // 1. 用户输入let num1 = +prompt('请您输入第一个数:')let num2 = +prompt('请您输入第二个数:')// 2. 判断输出-三元运算符// if (num1 > num2) {//   alert(num1)// } else {//   alert(num2)// }num1 > num2 ? alert(`最大值是: ${num1}`) : alert(`最大值是: ${num2}`)

自增运算符的用法: 1. 前置自增和后置自增独立使用时二者并没有差别! 2. 一般开发中我们都是独立使用 3. 后面 i++ 后置自增会使用相对较多,并且都是单独使用 

    let i = 1console.log(i++ + ++i + i)

 [(1+2)+1] +3 =7

i 是 3

    let i = 1let mu = i++ + ++i + iconsole.log(i)

当然要是还是不是很清楚这个过程中变量的赋值情况,则可以进行断点调试。

• 比较运算符

= 是赋值

== 是判断 只要求值相等,不要求数据类型一样即可返回true

=== 是全等 要求值和数据类型都一样返回的才是true

开发中,请使用 ==

• 逻辑运算符

• 运算符优先级

一元运算符里面的逻辑非优先级很高

 逻辑与比逻辑或优先级高

    let a = 3 > 5 && 2 < 7 && 3 == 4console.log(a);//falselet b = 3 <= 4 || 3 > 1 || 3 != 2console.log(b);//truelet c = 2 === "2"console.log(c);//falselet d = !c || b && a//true ||true && falseconsole.log(d);

关于变量d为什么是true, 进行如下分析。

首先,根据逻辑运算符的优先级,&& 运算符的优先级高于 || 运算符

对于 a = 3 > 5 && 2 < 7 && 3 == 4,分步执行:

  1. 3 > 5 为 false。
  2. 因为前面的结果是 false,所以整个表达式的结果已经确定为 false,后面的操作数不再进行求值。因此,a 的值为 false。

对于 b = 3 <= 4 || 3 > 1 || 3 != 2,分步执行:

  1. 3 <= 4 为 true。
  2. 因为前面的结果是 true,所以整个表达式的结果已经确定为 true,后面的操作数不再进行求值。因此,b 的值为 true。

对于 c = 2 === "2",分步执行:

  1. 2 === "2" 比较严格相等,即比较值和类型是否都相等。但是数字 2 和字符串 "2" 的类型不同,因此结果为 false,即 c 的值为 false。

最后,对于 d = !c || b && a,分步执行:

  1. !c 取 c 的逻辑非,即取反,因为 c 的值为 false,所以 !c 的值为 true。
  2. b && a 中的 && 运算符,根据短路原则,如果第一个操作数 b 为 true,则直接返回第二个操作数 a 的值。因为 b 的值为 true,所以继续求值 a
  3. a 的值为 false。
  4. 将以上求得的结果进行逻辑运算,true || (false && false)
  5. 根据 || 运算符的规则,只要有一个操作数为 true,整个表达式即为 true。所以 d 的值为 true。

因此,根据给定的代码,变量 d 的值为 true。

再例如:

    console.log(11 && 22)console.log(false && 'hello')console.log(33 || 44)console.log(0|| 55)

 

根据给出的代码:

  1. console.log(11 && 22):使用 && 运算符进行逻辑与运算。在这种情况下,左侧操作数为 11,右侧操作数为 22。由于两个操作数都为真值(非零数字),所以返回右侧操作数 22。因此,打印结果为 22。

  2. console.log(false && 'hello'):同样使用 && 运算符进行逻辑与运算。但是在这种情况下,左侧操作数为 false,右侧操作数为 'hello'。根据短路原则,由于左侧操作数为 false,整个表达式已经确定为 false,所以不再求解右侧操作数。因此,打印结果为 false。

  3. console.log(33 || 44):使用 || 运算符进行逻辑或运算。在这种情况下,左侧操作数为 33,右侧操作数为 44。由于左侧操作数为真值(非零数字),所以返回左侧操作数 33。因此,打印结果为 33。

  4. console.log(0 || 55):同样使用 || 运算符进行逻辑或运算。但是在这种情况下,左侧操作数为 0,右侧操作数为 55。根据短路原则,由于左侧操作数为假值(0),整个表达式已经确定为假值,所以不再求解右侧操作数。因此,打印结果为 55。

总结:

  • 在逻辑与运算中,如果左侧操作数为真值,则返回右侧操作数;如果左侧操作数为假值,则返回左侧操作数。
  • 在逻辑或运算中,如果左侧操作数为真值,则返回左侧操作数;如果左侧操作数为假值,则返回右侧操作数。

二、JavaScript 流程控制 

如:下面这段代码中,一次循环也不会执行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title练习</title>
</head>
<body>
<script>let i = 0while (i === 1){i++}
</script>
</body>
</html>

 因为,循环条件 i === 1 的初始值为 0,而 0 不等于 1。循环条件要求循环只在条件为真时执行,但是在初始时刻条件就是假的,所以循环体内的代码不会执行。

具体来说,下面是循环的执行过程:

  1. 首先,创建变量 i 并初始化为 0
  2. 接着,检查循环条件 i === 1 是否为真。由于 0 不等于 1,所以条件为假。
  3. 因为循环条件为假,循环体内的代码不会执行。
  4. 循环结束,进入后续的代码逻辑。

因此,该循环一次也不会进入,直接跳过循环体。如果希望循环执行,应该将循环条件改为 i !== 1,即当 i 不等于 1 时循环执行。

再举例:(判断闰年)

    // 1. 用户输入let year = +prompt('请输入年份')// 2. 判断输出if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {alert(`${year}年是闰年`)} else {alert(`${year}年是平年`)}

 

 

 例如:

switch (2) {case 1:console.log(1)breakcase 2:console.log(2)breakdefault:console.log(3)break}

这个结果一定是2 ,

switch 语句中,当表达式的值与某个 case 的值匹配时,会执行该 case 下的代码块,并且在代码块的最后使用 break 关键字来结束 switch 语句。如果没有匹配的 case,则会执行 default 下的代码块。

根据代码中的 switch (2),表达式的值为 2。因此,程序会跳过 case 1 中的代码块,进入 case 2。在 case 2 下,会执行 console.log(2),打印输出 2。然后遇到 break 关键字,结束 switch 语句。

没有其他的 case 匹配 2,所以不会执行 default 下的代码块。因此,输出结果只有 2

但是如果代码变成

switch (2) {case 1:console.log(1)breakcase 2:console.log(2)default:console.log(3)break}

那么结果就会变成 2 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. 开始循环 输入框写到 循环里面// 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>

 关于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>Document</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>

 

(打印五角星)

<!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>// // 外层循环打印行数// 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>

(打印直角三角形)

    // 1. 外层循环控制行数for (let i = 1; i <= 5; i++) {// 2. 里层循环控制列数(几个星星)for (let j = 1; j <= i; j++) {document.write('◆')}// 换行document.write('<br>')}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/2572.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javaee jstl表达式

jstl是el表达式的扩展 使用jstl需要添加jar包 package com.test.servlet;import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;import javax.servlet.ServletException; import javax.servlet…

下载编译Chromium

参考&#xff1a;Mac上本地编译Chrome浏览器踩坑笔记&#xff08;2021.02最新&#xff09; - 掘金 For Mac: 一、下载编译工具链&#xff1a;deptool git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git export PATH"$PATH:/Users/yumlu/cod…

什么是DevOps监控以及如何在组织中实施?

如今的软件开发商经常面临两大挑战——快速交付和大规模创新。DevOps通过在软件开发生命周期(SDLC)中引入自动化来开发和交付高质量的软件&#xff0c;从而帮助解决这些挑战。 持续集成(CI)/持续部署&#xff08;CD)是DevOps实践中自动化的关键组件。它可以自动化代码构建、测试…

力扣 1005. K 次取反后最大化的数组和

题目来源&#xff1a;https://leetcode.cn/problems/maximize-sum-of-array-after-k-negations/description/ C题解1&#xff1a;最直接的想法就是负的变正的&#xff0c;如果负的元素数量小于k&#xff0c;就挑选绝对值大的负数变正&#xff1b;如果负的元素数量大于k&#xf…

阿里云声音复刻

阿里云声音复刻 个性化人声定制 阿里云个性化人声定制是智能语音交互产品自学习平台下的一部分 使用方式&#xff1a;https://help.aliyun.com/document_detail/456006.html 方式一&#xff1a;控制台界面定制使用方式 方式二&#xff1a;通过OpenAPI定制&#xff1a;在该页…

回归预测 | MATLAB实现基于KELM-Adaboost核极限学习机结合AdaBoost多输入单输出回归预测

回归预测 | MATLAB实现基于KELM-Adaboost核极限学习机结合AdaBoost多输入单输出回归预测 目录 回归预测 | MATLAB实现基于KELM-Adaboost核极限学习机结合AdaBoost多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于KELM-Adaboo…

IP基础知识总结

IP他负责的是把IP数据包在不同网络间传送&#xff0c;这是网络设计相关的&#xff0c;与操作系统没有关系。所以这部分知识&#xff0c;不是网络的重点。IP和路由交换技术联系紧密。但是要作为基本知识点记住。 一、基本概念 网络层作用&#xff1a;实现主机与主机之间通信。 …

linux之Ubuntu系列(三)远程管理指令☞SSH 高级应用 RSA非对称加密 以及免密登录,配置别名

对称加密 、非对称加密 1、对称加密中加密和解密使用的秘钥是同一个&#xff1b;非对称加密中采用两个密钥&#xff0c;一般使用公钥进行加密&#xff0c;私钥进行解密。 2、对称加密解密的速度比较快&#xff0c;非对称加密和解密花费的时间长、速度相对较慢。 3、对称加密的…

81. 正则表达式

一、概述二、匹配单个字符三、匹配一组字符四、使用元字符五、重复匹配六、位置匹配七、使用子表达式八、回溯引用九、前后查找十、嵌入条件参考资料 一、概述 正则表达式用于文本内容的查找和替换。 正则表达式内置于其它语言或者软件产品中&#xff0c;它本身不是一种语言或…

uniapp微信小程序使用axios(vue3+axios+ts版)

版本号 "vue": "^3.2.45", "axios": "^1.4.0", "axios-miniprogram-adapter": "^0.3.5", 安装axios及axios适配器&#xff0c;适配小程序 yarn add axios axios-miniprogram-adapter 使用axios 在utils创建utils/…

7个银行的软件测试项目实战,别再说简历项目不知道怎么写了

目录 前言 项目描述1&#xff1a;上海华瑞银行直连票据项目 项目描述2&#xff1a;平安金服风控中台系统 项目描述3&#xff1a;众安创展APP项目 项 目4&#xff1a; 招商银行VTM自助渠道服务系统 项 目5&#xff1a;招商银行票据支付 项 目6&#xff1a; 平安银行风控系…

Virus Total 曝数据泄露大事件:涉及多国情报部门

The Hacker News 网站披露&#xff0c;可疑文件和病毒在线检测平台 VirusTotal 曝出数据泄露事故&#xff0c;一名员工无意中将部分 VirusTotal 注册客户的姓名、电子邮件地址等敏感数据信息上传到了恶意软件扫描平台&#xff0c;此举导致约 5600 名用户数据泄露。 据悉&#x…

【MySQL技术专题】「问题实战系列」深入探索和分析MySQL数据库的数据备份和恢复实战开发指南(备份+恢复篇)

深入探索和分析MySQL数据库的数据备份和恢复实战开发指南 MySQL数据库备份全量备份全量备份应用场景 增量备份binlogbinlog主要作用binlog的作用主要有两个方面 开启binlog日志功能要开启MySQL的binlog日志步骤 mysqlbinlogmysqlbinlog的使用案例 全量备份与增量备份结合按天全…

安全开发-PHP应用留言板功能超全局变量数据库操作第三方插件引用后台模块SessionCookieToken身份验证唯一性

文章目录 开发环境数据导入-mysql架构&库表列数据库操作-mysqli函数&增删改查数据接收输出-html混编&超全局变量第三方插件引用-js传参&函数对象调用身份验证-Cookie使用身份验证-Session使用唯一性判断-Token使用具体安全知识点&#xff1a;Cookie和Session都…

复习java基础

复习一天有点忘了的知识&#xff1a; 结构化编程 结构化程式设计(英语:Structured programming)是1960年代开始发展起来的一种编程典范。它采用子程序、程式码区块、for循环以及while循环等结构来取代传统的goto。 指导思想 自顶向下、逐步求精、模块化 编程过程 流程图是…

Appium 安卓环境的配置

目录 前言&#xff1a; 环境准备 写个脚本玩玩 前言&#xff1a; 在使用Appium进行安卓自动化测试之前&#xff0c;需要配置相应的安卓环境。 环境准备 为了避免走弯路&#xff0c;我们先要确保三点&#xff1a; Android SDK API > 17 (Additional features require …

Kafka 入门到起飞 - 核心概念(术语解释)

在kafka之旅&#xff0c;我们会大量讨论Kafka中的术语&#xff0c;那么就让我们先来了解一下这些核心概念 消息(Message)&#xff1a; kafka的数据单元称为消息&#xff0c;相当于DB里的一行数据或一条记录 消息由字节数组组成 批次&#xff1a; 生产者组一批数据再向kafka推送…

C++编程(四) —— OOP

文章目录 前言一、this指针二、构造和析构三、深拷贝浅拷贝浅拷贝深拷贝 编程实践 前言 什么是OOP思想&#xff1f; OOP语言的四大特征&#xff1a; 抽象&#xff0c;封装/隐藏&#xff0c;继承&#xff0c;多态 一、this指针 this指针》类》很多对象 一套成员方法是如何处…

深入学习 Redis - 深挖经典数据类型之 string

目录 前言 一、string 类型 1.1、操作命令 set / get &#xff08;设置 / 获取&#xff09; mset / mget&#xff08;批量 > 设置 / 获取&#xff09; setnx / setex / psetex &#xff08;设置时指定不同方式&#xff09; incr / incrby / decr / decrby/ incrbyfloat…

船舶中压配电板应用弧光保护,可解决母排故障短路问题,对于提高船舶电站的安全性、稳定性,降低经济损失具有重要意义。-安科瑞黄安南

摘要&#xff1a;船舶中压配电板弧光故障导致的设备损坏和停电事故&#xff0c;不仅会造成较大的经济损失&#xff0c;而且严重影响船舶电站的安全稳定运行&#xff0c;威胁船舶电站操作人员的安全。弧光保护是基于电力系统开关柜发生弧光故障时而设计的一套母线保护系统&#…