一、分支语句
逻辑判断语句，用于基于不同条件来执行不同的动作。
1、if语句
只有当条件为true时该语句才会执行代码，只判定单一情况，用法如下：
var score = 50;
if (score >= 60) {
console.log('及格')
}
2、if...else...语句
当条件为true时执行代码否则执行其他代码。
var score = 50;
if (score >= 60) {
console.log('及格')
} else {
console.log('不及格');
}
3、if...else if ... else if ...else ...语句
使用该语句来选择多个代码块之一来执行。
if (score >= 80) {
console.log('优秀');
} else if (score >= 60) {
console.log('及格');
} else if (score >= 30) {
console.log('不及格');
} else {
}
4、switch break语句
switch(开关) break(中断) default(默认) 使用该语句来选择多个代码块之一来执行。通常会声明一个变量然后将表达式的值与结构中的每个case(情况)值作比较如果存在匹配则与该case值关联的代码会被执行要使用break来组织代码自动向下一个case运行。
var level = 'A';
switch (level) {
case 'A': {
console.log('上天');
break;
}
case 'B': {
console.log('上火啦');
break;
}
case 'C': {
console.log('上吊了');
break;
}
default:
console.log('去屎吧');
}
二、循环语句
即重复执行一段代码，循环语句有三个参数，声明初始变量，判断条件，每次变化条件。
1、while循环
指定条件为真时循环执行。
var i = 0;
while (i < 10) {
console.log('haha') // 当i小于10时此代码便会被重复执行
i++;
}
控制台打印结果
2、do....while循环
先执行后判断，至少执行一次执行后如果条件为真，便会重复执行。
// do..while 先执行，后判断，至少执行一次
// do {
// console.log('haha') //当i小于10时此代码便会被重复执行
// i++
// } while (i < 10);
do {
console.log('haha') // 此时条件为假，故只会执行一次
i++
} while (i > 10);
3、for循环
条件满足时重复执行代码
for (var i = 10; i < 15; i++) {
console.log('i=' + i);
}
控制台打印效果
4、for/in循环
主要用于遍历json对象此处不作描述，在学习面向对象时会再做介绍。
5、练习
1、练习添加多个标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
</div>
</body>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0];
for (var i = 0; i < 10; i++) {
box.innerHTML += '<h1>我是一个大标题</h1>';
}
</script>
</html>
代码执行效果
2、制作九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>乘法口诀表</title>
</head>
<body>
</body>
<script type="text/javascript">
window.onload = function () {
// for循环嵌套，打印乘法口诀表
for (var i = 1; i < 10; i++) {
for (var j = 1; j <= i; j++) {
var res = j * i;
if (res < 10) {
res += ' ';
}
var str = j + " * " + i + " = " + res + " ";
document.write("<span>" + str + "</span>");
}
document.write("<br/>");
}
}
</script>
</html>
代码执行效果
以上内容纯属个人理解，由于水平有限，若有错漏之处敬请指出斧正，小弟不胜感激。
网友评论