js登录案例02-03-js的if跳转程序结构和for循环结构

程序结构:

  1.顺序结构(主体结构):自上而下,逐行实行;
  2.分支(选择)结构:if语句,if…else, if…else if…else,switch;

  3.循环结构:重复某些代码;

分支结构:

(一)if语句 :
    if(判断条件){
    代码}

    若判断条件为真,则执行代码块
    if后判断条件中的隐式转换规则:

1.数值:非0即true

2.字符:非“”即true

3.对象(数组,函数):true                         

4.undefiend,NaN,null:false;null: typeof为object,特殊;

(二)if…else嵌套

    if(判断条件){

     代码}eles{代码}

    若判断条件为真,则执行if后代码,否则执行else后的代码;

(三)switch…case语法:
    switch(表达式){
    case值1;
    alert 代码;
    break;
    default;
    代码块;
    break;

    }

    case的穿透:在一个swutch中只会进行一次case的判断,若成功,后面的case全部执行;

    break作用:防止case穿透;

东西比较简单,就是对js的程序执行过程和if跳转结构做案例说明。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<body>
<p id="s">用户已登录</p>
<script language=javascript>
 
 function checkSubmit() {
 var a=document.getElementById("username").value;//获取输入框输入的内容
   
    if ((document.getElementById("username").value)=="star") {        

 alert ("欢迎您,小狮子");
//和java中的print一样,主要用来检验数据传递是否成功或者代码是否编写有误。
 alert ("how are you going today");
 alert ("have a good day, see you");
 document.getElementById("s").innerHTML="用户"+document.form1.username.value+"已登录";     //向网页输入内容  

} else {
alert ("用户名错,请输入用户名,非狮子不得入内");

}
 }
 
 </script>
 

 <input type="text" id="username" value="请输入用户名">
 <input type="button" value="登录" onclick="checkSubmit()">


</body>
</html>

上述代码虽然比较简单,但是在具体编写的时候,作为编程新手,一定是问题层出不穷,下面就历数一下我见过的那些沙雕基本错误,绝对哭笑不得:

1,即使函数里面只有一个弹窗语句,也依然弹不出窗口;各种沙雕原因有:

1),button里面的onoclick写成onlick;哭。

2),button里面的onclick="checkSubmit()"写成onclick=checkSubmit();哭。

3),这种最神奇,就是输入双引号时候第二个结束双引号怎么也没法用英文输入,简直急死人,原因是什么呢?因为前面写成这样了:language="javascript,注意到了吗?后面少了一个引号。

2,不管输入什么内容,都执行顺序结构,没有做if判断,原因是:

if的判断条件中的判断是与或非,其中相等的判断是==,需要两个等号,一个等号是赋值,只写一个等号就会出现直接执行if内部的内容。

关于与或非,逻辑门与程序逻辑判断:

数字电路中只有0和1两种状态,也就是非黑即白。

逻辑与&&:两者都为1,则输出为1,否则为0;(也就是只有1且1为1,其他都是0);通俗的说,就是要同时满足两个条件,才能为1.只要有一个不满足,就是0.

举例:a&&b(其中a、b都代表一个条件);如果a和b都为真,则结果为真,如果a和b中有一个条件为假,则结果为假。

逻辑或||:两者有一个是1,则输出为1,否则为0;(也就是只有0且0为0,其他都是1);通俗的讲就是,只要满足其中一个,就行了,判断结果为1.

举例:a||b(其中a、b都代表一个条件);如果a和b有一个或以上为真,则结果为真,二者都为假时,结果为假。

逻辑非!:举例:!a(a代表一个条件)。如果a为假,则!a为真,如果a为真,则!a为假。

在C 语言中的逻辑运算符及优先级:

一元:!(逻辑非)。

二元:&&(逻辑与)、||(逻辑或)。

以上三种逻辑运算符中,逻辑非 ! 的优先级最高,逻辑与 && 次之,逻辑或  ||  优先级最低。即算术、逻辑、赋值运算符的优先级顺序为:

逻辑非 ! >算术 > 逻辑与 &&、逻辑或 || > 赋值=

循环语句:

    循环的三大条件:循环的次数(停止条件)、计数器用来统计循环的次数、改变计数器。

    (1)while(执行条件){执行语句}

(2)do{执行语句1}while(执行条件){执行语句2}

    此循环比while多执行一次(任何情况下);true时执行语句1,false时执行语句2。

    (3)for(;;;){执行语句}

for循环结构代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<body>

<html>
<body>
<p id="s">用户已登录</p>
<script language=javascript>
 
 function checkStu() {
 var a=document.getElementById("username").value;//从网页取出内容
 ary = ["小狮子欧","小狮子余","小狮子勤","小狮子赵","小狮子何","小狮子苏"]
 var j=0;  
for(i=0;i<6;i++){

 var b=ary[i];//内部变量
 if (a==b) {
 j++;
 }
}  

if(j>=1) {      
 
 alert ("欢迎您,star"+a);
document.getElementById("s").innerHTML="用户"+a+"已登录";//给网页写入内容

} else{
alert ("用户名错,请输入用户名,非狮子不得入内");
}
 }
 
 </script>
 

 <input type="text" id="username" value="请输入用户名">
 <input type="button" value="登录" onclick="checkStu()">


</body>
</html>

for循环这个地方,不能一次性讲循环和条件,否则有点复杂,东西太多了。

应该是先讲循环和弹窗,就是通过循环的方式取数,弹窗。这个理解之后才是数据对比的条件判断。所以这一段代码的主题就叫点名。只有把点名原理讲清楚了,另外单独开辟这个例子,才能再去讲数据库查询和数据对比,否则一下东西太多。

1,点名-循环取数弹窗代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>
<script language=javascript>
 function checkStu() {
 
 var ary = ["小狮子欧","小狮子余","小狮子勤","小狮子赵","小狮子何","小狮子苏"]

for(i=0;i<6;i++){

 var b=ary[i];//内部变量
alert("学生"+b+"到了");
 }
}  

</script>

<input type="button" value="开始点名" onclick="checkStu()">
</body>
</html>

接下来再来加计数器,要实现的功能是,如果是点名次数达到一定次数,就宣布:人都到齐了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<body>
<p id="s">用户已登录</p>
<script language=javascript>
 function checkStu() {
 
 var ary = ["小狮子欧","小狮子余","小狮子勤","小狮子赵","小狮子何","小狮子苏"];//创建数组,前面的名字ary可以自由命名。
var j=1;
for(i=0;i<6;i++){

var b=ary[i];//内部变量
alert("学生"+j+b+"到了");
j++;
 }
if(j=6){
alert("学生都到了");
document.getElementById("s").innerHTML="学生都到了";
}
}  

</script>

<input type="button" value="登录" onclick="checkStu()">

</body>
</html>

通过上面这个案例,主要接触和认识3个知识点:

1,对数组这个数据类型的认识;

2,对for循环的认识,初始值,终点值,自增加。

3,自增加的加法运算和最终结果计数。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: