第9章 Web应用程序开发.ppt

,Web应用程序开发,第9章,9.1 Web概述,9.3 基本HTML标记,9.4 Web脚本简介,9.2 网页基础,9.1 Web概述,WWW(World Wide Web)万维网或Web。由一些应用软件及一系列协议和约定组成，是一种可进行信息浏览和信息发布的网络。 WWW以超文本标记语言HTML与超文本传输协议HTTP为基础，能够提供面向Internet服务的信息浏览系统。,WWW是建立在客户机/服务器模型之上的。Web服务器采用超链接形式将大量信息链接起来。,WWW所提供的信息以统一资源定位器(URL)来标识。URL由协议类型、主机名和路径及文件名组成。http:/www.sina.com.cn/index.html,9.2 网页基础,网页：WWW的基本单位，是各种网络应用的载体。是一个存放在Web服务器上的一个文件，它在浏览器中为我们呈现各种多媒体信息。,9.2.1 基本概念,超级链接：从一个网页指向一个特定位置的链接，也可理解为指向其它信息的一个指针,HTML：Hypertext Markup Language，超文本标记语言。用于格式化网页上显示的文本、建立超级链接、插入图像、建立表格等,标记：用于控制网页的显示方式，以及所显示的内容。标记演示。 单标记：只有起始标记，没有结束标记。 双标记：既有起始标记也有结束标记。,属性：用于为标记提供附加信息，位于起始标记中。属性可有可无，也可能有多个。 , 标题名 .其它头部标记. 网页内容. ,9.2.2 HTML文件的基本结构,标记的格式： ,text属性：设置网页文本的颜色； bgcolor属性：设置网页的背景颜色； background属性：设置网页的背景图像； link、vlink、alink属性：设置尚未访问、已访问、正被访问的超级链接的文本颜色,【例9.2】使用标记, 使用标记 白帝城 朝辞白帝彩云间,千里江陵一日还 两岸猿声啼不住,轻舟已过万重山 ,【例9.2】使用标记,9.3基本HTML标记,使用标记设置一篇文章或一段文本的标题，标题文字以粗体显示。格式为： 标题 ,9.3.1 标题,n表示标题的级别。n=1，表示一级标题，此时标题文字的字体最大；n=6，表示六级标题，此时标题文字的字体最小。 align表示标题文本的对齐方式，取值left、right和center。,【例9.3】使用标记, 使用标记 唐诗三百首 唐诗三百首收录了77位诗人的诗，共311首，在数量以杜甫诗数多，有38首、王维诗29首、李白诗27首、李商隐诗22首。内容浅显易懂，深受人们喜欢。 李白 月下独酌春思关山月夜思怨情玉阶怨 ,【例9.3】使用标记,文字 (1)face属性：字体名，默认为宋体； (2)size属性：字号，取值范围为1-7，size取7时最大，1时最小，默认为3号； (3)color属性：文字颜色，默认为黑颜色。,9.3.2 文字,、：粗体、斜体、下划线、删除线、下标、上标,【例9.4】设置文字的格式,使用标记 光明 作者：朱自清 风雨沉沉的也夜里，前面一片荒郊。上帝慌着说，“光明？我没处给你找！你要光明，你自己去造！” 人物介绍：朱自清(1898-1948)，原名自毕，字佩弦，号秋实，江苏东海人，中国现代散文家、诗人。主要作品有诗歌散文集踪迹。 ,【例9.4】设置文字的格式,将标记放置于文章中一行的末尾，可以使文本产生强制换行。标记是一个单标记。,9.3.3 段落,在和标记中的文本会形成一个段落。 段落内容 其中，align属性表示段落文本的对齐方式,【例9.5】使用段落,使用段落 李白 关山月 明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边邑，思归多苦颜。高楼当此夜，叹息未应闲。 行路难 ,【例9.5】使用段落,9.3.4 图像,(1)src属性：要显示图像的文件名及路径。 (2) alt属性：指定替换文本。 (3) width和height属性：指定图像的宽度和高度。取值可以是像素数，也可以是百分比,【例9.6】使用图像, 使用图像 游子吟 孟郊 慈母手中线，游子身上衣。临行密密缝，意恐迟迟归。谁言寸草心，报得三春晖。 ,【例9.6】使用图像,使用align属性。,图文混排,left：图像居左，文本在图像右侧； right：图像居右，文本在图像左侧； top：文本与图像的顶部对齐； middle：文本与图像的中间对齐； bottom：文本与图像的底部对齐。,【例9.7】图文混排,图文混排 送孟浩然之广陵 李白 故人西辞黄鹤楼，烟花三月下扬州。孤帆远影碧空尽，惟见长江天际流。高楼当此夜，叹息未应闲。 【评析】： ,【例9.7】图文混排,文本或图象,9.3.5 超级链接,(1)href属性：指定链接地址。 (2)target属性：指定链接的网页在何处打开。取值_blank、_self、_top或_parent。 (3)name属性：定义命名位置，又称为锚点名。它与href属性不能同时使用。,新浪网,1.链接到另一个网页,2.链接到网页的某个位置,(1)定义命名位置(或者锚点) 文本 (2)链接到命名位置 文本,【例9.8】使用超级链接作为目录, 使用超级链接作为目录 唐诗三百首 唐诗三百首收录了77位诗人的诗，共311首，在数量以杜甫诗数最多，有38首、王维诗29首、李白诗27首、李商隐诗22首。 李白 关山月 行路难 送孟浩然之广陵,【例9.8】使用超级链接作为目录,关山月 明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。 行路难 金樽清酒斗十千，玉盘珍馐直万钱。停杯投箸不能食，拔剑四顾心茫然。 送孟浩然之广陵 故人西辞黄鹤楼，烟花三月下扬州。孤帆远影碧空尽，惟见长江天际流。 ,【例9.8】使用超级链接作为目录,3.图像链接,【例9.9】图像链接, 图像链接 运动项目 ,【例9.9】图像链接, 表项1表项n 表项1表项n ,9.3.6 表格,【例9.10】使用表格,使用表格 课表 星期一星期二星期三星期四星期五 上午第一节英语高等数学线性代数C语言英语,【例9.10】使用表格,第二节线性代数英语高等数学计算机概论大学物理 下午第三节C语言线性代数大学物理高等数学 第四节计算机概论线性代数线性代数高等数学 ,【例9.10】使用表格,表单是各种表单元素的容器。利用这些表单元素，可以与用户进行交互。 文本框、按钮、单选按钮、复选框、列表框等。,9.3.7 表单, 表单元素 ,(1) action属性：指定用于处理表单数据的服务器程序。 (2) method属性：指定浏览器向服务器传递表单数据时采用的数据传输方式。get和post (3)name属性：为表单命名，以便在程序中访问该表单。,文本框允许用户输入文本。,1.文本框, (1)name属性：指定文本框的名字，以便在程序中访问该文本框。 (2)value属性：获取文本框中的文本。 (3)size属性：指定文本框的显示宽度。 ,提交按钮、重置按钮和普通按钮,2.按钮,提交按钮用于提交表单。 重置按钮用于将表单上的表单元素置为初值 普通按钮用于执行某个命令。 ,【例9.11】使用文本框和按钮,使用文本框和按钮 用户登录 用户名： 密码： ,【例9.11】使用文本框和按钮,3. 单选按钮,用于在多个选项中选择一个选项的场合。 文本 把多个单选按钮组成一组。例如： 男 女,【例9.12】使用表单,使用表单 个人资料 姓名： 性别：男 女 ,【例9.12】使用表单,电话： 爱好：足球 音乐 游泳 ,【例9.12】使用表单,9.4 Web脚本简介,Web脚本一般分为两类： (1)客户端脚本：是在客户端浏览器中运行的程序。典型的客户端脚本编程语言有JavaScript和VBScript。 (2)服务器端脚本：是由Web服务器运行的程序。典型的服务器端脚本技术有ASP、PHP、ASP.NET、JSP等。,1.编写第一个JavaScript程序,9.4.1 JavaScript语言基础,我的第一个JavaScript网页 var msg = prompt('请输入你的大名：',''); document.write('欢迎' + msg + '光临我们的网站！'); 我们会带你进入一个JavaScript世界。 , 脚本内容 ,脚本引入:,language属性用于指定使用什么脚本编程语言，一般为JavaScript和VBScript，默认为VBScript。,(1)字符串类型 字符串是用单引号“”或双引号“”引起来的一串字符。例如：“abc7d“，'123'。 (2)布尔类型 布尔类型只能取值true或false，表示真或假 (3)数值类型 数值类型包括整数和浮点数。例如：123，89.23，3e5。,2.数据类型与变量,变量,JavaScript语言是一种弱类型的语言，所以变量在使用前可以声明，也可以不用声明。声明变量的格式： var 变量名 =初值 var x; var a = 3 , b = true; 变量名必须以字母、下划线或$符开始，后跟字母、数字、下划线或$符。,(1)算数运算符：+、-、*、/、%、+、-。 例如：3 + 5。 (2)逻辑运算符：、=、= y。 (3)赋值运算符：=。例如：x = 30。 (4)字符串运算符： “+” 。 例如：“abc“ + “y12“。,3.运算符与表达式,(1)if语句 if(表达式) 语句1 else 语句2,4.流程控制语句,(2)switch语句 switch(表达式) case 常数表达式1:语句1;break; default:语句n;break; ,(3)while语句 while(表达式) 循环体 ,(4)for语句 for(初始表达式;条件表达式;变量表达式) 循环体 ,(5)输出语句 document.write()向网页中输出文本，以及各种HTML标记。,【例9.14】乘法口诀表, var i,j,k; document.write('乘法口诀表') for(k=0; k'); for(i=1;i); ,【例9.14】乘法口诀表,function 函数名(参数列表) 函数体 ,9.4.2 JavaScript函数,【例9.15】鸡兔同笼, document.write('鸡兔同笼') function rabbit(head,foot) var cock; document.write('鸡兔同在一个笼子中，共有'+head+'个头，'+foot+'只脚，问鸡兔各有多少只？'); cock=(4*head-foot)/2; if(cock0 ,【例9.15】鸡兔同笼,(1)警示对话框 alert函数:显示警示对话框。 参数设置对话框内显示的信息。 alert('你好！');,9.4.3 对话框,confirm函数:显示确认对话框。按下确认按钮，返回true；按下取消按钮，返回false。 参数:用于在对话框内显示确认信息。if(confirm('确实要关闭窗口吗？') document.write('你按下了确定按钮'); else document.write('你按下了取消按钮');,(2)确认对话框,prompt函数:显示提示对话框，用于接收用户输入的信息。 参数:在对话框内显示提示信息;显示默认值。 var msg = prompt('请输入购买数量','1');,(3)提示对话框,【例9.16】单项选择题,单项选择题 var ans; ans=prompt('2008年奥运会在哪个城市举行？nA.广州tB.上海tC.北京tD.天津','A'); if(ans != 'C') alert('错！好好想一想再答'); else alert('你答对了！'); ,【例9.16】单项选择题,1.常用事件,9.4.4 事件,(1)onClick事件 按钮、单选按钮、复选框。 (2)onChange事件 文本框中的文本改变时，引发该事件。 (3)onLoad事件 当载入HTML文档时，会引发该事件。 (4)onMouseOver (5)onMouseOut,在HTML标记中加入事件的方法： 将事件名作为标记的一个属性，将事件处理过程或者JavaScript代码作为该属性的属性值。,2.使用事件,【例9.17】使用事件,使用事件 function hit() document.img1.src =“over.gif“ function normal()document.img1.src =“out.gif“ 在图片上移动鼠标试试看 ,【例9.17】使用事件,文档对象模型以对象形式描述HTML页面和Web浏览器的层次结构，使得JavaScript能够访问和操作网页上的元素。,9.4.5 文档对象与表单对象,window； document、location、history； form、image、link； text、radio、checkbox、button,【例9.18】计算器,计算器 var one=0, two=0, result=0; function getInput() one = parseInt(document.calc.one.value); two = parseInt(document.calc.two.value); function add() getInput(); result = one + two; alert(result); ,function minus() getInput(); result = one - two; alert(result); function plus() getInput(); result = one * two; alert(result); function divide() getInput(); result = one / two; alert(result); , 数字1： 数字2： ,