Java10网页设计基础

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,/33,Java技术与应用,网页设计基础,(第10章),西安交大 卫颜俊,2009年5月,电子信箱：,QQ:,610568018,网站:,主要内容,Tomcat配置,HTML语言介绍,JavaScript语言介绍,Tomcat的配置,HTML网页设计语言简介,Hypertext Markup Language，即超文本标记语言,用于创建便于平台移植的超文本文档的一种简单标记语言,主要用于WEB应用中,SGML的一种简化版,HTML文件是带有格式标识符和超文本链接的内嵌代码的ASCII文本文件（文件后缀为.htm或.html）,一般由浏览器使用HTTP（Hypertext Transfer Protocol）网络协议下载、解释和运行,目前有许多诸如FrontPage、DreamWeaver和CoffeeCup等智能化的网页制作软件专门用来制作HTML文件,通常不需要人工去写大量代码,典型的HTML文档的层次,包括:结构、内容和样式,HTML对结构和内容之间的关系进行表示和处理,结构,用于描述文档的组织结构；,内容,包括信息标题、段落、项目列表和表格中的具体内容，各个内容使用开始和结束标记区分；,样式,定义内容的样式设置标准。,基本语法,1.HTML文件总体结构：,页面配置：,背景色彩：,背景图象 ：,链接：,.,2.字体：,标题字体：.，其中，#可以是17,普通字体：字体大小.,，其中，,#,可以是,1,7,或,+#,，,-#,字体颜色,.,物理字体：.粗体，.斜体，.带下划线,逻辑字体：.虚化，加重,3.文字布局：,段，换行，不换行，文字的对齐align=#，其中，#为left,center,right,无序列表.，有序列表.，定义列表.,.保持原貌,.闪烁,3.图象：,，其中，#为图象文件的URL,，其中，#为边的宽度。,【例10-1】基本网页例子,表格,-定义表格,-定义表行,-定义表头,-定义表元(表格的具体数据),在中还可以通过一些属性定义表格的边框、宽度、高度和间隔数等：,.,在中可以定义,占多行、,占多列、,背景颜色或等属性。,【例10-2】精彩赛事推荐,表单,1.简单表单,.,其中，,action=后的#为提交目的网址；,method=后的#,可以是GET或POST，表示提交表单的方式；,type=后的#为输入形式，可以是text、password、checkbox、radio、image、hidden、submit或reset之一；,name=后的#为变量名字；value=后的#为初始值。,对于image还可以有src属性表示图片网址。,另外，,对于text,password还可以有size=#和maxlength=#属性，分别表示输入的字符宽度和最大宽度；,对于checkbox,radio还可以有checked属性，表示初始选中；,对于image还可以有src属性表示图片网址。,2.列表框,.,其中，,的属性name=后的#为变量名字，size=后的#为字符宽度；,的属性selected表示初始选中；,value=后的#为初始值；,multiple表示可以多选。,3.文本区域,.,其中，,name=后的#为变量名字，,rows=后的#为行数，,cols=后的#为列数。,【例10-3】注册单,JavaScript语言简介,最早由Netscape公司开发，是一种嵌入在HTML文件中的描述语言，为了,增强浏览器功能,。,一种介于Java与HTML之间的、基于对象和事件驱动的程序设计语言，是,Java的简化和HTML的加强,。,使得信息和用户之间不但具有显示和浏览的关系，而且实现了它们之间的,实时动态的交互表达能力,。,程序可以在客户端首先完成输入的表单等资料的验证工作，之后再递交给Web服务器处理和保存，这样,大大减少了网络传输的次数,JavaScript的基本特点,解释性脚本语言,基于对象的语言,简单性,安全性,动态性的,跨平台性,与Java的区别,基于对象和面向对象,解释和编译,强变量和弱变量,代码格式不一样,嵌入方式不一样,静态联编和动态联编,基本语法,JavaScript语言中具有普通计算机语言所具有的典型要素，包括数据类型、常量变量表达式、控制结构、数字、字符串、函数、对象和事件等，非常接近于Java语言,JavaScript语言代码；,JavaScript语言代码;,窗口及输入输出,JavaScript的输入输出是通过对象来完成的,其中，,输入可通过窗口（window）对象来完成,输出可通过文档（document）对象的方法来实现。,window.prompt,(,提示信息,，默认值,),window.confirm,(,提示信息,，默认值,),window.alert,(,内容,),window.open,(,网址,窗口名字,窗口属性,),document.write,(,内容,),或,document.writeln,(,内容,),document.open(URL,窗口名字,窗口属性,),关闭文档流,document.close,(),清除文档内容,document.clear,(),函数,function 函数名（参数表,变元表）,函数体代码;,return表达式;,【例10-4】计算费波那契数列的第n项和前n项之和,事件,1.单击事件onClick,button（按钮）、checkbox（复选框）、radio（单选钮）、reset（复位按钮）和submit（提交按钮）,2.改变事件onChange,text或textarea元素,事件,3.选中事件onSelect,text或textarea元素,4.获得焦点事件onFocus,text或textarea以及select,5.失去焦点事件onBlur,text或textarea以及select,6.载入文件事件onLoad,7.卸载文件事件onUnload,【例10-5】注册表单数据的合法性验证,要求：,当未输入密码或两次输入的密码不符，,未输入E_Mail地址或 E_Mail地址中无符号时，,在对话框中提示错误信息。,本讲结束！,谢谢！,