流程控制
2018-09-20 本文已影响0人
致自己_cb38
1. innerHTML
获取标签内部的所有内容，可以获取出标签里面的标签
2. innerText
获取标签里面的内容，不获取标签。
eg:
<div><span>123</span></div>
innerHTML <span>123</span>
innerText 123
案例：计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
#compute{
width:540px;
height:270px;
border:1px solid #efefef;
margin:0 auto;
}
input{
width:505px;
height:55px;
border:none;
margin-left:17px;
text-align: right;
outline:none;/*
（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。*/
font-size:20px;
line-height: 25px;
}
ul{
width:505px;
padding:0;
height:200px;
list-style: none;
margin:0;
margin-left:17px;
}
ul li{
display: block;
float: left;
width:123px;
height:35px;
border:1px solid #ddd;
text-align: center;
line-height: 35px;
}
</style>
</head>
<body>
<div id="compute">
<input type="text" readonly>
<ul>
<li>(</li>
<li>)</li>
<li>%</li>
<li>C</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>/</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>*</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>-</li>
<li>0</li>
<li>.</li>
<li>=</li>
<li>+</li>
</ul>
</div>
<script>
window.onload = function(){
var type = false;
var oInput = document.getElementsByTagName('input')[0];
var oLi = document.getElementsByTagName('li');
for(var i=0;i<oLi.length;i++){
oLi[i].onclick = function(){
if(type){
oInput.value = '';
type = false;
}// 如果type=true，点击oLi[i]执行以上内容
var va = this.innerText;
oInput.value = oInput.value+va;
// innerText获取标签里的内容（不包括标签）
// input里的内容和点击的li里的内容进行拼接，类似于：i=i+1
};
}
oLi[18].onclick = function(){
// 算出的结果 eval把一个字符串当作表达式进行计算
var jieguo = eval(oInput.value);
oInput.value = oInput.value + "="+jieguo;
type = true;
};
oLi[3].onclick = function(){
oInput.value = '';
};
};
</script>
</body>
</html>
3. eval 能够把一个字符串当做表达式进行运算。
4. 程序的三大流程
顺序结构
循环结构
选择结构（分支结构）
5. 流程图
- 开始和结束：圆角矩形。程序总是从开始作为入口，从结束作为出口。
- 过程：每一个步骤都是一个过程，过程是使用矩形表示的。过程只能有一个入口一个出口。
- 判断：里面是一个条件判断，用菱形表示，一个入口，多个出口。
6. if 结构
-
6.1单句if
- if(判断条件)一句代码;
- 如果符合if条件的结果语句只有一条，那么if后面的大括号可以省略。虽然这个很简洁，但是不建议这样使用，也就是说即使只有一句代码也要加上大括号。
等价于：
if(判断条件){
一句代码；
}
-
6.2一般if
if(判断条件){
一组语句；
} -
6.3 双分支if
if(判断条件){
一组语句；
}else{
一组语句；
}
这个语句相对来说比较麻烦，如果语句比较少的时候，可以使用。如果语句比较多，那么就转化为一般if结构。
eg:
if(a==1){
if(b==1){
}else{
}
}else{
}
转化成：
if(a==1){
}
if(a!=1){
}
- 6.4多分支结构if
if(判断){
}else if(判断){
}else if(判断){
}else{
}
案例:奖学金
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
window.onload = function(){
var num = 102;
//>=90 5000
//<90 >=80 2000
//<80 >=60 300
//<60 >0 -500
//<0
if(num<0 || num>100){
alert('分数错误');
return false;
}
if(num>=90){
alert('5000');
}else if(num>=80){
alert(2000);
}else if(num>=60){
alert(300);
}else{
alert(-500);
}
}
</script>
</body>
</html>
7. switch 结构：
- 不确定具体值的用if结构。确定具体值的，并且值个数是有限个（数量不能太多）的时候用switch。
switch(判断的值){
case 第一个值：
语句；
break；
case 第二个值：
语句；
break；
。。。
default：
语句
break；
}
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var wuqi = 3; // 1 普通 2 神级 3传说 4史诗
switch(wuqi){
case 1:
console.log('这是普通武器，杀猪刀');
break;
case 2:
console.log('这是神级武器，屠龙刀');
break;
case 3:
console.log('这是传说武器,打神鞭');
break;
case 4:
console.log('这是史诗武器，就是厉害刀');
break;
default:
console.log('这不是规定的武器，不许用');
break;
}
</script>
</body>
</html>
- break:为了跳出一个代码块，如果没有break，那么switch case 后面代码会继续往下执行。下面的case判断不起作用。
注意：switch参与判断的值与case后面的值是全等判断。
8.for循环结构
for(初始化;判断条件;改变循环判断值){
}
for(){
//第二个循环的变量注意变化。
for(){
}
}
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
for(var i=0;i<10;i++){
for(var j=0;j<11;j++){
console.log(1);
}
}
// 110个1
// i循环10次，j循环11次，10*11=110
</script>
</body>
</html>
9.while循环
初始化
while(判断条件){
改变循环条件
}
for(var i=0;i<100;i++){
}
//等价于：
var i=0;
while(i<100){
i++;
}
10.do---while
do{
}while();
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
</head>
<body>
<script>
var i =13;
do{
console.log(i);
i++;
}while(i<12); // i=13
</script>
</body>
</html>
区别：while循环先判断，在执行，不符合条件的一次都不执行。do---while先执行，然后在判断，不符合条件至少会执行一次。
10.break 与continue
- break 跳出代码块，结束循环。
- continue 继续执行，但是结束本次循环。
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
for(var i=0;i<10;i++){
console.log(i) ;
if(i==5){
continue;
}
console.log(i) ;
}
// 0 0 2 2 3 3 4 4 5 6 6 ……每个数字打印2次，5只打印一次
</script>
</body>
</html>
11.label语法：控制break与continue。
一般不使用，但是也有可能遇到。
label_name:
for(){
break name;
continue name;
}
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
father:
for(var i=0;i<5;i++){
for(var k=0;k<6;k++){
console.log(i+''+k);
continue father;
}
}
// 00 10 20 30 40
</script>
</body>
</html>
