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

相关文章
|
2天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
33 19
|
2天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
24 13
|
2天前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
6天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
2天前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
11天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
23 0
|
11天前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
53 0
|
11天前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
26 0
|
11天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
36 0
|
11天前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
34 0

热门文章

最新文章