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

相关文章
|
24天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
21天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
23天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
36 5
|
21天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
54 1
|
25天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
33 4
|
29天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
1月前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
20 3
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
33 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
167 2