前端JavaScript入门-day02

news/2025/2/9 3:48:01/

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

一.运算符

1.1 赋值运算符

1.2 一元运算符 

自增运算符的用法: 

1.3 比较运算符

比较运算符的介绍

比较运算符的细节 

1.4 逻辑运算符

1.5 运算符优先级

二.语句

2.1 表达式和语句

2.2 程序三大流程控制语句

顺序结构

分支结构 

循环结构

2.3 分支语句 

if语句 

单分支使用语法: 

双分支if语法: ​

多分支if语法:

三元运算符

switch语句

2.4 循环结构

断点调试

while循环

1. while 循环基本语法:

2. while 循环三要素:

循环退出


一.运算符

1.1 赋值运算符

目标: 能够使用赋值运算符简化代码
赋值运算符:对变量进行赋值的运算符

已经学过的赋值运算符:= 将等号右边的值赋予给左边, 要求左边必须是一个容器
其他赋值运算符:
        +=
        -=
        *=
        /=
       %=

使用这些运算符可以在对变量赋值时进行快速操作

以前我们让一个变量加 1 如何做的?

现在我们有一个简单的写法啦~~~

1.2 一元运算符 

众多的 JavaScript 的运算符可以根据所需表达式的个数分为一元运算符、二元运算符、三元运算符

二元运算符:
例:
一元运算符:
例: 正负号

目标: 能够使用一元运算符做自增运算

自增:
        符号:++
        作用:让变量的值 +1


自减:
        符号:--
        作用:让变量的值 -1
使用场景:经常用于计数来使用。 比如进行10次操作,用它来计算进行了多少次了

自增运算符的用法: 

前置自增:

每执行1次,当前变量数值加1
其作用相当于 num += 1

后置自增:

每执行1次,当前变量数值加1

其作用相当于 num += 1 

前置自增和后置自增单独使用没有区别

如果参与计算就有区别:

前置自增:先自加再使用(记忆口诀:++在前 先加)

后置自增:先使用再自加(记忆口诀:++在后 后加) 

思考:

 答案为7,因为i先后置++变成2,然后又前置++变成3,所以原式为:1+3+3=7

1.3 比较运算符

比较运算符的介绍

比较运算符具有隐式转换的特点,可以将字符型转换为数字型

使用场景:比较两个数据大小、是否相等

 > : 左边是否大于右边
 <: 左边是否小于右边
 >=: 左边是否大于或等于右边
 <=: 左边是否小于或等于右边
 ==: 左右两边值是否相等
 ===: 左右两边是否类型和值都相等
 !==: 左右两边是否不全等
 比较结果为boolean类型,即只会得到 true 或 false

对比:

= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等,强烈推荐使用 ===(可以避免隐式转换带来的问题)

比较运算符的细节 

字符串比较,是比较的字符对应的ASCII码

从左往右依次比较
如果第一位一样再比较第二位,以此类推

NaN不等于任何值,包括它本身
涉及到"NaN“ 都是false


尽量不要比较小数,因为小数有精度问题

1.4 逻辑运算符

1.5 运算符优先级

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

二.语句

2.1 表达式和语句

表达式:
表达式是可以被求值的代码,JavaScript 引擎会将其计算出一个结果。

语句:
语句是一段可以执行的代码。
比如: prompt() 可以弹出一个输入框,还有 if语句 for 循环语句等等

区别:
表达式:因为表达式可被求值,所以它可以写在赋值语句的右侧。
        表达式 num = 3 + 4
语句:而语句不一定有值,所以比如 alert() for和break 等语句就不能被用于赋值。
        语句 alert() 弹出对话框 console.log() 控制台打印输出


某些情况,也可以把表达式理解为表达式语句,因为它是在计算结果,但不是必须的成分 (例如continue语句)

2.2 程序三大流程控制语句

顺序结构

以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构

分支结构 

有的时候要根据条件选择执行代码,这种就叫分支结构

循环结构


某段代码被重复执行,就叫循环结构

2.3 分支语句 

分支语句可以让我们有选择性的执行想要的代码 

分支语句包含:
        If分支语句
        三元运算符
        switch 语句

if语句 

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

单分支使用语法: 

括号内的条件为true时,进入大括号里执行代码
小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔类型
如果大括号只有一个语句,大括号可以省略,但是,俺们不提倡这么做~ 

双分支if语法: 

<!-- 需求:用户输入,用户名:pink,密码:123456, 则提示登录成功,否则提示登录失败
分析:
①:弹出输入框,分别输入用户名和密码
②:通过if语句判断,如果用户名是pink,并且密码是123456,则执行if里面的语句,否则执行else
里面的语句。 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let uname = prompt('请输入用户名:')let pwd = prompt('请输入密码:')if(umame === 'zxc'&& pwd==='123456'){alert('恭喜登陆成功')}else{alert('用户名或者密码错误')}</script>
</body>
</html>

多分支if语法:

<!-- 需求:根据输入不同的成绩,反馈不同的评价
注:
①:成绩90以上是 优秀
②:成绩70~90是 良好
③:成绩是60~70之间是 及格
④:成绩60分以下是 不及格 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let score = +prompt('请输入成绩')if(score>=90){alert('优秀')}else if(score>=70){alert('良好')}else if(score>=60){alert('及格')}else{alert('不及格')}</script>
</body>
</html>

三元运算符

符号:? 与 : 配合使用

<!-- 需求:用户输入2个数,控制台输出最大的值
分析:
①:用户输入2个数
②:利用三元运算符输出最大值 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let num1 = +prompt('第1个数')let num2 = +prompt('第2个数')// if(num1>num2)// {//     alert(num1)// }// else// {//     alert(num2)// }num1>num2?alert(num1):alert(num2)</script>
</body>
</html>

switch语句

释义:
找到跟小括号里数据全等的case值,并执行里面对应的代码
若没有全等 === 的则执行default里的代码

注意事项:

1. switch case语句一般用于等值判断,不适合于区间判断
2. switch case一般需要配合break关键字使用 没有break会造成case穿透

2.4 循环结构

断点调试

作用:学习时可以帮助更好的理解代码运行,工作时可以更快找到bug
浏览器打开调试界面
1. 按F12打开开发者工具
2. 点到sources一栏
3. 选择代码文件
断点:在某句代码上加的标记就叫断点,当程序执行到这句有标记的代码时会暂停下来

while循环

1. while 循环基本语法:

释义:
跟if语句很像,都要满足小括号里的条件为true才会进入 循环体 执行代码
while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出

2. while 循环三要素:

1. 变量起始值
2. 终止条件(没有终止条件,循环会一直执行,造成死循环)
3. 变量变化量(用自增或者自减)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//1.变量的起始值let i = 1//2.终止条件while(i<=3){document.write('循环三次<br>')//3.变量的变化量i++}</script>
</body>
</html>

网页显示为:          

循环退出

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


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

相关文章

清华唐杰新作WebGLM,参数100亿可联网

WebGLM是一个基于大语言模型&#xff08;LLM&#xff09;的联网问答聊天机器人&#xff0c;它的作者是清华大学计算机系唐杰教授团队&#xff0c;它的论文入选了KDD2023会议。 WebGLM的特点是它可以利用Web搜索和检索功能来增强LLM的能力和泛化性&#xff0c;从而实现一个高效、…

【数据结构】查找与排序(一)—>“监视哨”的学习

一、前言 本篇以学生信息管理系统为背景&#xff0c;主要学习简单的查找与排序功能。 高级查找与排序会在接下来的文章中再做介绍&#xff0c;欢迎大家关注并留意博主动态。 查找主要涉及顺序查找、二分查找。 排序主要涉及直接插入排序、直接选择排序、冒泡排序。 二、查找讲…

SpringBoot原理(1)--@SpringBootApplication注解使用和原理/SpringBoot的自动配置原理详解

文章目录 前言主启动类的配置SpringBootConfiguration注解验证启动类是否被注入到spring容器中 ComponentScan 注解ComponentScan 注解解析与路径扫描 EnableAutoConfiguration注解 问题解答1.AutoConfigurationPackage和ComponentScan的作用是否冲突起因回答 2.为什么能实现自…

阿里企业邮箱收费标准_企业邮箱费用明细表

阿里云企业邮箱收费标准&#xff08;免费版/标准/尊享/集团&#xff09;&#xff0c;2023阿里云企业邮箱收费标准&#xff0c;免费版企业邮箱0元&#xff0c;标准版企业邮箱540元一年&#xff08;原价600元一年&#xff09;&#xff0c;企业邮箱尊享版1400元一年&#xff0c;9折…

2023年全球需要警惕的三大网络安全威胁

互联网是一个世界规模的巨大的信息和服务资源。它不仅为人们提供了各种各样的简单而且快捷的通信与信息检索手段,更重要的是为人们提供了巨大的信息资源和服务资源。通过使用互联网,全世界范围内的人们既可以互通信息,交流思想,又可以获得各个方面的知识、经验和信息。人们…

6-js基础-4

JavaScript 基础 - 4 理解封装的意义&#xff0c;能够通过函数的声明实现逻辑的封装&#xff0c;知道对象数据类型的特征&#xff0c;结合数学对象实现简单计算功能。 函数综合案例 函数 理解函数的封装特性&#xff0c;掌握函数的语法规则 函数的基本使用 函数: 是可以被重复…

【Linux】2、文件系统、Rootfs

文章目录 一、文件系统二、Rootfs2.1 各目录约定2.1.1 /bin4.2 /boot4.3 /dev4.4 /etc4.5 /home4.6 /lib4.7 /media4.8 /mnt4.9 /opt4.10 /root4.11 /run4.12 /sbin4.13 /srv4.14 /tmp4.15 /usr4.16 /var 一、文件系统 Linux 的文件系统遵循 HFS 设计&#xff0c;有如下实现&a…

5-响应式

01-媒体查询 基本写法 max-width&#xff1a;最大宽度&#xff08;小于等于&#xff09;min-width&#xff1a;最小宽度&#xff08;大于等于&#xff09; 书写顺序 min-width&#xff08;从小到大&#xff09;max-width&#xff08;从大到小&#xff09; 案例-左侧隐藏 需…