【零基础】学JS

喝下这碗鸡汤

“知识就是力量。” - 弗朗西斯·培根

1.三元运算符

目标:能利用三元运算符执行满足条件的语句

使用场景:其实是比if双分支更简单的写法,可以使用三元表达式

语法:条件 ? 满足条件的执行代码 : 不满足条件执行的代码

接下来用一个小案例来展示三元运算符

   <script>//1.用户输入let num = +prompt('请输入一个数字:')//2.判断输出  小于10才补0num = num < 10 ? '0' + num : numalert(num)</script>

2.断点调试

2.1为什么要进行断点调试?

学习可以使用帮助更好的理解代码运行,工作时可以更快找到BUG

2.2如何使用断点调试?

1.按F12打开开发者工具

2.点sources一栏

3.选择代码文件

 <script>let num = 18num = num + 1console.log(num)</script>

在console.log(num)打一个断点,刷新页面  num就会变成18啦 如果num加1,所以程序正确。

3.简易ATM取款机案例

需求:用户可以实现存钱,取钱,查看余额和退出功能

分析:

1.循环的时候,需要反复提示输入框,所以提示框写到循环里面

2.退出的条件是用户输入了4,如果是4,循环结束,不再弹窗

3.提前准备一个金额先存储一个金额

4.取钱则是减法操作,存钱则是加法操作,查看余额则是直接显示金额

5.输入不同的值,可以使用switch来执行不同的操作

<body><script>//1. 开始循环//3. 准备一个总金额let money = 100while (true) {let re = +prompt(`请你选择操作:1.存钱2.取钱3.查看余额4.退出`)//2. 如果用户输入的是4,退出循环 breakif (re === 4) {break}//4. 根据输入做操作switch (re) {case 1://存钱let cun = +prompt('请输入存款金额:')money += cunbreakcase 2:let qu = +prompt('请输入取款金额:')money -= qubreakcase 3:alert(`您的银行卡余额是:${money}`)break}}</script></body>

4.为什么需要函数?

函数:
function,是被设计为执行特定任务的代码块
函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用
比如我们前面使用的 alert()、prompt()和 console.log() 都是一些is 函数,只不过已经封装好了,我们直接使用的。

5.函数的使用

函数的语法声明:

function 函数名() {函数体
}

函数名命名规范


1.和变量命名基本一致尽量小驼峰式命名法
2.前缀应该为动词
3.命名建议:常用动词约定

接下来我们来写两个小案例吧~

需求:
1.封装一个函数,计算两个数的和

 function getSum() {let num1 = +prompt('请输入第一个数字:')let num2 = +prompt('请输入第二个数字:')console.log(num1 + num2)}getSum()

2.封装一个函数,计算1-100之间所有数的和

 <script>function getSum() {let sum = 0for (let i = 1; i <= 100; i++) {sum += i}console.log(sum)}getSum()</script>

6.函数传参

形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)
实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)
形参可以理解为是在这个函数内声明的变量(比如 num1=10)实参可以理解为是给这个变量赋值

7.函数的返回值

为什么需要返回值的?其实我们可以理解为当我用洗衣机洗衣服的时候,洗完衣服(函数执行完毕),我们需要拿衣服(也就是返回值),也可以理解为当我们买东西的时候,我们不希望买一件就显示多少钱,我们希望到了结算的时候才告诉我们多少钱,也就是说我们希望做到随时可以使用返回值。

细节: 

在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
return 后面代码不会再被执行,会立即结束当前函数,所以return 后面的数据不要换行写return函数可以没有 return,这种情况函数默认返回值为 undefined

  <script>function fun() {return 20}//相当于执行 fun() 调用者 fun() = 20//console.log(fn())let re = fun()console.log(re)</script>

8.作用域

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突

全局作用域

全局有效
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件


局部作用域
局部有效
作用于函数内的代码环境,就是局部作用域。因为跟函数有关系,所以也称为函数作用域。

9.匿名函数

9.1函数表达式

函数表达式和具名函数的区别是,函数表达式的调用需要先声明,再调用,具名函数可以任意位置调用。

9.2立即执行函数

10.逻辑中断

总结

学完这部分的知识点之后,大家对js的基础知识已经有一定的了解了,JS的基础知识还剩下最后一篇,学完接下来就可以学习JS的API相关知识啦!开头的鸡汤你喝了吗?喝完继续肝!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/42972.shtml

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

相关文章

C#实现求解函数导数和值

using MathNet.Symbolics; using System; using System.IO; using System.Text;private string ConvertToLatex(string mathExpression) {return mathExpression.Replace(" * ", "").Replace("*", ""); }// 将函数定义为字符串 string…

AI语言处理的双刃剑:Tokens令牌化技术解析

生成式人工智能模型&#xff0c;如GPT-4o&#xff0c;采用基于Transformer架构的复杂处理方式&#xff0c;这与人类处理文本的方式存在明显差异。这些模型依赖于一种称为“令牌化”的过程&#xff0c;将文本分解为更小的片段&#xff0c;称为“令牌”&#xff0c;以便更有效地处…

Kafka抛弃Zookeeper后如何启动?

Kafaka如何下载 官网地址 目前Kafka最新的版本就是3.7.1 我们可以看到下面这两个版本信息&#xff1f;什么意思呢&#xff1f; Scala 2.12 - kafka_2.12-3.7.1.tgz (asc, sha512)Scala 2.13 - kafka_2.13-3.7.1.tgz (asc, sha512) 我们应该知道&#xff0c;一个完整的Kafka实…

平安消保在行动 | 守护每一个舒心笑容 不负每一场双向奔赴

“要时刻记得以消费者为中心&#xff0c;把他们当做自己的朋友&#xff0c;站在他们的角度去思考才能更好地解决问题。” 谈及如何成为一名合格的消费者权益维护工作人员&#xff0c;平安养老险深圳分公司负责咨诉工作的庞宏霄认为&#xff0c;除了要具备扎实的专业技能和沟通…

MySQL篇四:表的约束

文章目录 前言1. 空属性2. 默认值3. 列描述4. zerofill5. 主键6. 自增长7. 唯一键8. 外键 前言 真正约束字段的是数据类型&#xff0c;但是数据类型约束很单一&#xff0c;需要有一些额外的约束&#xff0c;更好的保证数据的合法性&#xff0c;从业务逻辑角度保证数据的正确性。…

软件架构之开发方法

软件架构之开发方法 第6章&#xff1a;开发方法6.1 软件生命周期6.2 软件开发模型6.2.1 瀑布模型6.2.2 演化模型6.2.3 螺旋模型6.2.4 增量模型6.2.5 构件组装模型 6.3 统一过程6.4 敏捷方法6.4.1 极限编程6.4.2 特征驱动开发6.4.3 Scrum6.4.4 水晶方法6.4.5 其他敏捷方法 6.5 软…

【嵌入式Linux】<知识点> 虚拟地址空间

前言 在Linux中&#xff0c;新创建的进程都拥有独立的虚拟地址空间。为深入多进程多线程的理解&#xff0c;了解虚拟地址空间分区十分有必要。 一、概念 虚拟地址空间分为4G空间&#xff0c;其中1G为内核区&#xff0c;3G为用户区。虚拟地址空间的地址从0开始&#xff0c;且该…

66.Python-web框架-Django-免费模板django-datta-able的分页的一种方式

目录 1.方案介绍 1.1实现效果 1.2django.core.paginator Paginator 类: Page 类: EmptyPage 和 PageNotAnInteger 异常: 1.3 templatetags 2.方案步骤 2.1创建一个common app 2.2创建plugins/_pagination.html 2.3 其他app的views.py查询方法 2.4在AIRecords.html里…

入门 Vue Router

Vue Router Vue Router插件做了什么&#xff1f; 全局注册 RouterView 和 RouterLink 组件。添加全局 $router 和 $route 属性。启用 useRouter() 和 useRoute() 组合式函数。触发路由器解析初始路由。 标签介绍 RouterView 加载指定页面 <RouterLink to"/home"…

必剪APP视频剪辑的字幕制作方法教程!

你是否还在用pr听一句打一句的制作字幕&#xff1f;你是否还在用ps做字幕然后拉到pr里一句一句的对时间轴&#xff1f;快别用那些老方法啦&#xff0c;繁琐又浪费时间&#xff01;今天给大家推荐一个方便速度的制作字幕的方法&#xff0c;赶快来看看吧&#xff01; 第一步&…

【Altium】AD-网络版一个用户非人为异常占用多个License的解决方法

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 当出现一个用户同时占用多个授权&#xff0c;又无法单独释放一个授权的情况下&#xff0c;该如何解决。 2、 问题场景 一个用户获取网络版授权后&#xff0c;AD会自动重复获取授权&#xff0c;直到该license下所有授…

读书记录《SQL从小白到大牛》01

读书记录《SQL从小白到大牛》01 接地气的书名&#xff0c;内容应当值得一读。 第一篇 SQL基础 01 一些基础概念 SQL是结构化查询语言&#xff08;Structured Query Language&#xff09;&#xff0c;是一套用来输入、更改和查看关系数据库内容的命令。数据库发展经历三个阶…

Python自动化与系统安全

信息安全是运维的根本&#xff0c;直接关系到企业的安危&#xff0c;稍有不慎会造成灾难性的后果。比如经年发生的多个知名网站会员数据库外泄事件&#xff0c;信息安全体系建设已经被提到了前所未有的高度。如何提升企业的安全防范水准是目前普遍面临的问题&#xff0c;主要有…

Greenplum(一)【MPP 架构 数据类型】

1、Greenplum 入门 Greenplum 是基于 MPP 架构的一款分布式分析型数据库&#xff0c;具备关系型数据库的特点&#xff0c;因为它处理的是结构化的数据&#xff0c;同时具备大数据分布式的特点。 1.1、MPP 架构 MPP&#xff08;Massively Parallel Processing&#xff09;架构是…

IOC、DI<3> IServiceConllection 自定义IOC含属性注入、多实现注入,方法注入

using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using System.Text; using System.Threading.Tasks;namespace IOC.Common {public class ZenServiceCollection : IZenServiceCollection{// 记录IOC注册的抽象、实现private Di…

sql注入问题批量处理

问题&#xff1a;SQL注入修改&#xff0c;历史代码全是${};无法修改的比如表名&#xff0c;列名&#xff0c;动态排序之类的不改&#xff0c;其他的都要修改完成 背景&#xff1a;新公司第一个任务就是SQL注入的修改&#xff0c;历史sql全部都是${},一个个调整不太合适只能批量…

机场的出租车问题折线图

分析并可视化机场离场车辆数数据 本文将详细介绍如何使用Python的正则表达式库re和绘图库matplotlib对机场离场车辆数数据进行分析和可视化。以下是具体步骤和代码实现。 数据资源&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rU-PRhrVSXq-8YdR6obc6Q?pwd1234 提…

6000字以上论文参考:基于Java+SpringMvc+Vue技术的实验室管理系统设计与实现

可参考&#xff1a;基于JavaSpringMvcVue技术的实验室管理系统设计与实现&#xff08;6000字以上论文参考&#xff09;-CSDN博客 论文参考&#xff1a;

2024 WAIC|第四范式胡时伟分享通往AGI之路:行业大模型汇聚成海

7月4日&#xff0c;2024世界人工智能大会&#xff08;WAIC&#xff09;正式开幕。此次大会围绕核心技术、智能终端、应用赋能等板块展开&#xff0c;展览规模、参展企业数均达历史最高。第四范式受邀参展&#xff0c;集中展示公司十年来在行业大模型产业应用方面的实践。在当天…

【知网CNKI-注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…