目录
1.循环
1.循环的流程控制
1.break
在循环体内使用，用于跳出整个循环结构
2.continue
在循环体内使用，用于跳出本次循环，继续执行下次循环
2.for循环
1.while
打印1-100之间的数字
var i = 1: // 循环条件的初始化
while(i<=100){ // 循环条件的判断
console.log(i); // 循环操作
i++; // 更新循环条件
}
2.for
1.语法
for(表达式1;表达式2;表达式3){
循环操作
}
表达式1:循环条件的初始化
表达式2:循环条件的判断
表达式3:更新循环条件
打印1-100之间所有的数字
for(var i=1;i<=100;i++){
console.log(i);
}
流程:
1.先执行表达式1,声明条件(执行1次)
2.再判断表达式2的值,true或false
3.如果条件为true,则执行循环操作
如果条件为false,就退出循环
4.执行完循环操作后,再执行表达式3
5.再判断表达式2的值,同步骤2
// 计算1-100之间的所有数字的和
var sum = 0;
for(var i = 1;i<=100;i++){
sum += i;
}
console.log("1-100之间所有的数字的和为:"+sum);
2.for vs while
1.相同
先判断条件，在执行循环操作
2.不同
while:优先使用在不确定循环次数的场合下
for:优先使用在确定循环次数的场合下
3.练习
1.修改日期计算器，将while 循环更改为for 循环
2.判断素数(质数)
1.从弹框中随意录入一个数字，判断其是否为素数
素数:只能被1和它自己整除的数字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
var year = Number(prompt("请输入年:"));
var month = Number(prompt("请输入月:"));
var day = Number(prompt("请输入日:"));
var totalDays = 0;
for(var i=1900;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 (year % 4 == 0 && year % 100 != 0 || year % 400 == 0)
totalDays +=1;
}
}
totalDays += day;
var m = totalDays % 7;
if(m==0){
m="日"
}
console.log(totalDays);
console.log("星期"+m);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
var n = Number(prompt("请输入一个数:"));
var flag = true;
for(var i = 2;i<=n/2;i++){
if(n % i == 0){
flag = false;
break
}
}
if(flag){
console.log(n+"是素数");
}else{
console.log(n+"不是素数");
}
</script>
</body>
</html>4.循环的嵌套
允许在一个循环的内部再出现一个循环
// 外层循环
for(var i=1;i<=10;i++){
for(var j=1;j<=10;j++){
}
}
外层循环走一次，内层循环走一轮
练习:在控制台中打印以下图形
*
***
*****
*******
*********
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
var line = Number(prompt("输入数字"));
for(var i=1;i<=line;i++){
// i 表示当前行
var msg = '';
// 将空格 和星星 追加到msg后面
//控制空格的循环
for(var j=1;j<=line-i;j++){
msg += ' ';
}
// 控制星星的循环
for(var m=1;m<=(2*i-1);m++){
msg += ('*');
}
console.log(msg);
}
</script>
</body>
</html>2.函数
1.什么是函数
函数，又称 function,是一段被预定义好，并可以独立反复执行并包含多条执行语句的代码块
2.在JS中创建函数
function 函数名(参数){
函数体
[返回值]
}
参数列表:
如果没有参数，此处为空
如果有参数，则编写参数列表,如果有多个参数的话，各个参数之间使用","隔开
有参数的函数在调用时，就要传参,如果未传参的话,那么参数的值就是 underfined
返回值:
在函数体内,经过运算后,需要传递给函数调用者的一个值,就是返回值
返回值是可选的，有返回值的话，需要使用return 进行返回，但最多只能返回一个值
3.函数的调用
在任意的JS的合法位置处，都允许做函数的调用
var ret = 函数名(参数列表);
有参数，则传递参数，否则参数列表为空
有返回值，则可以接收返回值;如果没有返回值的话，返回值为 undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
//
function isRun(){
var year = prompt("请输入一个年份");
return year%4==0&&year%100!==0||year%400==0;
}
// 网页加载的时候就调用isRun()
// console.log(isRun());
</script>
<button onclick="alert(isRun())">判断闰年</button>
</body>
</html> 练习:
修改作业内容:
1.将作业中的所有内容提炼成一个函数,通过一个按钮调用执行
2.将闰年判断的逻辑提炼成一个函数
参数:要判断的年份
返回值:是否为闰年的结果(boolean)
将日期计算器作业中所有闰年判断的逻辑改为函数调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function isRun(year){
return year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
}
function calDate(){
var year = Number(prompt("请输入年:"));
var month = Number(prompt("请输入月:"));
var day = Number(prompt("请输入日:"));
var totalDays = 0;
for(var i=1900;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;
}
}
totalDays += day;
var m = totalDays % 7;
return ("星期"+m);
}
</script>
<button onclick="alert(calDate())">日期计算器</button>
</body>
</html>4.匿名函数
1.什么是匿名函数
匿名函数是一个没有名称的函数，该类函数会针对某一个功能而存在，不能独立声明
2.语法
function(参数列表){
函数体
}
window.onload = function(){
console.log(.... ....)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
window.onload = function(){
console.log("网页加载后就执行的内容");
}
function initial(){
console.log("网页加载后就执行的内容(非匿名函数)");
}
window.onload = initial;
</script>
</body>
</html>5.变量的作用域
1.什么是变量的作用域
变量的作用域指的是变量的可访问范围
2.作用域的分类
1.局部变量
使用var关键字声明在某个函数内的变量，就是局部变量
局部变量只能在声明的函数内使用
2.全局变量
1.在function之外声明的变量全部都是全局变量
2.声明变量只要不使用var关键字，全部都是全局变量
全局变量可以应用在各个函数中
注意:全局变量，推荐在所有的function之外使用var关键字去声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var g_num = 185;
function funA(){
var num = 85;
str = "funA中声明的全局变量";
console.log("在funA中声明的变量:"+num);
console.log("全局变量g_name:"+g_num);
console.log("全局变量str:"+str);
}
function funB(){
// console.log("使用在funA中声明的变量num:"+num);
console.log("全局变量g_name:"+g_num);
console.log("全局变量str:"+str);
}
function funC(){
//uname 会被预读到funC函数的顶端,等同于
// var uname; 但赋值还保留在原来的位置处
console.log(uname); //值为:undefined
var uname = "张学友";
console.log(uname);
}
</script>
<button onclick="funA()">funA</button>
<button onclick="funB()">funB</button>
<button onclick="funC()">funC</button>
</body>
</html>6.声明提前
在JS中使用var声明的变量，在程序执行之前都会被预读到所在作用域的顶端，但赋值还保留在原位
3.数组 - Array
1.什么是数组
数组(Array),是一个用于保存批量数据的数据结构
数组是按照线性结构来保存数据的
2.创建数组
(使用数组直接量的方式创建)
1.创建一个空数组
var 数组名 = [];
2.创建数组并初始化数据
var 数组名 = [元素1，元素2，元素3，...];
(使用数组的构造函数创建)
3.创建一个空数组
var 数组名 = new Array();
4.创建数组并初始化数据
var 数组名 = new Array(元素1，元素2，元素3)
3.数组的使用
获取 或 设置数组的元素的值，一律使用下标
下标是从0开始，到数组元素个数-1结束
var arr1 = ["路飞","乔巴","乌索普"];
1.将数组中的第一个元素更改为 香吉士
arr1[0] = "香吉士";
2.打印输出 arr1 数组中的第2个元素
console.log(arr1[1]);
3.为arr1数组中的第10个元素赋值为"罗宾"
arr1[9] = "罗宾"
4.获取数组的长度
属性:length
用法:数组名.length
使用场合:
1.能够找到数组中,要最新插入的元素的位置(向数组尾部增加新元素时使用)
var arr1 = ["路飞","乔巴","乌索普"];
//向arr1数组中追加新元素 - 艾斯
arr1[arr1.length] = "静音";
arr1[arr1.length] = "萨博";
2.配合循环,遍历数组中的每个元素
var arr1 = ["路飞","乔巴","乌索普"];
for(var i = 0;i < arr1.length; i++){
console.log(arr1[i]);
}
for(var i = arr1.length-1;i>=0;i--){
console.log(arr[i]);
}
练习:
1.让用户循环的从弹窗中录入数据,并将录入的数据保存在一个数组中,直到输入exit为止(exit不存)，最后打印数组中所有的数据
2.声明一个数组，存放若干人的姓名
要求 从弹框中录入一个人的姓名，并判断该人的姓名在数组中的下标是多少
如果存在:则显示下标的值
如果不存在:提示 输入的数据不存在
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function exer1(){
//声明一个空数组，用于保存用户输入的数据
var arr1 = [];
while(true){
var n = prompt('请输入数据:');
if(n == 'exit'){
break;
}
arr1[arr1.length] = n;
}
return arr1;
}
console.log(exer1());
</script>
<button onclick="exer1()">练习</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function exer2(){
var arr1 = ["路飞","乔巴","乌索普","萨博","艾斯"];
var name1 = prompt("请输入姓名:");
for(var i=0;i<arr1.length;i++){
if(name1 == arr1[i]){
console.log('下标为'+i);
break;
}
}
if(i == arr1.length){
console.log("您输入的元素不存在!");
}
}
</script>
<button onclick="exer2()">练习2</button>
</body>
</html> 作业:
1.解决 练习2
如果输入的姓名在数组中存在多个怎么办?
2.声明一个数组保存三个数字，将三个数字按照从小到大的方式排列
nums = [76,12,51]
... ...
nums = [12,51,76]
var nums = [76,12,51];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
function home1(){
var arr1 = ["漩涡鸣人","卡卡西","小樱","漩涡鸣人"];
//存放找到的信息的下标
var indexArr = [];
var input = prompt('请输入用户名');
//循环遍历arr1,查找input 是出现在arr1中
for(var i=0;i<arr1.length;i++){
if(arr1[i] == input){
indexArr[indexArr.length]=i;
}
}
//判断indexArr的长度,如果长度>0,说明input在arr1中出现过至少一次
if(indexArr.length > 0){
console.log('出现的下标为:'+indexArr);
}else{
console.log('不存在');
}
}
function sort1(){
var nums = [76,12,51,45,467,8,3463,45234,7,8,5,7,45,758];
var a = 1
while(a<=nums.length){
for(var i = 0; i < nums.length; i++){
if(nums[i]>nums[i+1]){
nums[i] ^=nums[i+1];
nums[i+1] ^=nums[i];
nums[i] ^=nums[i+1];
}
}
a++;
}
console.log(nums);
}
sort1();
</script>
<button onclick="home1()">数组</button>
<button onclick="sort1()">排序</button>
</body>
</html>