断点调试:
断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步在下面调试,调试过程中可以看各个变量当前的值,出错的话,调试列出初一的代码行即显示错误,停下。
断点调试可以帮我们观察程序的运行过程:
浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点。
Watch:监视,通过watch可以监视变量的值的变化,非常的常用。
F11:程序单步运行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力,初学者不要觉得面试代码麻烦就不去面试。
循环
循环目的:
在实际问题中,有许多具有规律性的重复动作,因此在程序中要完成此类操作就需要重复执行某些语句。
while循环
//1.while循环语法结构 while 当...的时候
//while(条件表达式){
// 循环体
//}
//2.执行思路 当条件表达式结果为true 则执行结果为true 则执行循环体 否则 退出循环
//3.代码验证
let num = 1;
while (num <= 100) {
console.log('nb');
num++;
}
//4.里面应该也有计算器,初始化变量
//5.里面应该也有操作表达式 完成计数器的更新,防止死循环
强制回答”爱”
let str;
// 等于 '爱' 跳出循环
while (str !== '爱') {
str = prompt('你爱我吗?')
}
ATM机:
思路:
代码:
let atm,
money = prompt('请输入银行卡里有多少元');
while (atm !== 4) {
atm = +prompt(`请选择业务\n1.取款\n2.存款\n3.查看余额\n4.退出`)
if (atm === 1) {
let num = +prompt('取多少钱?')
money -= num;
alert(`取了${num}元`)
} else if (atm === 2) {
let num1 = +prompt('存多少钱?')
money += num1;
alert(`存了${num1}元`)
} else if (atm === 3) {
alert(`余额:${money}元`)
} else if (atm === 4) {
console.log('exit');
}
}
Continue关键字
Continue关键字用于立即跳出本次循环,继续下一次循环(本次循环中continue之后的代码就会少执行一次。)
例如,吃5个包子,第3个包子,救人掉第三个,继续吃第4个第5个包子,其代码如下
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue; //只要遇见continue就退出本次循环 直接跳到i++
}
console.log('我吃了 ' + i + '个包子');
}
Break关键字
Break关键字用于立即跳出整个循环(循环结束)
例如,吃五个包子,吃到第3个发现里面有半个虫子,其余的不吃了,例子:
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; //break退出整个循环
}
console.log('我吃了 ' + i + '个包子');
}
for循环
在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件,由循环体及循环的终止条件组成的语句,被称之为循环语句。
语法结构:
for循环只要用于把某些代码循环若干次,通常跟计数有关,其语法结构如下:
// for (let i = 1; i <= 10; i++) {
// document.write("玩游戏呢你“)
// }
//1.for重复执行某些代码,通常跟计数有关系
//2.for 语法结构
// for (初始化变量; 条件表达式; 操作表达式) {
// 循环体
// }
//3.初始化变量 就是用let 声明的一个普通变量,通常用于作为计数器使用
//4.条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件。
//5.操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)
//6.代码体验 我们重复打印100句 你好
for (let i = 1; i <= 100; i++) {
document.write("hello" + "\n");
}
for循环的执行过程
//for 循环执行过程
for (let i = 1; i <= 100; i++) {
document.write("hello" + "\n");
}
//let i = 1;可以说是计数器变量
//1.首先执行里面的计数器变量 let i =1,但是这句活在for里面只执行一次 i
//2. i <= 100来判断是否满足条件,如果满足条件,就去执行循环体,不满足条件退出循环
//3.最后去执行 i++ i++是单独写的代码 递增 第一轮结束
//4.接着去执行i <=100 如果满足条件 就去执行 循环体 不满足条件退出循环 第二轮
for循环案例:
100以内的偶数和:
//1.变量为 0 ,方便循环里的计算
let sum = 0
//2.在100以内的数
for (let i = 1; i <= 100; i++) {
//3.判断偶数的条件
if (i % 2 == 0) {
//4.判断为偶数,开始累加赋值给 sum
sum += i
}
}
console.log(sum);
双重for循环案例
要知道第一个for循环的意义,第二个for循环的意义。
n天背n个单词:
// 输入背单词的天数
let day = prompt('请输入天数'),
//输入要背的单词数
word = prompt('请输入单词数');
//第一个for循环的是背单词的天数
for (let i = 1; i <= day; i++) {
document.write(`背单词的天数:${i}`);
document.write(`</br>`)
//第二个for循环是背单词的数量
for (let j = 1; j <= word; j++) {
document.write(`</br>`)
document.write(`背了第${j}个单词`);
}
document.write(`</br></br>`)
}
正三角形案例:
let arr = +prompt('请输入值');
//第一个for循环是行
for (let i = 1; i <= arr; i++) {
//第二个for循环是列
// 改变列数 代码(5) j <= arr-i+1
// 1 第一次循环 列数: 5
// 2 第二次循环 列数: 4
// 3 第三次循环 列数: 3
for (let j = 1; j <= arr - i + 1; j++) {
let str = '☆';
document.write(str);
}
//换行
document.write('<br/>')
}
倒三角形案例:
let arr = +prompt('请输入值');
//第一个for循环是行
for (let i = 1; i <= arr; i++) {
//第二个for循环是列
// 改变列数 代码(5) j <=i
// 1 第一次循环 列数: 1
// 2 第二次循环 列数: 2
// 3 第三次循环 列数: 3
for (let j = 1; j <= i; j++) {
let str = '☆';
document.write(str);
}
//换行
document.write('<br/>')
}
九九乘法表:
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
span {
border: 1px solid #000;
padding: 10px 0;
width: 100px;
text-align: center;
display: inline-block;
}
</style>
</head>
<body>
<script>
//1.第一个for循环代表行
for (let i = 1; i <= 9; i++) {
//2.第二个for循环代表列
for (let j = 1; j <= i; j++) {
//num 是每行与每列的 积
let num = j * i;
//将变量 j ,变量 i 和 变量 m 连接。
document.write(`<span> ${j} * ${i} = ${num}</span>`);
}
document.write('<br/>');
}
</script>
</body>
</html>