鲁达 项目十八 流程控制
Javascript可以放在网页的任何地方（Body或Head）中，还可以将Javascript程序放到一个后缀名为.js的文本文件里。不过最好尽可能将所有的脚本代码放在Head部分里，以使所有脚本代码集中放置。而且可以确保调用脚本代码之前，所有的脚本代码都已经被读取并解码。
Javascript 中提供了多种用于程序流程控制的语句，这也是本章学习的重点。
教学目标
1. 了解什么是赋值语句；
2. 熟悉if语句；
3. 熟悉for循环语句；
4. 熟悉while循环语句；
实践目标
1、 掌握JS程序语句的用法
2、 能熟练运用JS程序语句
知识储备
课前预习
1、请预习本章内容，了解下面名词的意义及作用
变量：_______________________________________
赋值：_________________________________
If语句：_____________________________________________
2、请简要回答以下问题：
1）常见的Javascript程序语句有哪些？
2）if语句的含义是什么？
3）循环语句的作用是什么？
一、Javascript 的赋值语句
跟其他编程语言一样，Javascript 中也包含一些基本的语句。这些语句主要可分为3种：赋值语句、条件语句和循环语句。其中条件语句和循环语句能够在程序中控制程序的流程。
赋值语句的作用是将一个数据赋给一个变量。在Javascript 中，赋值语句就是一条赋值表达式。其一般形式为：变量 = 表达
其中，变量可以是数值变量，也可以是字符串变量。同样，表达式可以是数值型表达式或字符串表达式。但变量的类型应与表达式的类型一致。例如，以下代码声明一个变量，并给变量a赋值1。
示例：
一个变量声明后，可以在任何时候对其赋值。其中"="叫"赋值符"，它的作用是把右边的值赋给左边的变量。
在Javascript 中，声明一个变量时，可以同时赋予变量初始值。同时声明多个变量，并且赋予这些变量初始值，变量之间用逗号相隔。在Javascript 中，多个变量赋予相同的值时，不能写为变量 = 变量 = … = 表达式的形式，应该逐个赋值。
示例：
HTML 源代码：
代码解析：
1） 第6-7行:插入一段JS脚本语言；
2） 第7行：声明一个变量a，给a赋值为10，声明一个变量b，给b赋值20，声明一个变量c，给c赋值为30；
3） 第8行：输入a=a的值，换行；
4） 第9行：输入b=b的值，换行；
5） 第10行：输出c=c的值。
效果预览：
图：Javascript 赋值语句
二、Javascript 流程控制语句
在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript 也不例外。
本节主要介绍Javascript 条件语句。
1、If语句
在if语句中，当判断是的值为true时，将执行if语句后面的一行语句，否则什么也不执行。
If条件语句的语法如下：
Javascript 语法格式：
这句语法的含义是，如果符合expression条件，就执行statement1代码，反之，则不执行statement1代码。
HTML 源代码：
代码解析：
1） 第6-10行:插入一段JS脚本语言；
2） 第7行：声明一个变量a，给a赋值为5；
3） 第8行：如果a大于10,则输出a=a的值，以及"a大于10"；
4） 第9行：如果a小于10，则输出a=a的值，以及"a小于10"；
效果预览：
图：Javascript if语句
1、If...else语句
If...else语句是javascript中最基本的控制语句，通过它可以改变语句的执行顺序。Javascript支持if条件语句。在if语句中将测试一个条件，如果该条件满足测试，执行相关的javascript编码。
Javascript 语法格式：
语法说明：当表达式的值为true，则执行语句1，否则执行语句2。若if后的语句有多行，则必须使用花括号将其括起来。
HTML 源代码：
代码解析：
1） 第7行:声明一个变量name,给name赋值为Administrator；
2） 第8行：如果name不等于Administrator；
3） 第10行：则输出name值，并且字体为蓝色；
4） 第12-15行：否则输出name值，并且字体为红色；
效果预览：
图：if else语句
2、for循环语句
循环语句的作用是重复执行程序代码。循环可以分为3类：一类在条件变为False之前重复执行语句，一类在条件变为True之前重复执行语句，另一类按照指定的次数重复执行语句。
for 循环语句指定了一个计数器变量，一个测试条件，和更新计数器的行为。每次循环重复之前，都要测试条件。如果测试成功，则执行循环内的代码；如果测试不成功，则不执行循环内的代码，而是执行紧跟在循环后的第一行代码。当执行该循环时，计数器变量在下次重复循环前被更新。
for循环语句的语法如下：
Javascript 语法格式：
说明：
1.功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。
2.初始化参数告诉循环的开始位置，必须赋予变量的初值；条件：是用于判别循环停止时的条件。若条件满足，则执行循环体，否则跳出。增量：主要定义循环控制变量在每次循环时按什么方式变化。
HTML 源代码：
代码解析：
1） 第6-12行:插入一段JS脚本语言；
2） 第7行：定义一个for循环语句，声明一个变量i,并给i赋初始值为0，i小于等于5，i就自加；
3） 第9行：输出i；
4） 第10行：输出一个换行；
效果预览：
图：Javascript for循环语句
3、While循环语句
while 循环和 for 循环类似。其不同之处在于，while 循环没有内置的计数器或更新表达式。如果你希望控制语句或语句块的循环执行，不只是通过 "运行该代码 n 次"这样简单的规则，而是需要更复杂的规则，则应该用 while 循环。
while循环语句的语法如下：
Javascript 语法格式：
当条件为真时，重复循环，否则退出循环。
HTML 源代码：
代码解析：
1） 第6-13行:插入一段JS脚本语言；
2） 第7行：给变量i赋初始值为0；
3） 第8行：当i小于等于5；
4） 第10行：输出i自加后的值并换行；
5） 第11行：i自加；
效果预览：
图： while循环语句
小结：
HTML是目前网络上应用最为广泛的语言，也是构成网页文档的基本语言。了解HTML基础，文件结构以及常用的基本标签是学习好HTML语言的基础，同时为后面网页设计与开发以及制作更复杂的网页打下良好的基础。
项目实践
在前面我们学习用CSS+DIV制作日历，但是大家可以发现，用CSS+DIV制作出来的日历代码相对来说十分臃肿。实际上我们运用javascript也可以制作出同样的效果出来。下面我们就用javascript来制作同样的日历。
任务一：制作日历
任务描述：
运用学到的javascript语言将前面我们运用CSS+DIV制作的日历js化。效果图如下:
图：js日历
任务要求：
1. 运用for循环制作日历
2. 日历背景色为灰色#CCC，月份以及日期背景色为白色；
3. 日历宽430像素，高250像素；
4. 月份宽410像素，高30像素，文本居中显示，行高30像素；
5. 日期宽50像素，高30像素，文本居中显示；
实践目标：
1. 熟悉javascript程序语句的运用；
2. 了解如何运用循环语句制作小程序；
参考步骤：
1、 搭建HTML框架，分别定义三个DIV块，并依此命名id为"yl"、"yf"、"rq"；
2、 将id为"rq"的DIV用for循环语句输出，声明一个变量i，并给i赋初始值为1，i小于32时，i自加，输出<div id="rq" >i的值</div>；
3、 定义"yl"、"yf"、"rq"的CSS样式；
HTML 源代码：
本章总结：
Javascript种提供了多种用于程序流程控制的语句，这些语句可以分为选择和循环两大类。本章除了介绍了赋值语句，重点介绍了流程控制语句的用法，以及流程控制语句的循环和判断控制语句；还着重讲解了if语句、for语句以及while语句。
作业：
一、简答题
1.Javascript 中有哪些基本语句？
2.写出声明一个变量a,并且对其赋值？
3.什么是赋值语句？有哪些作用？
4.列举出Javascript 语言中主要条件语句。
5.列举出Javascript 语言中主要循环语句。
二、操作题
1.请完成用条件语句输出"Good Morning"字符，要求进行判断，获取当前时间小于早上10点时显示此字段，否则什么都不显示。
2.写出由for语句循环，在页面中显示出10以内的数字。