目录
一、程序的三大结构
二、选择结构的单分支结构
三、选择结构的双分支结构
四、选择结构的多分支结构
一、程序的三大结构
顺序结构、选择结构、循环结构
二、选择结构的单分支结构 if语句
我要评论
单分支：if（） { } if语句
if 表示分支语句
（ ）条件，逻辑判断
{ }代码块，执行语句,当条件判断为true时，执行
登录界面举例：
结构：<input type="text" id="txt" />
<input type="password" id="pas" />
<input type="button" id="btn" />
js： var user = "admin";
var pass = "123456";
btn.onclick = function(){
if(txt.value == user && pas.value == pass){
console.log("登录成功")
}
}
判断一个数字是偶数 举例：
结构：
<input type="text" id="txt" />
<input type="button" id="btn" />
js：
var txt = document.getelementbyid("txt");
var btn = document.getelementbyid("btn");
btn.onclick = function(){
var otxtvalue = txt.value ;
if(otxtvalue%2 == 0){
console.log("偶数")
}
判断一个年份是否是闰年 举例：
结构：
<input type="text" id="txt" />
<input type="button" id="btn" />
js：
var txt = document.getelementbyid("txt");
var btn = document.getelementbyid("btn");
btn.onclick = function(){
var otxtvalue = txt.value ;
if((otxtvalue%4 == 0 && otxtvalue%100 !== 0)||otxtvalue%400 == 0 ){
console.log("闰年")
}else{
console.log("平年")}
}
三、选择结构的双分支结构 if语句
if(){} else(){}
if（true）{
条件为真，执行此处的代码
}else{
反之条件为假，执行此处的代码
}
判断一个数字是否是偶数 举例：
结构：
<input type="text" id="txt" />
<input type="button" id="btn" />
js：
var txt = document.getelementbyid("txt");
var btn = document.getelementbyid("btn");
btn.onclick = function(){
var otxtvalue = txt.value ;
if(otxtvalue%2 == 0){
console.log("偶数")
}else{
console.log("奇数")}
}
双分支结构中的嵌套：
第一种：
if(){
if(){
}else{
}
}else{
}
第二种:
if(){
}else if(){
}else{
}
在判断语句中的（）中发生了隐式类型转换：
字符型：非空字符为true
数值型：非零为true
未定义：!undefined为true
数组型：空数组为true
对象型：空对象为true
发生隐性类型转换，把true转换为1；把false转换为0；
conlose.log(1 + true );返回结果为2；
conlose.log(1 + false);返回结果为1；
四、选择结构的多分支结构 switch语句/break关键字
多分支结构 switch语句：
switch(){
case 0:alert("零");
break;
case 1:alert("一");
case 2:alert("二");
default:alert("不识别的数字");
}
switch()内，不会做判断，在case身上判断这个值是否符合。
switch()内，不能做判断，同时在case后也不能做判断，
注意：
如果判定的是范围，不要使用switch语句；判定具体数据的时候，才使用switch
注意：
switch的应用场景：有多个确定值需要判断的时候
注意：
case语句的穿透，要加break语句；
如果程序没有break语句，那么解析器会继续向下解析
注意：
default相当于if语句中的else，当以上条件都不满足的时候，执行default
如对本文有疑问， 点击进行留言回复！！
web前端基础之HTML5语义化新标签学习笔记（8）学会用语义化标签
网友评论