前言#
- 调试代码,找出代码中的问题经常使用 debugger 来打断点, 而要能在准确位置打上断点, 就必须熟悉程序的执行流程
- 流程控制语句有三种: 顺序结构, 分支结构和循环结构
(一) 顺序结构(默认)#
- 程序默认从上到下一句一句代码执行, 这就是顺序结构
- 若是某一行代码出现了错误, 则后面的代码无法执行
<script>
var a = 1;
console.log('a=',a);
var b = 2;
console.log('b=',b);
var c = 3;
console.log('c=',d);
var d = 4;
console.log('d=',d);
</script>
(二) 分支结构#
1. if else#
<script>
// 需求: 根据学生成绩来评等级
// 60分以下 不及格
// 60-80(不包含) 及格
// 80(包含) 以上优秀
// 分数
var score = 70;
if (score < 60) {
document.write('该学生成绩不及格');
} else if (score < 80) {
document.write('该学生成绩及格');
} else {
document.write('该学生成绩优秀')
}
if (score > 80) {
console.log('优秀')
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}
</script>
需求1: 根据一个人年龄进行分段
1. 在页面输出这个人所属阶段
2. 具体规则如下
未成年人：0至17岁；
青年人： 18岁至65岁；
中年人： 66岁至79岁；
老年人： 80岁至99岁；
2. 三目运算符#
var isLogin = false;
var text = '';
if(isLogin) {
text = '13800000000';
} else {
text = '立即登录';
}
// 更简洁的表达方式
var text = isLogin?'13800000000':'立即登录';
console.log(text);
var str = prompt('请输入性别');
var gender === '1':'男人':'女人';
console.log('性别是:',gender);
3. switch#
<script>
// 选择城市
var cityName = prompt('请输入城市简写');
switch (cityName) {
case 'sz':
console.log('切换到深圳市');
break
case 'gz':
console.log('切换到广州市');
break
case 'bj':
console.log('切换到北京市');
break;
case 'sh':
console.log('切换到上海市');
break;
default:
console.log('这个城市暂时没有数据');
}
</script>
练习:
-
月和日小于 10 则在其前面添加 0 变为两位数
var month = 5; var day = 4 // -
麦当楼的饮料机有四个按钮, 按钮 1 得到橙汁,按钮 2 得到牛奶, 按钮 3 得到啤酒, 按钮 4 得到咖啡,
请编写一个程序, 弹出一个窗口, 用户输入的的数字不同, 弹出不同的饮料.
(三) 循环结构#
01 标准 for 循环部分#
(1)循环变量初始值 (2)循环条件 (3)改变循环条件 (4)循环体
循环规律:
-
第一轮 先执行第一部分, 再执行第二部分, 然后执行第三部分, 最后执行第四部分, 简称 1243
-
第二轮开始 先执行第二部分(第一部不再执行), 然后执行第三部分, 最后执行第四部分,直到结束, 简称 243
// demo1 // 第1轮 i=0,条件满足,运行循环体 // 第2轮 i=1,条件满足,运行循环体 // 第3轮 i=2,条件满足,运行循环体 // 第4轮 i=3,条件不满足,终止循环 // 所以循环体被执行了三次,结果为0,1,2 for (var i=0;i<3;i++) { console.log(i); }
02 应用#
1.应用 demo#
// 应用1:计算总和
var sum = 0;
for (var i=0;i<3;i++) {
console.log(i);
// sum = sum + i;
sum += i;
}
console.log(sum);
// 应用2: 拼接字符串,输出到网页上
<script>
var str = '';
for (var i=0;i<5;i++) {
str += 'a';
}
document.write(str); // 屏幕显示5个a
</script>
2. 练习:#
-
练习 1: 计算 1~100 的和并输出到页面上
-
练习 2: 使用 for 循环在网页上打印一个 ul 列表,列表有 5 个 li,li 的内容任意
进阶: 给 li 内容添加序号(从 1 开始);
<script> var str = ''; for (var i=0;i<5;i++) { str += '<li>I have a dream</li>'; } document.write('<ul>') document.write(str); document.write('</ul>') </script> <script> var str = ''; for (var i=0;i<5;i++) { str += `<li>${i+1}. I have a dream</li>`; } document.write('<ul>') document.write(str); document.write('</ul>') </script>2. continue 和 break#
<script>
// continue继续
for (var i = 0; i < 10; i++) {
if (i === 5) {
continue;
}
// continue之后的代码不再执行直接进入下一轮循环,所以当i===5时,i不打印
console.log(i);
}
</script>
<script>
// break 中断
for (var i = 0; i < 10; i++) {
if (i === 5) {
break;
}
// break后, 本层循环终止
console.log(i);
}
</script>
3. 死循环#
-
循环的四个部分并不是必须的
<script> var i = 0 // for循环缺少初始部分 for (; i < 10; i++) { console.log(i); } </script> <script> var i = 0 // 缺少两部分 for (;i < 10;) { console.log(i); i++ } </script> <script> var i = 0 // 三部分都没有,其实四部分都没有也是可以的, 只是没有意义 for (;;) { console.log(i); if(i>5) { break; } i++ } </script> -
死循环就是循环条件永远满足条件导致循环用不终止, 直到关闭浏览器
<script> var i = 10; for (;i>5;) { console.log(22222); } </script> <script> for (;;) { console.log(22222); } </script>
4.while 和 do while#
5. 数组遍历和对象遍历(进阶应用)#
for 循坏进阶应用
- 将数组成员(成员为基本数据类型)输出到页面上
<script>
var list = ['香蕉', '苹果', '雪梨', '火龙果'];
for (var i = 0; i < list.length; i++) {
// 循环体执行的次数等于数组的长度
console.log(list[i]); // 会一次打印出数组的每一个成员
}
// 将成员放入li内在输出到页面上
var str = '';
for (var i = 0; i < list.length; i++) {
str += `<li>${list[i]}</li>`;
}
document.write('<ul>')
document.write(str)
document.write('</ul>')
</script>
- 将数组成员(成员为引用类型)输出到页面上
<script>
// 将数组成员的姓名和年龄输出到页面上, 一个成员一个li
var list = [
{username: '张三1', age: 18},
{username: '张三2', age: 19},
{username: '张三3', age: 20},
{username: '张三4', age: 21},
{username: '张三5', age: 22},
]
var str = '';
for(var i=0;i<list.length;i++) {
console.log(list[i]);
str += `<li>姓名: ${list[i].username} 年龄: ${list[i].age}岁</li>`
}
document.write('<ul>')
document.write(str)
document.write('</ul>')
</script>
练习: 把身边的成员数组输出到页面上
- 先写好 ul 和 li 的样式, 将数组成员按写好的样式输出到页面上
(四) 简单的 Dom 操作#
-
获取网页内的元素节点
var app = document.getElementById('app'); // 获取id为app的元素节点, 并将节点存放在变量app内 -
给元素节点填充内容
// 填充文本 app.innerHtml = 'hello world'; // 填充标签 app.innerHtml = '<div>老胡</div>'; // 字符串拼接变量 var username = 'laohu'; app.innerHtml = '<div>'+username+'</div>'; // 数据多的时候,拼接不方便 -
模板字符串, 字符串中的变量使用${变量名}代替
-
使用模板字符串拼接长串标签
资料 1: 课堂练习#
-
计算 1 至 100 累加的值
-
把数组的成员展示到页面上
- 字符串拼接方式
- 模板字符串使用
var fruits = ['香蕉', '苹果', '雪梨', '火龙果']; -
编程题
要求: (1)收集本小组成员个人信息, 做成一个数组, 并且使用for循环把成员信息输出到网页上 (2)成员信息包含姓名, 年龄, 性别, 籍贯, 爱好 (3)可以设置适当的样式
资料 2: 作业#
-
渲染电影列表和影院列表
-
二维数组
当数组的成员也是数组时, 我们把这个数组称为二维数组, 有以下二维数组, 计算所有所有成员总和
var list = [ [1,3,5], [2,4,6], [3,6,9] ] var sum = 0; for(var i=0;i<list.length;i++) { var sum2 = 0; for(var j=0;j<list[i].length;j++) { sum2 += list[i][j]; } sum += sum2; } console.log(sum); // 方式2 var sum = 0; for(var i=0;i<list.length;i++) { for(var j=0;j<list[i].length;j++) { sum += list[i][j]; } } console.log(sum); -
生成 99 乘法表
<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>Document</title>
<style>
.num {
margin-left: 20px;
font-size: 16px;
border: 1px solid greenyellow;
background-color: greenyellow;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
}
p:nth-child(odd) {
color: red;
}
</style>
</head>
<body>
<pre>
需求: 点击按钮生成乘法口诀表, 样式自理
</pre
>
<button onclick="create()">生成</button>
<div class="box"></div>
<script>
function create() {
var all = "";
for (var i = 1; i <= 9; i++) {
var str = "";
for (var j = 1; j <= i; j++) {
str += `<span style="margin-right:5px;">${j}X${i}=${j * i}</span>`;
}
all += `<p>${str} <span class="num">${i}</span></p>`;
}
document.querySelector(".box").innerHTML = all;
}
</script>
</body>
</html>
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
