跟班学习JavaScript第二天———流程控制、分支、循环、函数
复习：
1内嵌到html标签中，配合使用
2在html标签中编写js语句块，语句块必须写在标签中，可以放在html的任意地方，
2.变量和常量
变量是程序运行的一段内存区域，用来存储可以改变的数据
变量申明：
var 变量名 = 值
var 变量名；
变量名 = 值
常量是一段被初始化赋值之后，就不允许被修改的数据
常量申明：
const 常量名 = 值；
常量和变量可以赋的值：
在js中。数据分为两大类型：
1.原始的基本数据类型
String 字符串
Number 数字类型
Boolean 布尔类型
Null 空类型
Undefined 未定义类型
类型之间的转换：
number和boolean转string类型：toString()
string和boolean转number类型：Number(value)，如果字符串里面的数据是数字则直接转成数字。但是会把左边的0去掉，如果不是正常数据，则会转成一个NaN的number类型的数据，如果是boolean转number的话，true转成1，false转成0
number和string转Boolean类型:Boolean(value)，如果是字符串里面是空字符则转成false，否则是true，如果是数字类型，0为false，非零数字则转成true
2.引用数据类型
3.运算符
3.1算术运算符
+、-、*、/、%
3.2赋值运算符
=：赋值
+=：左右两边的和赋给左边
-=：左右两边相减的结果赋值给左边
3.3比较运算符
==：比较数据是否相等
===：比较数据是否相等之外，还要比较数据的类型是否相等
3.4逻辑运算符
&&、||、！、&、|
&&和&的区别：
**&&**判断表达式1，如果为false，直接返回false，不再判断表达式2；
**&**判断表达式1为false时，依旧会去判断表达式2，所以&&比&效率高
||和|的区别：
**||**判断表达式1为true的话，直接返回true，不再判断表达式2；
**|**判断表达式1为true后，依旧会去判断表达式2，所以||比|效率高
3.5位运算
一个数亦或（^）同一个数量词，得到的是它本身
//不借用第三方数据，交换两个数据
var a=20;
var b= 30;
a^=b; //a=a^b 20^30
b^=a; //b=b^a 30^20^30 20
a^=b; //a=a^b 20^30^20 30
console.log('a:'+a+'\nb:'+b)a=a^b^b //20^30^30=203.6三元运算符
表达式1 and 表达式2 ? “true”:“false”;
x=5;y=8;
x>y?x:y x大于y结果为false，所以输出y
**练习：**制作一个加密和解密的程序，比如原数据是5，输出通过程序加密之后的数据是30，然后再输出程序解密之后的数据为5
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">// 制作一个加密程序// 1.原始数据// 2.要有一个密钥// 3.加密是用过密钥进行原数据改变// 4.解密把原数据改变后的数据进行恢复const original = prompt('请输入原始数据');// var num = original*6;// alert('加密过后的数据：'+num);// var result = num/6;// alert('解密后的数据：'+result);var num;num=(original*30)/5;alert("加密过后的数据："+num);var result;result=original^num^num;alert("解密过后的数据："+result);</script></head><body></body>
</html>流程控制语句
分支语句
基础分支语句（判断语句）
if(表达式) {执行语句}（多选一）
执行语句要执行的话，表达式的结果必须为true
单分支语句（判断语句）
if(表达式) {语句1}else{语句2}（二选一）
表达式结果为true，执行表达式1，若不成立则执行表达式2
案例：成年可以进入网吧，未成年不可进入网吧
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>分支语句</title><script type="text/javascript">var a = prompt("请输入你的年龄");if (a > 18) {alert('你已成年了，欢迎进入XXX');} else {alert('未成年禁止进入');}</script></head><body></body>
</html>多分支语句（多判断条件）
if(表达式1) {语句1}else if (表达式2){语句2}else if(表达式3) {语句2}…… else{语句n} 逐步判断
判断多个表达式，如果表达式成立即可执行后面的语句，若是不成立就判断下个else if后面的表达式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var num = prompt('请输入学生人数');if (0 < num && num <= 20) {alert('将进入1号教室');} else if (20 < num && num <= 50) {alert('将进入2号教室');} else if (50 < num && num <= 80) {alert('将进入3号教室');} else if (80 < num && num <= 200) {alert('将进入4号教室')} else {alert('场地有限，满足不了');}</script></head><body></body>
</html>案例：根据学生人数选择教教室，每个教室能容纳的人数不同
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var num = prompt('请输入学生人数');if (0 < num && num <= 20) {alert('将进入1号教室');} else if (20 < num && num <= 50) {alert('将进入2号教室');} else if (50 < num && num <= 80) {alert('将进入3号教室');} else if (80 < num && num <= 200) {alert('将进入4号教室')} else {alert('场地有限，满足不了');}</script></head><body></body>
</html>案例：判断闰年
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 闰年：能被4整除且不能被100整除，或者能被400整除var year = prompt("请输入年份");if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {alert(year + "是闰年");} else {alert(year + '是平年');}</script></head><body></body>
</html>练习：根据用户输入的月份，打印出细节，比如：一到三月是春，四到六是夏，七到九是秋，十到十二是冬。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var m = prompt('请输入要查询的月份');if (0 < m && m < 4) {alert("现在是春季");} else if (3 < m && m < 7) {alert("现在是夏季");} else if (6 < m && m < 10) {alert("现在是秋季");} else if (9 < m && m < 13) {alert("现在是冬季");} else {alert("没有这个月份，请输出正确的月份");}</script></head><body></body>
</html>特殊的分支语句
switch() {
case ‘值’:
执行语句;
break;
……
default:
执行语句
}
注意：switch() 括号里面的变量值的类型要与case后面的值的类型相同，是全比较（===）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//因为prompt()接受得到的值是String类型的，case后面的值是数字类型的，所以要把w转成数字型；或者让case后面的加引号，变成字符串型var w = prompt('请输入相应的星期日');w = Number(w);switch (w) {case 1:alert('今天是星期一');break;case 2:alert('今天是星期二');break;case 3:alert('今天是星期三');break;case 4:alert('今天是星期四');break;case 5:alert('今天是星期五');break;case 6:alert('今天是星期六');break;case 7:alert('今天是星期天');break;default:alert('没有这个星期数');}</script></head><body></body>
</html>num与case后面的值匹配，匹配成功就输出，若是都不匹配，就输出default后面的执行语句
switch(num)里面的num在js里面可以传任意值
如果我们的判断条件是一个区间，这种情况就可以适使用if，如果我们的判断条件是固定的值，就用switch
注意事项：必须传入一个值和case后面的值去比较，然后每个case中的执行语句后面必须加上break
练习：判断用户输入的1-7弹出对应的星期，如果输出的不是1-7，就弹出不是
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var w = prompt('请输入相应的数字');switch (w) {case '1':alert('今天是星期一');break;case '2':alert('今天是星期二');break;case '3':alert('今天是星期三');break;case '4':alert('今天是星期四');break;case '5':alert('今天是星期五');break;case '6':alert('今天是星期六');break;case '7':alert('今天是星期天');break;default:alert('没有这个星期数');}</script></head><body></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var num = 2;switch(num) {case 1:alert('1');break;case 2:alert('2');break;case 3:alert('3');break;default:alert("null");}</script></head><body></body>
</html>循环语句
在生活中，我们可能需要程序来描述重复操作某一件事情，类似于跑二十圈，我们就是重复的执行跑步的操作
for循环
属于开发过程中，常用的分支之一，特点是分支条件丰富，可以提供复杂循环终止或者开始条件
for(表达式1;表达式2;表达式3) {
循环体，执行语句
}
注意：写for循环之前一定要先确定开始循环的条件，终止的条件，每次循环执行的操作
1.执行表达式1：var i=1;
2.执行表达式2,：i<=20;判断是否成立，
3.执行循环体：alert(‘跑了’+i+‘圈’);
4.执行表达式3：i++,i=2
2.执行表达式2，i<=20;判断是否成立
……一直循环2，3，4这三步，直到表达式2的结果为false，就结束循环
<script type="text/javascript">// 模拟跑步的操作for(var i=1;i<=20;i++) {alert('跑了'+i+'圈');}</script>
练习：
求1-10的和
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 1-10的和var sum = 0;for (var i = 1; i <= 10; i++) {// 1+2+3+4+5+6+7+8+9+10=55sum += i;}alert('sum：' + sum);alert('1-10的平均数：'+sum/10);</script></head><body></body>
</html>练习：求1-100中所有的奇数的和，和所有偶数的和
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var oddnum = 0;var evennum = 0;for (var i = 1; i <= 100; i++) {if (i % 2 == 0) {evennum += i;} else {oddnum += i;}}alert('100以内所有的偶数和：' + evennum);alert('100以内所有的奇数和：' + oddnum);</script></head><body></body>
</html>嵌套循环：在一些特殊的场景下，我们可能一个for循环无法实现效果，需要在for循环中套入for循环
练习：打印出九九乘法表（必要掌握）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">document.write("<h1>九九乘法表</h1>");for(var x=1;x<=9;x++) {for(var y=1;y<=x;y++) {document.write(x+'*'+y+'='+(x*y));document.write("  ");}document.write("<br/>");}</script></head><body></body>
</html>while循环
语法：
while(循环条件) {
循环体
}
while循环的弊端：变量的申明在循环的外面，循环结束变量还在
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var run = 1;while(run<10) {alert("跑了"+run+'圈');run++;}</script></head><body></body>
</html>do {
循环体
}while(循环条件)
不管while中的表达式是否成立，do中的循环体都会先执行一次
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 跑10圈之后就结束var run = 1;do {alert("跑了"+run+'圈');run++;}while(run<11)</script></head><body></body>
</html>练习：
1.1-100的和
2.1-100的和的平均数
3.1-100的所有偶数和
4.1-100的所有奇数和
5.1-100的能被4整除的数的和
for循环
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 1-100的和var sum = 0;var oddnum = 0;var evennum = 0;var sumf = 0;// forfor (var i = 1; i <= 100; i++) {sum += i;if (i % 2 == 0) {evennum += i;} else {oddnum += i;}if (i % 4 == 0) {sumf += i;}}alert('1-100的和为:\n' + sum);alert('1-100的平均值:\n' + (sum / 100));alert("1-100的所有偶数和:\n" + evennum);alert("1-100的所有奇数和:\n" + oddnum);alert("1-100的能被4整除的数的和:\n" + sumf);</script></head><body></body>
</html>while循环
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>while</title><script type="text/javascript">// 1-100的平均值var sum = 0;var oddnum = 0;var evennum = 0;var sumf = 0;var i=1;while (i<=100){// 1-100的和sum+=i;if (i % 2 == 0) {evennum += i;} else {oddnum += i;}if (i%4==0) {sumf+=i;}i++;}alert('1-100的和为:\n' + sum);alert('1-100的平均值:\n' + (sum / 100));alert("1-100的所有偶数和:\n" + evennum);alert("1-100的所有奇数和:\n" + oddnum);alert("1-100的能被4整除的数的和:\n" + sumf);</script></head><body></body>
</html>JS函数
把具备一定功能或者一定业务逻辑的代码放在一起，给它取一个名字，这个有名字的代码块就叫做函数，通过函数我们可以大大的减少重复的代码，减少代码量
函数语法声明：(function：函数的关键词，用来描述函数的)
1.变量形式的声明：
var fun = function() {
执行内容;
}
2.函数形式的声明：
function fun2() {
执行内容;
}
函数的调用
直接在js的代码块中，通过函数名()调用，若是不调用，函数就只加载，不执行
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var fun= function() {alert("变量声明的函数");}function c() {alert('函数形式的声明');}fun();c();</script></head><body></body>
</html>练习：编写一个函数，该函数打印九九乘法表，然后再调用该函数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function m() {for(var x=1;x<=9;x++) {for(var y=1;y<=x;y++) {document.write(x+'*'+y+'='+(x*y));document.write("    ");}document.write("<br/><br/>")}}m();</script></head><body></body>
</html>函数种类：
1.按照参数类型划分
无参函数和有参函数
无参函数：函数的方法中没有传递任何参数，无需传递数据，直接调用
var fun= function() {}
有参函数：函数的方法中需要传递参数，在调用时需要传递一个参数给函数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">var run = function(num) {alert("跑了"+num+"圈");}run(5);run(10);</script></head><body></body>
</html>形参和实参：
形参：定义一个范型的参数，没有实际的值，可以是任何类型
实参：在函数中实际使用的参数值。
练习：班上有5位同学，要求编写一个函数记录每个同学的姓名，分数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function result(n,f) {document.write(n+'的分数为:    '+f+"<br/>");}result("张三",88);result("李四",89);result("王五",80);result("周六",85);result("田七",87);</script></head><body></body>
</html>2.按照返回值区分
有返回值的函数：调用函数处理完毕之后，函数返回一个数据。
函数的返回值通过return关键字返回
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">// 编写一个函数，比较之间的最大数function max(num1,num2) {if(num1>num2) {return num1;}else if(num1<num2) {return num2}else {return num1;}}var maxnum = max(10,10);alert(maxnum);</script></head><body></body>
</html>无返回值的函数：调用函数处理完毕之后，函数不返回任何数据。
跟班学习JavaScript第二天———流程控制、分支、循环、函数相关推荐
- 小汤学编程之JavaScript学习day02——运算符、流程控制与循环、函数
一.运算符 1.算术运算符 2.一元运算符 3.关系运算符 4.逻辑运算符 5.赋值运算符 6.运算符的优先级 二.流程控制与循环 1.顺序结构 2.分 ...
- shell脚本编程学习笔记8(XDL)——流程控制和循环
shell脚本编程学习笔记8--流程控制和循环 1,if语句 1,框架 1,单分支:if [条件判断式] ;thenprogramfiif [条件判断式]thenprogramfi注意:if语句使用f ...
- JavaScript入门(part7)--流程控制
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 流程控制 流程控制概念 顺序流程控制 分支流程控制 三元表达式 switch分支流程控制 for循环 双重f ...
- html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句 常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
- JavaScript 04 流程控制（循环）
目录 流程控制(循环)思维导图 1 - 流程控制 1.1 流程控制概念 1.2 顺序流程控制 1.3 分支流程控制 1.4 三元表达式 1.5 switch分支流程控制 附上流程控制思维导图: 2 - ...
- Javascript知识分享——流程控制
目录 前言 一.流程控制 二.顺序流程控制 三.分支流程控制 1.if语句 2.if else 语句 3.三元表达式 4.if else if语句 5.switch语句 四.循环流程控制 1.for循 ...
- 【 js基础 Day2】js的流程控制:分支语句,循环.顺序结构
复习 JavaScript简称为JS JavaScript是什么? 是一门脚本语言:不需要编译,直接运行 是一门解释性的语言:遇到一样代码就解释一行代码 C#语言是一门面向对象的语言,也是编译语言,是 ...
- scala（三）：流程控制-分支控制、嵌套循环、for、while、do…while循环、循环中断、多支循环
目录 流程控制 分支控制 嵌套分支 for循环控制 while和do-while循环控制 循环中断 多重循环 流程控制 分支控制 分支控制可以使程序有选择的执行,分支类型有:单分支.双分支.多分支 单 ...
- 100内奇数之和流程图_JavaScript基础教程（六）流程控制之循环语句
JavaScript入门教程之循环语句 循环语句从字面意思理解就是重复执行,能够让计算机按照程序员要求重复执行某种操作的能力是所有程序设计语言所必须具备的基本能力.在JavaScript程序设计语言中 ...
最新文章
- 七牛云的存储对象的地区改变之后
- TP5 实现多字段的关键词模糊查询
- SpringBoot是如何解析HTTP参数的？
- java aio为什么不稳定_为什么我不提倡在Java中使用static
- 程序员们，您还想熬夜吗？
- 熊猫数据集_大熊猫数据框的5个基本操作
- 图书馆管理系统怎么做_亚马逊erp管理系统有免费的吗？亚马逊erp管理系统怎么免费做...
- 如何执行一段java代码_V8 之 如何执行一段 JavaSscript 代码
- ASP.NET MVC 使用 Datatables (1)
- 在kali Linux2021中安装搜狗输入法（详细教程）
- 两种SOA平台建设方案比较
- Eureka工作原理
- 洛谷 U5773 受望先锋
- RecycleView实现像ViewPager一次滑一页效果
- ajax thinkphp配合ajax的简单列子
- Android开发之连接实体手机进行开发的步骤 遇到的“an app is obsuring...“的问题及解决
- 导出excel文件后，显示文件损坏
- 【Java SE系列】抽象类与接口
- 利用STM32CubeMX来设置精确到微妙（us）的定时器
- 来自一位双非本科跌跌撞撞的秋招指南（秋招攻略/经验分享/干货）