第一章
01-编程语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
alert('我是编程语言,来控制电脑网页弹出你好');
alert('我是编程语言,来控制电脑网页弹出你好');
</script>
</head>
<body>
</body>
</html>
02-JS初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style></style>
<!-- 2.内嵌式的js -->
<script>
</script>
<!-- 3. 外部js script 双标签 -->
<script src="my.js"></script>
</head>
<body>
<!-- 1. 行内式的js 直接写到元素的内部 -->
<!-- <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> -->
</body>
</html>
03-JS注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
</script>
</head>
<body>
</body>
</html>
04-JS输入输出语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
prompt('请输入您的年龄');
alert('计算的结果是');
console.log('我是程序员能看到的');
</script>
</head>
<body>
</body>
</html>
05-变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var age;
age = 18;
console.log(age);
var myname = 'pink老师';
console.log(myname);
</script>
</head>
<body>
</body>
</html>
06-变量案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var myname = '旗木卡卡西';
var address = '火影村';
var age = 30;
var email = '[email protected]';
var gz = 2000;
console.log(myname);
console.log(address);
console.log(age);
console.log(email);
console.log(gz);
</script>
</head>
<body>
</body>
</html>
07-变量案例弹出用户名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var myname = prompt('请输入您的名字');
alert(myname);
</script>
</head>
<body>
</body>
</html>
08-变量的语法扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var myname = 'pink老师';
console.log(myname);
myname = '迪丽热巴';
console.log(myname);
var age = 18,
address = '火影村',
gz = 2000;
var sex;
console.log(sex);
qq = 110;
console.log(qq);
</script>
</head>
<body>
</body>
</html>
09-变量命名规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var app = 10;
var App = 100;
console.log(app);
console.log(App);
console.log(name);
</script>
</head>
<body>
</body>
</html>
10-交换两个变量值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var temp;
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1;
apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);
</script>
</head>
<body>
</body>
</html>
11-变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 10;
var str = 'pink';
var x = 10;
x = 'pink';
</script>
</head>
<body>
</body>
</html>
12-数字型Number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 10;
var PI = 3.14
var num1 = 010;
console.log(num1);
var num2 = 012;
console.log(num2);
var num3 = 0x9;
console.log(num3);
var num4 = 0xa;
console.log(num4);
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
console.log(Number.MAX_VALUE * 2);
console.log(-Number.MAX_VALUE * 2);
console.log('pink老师' - 100);
</script>
</head>
<body>
</body>
</html>
13-isNaN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(isNaN(12));
console.log(isNaN('pink老师'));
</script>
</head>
<body>
</body>
</html>
14-字符串型String1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(isNaN(12));
console.log(isNaN('pink老师'));
</script>
</head>
<body>
</body>
</html>
15-弹出警示框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
alert('酷热难耐,火辣的太阳底下,我挺拔的身姿,成为了最为独特的风景。\n我审视四周,这里,是我的舞台,我就是天地间的王者。\n这一刻,我豪气冲天,终于大喊一声:"收破烂啦~"');
</script>
</head>
<body>
</body>
</html>
16-字符串拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var str = 'my name is andy';
console.log(str.length);
console.log('沙漠' + '骆驼');
console.log('pink老师' + 18);
console.log('pink' + true);
console.log(12 + 12);
console.log('12' + 12);
</script>
</head>
<body>
</body>
</html>
17-字符串拼接加强
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log('pink老师' + 18);
console.log('pink老师' + 18 + '岁');
var age = 19;
console.log('pink老师age岁');
console.log('pink老师' + age + '岁');
console.log('pink老师' + age + '岁');
</script>
</head>
<body>
</body>
</html>
18-显示年龄案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var age = prompt('请输入您的年龄');
var str = '您今年已经' + age + '岁了';
alert(str);
</script>
</head>
<body>
</body>
</html>
19-布尔型Boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var flag = true;
var flag1 = false;
console.log(flag + 1);
console.log(flag1 + 1);
var str;
console.log(str);
var variable = undefined;
console.log(variable + 'pink');
console.log(variable + 1);
var space = null;
console.log(space + 'pink');
console.log(space + 1);
</script>
</head>
<body>
</body>
</html>
20-获取变量数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 10;
console.log(typeof num);
var str = 'pink';
console.log(typeof str);
var flag = true;
console.log(typeof flag);
var vari = undefined;
console.log(typeof vari);
var timer = null;
console.log(typeof timer);
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
</script>
</head>
<body>
</body>
</html>
21-字面量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(18);
console.log('18');
console.log(true);
console.log(undefined);
console.log(null);
</script>
</head>
<body>
</body>
</html>
22-转换为字符型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
console.log(String(num));
console.log(num + '');
</script>
</head>
<body>
</body>
</html>
23-转换为数字型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(parseInt('3.14'));
console.log(parseInt('3.94'));
console.log(parseInt('120px'));
console.log(parseInt('rem120px'));
console.log(parseFloat('3.14'));
console.log(parseFloat('120px'));
console.log(parseFloat('rem120px'));
var str = '123';
console.log(Number(str));
console.log(Number('12'));
console.log('12' - 0);
console.log('123' - '120');
console.log('123' * 1);
</script>
</head>
<body>
</body>
</html>
24-计算年龄案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var year = prompt('请您输入您的出生年份');
var age = 2018 - year;
alert('您今年已经' + age + '岁了');
</script>
</head>
<body>
</body>
</html>
25-简单加法器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num1 = prompt('请您输入第一个值:');
var num2 = prompt('请您输入第二个值:');
var result = parseFloat(num1) + parseFloat(num2);
alert('您的结果是:' + result);
</script>
</head>
<body>
</body>
</html>
26-转换为布尔型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log('------------------------------');
console.log(Boolean('123'));
console.log(Boolean('你好吗'));
console.log(Boolean('我很好'));
</script>
</head>
<body>
</body>
</html>
第二章
01-算数运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(1 + 1);
console.log(1 - 1);
console.log(1 * 1);
console.log(1 / 1);
console.log(4 % 2);
console.log(5 % 3);
console.log(3 % 5);
console.log(0.1 + 0.2);
console.log(0.07 * 100);
var num = 0.1 + 0.2;
console.log(num == 0.3);
</script>
</head>
<body>
</body>
</html>
02-表达式和返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(1 + 1);
var num = 1 + 1;
</script>
</head>
<body>
</body>
</html>
03-前置递增运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 1;
num = num + 1;
num = num + 1;
console.log(num);
var age = 10;
++age;
console.log(age);
var p = 10;
console.log(++p + 10);
</script>
</head>
<body>
</body>
</html>
04-后置递增运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 10;
num++;
console.log(num);
var age = 10;
console.log(age++ + 10);
console.log(age);
</script>
</head>
<body>
</body>
</html>
05-递增运算符练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var a = 10;
++a;
var b = ++a + 2;
console.log(b);
var c = 10;
c++;
var d = c++ + 2;
console.log(d);
var e = 10;
var f = e++ + ++e;
console.log(f);
</script>
</head>
<body>
</body>
</html>
06-比较运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(3 >= 5);
console.log(2 <= 4);
console.log(3 == 5);
console.log('pink老师' == '刘德华');
console.log(18 == 18);
console.log(18 == '18');
console.log(18 != 18);
console.log(18 === 18);
console.log(18 === '18');
</script>
</head>
<body>
</body>
</html>
07-逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(3 > 5 && 3 > 2);
console.log(3 < 5 && 3 > 2);
console.log(3 > 5 || 3 > 2);
console.log(3 > 5 || 3 < 2);
console.log(!true);
</script>
</head>
<body>
</body>
</html>
08-逻辑运算符练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 7;
var str = "我爱你~中国~";
console.log(num > 5 && str.length >= num);
console.log(num < 5 && str.length >= num);
console.log(!(num < 10));
console.log(!(num < 10 || str.length == num));
</script>
</head>
<body>
</body>
</html>
09-短路运算(逻辑中断)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(123 && 456);
console.log(0 && 456);
console.log(0 && 1 + 2 && 456 * 56789);
console.log('' && 1 + 2 && 456 * 56789);
console.log(123 || 456);
console.log(123 || 456 || 456 + 123);
console.log(0 || 456 || 456 + 123);
var num = 0;
console.log(123 || num++);
console.log(num);
</script>
</head>
<body>
</body>
</html>
10-赋值运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 10;
num += 5;
console.log(num);
var age = 2;
age *= 3;
console.log(age);
</script>
</head>
<body>
</body>
</html>
11-运算符优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true)
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');
console.log('-------------------');
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a);
var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b);
var c = 2 === "2";
console.log(c);
var d = !c || b && a;
console.log(d);
</script>
</head>
<body>
</body>
</html>
12-if分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
if (3 < 5) {
alert('沙漠骆驼');
}
</script>
</head>
<body>
</body>
</html>
13-进入网吧案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var age = prompt('请输入您的年龄:');
if (age >= 18) {
alert('我想带你去网吧偷耳机');
}
</script>
</head>
<body>
</body>
</html>
14-if else双分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var age = prompt('请输入您的年龄:');
if (age >= 18) {
alert('我想带你去网吧偷耳机');
} else {
alert('滚, 回家做作业去');
}
</script>
</head>
<body>
</body>
</html>
15-判断闰年案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var year = prompt('请您输入年份:');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert('您输入的年份是闰年');
} else {
alert('您输入的年份是平年');
}
</script>
</head>
<body>
</body>
</html>
16-if else if多分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
if (条件表达式1) {
} else if (条件表达式2) {
} else if (条件表达式3) {
} else {
}
</script>
</head>
<body>
</body>
</html>
17-判断成绩案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var score = prompt('请您输入分数:');
if (score >= 90) {
alert('宝贝,你是我的骄傲');
} else if (score >= 80) {
alert('宝贝,你已经很出色了');
} else if (score >= 70) {
alert('你要继续加油喽');
} else if (score >= 60) {
alert('孩子,你很危险');
} else {
alert('熊孩子,我不想和你说话,我只想用鞭子和你说话');
}
</script>
</head>
<body>
</body>
</html>
18-三元表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 10;
var result = num > 5 ? '是的' : '不是的';
console.log(result);
</script>
</head>
<body>
</body>
</html>
19-数字补0案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
var result = time < 10 ? '0' + time : time;
alert(result);
</script>
</head>
<body>
</body>
</html>
20-switch分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
switch (8) {
case 1:
console.log('这是1');
break;
case 2:
console.log('这是2');
break;
case 3:
console.log('这是3');
break;
default:
console.log('没有匹配结果');
}
</script>
</head>
<body>
</body>
</html>
21-switch注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 1;
switch (num) {
case 1:
console.log(1);
case 2:
console.log(2);
case 3:
console.log(3);
break;
}
</script>
</head>
<body>
</body>
</html>
22-查询水果案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
case '苹果':
alert('苹果的价格是 3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是 35/斤');
break;
default:
alert('没有此水果');
}
</script>
</head>
<body>
</body>
</html>
第三章
01-循环的目的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
console.log('媳妇我错了');
console.log('媳妇我错了');
console.log('媳妇我错了');
console.log('---------------------');
for (var i = 1; i <= 1000; i++) {
console.log('媳妇我错了');
}
</script>
</head>
<body>
</body>
</html>
02-for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
for (var i = 1; i <= 100; i++) {
console.log('你好吗');
}
</script>
</head>
<body>
</body>
</html>
03-for循环执行过程(1)
04-for循环重复相同代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
for (var i = 1; i <= 10; i++) {
console.log('媳妇我错了');
}
var num = prompt('请您输入次数');
for (var i = 1; i <= num; i++) {
console.log('媳妇我错了');
}
</script>
</head>
<body>
</body>
</html>
05-for循环重复不同的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
for (var i = 1; i <= 100; i++) {
if (i == 1) {
console.log('这个人今年1岁了,他出生了');
} else if (i == 100) {
console.log('这个人今年100岁了,他死了');
} else {
console.log('这个人今年' + i + '岁了');
}
}
</script>
</head>
<body>
</body>
</html>
06-for循环重复某些操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
</script>
</head>
<body>
</body>
</html>
07-for循环案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var sum = 0;
var average = 0;
for (var i = 1; i <= 100; i++) {
sum = sum + i;
}
average = sum / 100;
console.log(average);
var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
even = even + i;
} else {
odd = odd + i;
}
}
console.log('1~100 之间所有的偶数和是' + even);
console.log('1~100 之间所有的奇数和是' + odd);
var result = 0;
for (var i = 1; i <= 100; i++) {
if (i % 3 == 0) {
result += i;
}
}
console.log('1~100之间能够被3整数的数字的和是:' + result);
</script>
</head>
<body>
</body>
</html>
08-求学生成绩案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = prompt('请输入班级的总人数:');
var sum = 0;
var average = 0;
for (var i = 1; i <= num; i++) {
var score = prompt('请您输入第' + i + '个学生成绩');
sum = sum + parseFloat(score);
}
average = sum / num;
alert('班级总的成绩是' + sum);
alert('班级平均分是:' + average);
</script>
</head>
<body>
</body>
</html>
09-一行打印五个星星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = prompt('请输入星星的个数');
var str = '';
for (var i = 1; i <= num; i++) {
str = str + '★'
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
10-双重for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
for (var i = 1; i <= 3; i++) {
console.log('这是外层循环第' + i + '次');
for (var j = 1; j <= 3; j++) {
console.log('这是里层的循环第' + j + '次');
}
}
</script>
</head>
<body>
</body>
</html>
11-打印五行五列星星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var str = '';
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= 5; j++) {
str = str + '★';
}
str = str + '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
12-打印n行n列的星星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var rows = prompt('请您输入行数:');
var cols = prompt('请您输入列数:');
var str = '';
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
str = str + '★';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
13-打印倒三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var str = '';
for (var i = 1; i <= 10; i++) {
for (var j = i; j <= 10; j++) {
str = str + '★';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
14-九九乘法表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str += j + '×' + i + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
15-while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num = 1;
while (num <= 100) {
console.log('好啊有');
num++;
}
</script>
</head>
<body>
</body>
</html>
16-while循环案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var i = 1;
while (i <= 100) {
console.log('这个人今年' + i + '岁了');
i++;
}
var sum = 0;
var j = 1;
while (j <= 100) {
sum += j;
j++
}
console.log(sum);
var message = prompt('你爱我吗?');
while (message !== '我爱你') {
message = prompt('你爱我吗?');
}
alert('我也爱你啊!');
</script>
</head>
<body>
</body>
</html>
17-do whild循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
do {
} while (条件表达式)
var i = 1;
do {
console.log('how are you?');
i++;
} while (i <= 100)
</script>
</head>
<body>
</body>
</html>
18-do while循环案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var i = 1;
do {
console.log('这个人今年' + i + '岁了');
i++;
} while (i <= 100)
var sum = 0;
var j = 1;
do {
sum += j;
j++;
} while (j <= 100)
console.log(sum);
do {
var message = prompt('你爱我吗?');
} while (message !== '我爱你')
alert('我也爱你啊');
</script>
</head>
<body>
</body>
</html>
19-continue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue;
}
console.log('我正在吃第' + i + '个包子');
}
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
continue;
}
sum += i;
}
console.log(sum);
</script>
</head>
<body>
</body>
</html>
20-break
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('我正在吃第' + i + '个包子');
}
</script>
</head>
<body>
</body>
</html>
第四章
01-数组的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = new Array();
var arr = [];
var arr1 = [1, 2, 'pink老师', true];
console.log(arr1);
console.log(arr1[2]);
console.log(arr1[3]);
var arr2 = ['迪丽热巴', '古丽扎娜', '佟丽丫丫'];
console.log(arr2[0]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[3]);
</script>
</head>
<body>
</body>
</html>
02-遍历数组(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = ['red', 'green', 'blue'];
for (var i = 0; i < 3; i++) {
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
03-数组长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', 'pink'];
for (var i = 0; i < 7; i++) {
console.log(arr[i]);
}
console.log(arr.length);
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
04-计算数组的和以及平均值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
average = sum / arr.length;
console.log(sum, average);
</script>
</head>
<body>
</body>
</html>
05-求数组中的最大值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = [2, 6, 1, 77, 52, 25, 7, 99];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
console.log('该数组里面的最大值是:' + max);
</script>
</head>
<body>
</body>
</html>
06-数组转换为字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var sep = '*';
for (var i = 0; i < arr.length; i++) {
str += arr[i] + sep;
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
07-新增数组元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = ['red', 'green', 'blue'];
console.log(arr.length);
arr.length = 5;
console.log(arr);
console.log(arr[3]);
console.log(arr[4]);
var arr1 = ['red', 'green', 'blue'];
arr1[3] = 'pink';
console.log(arr1);
arr1[4] = 'hotpink';
console.log(arr1);
arr1[0] = 'yellow';
console.log(arr1);
arr1 = '有点意思';
console.log(arr1);
</script>
</head>
<body>
</body>
</html>
08-数组存放1~10个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = [];
for (var i = 0; i < 100; i++) {
arr[i] = i + 1;
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
09-筛选数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
newArr[j] = arr[i];
j++;
}
}
console.log(newArr);
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
</script>
</head>
<body>
</body>
</html>
10-数组去重(删除指定数组元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 0) {
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
</script>
</head>
<body>
</body>
</html>
11-翻转数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i]
}
console.log(newArr);
</script>
</head>
<body>
</body>
</html>
12-复习交换两个变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var num1 = 'pink';
var num2 = 'yellow';
var temp;
temp = num1;
num1 = num2;
num2 = temp;
console.log(num1, num2);
</script>
</head>
<body>
</body>
</html>
13-冒泡排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i <= arr.length - 1; i++) {
for (var j = 0; j <= arr.length - i - 1; j++) {
if (arr[j] < arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
14-什么是函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
var sum = 0;
for (var i = 10; i <= 50; i++) {
sum += i;
}
console.log(sum);
function getSum(num1, num2) {
var sum = 0;
for (var i = num1; i <= num2; i++) {
sum += i;
}
console.log(sum);
}
getSum(1, 100);
getSum(10, 50);
getSum(1, 1000);
</script>
</head>
<body>
</body>
</html>
15-函数的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function sayHi() {
console.log('hi~~');
}
sayHi();
</script>
</head>
<body>
</body>
</html>
16-利用函数封装求1~100的和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function getSum() {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
}
getSum();
getSum();
</script>
</head>
<body>
</body>
</html>
17-带参数的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function cook(aru) {
console.log(aru);
}
cook('酸辣土豆丝');
cook('大肘子');
</script>
</head>
<body>
</body>
</html>
18-利用函数求任意两个数的和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 3);
getSum(3, 8);
function getSums(start, end) {
var sum = 0;
for (var i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
getSums(1, 100);
getSums(1, 10);
</script>
</head>
<body>
</body>
</html>
19-函数形参实参个数匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 2);
getSum(1, 2, 3);
getSum(1);
</script>
</head>
<body>
</body>
</html>
20-函数的返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function getResult() {
return 666;
}
getResult();
console.log(getResult());
function getSum(num1, num2) {
return num1 + num2;
}
console.log(getSum(1, 2));
</script>
</head>
<body>
</body>
</html>
21-求两个数的最大值(函数版)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 3));
console.log(getMax(11, 3));
</script>
</head>
<body>
</body>
</html>
22-求数组中的最大值(函数版)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function getArrMax(arr) {
var max = arr[0];
for (var i = 1; i <= arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
var re = getArrMax([3, 77, 44, 99, 143]);
console.log(re);
</script>
</head>
<body>
</body>
</html>
23-函数返回值注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function getSum(num1, num2) {
return num1 + num2;
alert('我是不会被执行的哦!')
}
console.log(getSum(1, 2));
function fn(num1, num2) {
return num1, num2;
}
console.log(fn(1, 2));
function getResult(num1, num2) {
return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getResult(1, 2);
console.log(re);
function fun1() {
return 666;
}
console.log(fun1());
function fun2() {
}
console.log(fun2());
</script>
</head>
<body>
</body>
</html>
第五章
第六章