目录
1.var let const
使用var关键字定义的变量,变量名可以重复,后面的变量会将前面的变量覆盖掉。
var方式定义变量,会统一提升到全局作用域的顶端定义,然后再指定的地方赋值。
var定义的变量,即使在指定的代码块中,仍然会提升到全局作用域的顶端。
因为使用var定义变量,存在上面的各种问题,所以从ES6开始,又引入的新的方式定义变量
使用let,在同一个作用域中,不能定义同名的变量。let定义的变量,不存在提升。
const关键字,用于定义常量,常量的特点是:不能重新赋值,并且在定义时,必须要赋值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>var let const</title>
</head>
<body>
<script>
// 使用var关键字定义的变量,变量名可以重复,后面的变量会将前面的变量覆盖掉。
var i = 100
console.log('i='+i);
var i = 200
console.log('i='+i);
var i = 'hello'
console.log('i='+i);
console.log('-----------------------------------');
// var方式定义变量,会统一提升到作用域的顶端定义,然后再指定的地方赋值。
console.log('j='+j);
if(true){
var j = 100
console.log('j='+j);
}
console.log('j='+j);
console.log('-----------------------------------');
// 使用let,在同一个作用域中,不能定义同名的变量。
let a = 100
// 这里的代码会报错,提示a重复定义了
// let a = 200
console.log('a='+a);
// let定义的变量,不存在提升。所以,下面的代码会报错,提示b没有定义
// console.log('b='+b);
if(true){
let b = 200
console.log('b='+b);
}
console.log('-----------------------------------');
// const关键字,用于定义常量,常量的特点是:不能重新赋值,并且在定义时,必须要赋值。
let c = 200
console.log('c='+c);
c = 300
console.log('c='+c);
const d = 500
console.log('d='+d);
// 这里的代码会报错,提示不能对常量重新赋值
// d = 1000
let e;
e = 1000
console.log('e='+e);
// 这里的代码会报错,提示必须给常用初始化(在定义常量的时候,就必须要赋值)
</script>
</body>
</html>
控制台显示为:
2.模板字符串
使用 '' 和 "" 定义的数据是字符串数据
console.log('大家好!我叫'+name+',今年'+age+'岁,性别是'+gender+',职业是'+job);
在ES6中,又加入 `` ,在反引号里面,可以定义模板字符串,方式是${变量名}
console.log(`大家好!我叫${name},今年${age}岁,性别是${gender},职业是${job}`);
如果字符串采用""包裹,里面可以定义''
如果字符串采用''包裹,里面可以定义""
如果希望我们定义的字符串中,既包括双引号,又包括单引号,过去是采用转义字符的方式定义的。
转义字符串:\" 表示 " \' 表示 '
console.log("\'大家好\'!\"才是真的好\"!");
现在可以直接在模板字符串中使用双引号和单引号
console.log(`'大家好'!"才是真的好"!`);
转义字符的其他用法
\t 表示水平制表符,其实就是一个Tab键
\n 表示换行符,其实就是一个Enter键
\\ 表示一个\
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板字符串</title>
</head>
<body>
<script>
let name = '小明'
let sex = '男'
let age = 20
let education = '本科'
let tel = '15912345678'
// 字符串可以通过+号进行拼接
console.log('姓名:'+name+',性别:'+sex+',年龄:'+age+',学历:'+education+',电话:'+tel);
// 在ES6中,又加入 `` ,在反引号里面,可以定义模板字符串,方式是${变量名}
console.log(`姓名:${name},性别:${sex},年龄:${age},学历:${education},电话:${tel}`);
console.log('-----------------------------');
// 如果输出的内容,包含一对双引号,那么字符串用单引号定义
console.log('"好哈学习,天天向上"');
// 如果输出的内容,包含一对单引号,那么字符串用双引号定义
console.log("'好哈学习,天天向上'");
// 如果输出的内容中既要包括双引号,又要包括单引号,必须要将字符串拆分开来写,然后用+号拼接
console.log("'好哈学习,天天向上',"+'"你好世界"');
// 现在直接使用模板字符串
console.log(`'好好学习,天天形式',"你好世界"`);
console.log('-----------------------------');
// 转义字符:带有特殊含义的字符
// \t表示制表符
// \n表示换行符
// 取消转义字符串的含义,直接输出该字符,需要加\\
console.log('好好学习\\t天天向上');
console.log('好好学习\\n天天向上');
// \\ 就表示 \
console.log('好好学习\\\\天天向上');
</script>
</body>
</html>
控制台显示为:
3.while循环
//()里面是循环的条件,条件成立,执行{}里面的操作
while(条件){
操作
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while循环</title>
</head>
<body>
<script>
// 打印100遍:好好学习,天天向上
// 当需要重复执行某一个业务的时候,就需要使用循环
// 第一种循环:while
let i = 1 //定义循环的条件变量
// ()里面,放在循环的条件判断,返回true执行循环体,否则返回false,跳出整个循环。
while(i<=10){
console.log(i+'好好学习,天天向上');
//在循环体中,一定要对循环变量重新赋值,否则会形成死循环。
i++ // => i+=1 => i=i+1
}
console.log('end');
</script>
</body>
</html>
控制台显示为:
练习题
1.找出100以内,能被3整除的数,并输出 2.找出21世纪里面所有的闰年,并打印出来 3.输入年 月 日,算出该日期是全年的第多少天<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while循环-练习1</title>
</head>
<body>
<script>
// 练习题1:找出100以内,能被3整除的数,并输出
//01.这个数从1开始
let i = 1;
//02.确定循环的范围
while(i<=100){
//04.判断i的值能否被3整除
if(i%3===0){
console.log(i);
}
//03.i的值每一次要加1
i++
}
</script>
</body>
</html>
控制台显示为:(这里只显示了一部分)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while循环-练习2</title>
</head>
<body>
<script>
// 练习题2:找出21世纪里面所有的闰年,并打印出来
// 2000 - 2099
// 定义循环变量
let year = 2000
// 确定循环条件
while(year<2100){
//判断是否是闰年
if(year%4===0 && year%100!==0 || year%400===0){
console.log(year);
}
//循环变量,重新赋值
year++
}
</script>
</body>
</html>
控制台显示为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while循环-练习3</title>
</head>
<body>
<script>
// 练习题3:输入年 月 日,算出该日期是全年的第多少天
// 假如这个日期是:2021-8-15
// 使用循环 + if实现
let year = parseInt(prompt('请输入年份:'))
let month = parseInt(prompt('请输入月份:'))
let day = parseInt(prompt('请输入日期:'))
let sum = 0 //用于累加总天数
// 01.累加整月天数
let i = 1 //表示从1月份开始
while(i<month){
//每循环一次,要判断i的值是多少,确定加多少天
if(i===1 || i===3 || i===5 || i===7 || i===8 || i===10){
sum += 31
}else if(i===4 || i===6 || i===9 || i===11){
sum += 30
}else{
//else是二月份,所以,要判断是否是闰年
if(year%4===0&&year%100!==0 || year%400===0){
sum += 29
}else{
sum += 28
}
}
i++ //i的值每次加1
}
// 02.累加当月天数
sum += day
alert(`${year}-${month}-${day}是全年的第${sum}天`)
</script>
</body>
</html>
弹窗显示为:
4.do-while循环
do{
操作
}while(条件)
while循环的特点是:先判断条件,再执行循环操作
do-while循环的特点是:先执行一次循环操作,再判断循环条件
所以,do-while循环,没有入口判断,无论循环条件是否满足,至少会执行一次循环体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>do-while循环</title>
</head>
<body>
<script>
let i = 6
while(i<=5){
console.log(i+'好好学习');
i++
}
console.log('-----------------');
// do-while循环没有入口条件判断,循环体无条件先执行一次,从第二次开始判断
let j = 6
do{
console.log(j+'天天向上');
j++
}while(j<=5)
</script>
</body>
</html>
控制台显示为:
练习题
1.系统菜单:输入 1.添加学生,2.修改学生,3.查询学生,4.删除学生,0.退出系统 2:小型ATM机系统 3.打印输出3位数里面所有的水仙花数,百位数的3次方+十位数的3次方+个位数的3次方===这个数 4.输入你的出生年月日,再输入当前日期的年月日,计算出你一共活了多少天 5.输入一个指定的日期,输出该日期是星期几,提示:1900-1-1是星期一<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>do-while-练习1</title>
</head>
<body>
<script>
// 练习题1:系统菜单:输入 1.添加学生,2.修改学生,3.查询学生,4.删除学生,0.退出系统
// 定义循环变量,该变量的初始值没有要求,因为do-while循环没有入口条件判断
let num;
do{
//对循环变量重新赋值
num = parseInt(prompt('请输入编号:1.添加学生 2.修改学生 3.查询学生 4.删除学生 0.退出系统'))
switch(num){
case 1:
alert('执行添加学生')
break
case 2:
alert('执行修改学生')
break
case 3:
alert('执行查询学生')
break
case 4:
alert('执行删除学生')
break
case 0:
alert('成功退出系统,欢迎下次继续使用!')
break
default:
alert('输入错误!请重新输入!')
break
}
}while(num!==0) //判断循环变量,是否满足条件
</script>
</body>
</html>
弹窗显示为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>do-while-练习2</title>
</head>
<body>
<script>
// 练习题2:小型ATM机系统
let money = 10000 //定义账户余额
let num = 0 //定义一个循环变量
do {
num = parseInt(prompt('*****小型ATM机系统*****\n1.查看余额 2.存款 3.取款 0.退出'))
if (num === 1) {
//查看余额
alert(`您的账户余额是${money}元`)
} else if (num === 2) {
//存款
//01.输入存款金额
let m = parseInt(prompt('请输入存款金额:'))
//02.将存款金额累加给账户余额
money = money + m
} else if (num === 3) {
//取款
// 01.输入取款金额
let m = parseInt(prompt('请输入取款金额:'))
//取款金额,不能超过账户余额
if (m <= money) {
//02.从账户余额中减去取款金额
money = money - m
} else {
alert('取款失败!账户余额不足!')
}
} else if (num === 0) {
//退出
alert('成功退出!欢迎下次继续使用!')
} else {
//输出错误
alert('输入错误!请重新输入!')
}
} while (num !== 0)
</script>
</body>
</html>
弹窗显示为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>do-while-练习3</title>
</head>
<body>
<script>
// 打印输出3位数里面所有的水仙花数,百位数的3次方+十位数的3次方+个位数的3次方===这个数
// 01.找出所有的3位数(确定循环的范围)
let num = 100
while(num<=999){
// 02.判断这个3位数,是不是水仙花数
let bai = parseInt(num/100)
let shi = parseInt(num%100/10)
let ge = num%10
//满足条件的数,是水仙花数
if(bai*bai*bai+shi*shi*shi+ge*ge*ge === num){
console.log(num);
}
num++
}
</script>
</body>
</html>
控制台显示为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>do-while-练习4</title>
</head>
<body>
<script>
// 输入你的出生年月日,再输入当前日期的年月日,计算出你一共活了多少天
// 假设出生日期是:1998-8-18,今天是2021-11-12
let year1 = parseInt(prompt('请输入你的出生年份:'))
let month1 = parseInt(prompt('请输入你的出生月份:'))
let day1 = parseInt(prompt('请输入你的出生日期:'))
let year2 = parseInt(prompt('请输入当前年份:'))
let month2 = parseInt(prompt('请输入当前月份:'))
let day2 = parseInt(prompt('请输入当前日期:'))
let sum = 0 //定义总天数
// 1.出生那年,还剩下多少天
// 1.1.先算出出生那天是全年的第多少天
let sum1 = 0 //用于累加出生那年过去的天数
let i = 1;
while (i < month1) {
if (i === 1 || i === 3 || i === 5 || i === 7 || i === 8 || i === 10) {
sum1 += 31
} else if (i === 4 || i === 6 || i === 9 || i === 11) {
sum1 += 30
} else {
if (year1 % 4 === 0 && year1 % 100 !== 0 || year1 % 400 === 0) {
sum1 += 29
} else {
sum1 += 28
}
}
i++
}
sum1 += day1
// 1.2.再用全年天数-过去的天数 = 出生那年,还剩下多少天
if (year1 % 4 === 0 && year1 % 100 !== 0 || year1 % 400 === 0) {
sum = 366 - sum1
} else {
sum = 365 - sum1
}
// 2.中间有多少个整年
let j = year1 + 1
while (j < year2) {
// 判断哪些整年是闰年,哪些整年是平年
if (j % 4 === 0 && j % 100 !== 0 || j % 400 === 0) {
sum += 366
} else {
sum += 365
}
j++
}
// 3.今年已经过去了多少天
let k = 1;
while (k < month2) {
if (k === 1 || k === 3 || k === 5 || k === 7 || k === 8 || k === 10) {
sum += 31
} else if (k === 4 || k === 6 || k === 9 || k === 11) {
sum += 30
} else {
if (year2 % 4 === 0 && year2 % 100 !== 0 || year2 % 400 === 0) {
sum += 29
} else {
sum += 28
}
}
k++
}
sum += day2
//如果出生年份和当前年份相同,上面的算法会多加一年的天数,这里再减掉。
if (year1 === year2) {
if (year2 % 4 === 0 && year2 % 100 !== 0 || year2 % 400 === 0) {
sum -= 366
} else {
sum -= 365
}
}
alert(`您已经活了${sum}天,若人生有30000天,您还剩下${30000 - sum}天`)
</script>
</body>
</html>
弹窗显示为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>do-while-练习5</title>
</head>
<body>
<script>
// 输入一个指定的日期,输出该日期是星期几,提示:1900-1-1是星期一
let year1 = parseInt(prompt('请输入年份:'))
let month1 = parseInt(prompt('请输入月份:'))
let day1 = parseInt(prompt('请输入日期:'))
// 思考:1900-1-1是星期一,那么 1900-1-8是星期几?1900-1-10是星期几?
// 思考:1900-1-8距离1900-1-1多少天?1900-1-10距离1900-1-1多少天?
// 思考:8 % 7 === 1 10 % 7 === 3
// 1.算出当前日期距离1900-1-1多少天?
let sum = 0 //用于累加总天数
// 1.1.先累加整年天数
let i = 1900
while (i < year1) {
if (i % 4 === 0 && i % 100 !== 0 || i % 400 === 0) {
sum += 366
} else {
sum += 365
}
i++
}
// 1.2.再累加当前年份已经过去的天数
let j = 1;
while (j < month1) {
if (j === 1 || j === 3 || j === 5 || j === 7 || j === 8 || j === 10) {
sum += 31
} else if (j === 4 || j === 6 || j === 9 || j === 11) {
sum += 30
} else {
if (year1 % 4 === 0 && year1 % 100 !== 0 || year1 % 400 === 0) {
sum += 29
} else {
sum += 28
}
}
j++
}
sum += day1
// 2.总天数除以7,余数是几就是星期几,余数是0是星期天
let week = sum % 7
switch (week) {
case 1:
alert('星期一')
break;
case 2:
alert('星期二')
break;
case 3:
alert('星期三')
break;
case 4:
alert('星期四')
break;
case 5:
alert('星期五')
break;
case 6:
alert('星期六')
break;
default:
alert('星期天')
break;
}
</script>
</body>
</html>
弹窗显示为:
5.for循环
for(条件变量;循环条件;迭代部分){
操作
}
for循环,就是由while循环演变而来
在for循环,可以将循环的条件变量,判断条件,对象循环变量重新赋值,放在一起,好处是不容易遗漏任何一部分
for循环结构中的循环变量可以定义多个
while,do-while,for,如何选择:
1.当循环的次数是固定的时候,通常使用for循环
2.当循环的次数不固定的时候,通常会使用while和do-while循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for循环</title>
</head>
<body>
<script>
// 在循环的外部定义循环变量
let i = 1;
while(i<=10){
console.log('好好学习,天天向上');
// 在循环的里面对循环变量重新赋值
i++
}
console.log('----------------');
// for循环,就是由while循环演变而来
// 条件变量,判断条件,对循环变量重新赋值,放在一起,好处是不容易遗漏任何一部分
for(let j=1;j<=10;j++){
console.log('好好学习,天天向上');
}
/*
while,do-while,for,如何选择:
当循环的次数是固定的时候,通常使用for循环
当循环的次数不固定的时候,通常会使用while和do-while循环
*/
</script>
</body>
</html>
控制台显示为:
6.循环的跳出语句(continue,break)
在循环结构中break,表示跳出整个循环
在循环结构中continue,表示跳出本次循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>break语句</title>
</head>
<body>
<script>
// break语句,可以用在switch和循环中,用于跳出整个代码块。
// 用在switch中是跳出整个switch选择结构,用在循环中是跳出整个循环结构。
for(i=1;i<=10;i++){
console.log(i);
if(i===5){
//循环到第5次时,跳出整个循环
break;
}
}
console.log('end');
console.log('------------------------------------');
let loginId = 'admin' //定义账号
let loginPwd = '123456' //定义密码
for(let i=2;i>=0;i--){
let loginId2 = prompt('请输入账号:')
let loginPwd2 = prompt('请输入密码:')
//判断是否登录成功
if(loginId===loginId2 && loginPwd===loginPwd2){
alert('登录成功!')
//登录成功后,跳出整个循环
break;
}else{
alert('登录失败!还剩下'+i+'次机会')
}
}
</script>
</body>
</html>
弹窗显示为:
练习题
1.会员登录,一共有3次登录机会,如果,第一次登录失败,提示失败原因,并告知还剩下几次机会如果,登录名输入错误,显示信息,并且密码就不需要在输入了
如果,第一次就登录成功,后面的机会就不需要了 2.会员注册,注册会员信息,输入会员号(必须是4位整数),输入姓名,输入性别(只能是男或女)
一共有三次机会,会员信息输入错误,提示错误信息,并显示还有几次机会 3.猜数小游戏,系统随机返回一个1-100之间的数,给5次机会,猜这个数
每次猜的数,要提示用户,猜大了还是猜小了
提示:Math.random()随机返回0到1之间的小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>continue语句+练习题1</title>
</head>
<body>
<script>
// continue语句,只能用在循环中,用于跳过当次循环,还会继续执行后面的循环
for(let i=1;i<=10;i++){
if(i===5){
// 跳过本次循环
continue
}
console.log(i);
}
console.log('--------------------------------');
let loginId = 'admin' //定义账号
let loginPwd = '123456' //定义密码
for(let i=2;i>=0;i--){
let loginId2 = prompt('请输入账号:')
//判断登录名是否输入正确
if(loginId2!==loginId){
alert('账号错误!还剩下'+i+'次机会')
//跳出本次循环
continue
}
let loginPwd2 = prompt('请输入密码:')
//如果账号正确,再判断密码是否正确
if(loginPwd===loginPwd2){
alert('登录成功!')
//登录成功后,跳出整个循环
break;
}else{
alert('密码错误!还剩下'+i+'次机会')
}
}
</script>
</body>
</html>
弹窗显示为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习题2</title>
</head>
<body>
<script>
/*
会员注册,注册会员信息,输入会员号(必须是4位整数),输入姓名,输入性别(只能是男或女)
一共有三次机会,会员信息输入错题,提示错误信息,并显示还有几次机会
*/
for(let i=2;i>=0;i--){
let no = parseInt(prompt('请输入会员号:'))
//表示错误的会员号
if(isNaN(no)){
alert(`会员号必须是4位整数!你还有${i}次机会`)
continue //跳过本次循环
}
if(no<1000 || no>=10000){
alert(`会员号必须是4位整数!你还有${i}次机会`)
continue //跳过本次循环
}
let name = prompt('请输入姓名:')
let sex= prompt('请输入性别:')
//表示错误的性别
if(!(sex==='男' || sex==='女')){
alert(`性别必须是男 或 女!你还有${i}次机会`)
continue //跳过本次循环
}
alert('注册成功!')
break //跳出整个循环
}
</script>
</body>
</html>
弹窗显示为:![](https://i-blog.csdnimg.cn/blog_migrate/ab24c75a458d908090cb08c430742971.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习题3:</title>
</head>
<body>
<script>
/*
猜数小游戏,系统随机返回一个1-100之间的数,给5次机会,猜这个数
每次猜的数,要提示用户,猜大了还是猜小了
提示:Math.random()随机返回0到1之间的小数
*/
let num = parseInt(Math.random() * 100) + 1
//循环5次
for (let i = 4; i >= 0; i--) {
let num2 = parseInt(prompt('请输入您所猜的数:'))
if(num===num2){
alert('厉害!您猜对了!')
break; //跳出整个循环
}else if(num>num2){
alert(`您猜小了!您还有${i}次机会!`)
}else{
alert(`您猜大了!您还有${i}次机会!`)
}
//最后一次,还没有猜对
if(i===0){
alert(`很抱歉!您没有猜对这个数,其实这个数是${num},下次祝您好运!`)
}
}
</script>
</body>
</html>