第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:/,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(表达式)语句1else 语句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：,
