# javascript快速入门3--分支判断与循环
## 分支结构
* 单一选择结构(if)
* 二路选择结构(if/else)
* 内联三元运算符 ?:
* 多路选择结构(switch)
```
var condition = true; if (condition) {
alert("我将出现!");
}
condition = false; if (condition) {
alert("我不会出现!");
} else {
alert("我会出现!");
}
condition ="some string"; if (condition) {
alert("可以直接对任何数据类型进行if判断,在判断时计算会自动将其转换成布尔值!");
} var val = condition?"当为true时我将被返回":"当为false时我将被返回";
alert(val);//将输出"当为true时我将被返回"
```
对于if..else语句,如果要执行的语句只有一条,可以不使用“{}”,但这种写法并不推荐.但确实这样可以简化代码:
```
var str ="one"; if (str=="one") alert("str的值为字符串'one' !"); else alert("not one");
```
虽然JavaScript中没有if .... elseif 结构,但可以使用if...else的简写方式得到
```
//为了判断用户输入的成绩的范围,我们使用了多重嵌套的if .. else语句
var num = window.prompt("请输入XXX的成绩!","");
num *=1;//window.prompt方法始终只返回字符串,用这样的方法将其转换成数字
if (isNaN(num) && num) {//不能将其它值转换成数字时将返回NaN,可以用内置的isNaN判断值是否是NaN
alert("您输入的不是一个数字!");
} else { if (num<=100 && num>=90) {
alert("Excellent!");
} else { if (num =80) {
alert("Good!");
} else { if (num < 80 && num >= 70) {
alert("So so!");
} else { if (num < 70 && num >=60) {
alert("Be careful !!!");
} else { if (num < 60 && num >= 0) {
alert("Oh, NO!");
} else {
alert("USB!");
}
}
}
}
}
} //上面的代码由于用了多重的if..else嵌套,显得非常的混乱,简化只须将else后的花括号去掉就行了
// if (...) {...}这算是一句
if (isNaN(num)) {
alert("您输入的不是一个数字!");
} else if (num<=100 && num>=90) {
alert("Excellent!");
} else if (num =80) {
alert("Good!");
} else if (num < 80 && num >= 70) {
alert("So so!");
} else if (num < 70 && num >=60) {
alert("Be careful !!!");
} else if (num < 60 && num >= 0) {
alert("Oh, NO!");
} else {
alert("USB!");
} //看上去清晰多了,但要注意的是,JavaScript中没有elseif 这样的语法,所以上的else if之间是有空格的
```
用于进行多次判断的switch语句
```
switch(condition) { //switch本来就是跳转的意思(又称为“开关”),所以switch语句就是判断情况,跳到符合的情况开始执行
case 4:
alert("c的值是4"); case 3:
alert("c的值肯定大于等于3"); case 2:
alert("c的值肯定大于等于2"); case 1:
alert("c的值肯定大于等于1");
} //可以使用 break来只执行符合一个条件的语句
switch(condition) { case 4:
alert("c的值是4"); break; case 3:
alert("c的值是3"); break; case 2:
alert("c的值是2"); break; case 1:
alert("c的值是1"); break;
} var condition="one"; switch(condition) {//switch不但可以用来判断数字,还可以判断字符串,甚至是不定的变量
case "one":
alert("condition的值是字符串'one' !"); break; case "three":
alert("condition的值是字符串'three' !"); break; case "four":
alert("condition的值是字符串'four' !"); break; case "five":
alert("condition的值是字符串'five' !"); break; default://当所有情况都不匹配时,将执行default语句后的
alert("我们要万无一失!condition什么都不是!");
}
```
## 循环
循环用来指明当某些条件保持为真时要重复的动作。当条件得到满足时,就跳出循环语句。在 JavScript 中有四种循环结构可用。
* 由计数器控制的循环(for)
* 在循环的开头测试表达式(while)
* 在循环的末尾测试表达式(do/while)
* 对对象的每个属性都进行操作(for/in)
for 语句指定了一个计数器变量,一个测试条件,以及更新该计数器的操作。在每次循环的重复之前,都将测试该条件。如果测试成功,将运行循环中的代码。如果测试不成功,不运行循环中的代码,程序继续运行紧跟在循环后的第一行代码。在执行该循环后,计算机变量将在下一次循环之前被更新。
```
for (var i=0;i<10;i++) {//for循环的圆括号里面须放三个句子,分别是1.初使化计数器 2.判断条件 3.更新计数器
alert("i当前的值为"+i);
}
```
其实for循环语句完全可以这样写,下面的代码和上面的效果是一样的(虽然没有必要,但从这样的代码可清楚看出for循环如何工作的)
```
var i=0;//循环进行之前初始化i
for(;;) {//for语句括号中必须有三个语句,但可以为空语句
if (i<10) {//当条件为true时才执行代码
alert("i当前的值为"+i);
} else {//当条件为false时就退出循环
break;//使用break退出循环
}
}
```
一个死循环最能说明while的工作方式了(但这样的错误我们绝不能在实际编程中出现)
```
while (true) {
alert("你关不掉我的!");//这就是网上那些所谓的高手写的“关不上的窗(周传雄新歌,力荐)”代码
}
```
do..while循环与while循环不同之处在于它至少将代码块中的代码执行一次
```
do {
alert("我肯定会出现一次的");
} while (false);
```
而对于for ... in循环,我们将在讲解数组和对象时使用
- 介绍
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超链接和路径
- 第 5 章 分组元素
- 第 6 章 表格元素
- 第 7 章 文档元素
- 第 8 章 嵌入元素
- 第 9 章 音频和视频
- 第 10 章 表单元素[上]
- 第 10 章 表单元素[中]
- 第 10 章 表单元素[下]
- 第 11 章 全局属性和其他
- 第 12 章 CSS 入门
- 第 13 章 CSS 选择器[上]
- 第 14 章 CSS 颜色与度量单位
- 第 15 章 CSS 文本样式[上]
- 第 15 章 CSS 文本样式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 边框与背景[上]
- 第 17 章 CSS 边框与背景[下]
- 第 18 章 CSS 表格与列表
- 第 19 章 CSS 其他样式
- 第 20 章 CSS3 前缀和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 边框图片效果
- 第 24 章 CSS3 变形效果[下]
- 第 25 章 CSS3 过渡效果
- 第 26 章 CSS3 动画效果
- 第 27 章 CSS 传统布局[上]
- 第 27 章 CSS 传统布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 弹性伸缩布局[上]
- 第 29 章 CSS3 弹性伸缩布局[中]
- 第 29 章 CSS3 弹性伸缩布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介绍
- 第 2 章 排版样式
- 第 3 章 表格和按钮
- 第 4 章 表单和图片
- 第 5 章 栅格系统
- 第 6 章 辅组类和响应式工具
- 第 7 章 图标菜单按钮组件
- 第 8 章 输入框和导航组件
- 第 9 章 路径分页标签和徽章组件
- 第 10 章 巨幕页头缩略图和警告框组件
- 第 11 章 进度条媒体对象和 Well 组件
- 第 12 章 列表组面板和嵌入组件
- 第 13 章 模态框插件
- 第 14 章 下拉菜单和滚动监听插件
- 第 15 章 标签页和工具提示插件
- 第 16 章 弹出框和警告框插件
- 第 17 章 按钮和折叠插件
- 第 18 章 轮播插件
- 第 19 章 附加导航插件
- 第 20 章 项目实战--响应式导航[1]
- 第 20 章 项目实战--响应式轮播图[2]
- 第 20 章 项目实战--首页内容介绍[上][3]
- 第 20 章 项目实战--首页内容介绍[下][4]
- 第 20 章 项目实战--资讯内容[5,6]
- 第 20 章 项目实战--案例和关于[7]
- javaScript 教程
- javascript快速入门1--JavaScript前世今生,HelloWorld与开发环境
- javascript快速入门2--变量,小学生数学与简单的交互
- javascript快速入门3--分支判断与循环
- javascript快速入门4--函数与内置对象
- javascript快速入门5--数组与对象
- javascript快速入门6--Script标签与访问HTML页面
- javascript快速入门7--ECMAScript语法基础
- javascript快速入门8--值,类型与类型转换
- javascript快速入门9--引用类型
- javascript快速入门10--运算符,语句
- javascript快速入门11--正则表达式
- javascript快速入门12--函数式与面向对象
- javascript快速入门13--BOM——浏览器对象模型(Browser Object Model)
- javascript快速入门14--DOM基础
- javascript快速入门15--节点
- javascript快速入门15--表单
- javascript快速入门16--表格
- javascript快速入门17--事件
- javascript快速入门18--样式
- javascript快速入门19--定位
- javascript快速入门20--Cookie
- javascript快速入门21--DOM总结
- javascript快速入门22--Ajax简介
- javascript快速入门23--XHR—XMLHttpRequest对象
- javascript快速入门24--XML基础
- javascript快速入门25--浏览器中的XML
- javascript快速入门26--XPath
- javascript快速入门27--XSLT基础
- PHP 教程
- 第一章 如何加载运行已发布的PHP项目
- 第二章 PHP基础
- 第三章 操作符与控制结构
- 第四章 数学运算
- 第五章 数组
- 第六章 目录与文件
- 第七章 自定义函数
- 第八章 字符串处理
- 第九章 正则表达式
- 第十章 日期与时间
- 第十一章 表单与验证
- 第十二章 会话控制
- 第十三章 上传文件
- 第十四章 处理图像
- 第十五章 MySQL 数据库
- 第十六章 PHP 操作MySQL
- 第十七章 面向对象基础
- 第十八章 面向对象的特性
- 第十九章 面向对象的工具