目录
1.for 循环
- 语法：
for(1.定义循环变量; 2.判断循环条件; 3.更新循环变量){ 循环体 } -
循环流程
-
定义循环变量
-
判断循环条件
-
条件成立，执行循环体
-
更新循环变量
-
-
for 循环 与 while 循环的区别
-
相同点：执行流程相同
-
不同点：
while 循环常用于不确定循环次数的场合
for 循环常用于确定循环次数的场合
练习：
1-100的所有数，
1-100所有的和，
1-100能被3整数的数
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var s = 0; for (var i= 1; i <= 100; i++){ // console.log(i); s += i; } console.log(s); for(var j=1; j<101; j++){ if (j % 3 == 0){ console.log(j); } } </script> </head> <body> </body> </html>
-
-
循环控制
-
break
break用在循环体中，表示跳出循环，结束整个循环，并且循环体中break后面的代码都不执行 -
continue
continue 用在循环体中，表示跳出本次循环，开始下一次循环<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var sum = 0; for(var i = 1;i <= 100;i ++){ sum += i; // console.log(i); } console.log(sum); //模拟跑十圈 for(var j = 1; j <= 10; j ++){ if (j == 5) { console.log("不能再跑了，要出事"); break; } console.log("第"+j+"圈"); } for(var m = 1;m <= 10; m ++){ if (m == 5) { console.log("下场补水，下一圈接着跑"); continue; } console.log("第"+m+"圈"); } </script> </head> <body> </body> </html>
练习：-
判断素数（质数）
素数：只能被1和本身整除的数字，从弹框随意录入数字，判断是否为素数<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var num = Number(prompt("请输入数字")); var isSu = true; // 从2开始到num-1之间不能再有其他数字可以被整除 for(var i = 2; i < num;i ++){ if (num % i == 0) { isSu = false; break; } } if(isSu){ console.log(num+"是素数"); }else{ console.log(num+"不是素数"); } </script> </head> <body> </body> </html> -
在弹框中输入年月日，判断星期几，已知：1990年1月1日是星期一
解决-
接收年月日，切换为Number类型
-
计算当前日期与1990年1月1日之间间隔多少天
年累加 1990 ->year-1
当前年中月份的累计
当前月的天数 -
总天数 % 7
0-6代表周日-周六
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> //接收用户输入的年 月 日 var year = Number(prompt("请输入年份")); var month = Number(prompt("请输入月份")); var day = Number(prompt("请输入日期")); //总天数 var totalDays = 0; // 判断当年是否为闰年 var isRun = year % 4 == 0 && year % 100 != 0 || year % 400 == 0; // 计算天数 年 和 月 for(var i = 1990;i < year;i ++){ totalDays += 365; if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) { totalDays += 1; } } // 当前年中月份的累加 for(var i = 1; i < month; i ++){ switch(i){ case 1 : case 3 : case 5 : case 7 : case 8 : case 10: totalDays += 31; break; case 4 : case 6 : case 9 : case 11 : totalDays += 30; break; case 2 : totalDays += 28; if (isRun) { totalDays += 1; break; } } //更新循环变量 } // 累加当前月的天数 totalDays += day; // 计算星期几，只需要总天数对7取余，余数就表示周几 var date = totalDays % 7; var show = ""; switch(date){ case 0 : show = "日"; break; case 1 : show = "一"; break; case 2 : show = "二"; break; case 3 : show = "三"; break; case 4 : show = "四" ; break; case 5 : show = "五"; break; case 6 : show = "六"; break; } console.log(year+"年"+month+"月"+day+"日是星期"+show); </script> </head> <body> </body> </html>
-
-
-
-
循环的嵌套
允许在一个循环中嵌套另一个循环
语法：for(var i = 1; i <= 9; i ++){ //行 for(var j = 1; j <= 9; j ++){ //列 } }练习：
-
在控制台输出图案
*
**
***
****
***** -
在控制台输出图案
*
***
*****
*******
*********
每行的空格数和星星数
思路：
行数 i 共五行
每行的空格数：
行数 空格
1 4
2 3
i 5-i
每行的星星数：
行数 星星数
1 1
2 3
i 2*i-1
每一行中，先输出空格， -
控制台输出 99 乘法表
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> // 行数与该行的星星个数相等 for(var i = 1; i <= 5; i ++){ //由于console.log语句会自动换行，所以定义一个字符串来表示最终显示的内容 var showMsg = ''; for(var j = 1; j <= i;j ++){ showMsg += '*'; } console.log(showMsg); } console.log("----------------------"); for(var i = 1; i <= 5; i ++){ var show = ''; // 空格数 for(var j = 1; j <= 5-i; j ++){ show += ' '; } // 星星数 for(var k = 1; k <= 2*i - 1;k ++){ show +="*"; } console.log(show); } console.log("-------------------------"); // 第一个操作数 for(var i = 1; i <= 9; i ++){ var show = ''; // 第二个操作数 for(var j = 1; j <= i; j++){ // show += i + "*" + j +'=' + i * j; show += j + "*" + i +'=' + i * j + "\t"; } console.log(show); } </script> </head> <body> </body> </html>
-
2.函数
- 函数，就是一段待执行的代码块
- 作用：
实现多条语句的封装
实现代码复用 - 函数使用
- 函数的声明
- 函数的调用
注意：函数先声明在调用（JS中非强制）
- 语法：
- 函数声明
function 函数名（参数列表）{
函数体;
返回值
}- JS中函数声明使用function关键字
- 函数名自定义，遵照变量命名规范，见名知意
- 参数列表，参数表示函数体执行所需要的数据，可以为空，为空时() 不能省略，多个参数之间使用, 隔开
et：
function sum (a,b){
return a + b;
} - 返回值 使用return 关键字，将函数体内部执行的结果传递给外界使用，只能返回一个值，返回值不需要的话，可以省略return
et：
function showFn(){
console.log('hello');
}
注意：return一定要写在函数体的末尾，return关键字后面的代码都不执行 - 匿名函数
var fn = function(){
函数体
};
- 函数调用
语法：
函数名();
函数名(10,20);
var res = 函数名(10,20);
注意：- 函数参数分为形参和实参，函数声明时，使用形参，函数调用时，传递实参
形参：代号
实参：具体的数据
传参的过程，就是给参数中形参变量赋值的过程 - 函数如果有返回值，在调用时，需要定义变量接收返回值
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> // 1. 声明一个无参数无返回值的函数 function fn1 () { console.log("这是一个无参数无返回值的函数"); } // 函数调用 fn1(); //2. 声明一个带参数无返回值的函数 function fn2 (a){ console.log(a); } fn2("hello"); // 3. 声明带参数带返回值的函数 function sum (a,b){ var sum = a + b; // return sum; return a + b; } // 传参的过程，就是给函数中形参变量赋值的过程 a=10; var r1 = sum(10,20); console.log(r1); // a=100;b为undefined 100 + undefined = NaN var r2 = sum(100); console.log(r2); // 4.匿名函数 var fn = function (){ console.log("匿名函数"); }; fn(); //元素绑定 function sayHi() { alert("Hi"); } </script> </head> <body> <button onclick="sayHi();">点击</button> </body> </html>
练习：改装日期计算器- 整体功能封装在一个函数中
- 将闰年判断的功能单独封装在一个函数中
- 接收参数（年份）
- 返回布尔值表示是否为闰年
- 整体的功能中涉及闰年判断的部分，都通过函数调用实现
- 添加界面元素，按钮 显示 日期计算器 ，点击时间用函数实现日期计算
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> // 闰年判断函数 function isRun(year) { return year % 4 == 0 && year % 100 != 0 || year % 400 == 0; } function calculateDate() { // 实现日期计算 //接收用户输入的年 月 日 var year = Number(prompt("请输入年份")); var month = Number(prompt("请输入月份")); var day = Number(prompt("请输入日期")); //总天数 var totalDays = 0; // 计算天数 年 和 月 for(var i = 1990;i < year;i ++){ totalDays += 365; if (isRun(i)) { totalDays += 1; } } // 当前年中月份的累加 for(var i = 1; i < month; i ++){ switch(i){ case 1 : case 3 : case 5 : case 7 : case 8 : case 10: totalDays += 31; break; case 4 : case 6 : case 9 : case 11 : totalDays += 30; break; case 2 : totalDays += 28; if (isRun(year)) { totalDays += 1; break; } } //更新循环变量 } // 累加当前月的天数 totalDays += day; // 计算星期几，只需要总天数对7取余，余数就表示周几 var date = totalDays % 7; var show = ""; switch(date){ case 0 : show = "日"; break; case 1 : show = "一"; break; case 2 : show = "二"; break; case 3 : show = "三"; break; case 4 : show = "四" ; break; case 5 : show = "五"; break; case 6 : show = "六"; break; } alert(year+"年"+month+"月"+day+"日是星期"+show); } </script> </head> <body> <button onclick="calculateDate();">日期计算器</button> </body> </html>
- 函数参数分为形参和实参，函数声明时，使用形参，函数调用时，传递实参
- 函数声明
- 变量的作用域
- 变量的作用域指的是变量起作用的范围
- 分类：
- 全局作用域
处在全局作用域中的变量就是全局变量- 在function之外通过var 声明的变量都是全局变量，在任何地方都可以访问
- 声明变量时，省略var关键字，一律是全局变量，推荐使用var关键字，不要省略
- 局部作用域
(JS中局部作用域指的是函数作用域)
局部作用域中的变量就叫局部变量- 在函数内部使用var 关键字声明的变量都是局部变量，只在当前函数作用域可以访问，外界无法访问
- 局部变量出了函数就不能访问
注意：在函数中访问变量，如果当前函数中没有该变量，就访问全局作用域中的变量
如果当前函数中定义了该变量，全局中也有相同的变量名，函数就近访问变量<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> // 1. 全局变量 var a = 100,b = 200; c = 300; function fn() { console.log("fn中访问变量",a,b,c); // 只要省略var关键字来定义变量，一律为全局变量 d = 1000; } fn(); console.log("函数外部访问变量",a,b,c,d); // 2. 局部变量 function fn2() { var a = 10; var b = 20; console.log("fn2中访问变量",a,b); } fn2(); console.log("fn2外部访问变量",a,b); </script> </head> <body> </body> </html>
- 全局作用域
3.数组
- Array 数组是一个有序的元素序列，数组中的元素会自动分配下标，从0开始，方便读写
- 创建数组
- 创建空数组
var 数组名 = [] - 创建数组的同时初始化元素
var 数组名 = [元素1，元素2，...]; - 创建空数组
var 数组名 = new Array(); - 创建数组并初始化后
var 数组名 = new Array(元素1，元素2，...);
注意：
var 数组名 = new Array(Num);
只包含一个数值参数时，表示初始化数组长度
et：
var arr = new Array(5);
- 创建空数组
- 数组是使用
- 获取数组的长度
属性：length
使用：数组名.length; //获取数组长度 - 访问数组元素
数组中每一个元素都有对应的下标
元素的下标范围 0 -> length-1
语法：数组名[下标]; - 设置数组元素
语法：数组名[下标] = value;<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> // 创建数组 var arr1 = []; var arr2 = [10,20,30,40]; var arr3 = new Array(); var arr4 = new Array("李易峰","周杰伦","林书豪","郭艾伦"); var arr5 = new Array(10); console.log(arr1,arr1.length); console.log(arr2,arr2.length); console.log(arr3); console.log(arr4,arr4[2]); // 为数组添加元素 arr5[4] = 100; console.log(arr5); </script> </head> <body> </body> </html>
- 获取数组的长度
- 清空数组中的元素
arr.length = 0; - 循环遍历数组
//正序
for(var i = 0; i < arr.length; i ++){
arr[i];
}
//倒序
for(var i = arr.length - 1; i >=0; i --){
arr[i];
}<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"> var arr = [10,20,12,32]; console.log(arr); // arr.length = 0; console.log(arr); // 遍历数组 for(var i = 0;i < arr.length; i ++){ console.log(arr[i]); } for(var i = arr.length - 1; i >= 0; i --){ console.log(arr[i]); } </script> </head> <body> </body> </html>
练习：-
- 让用户循环录入数据
- 将用户输入的数据存储在一个数组中
- 当用户输入exit 表示结束输入
- 结束之后输出数组中元素
- 创建一个包含若干整数的数组，找出其中的最大值并输出
- 创建一个只包含3个数字的数组，按照从小到大排序之后输出数组
- 声明一个数组包含若干个数字，从弹框中接收用户输入一个数字，查询数组，如果数组中存在对应的元素，输出其下标，没有，提示数据不存在
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> //1.存储数据 var arr = []; while(true){ var input = prompt("请输入数据"); if(input == "exit"){ break; } arr[arr.length] = input; } console.log(arr); //2.找数组中的最大值 var arr2 = [12,3,54,65,123,-123,-56,666,78]; //保存最大值 var maxNum = arr2[0]; //遍历数组 for(var i = 0;i < arr2.length; i ++){ if(arr2[i] > maxNum){ maxNum = arr2[i]; } } //alert(maxNum); //3. 排序 var arr3 = [67,128,34]; //两两比较，交换位置 if(arr3[0] > arr3[1]){ arr3[0] ^= arr3[1]; arr3[1] ^= arr3[0]; arr3[0] ^= arr3[1]; } if(arr3[1] > arr3[2]){ arr3[1] ^= arr3[2]; arr3[2] ^= arr3[1]; arr3[1] ^= arr3[2]; } if(arr3[0] > arr3[1]){ arr3[0] ^= arr3[1]; arr3[1] ^= arr3[0]; arr3[0] ^= arr3[1]; } console.log(arr3); //4. 查询数组元素 function findIndex () { var arr = [12,34,32,54,65,8,99]; //定义变量，保存最终下标 var index = -1; var input = prompt("请输入一个数字"); for(var i = 0; i < arr.length; i ++ ){ if(input == arr[i]){ //1. 如果找到对应数据，结束循环 //2. 输出对应的下标 index = i; break; } } //循环结束之后判断index是否为-1 if(index == -1){ console.log("数据不存在"); }else{ console.log(input + "对应的下标为" + index); } } </script> </head> <body> <button onclick = "findIndex();">查询</button> </body> </html>
-
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
