《jsp网页基础知识》由会员分享，可在线阅读，更多相关《jsp网页基础知识（154页珍藏版）》请在金锄头文库上搜索。
1、第2章 JSP预备知识,HTML是学习JSP必须掌握的，因为JSP程序就是Java代码或者JSP标签，然后由JSP引擎翻译成Servlet，由Web容器编译执行。 JavaScript实际上JSP 知识体系中一个可选的知识模块。,2.1 HTML快速入门 2.2 JavaScript技术,2.1 HTML快速入门,HTML使Web获得奇迹般的发展有以下三个主要原因： 首先是通过设计， HTML能普遍地访问所有计算机平台,从最强劲的UNIX系统到普遍流行的Windows和Macintosh个人计算机。 第二是HTML容易使用，你不需要输入一系列复杂而深奥的计算机指令，只要使用一列标记来组成文本，
2、使得创造Web页面变得相当简单。HTML的强劲访问能力推动了Web的流行，使数以万计的个人Web站点如雨后春笋般地涌现。,最后一点是HTML使你能在一个Web站点与另一个Web站点之间建立链接。当你用鼠标点到这些链接中的一个时(它可能是一个短语或是一幅图画)你就能轻易跳到其它Web站点上，进入到一个广阔而又在不断发展的互连的和交互的知识库中。,2.1.1 HTML基本结构,一个HTML文件应具有下面的基本的结构： HTML文件开始 文件头开始 文件头内容 文件头结束 文件体开始 文件体内容 文件体结束 HTML文件结束,2.1.2 HTML常用标签,1.单标签“+字母” 常用单标签： 1) ，
3、换行标签，强制文本换行，不在行与行之间增加空行 2) ，水平线标签，成一条水平线,2.双标签格式： 1）开始标签“+字母” 2）结束标签“+/+字母” 3）常用双标签简介,注： 表示该标记属围堵标记，即需要关闭标记如 。 表示该标记属空标记，即不需要关闭标记。 IE 表示该标记只适用于 Internet Explorer。 NC 表示该标记只适用于 Netscape Communicator。 反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择。 弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HT
4、ML 具向下兼容的特 性，不用担心新浏览器不支援旧标记。 新 表示该标记是 HTML 4.0 中新增的。,图2-17 表单示例,20,2.1.4 XML与XHTML,XML（Extensible Markup Language）即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language，标准通用标记语言)。XML是Internet环境中跨平台的、依赖于内容的技术，是当前处理结构化文档信息的有力工具。XML是一种简单的数据存储语言，使用一系列简单的标签描述数据，而这些标签可以很方便的建立，虽然XML占用的空间比二进制数据要占用更多的
5、空间，但XML极其简单并易于掌握和使用。 XML是一种元标签语言，没有许多固定的标签，为Web开发人员提供了更多了灵活性。当使用HTML时，标签只是简单地表示内容的显示形式，而与表示的内容没有任何关联，为文档的进一步处理带来极大的不便。,1. XML,21,比如要表示个人简历，用HTML的表示方式如下（文件名resume.html）：, 姓名性别 出生日期专业 张三男1991.8.12软件开发 ,22,上述html文件无法从标签、等得知其内容表示什么，如果用XML，相应的文档（文件名resume.xml）就可以写成如下形式：, 张三 男 1991.8.12 软件开发 ,这里，version规定
6、了XML文档的版本，encoding规定了XML文档的编码类型，此处取值gb2312表示简体中文。对比两个例子，使用XML可以做到自定义标签，用标签表明内容的含义。这就为在网络上交流资料时用计算机处理文档提供了极大的方便，也增加了源文件的可读性。,23,resume display: block; name display: block; font-size:120%; sex display:block; text-indent:2em birthday display:block; text-indent:2em major display:block; text-indent:2em 建
7、立文件resume.css后，在个人简历.xml文件的第一行后添加以下文字： ,当然resume.xml能以表格形式运行的前提是必须自定义好形式，定义其显示形式的文件css文件。,另一种方式：定义其显示形式的文件如下（文件名resume.xsl，在xml文件的第二行引入了该xsl文件）：, 姓名性别生日专业 ,25,XSL之于XML ，就像 CSS 之于 HTML。它是指可扩展样式表语言 (Extensible Stylesheet Language)，这是一种用于以可读格式呈现 XML 数据的语言。有了resume.xsl定义显示形式，文件resume.xml在浏览器中显示的形式和resum
8、e.xml形式相同（如图2-18所示），不过它给程序员提供了更大的灵活性，也更易于数据交换。,图2-18 浏览xml文件,26,2. XHTML,可扩展超文本标记语言（eXtensible HyperText Markup Language，XHTML），与超HTML类似，不过语法上更加严格。HTML语法要求比较松散，这样对网页编写者来说比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML， XHTML 1.0在2000年1月26日成为W3C
9、的推荐标准。 和CSS（Cascading Style Sheets，层叠式样式表）结合后，XHTML能发挥真正的威力；这在实现样式和内容分离的同时，又能有机地组合网页代码，在另外的单独文件中，还可以混合各种XML应用。,27,XHTML与HTML的重要区别,1在XHTML中标记名称必须小写 2在XHTML中属性名称必须小写 3在XHTML中标记必须严格嵌套 4在XHTML中标记必须封闭 5在XHTML中即使是空元素的标记也必须封闭 6在XHTML中属性值用双引号括起来 7在XHTML中属性值必须使用完整形式,2.2 JavaScript技术,JavaScript是由Netscape公司开发的
10、一种网页的脚本编程语言，它支持客户端与服务器端的应用程序以及构件的开发。JavaScript是一种解释性的语言，它的基本结构形式与其他编程语言相似，需要先编译后执行。,什么是JavaScript,JavaScript 是一种脚本语言 提供用户交互 动态更改内容 数据验证,将JavaScript嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式 如下： 使用 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中,使用 Script 标签,JavaScript 代码, document.write(“欢迎来到 JavaScript 世界“); 尽情享受学
11、习的快乐! ,脚本代码,设置语言,使用外部 JS 文件,外部 JavaScript 文件可以链接到 HTML 文档中 SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件,使用外部 JS 文件,JavaScript 代码 (test.htm), 使用外部文件 以上文本是通过访问外部 JavaScript 文件显示的 ,35,浏览器对象简介 2-1,http:/,Window 窗口对象,location 地址对象,document 文档对象,FORM 表单对象,浏览器对象的分层结构,window.document.myform.text1,对象 JavaScript的一个重要功能就是面
12、向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。 一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。 比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor=“blue“，就是表示使背景的颜色为蓝色。,36,37,浏览器对象简介 2-2,浏览器对象的分层结构,变量,变量名必须以字母或下划线（“_“）开头 变量可以包含数字、从 A 至 Z 的大小写字母 JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量,声明变量,var a;
13、“var” 用于声明变量的关键字 “a” 变量名,同时声明和初始化变量 var a= 10;,a = 10;,声明变量,声明多个变量 var x, y, z = 10;,赋值,声明变量, 使用变量 var x; x=prompt(“淘宝网竟拍，请出一口价“,1) ; document.write(“拍卖价格“+x+“) / “+“用来连接多个字符串 document.write(“恭喜您，您以最高价拍卖成功！“); alert(“欢迎下次光临！“); ,定义变量,赋 值,输 出,prompt(“提示信息”,”默认值”) 将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空
14、字符串。,变量 a、b 和 c 只能 在其各自的函数中 被访问,变量的作用域,脚本,函数function1 局部变量a,函数function2 局部变量b,函数function3 局部变量c,可由函数 1、函数 2 和函数 3 访问,全局变量 gg,全局变量不需要以 var 关键字进行声明，但局部变量则必须 以此关键字来声明,常量,整型 浮点型 字符串型,和C语言一样，js也有转义字符，常用的就是： “ n ”,数据类型, var x=100; var y; var z; document.write(“竞拍SONY数码相机 600万像素“ +x+“$起价“); y=prompt(“加多少银子
15、？“,“1“); z=x+y; alert(“您最终的出价n“+z+“$“); /”n”用于换行显示 ,Prompt函数返回输入的字符串,“+”号的用法-1,10020 ? bug,+字符串相连：100+”200”,200, var x=100; var y; var z; document.write(“竞拍SONY数码相机 600万像素“ +x+“$起价“); y=prompt(“加多少银子？“,“1“); z=x+parseFloat( y ); alert(“您最终的出价n“+z+“$“); /”n”用于换行显示 ,parseFloat( )函数将字符串转换为float数据 parse
16、Int( )函数将字符串转换为int数据 如果转换失败，返回NaN值(not a number),“+”号的用法-2,运算符,运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值 根据所执行的运算，运算符可分为以下类别： 算术运算符 比较运算符 逻辑运算符,运算符,算术运算符-1,实现步骤： 1.使用DreamWeaver设计页面 2.指定各个文本框的名称 3.切换为代码视图，编写脚本代码 4.浏览并调试, function calcu( ) var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total=parseFloat(numb1)*parseF
