您的位置 首页 > 数码极客

[js如何让文本框居中]js文本框居中怎么设置…

项目十八 流程控制

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以内的数字。

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“js如何让文本框居中,js文本框居中怎么设置,如何使文本框居中”边界阅读