前端JavaScript入门-day02

news2024/12/25 0:37:00

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

目录

一.运算符

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.coloradmin.cn/o/688890.html

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

相关文章

超越竞争,使用Framework技术赢得市场份额

Framework为什么这么重要&#xff1f; 在Android开发中&#xff0c;Framework&#xff08;框架&#xff09;是非常重要的&#xff0c;因为它提供了一套已经实现的软件组件和工具&#xff0c;以支持开发者构建应用程序。以下是Framework在Android开发中的重要性&#xff1a; 提…

云服务器到期,站点迁移,Nginx配置SSL以备后续只需!

导言 笔者小站&#xff1a;秋码分享 在这三年中&#xff0c;其实远不止这三年&#xff0c;可追溯到2014年前后&#xff0c;个人站点便逐渐走向末路。但却总有新的个人博客网站&#xff0c;在这片互联网海洋漂浮着&#xff0c;或许是为了心中的梦想&#xff0c;亦或是记录着工作…

Kafka 从安装到应用

博主介绍&#xff1a; ✌博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家✌ Java知识图谱点击链接&#xff1a;体系化学习Java&#xff08;Java面试专题&#xff09; &#x1f495;&#x1f495; 感兴趣的同学可以收…

MySQL实战解析底层---幻读是什么,幻读有什么问题?

目录 前言 幻读是什么&#xff1f; 幻读有什么问题&#xff1f; 如何解决幻读&#xff1f; 前言 为了便于说明问题&#xff0c;这一篇文章&#xff0c;就先使用一个小一点儿的表建表和初始化语句如下&#xff1a; 这个表除了主键id外&#xff0c;还有一个索引c&#xff0c…

web值控制标签的显示与隐藏、document、getElementById、style、css、hidden、display、visibility

文章目录 方式一方式二方式三visibility小结 方式一 使用HTML的hidden属性&#xff0c;隐藏后不占用原来的位置 hidden属性是一个Boolean类型的值&#xff0c;如果想要隐藏元素&#xff0c;就将值设置为true&#xff0c;否则就将值设置为false 选取id为test的元素 let test do…

“事后达尔文”—— 游戏业务效果评估方法实践

作者&#xff1a;vivo 互联网数据分析团队 Luo Yandong、Zhang Lingchao 本文介绍了互联网业务数据效果评估的几种常见问题及方法&#xff0c;并基于分层抽样的逻辑优化出一套可应用于解决用户不均匀的“事后达尔文"分析法&#xff0c;可适用于无法AB测试或人群不均匀的AB…

VCO的设计

理想振荡器只有电感和电容&#xff0c;会一直振荡下去。但是实际的振荡器存在一定的寄生电阻并联在RC两端&#xff0c;会使振幅变小。因此需要RC旁边再并联一个负电阻以此来抵消寄生电阻的影响。一般会选择负阻提供的能量为寄生电阻能量的的2-3倍。如果负阻跟RC并联&#xff0c…

剖析float相加产生精度损失的原因

float相加产生精度损失的原因 一、什么是float类型及其特点1.1、float类型的定义和使用方法1.2、float类型的特点&#xff0c;包括精度限制 二、为什么会出现float相加精度损失2.1、计算机二进制存储浮点数的方式2.2、浮点数运算中的舍入误差2.3、累加多个小数时的误差累积 三、…

kali中Metasploit基本使用方法

1.kali启动postgresql并设置开机自启动 systemctl start postgresql.servicesystemctl enable postgresql.service2.kali启动Metasploit 方式一:应用程序 -> 漏洞利用工具集 -> Metasploit framework 方式二: msfconsole 3. Metasploit常用命令 connect 命令 连接远程主…

Qt信号槽之connect介绍(上)

关于Qt信号槽中connect与disconnect介绍 首先我们要知道&#xff0c;如果想要使用Qt中的信号槽机制&#xff0c; 那么必须继承QObject类&#xff0c;因为QObject类中包含了信号槽的一系列操作&#xff0c;今天我们来讲解的是信号与槽怎么建立连接以及断开连接。 一、connect …

在windows server上用Mosquitto软件创建MQTT服务器

今天下午捣鼓了半天&#xff0c;在云服务器上面创建了个MQTT服务器&#xff0c;然后用MQTTX软件进行了测试。过程记录如下&#xff1a; 1、下载mosquitto软件&#xff0c;链接如下图&#xff1a; 2、下载完成后安装&#xff0c;一直点下一步下一步就好了。 3、在安装路径下&am…

快速捡回使用workbench控制mysql创建数据库的基本步凑

首先如果&#xff0c;不想要在原来已经建好的数据库下建立数据表&#xff0c;可以新建数据库。 具体操作步凑如下&#xff1a; 选择后如下所示&#xff1a; 有现成的创建代码的话&#xff0c;就直接复制执行现成的创建代码即可&#xff0c;如果没有现成的创建代码的话&#xff…

Java设计模式之单例模式-【懒汉式与饿汉式】

1、单例&#xff0c;模式 单例模式属于创建型模式的一种&#xff0c;应用于保证一个类仅有一个实例的场景下&#xff0c;并且提供了一个访问它的全局方法 单例模式的特点&#xff1a;从系统启动到终止&#xff0c;整个过程只会产生一个实例。单例模式常用写法&#xff1a;懒汉…

STM32设置为I2C从机模式

STM32设置为I2C从机模式 目录 STM32设置为I2C从机模式前言1 硬件连接2 软件编程3 运行测试3.1 I2C连续写入3.1 I2C连续读取3.1 I2C单次读写测试 4 总结 前言 STM32的I2C作为主机的情况相信很多同学都用过&#xff0c;网上也有很多教程&#xff0c;但是作为从设备使用的例子应该…

【C++ 程序设计】第 9 章:函数模板与类模板

目录 一、函数模板 &#xff08;1&#xff09;函数模板的概念 &#xff08;2&#xff09;函数模板的示例 &#xff08;3&#xff09;函数或函数模板调用语句的匹配顺序 二、类模板 &#xff08;1&#xff09;类模板概念 &#xff08;2&#xff09;类模板示例 &…

阵列模式综合第三部分:深度学习(附源码)

一、前言 这个例子展示了如何设计和训练卷积神经网络&#xff08;CNN&#xff09;来计算产生所需模式的元素权重。 二、介绍 模式合成是阵列处理中的一个重要课题。阵列权重有助于塑造传感器阵列的波束图案&#xff0c;以匹配所需图案。传统上&#xff0c;由于空间信号处理和频…

SSL工作原理

SSL 是一个安全协议&#xff0c;它提供使用 TCP/IP 的通信应用程序间的隐私与完整性。因特网的 超文本传输协议&#xff08;HTTP&#xff09;使用 SSL 来实现安全的通信。 在客户端与服务器间传输的数据是通过使用对称算法&#xff08;如 DES 或 RC4&#xff09;进行加密的。公…

使用ZenDAS进行Gompertz趋势分析

某项目做了18次测试&#xff0c;每次测试发现的缺陷个数如下表所示&#xff1a; 测试序号 发现缺陷数 1 60 2 96 3 157 4 191 5 155 6 106 7 64 8 335 9 92 10 196 11 109 12 133 13 166 14 129 15 16 16 30 17 19 18 5 对上述的数据在Z…

IPv6手工隧道配置与验证实验

IPv6手工隧道配置与验证实验 【实验目的】 熟悉IPv6手工隧道的概念。 掌握IPv6和IPv4共存的实现方法。 掌握IPv6手工隧道的配置。 验证配置。 【实验拓扑】 实验拓扑如下图所示。 实验拓扑 设备参数如表所示。 设备参数表 设备 接口 IPv6地址 子网掩码位数 默认网…

中间件-netty(1)

netty 前言篇 文章目录 一、IO基础篇1.概念1.1 阻塞(Block)和非阻塞(Non-Block)1.2 同步(Synchronization)和异步(Asynchronous)1.3 BIO 与 NIO 对比1.3.1 面向流与面向缓冲1.3.2 阻塞与非阻塞1.3.3 选择器的问世 2.NIO 和 BIO 如何影响应用程序的设计2.1 API调用2.2 数据处理2…