前端JavaScript入门-day02

简介: 前端JavaScript入门-day02

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

目录

一.运算符

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 退出整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用

相关文章
|
3天前
|
设计模式 前端开发 Java
【前端学java】SpringBootWeb极速入门-分层解耦(03)
【8月更文挑战第13天】SpringBootWeb极速入门-分层解耦(03)
8 2
【前端学java】SpringBootWeb极速入门-分层解耦(03)
|
4天前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
15 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
4天前
|
JSON 前端开发 Java
【前端学java】SpringBootWeb极速入门-请求参数解析(02)
【8月更文挑战第12天】SpringBootWeb极速入门-请求参数解析(02)
10 1
【前端学java】SpringBootWeb极速入门-请求参数解析(02)
|
1天前
|
前端开发 IDE Java
"揭秘前端转Java的秘径:SpringBoot Web极速入门,掌握分层解耦艺术,让你的后端代码飞起来,你敢来挑战吗?"
【8月更文挑战第19天】面向前端开发者介绍Spring Boot后端开发,通过简化Spring应用搭建,快速实现Web应用。本文以创建“Hello World”应用为例,展示项目基本结构与运行方式。进而深入探讨三层架构(Controller、Service、DAO)下的分层解耦概念,通过员工信息管理示例,演示各层如何协作及依赖注入的使用,以此提升代码灵活性与可维护性。
|
5天前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
10天前
|
JavaScript 前端开发 NoSQL
使用Node.js进行后端开发入门
【8月更文挑战第10天】恭喜你完成了Node.js后端开发的入门之旅!这只是个开始,Node.js的世界远比这广阔。随着你对Node.js的深入学习和实践,你将能够构建更复杂、更强大的后端应用。不断探索、学习和实践,你将在Node.js的道路上越走越远。
|
11天前
|
存储 JavaScript 前端开发
后端程序员的前端基础-前端三剑客之JavaScript
后端程序员的前端基础-前端三剑客之JavaScript
13 4
|
11天前
|
前端开发
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
|
5天前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
5天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互

热门文章

最新文章