《Web基础知识》PPT课件

1、JSP动态网站开发,工商管理学院电子商务教研室,第2章 Web基础知识,2,一、Web发展及HTTP协议,1、客户端技术： HTML( HyperText Markup Language )； JavaScript； CSS( Cascading Style Sheets )。,2、服务器端技术： ASP( Active Server Pages )：Windows系统下Web服务器端的主流开发技术； 1997年Servlet技术问世，1998年JSP技术诞生； Web的未来：语义Web XML( EXtensible Markup Language)。,B/S,3,二、HTML 超文本标记语

2、言,1、为什么要学HTML： 制作任何类型网页的基础 HTML是JSP和Servlet的基础； JSP = 含有Java代码的HTML页面 hello.jsp； Servlet = 含有HTML的Java程序 hello.java 。,2、HTML标记结构：, this is my HTML page. ,4,HTML 标记,（、 ）,（、 、 、 ）,（、),（、 ),（、 、 、),HTML标记分类,5,结构化标记,功能：用来描述Web页面的整体结构。 Html基本结构：, 网页的标题 网页的内容 , 网页的标题 网页的内容 ,6,xx.htm,网页标题 ,HTML文件结构,7,文本标记,

3、功能：编排文本内容的布局和格式； 包含的标记： 文本布局：、 文本格式：、 color属性：可以是16种预定义标准色，也可以是6位16进制的色彩。,8,结构化标记, align：对齐方式，和常用的属性； 常用于将内容分层次，常和CSS联合使用。 列表标记：,无序列表：星期日星期一,有序列表： 星期日星期一 ,2.2格式排版1,类似于Word文档中的标题，事先定义好文字的字体、大小的一组标签，成对出现；,每行标题后会自动添加一行空白。,段落、 换行、 预格式化、 水平线、 对齐方式,设计时的排版与浏览时相同，保留代码中的回车换行和空格。,Size=“” Width=“”noshade, , ,2

4、.2格式排版2,标签,src：图像文件的路径，推荐使用相对路径，此属性值必须提供；,图像以单独的文件形式存在，设计时要保证图像的src属性正确指向图像文件。,alt：替代图像的信息文字，或鼠标停留在图上时跟随鼠标的小提示；,2.2格式排版3,以定义好三种列表方式；,无序列表,有序列表,项目1 项目2 项目3, 项目1 项目2 项目3 ,start=“整数”，设置列表的起始项属性,type=“1/i/I/a/A”，设置列表的起始项属性,项目1 项目2 项目3, 项目1 项目2 项目3 ,，空格，引号等符号在HTML语言中都有特殊意义；,一个字符实体一定由三部分组成：,HTML代码只会按照符号在H

5、TML语言中的特定意义来处理；,当在网页上不能正常显示这些符号时，可以使用字符实体（如空格用表示）；,最常用的几个字符实体,空格(),2.2格式排版4,alert(今后我们将共同学习JavaScript知识！); ,alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示参数中的字符串,在HTML文档中，JavaScript使用.来标识。,28,三、JavaScript-让网页动起来,3、JavaScript语言的组成： 基本数据类型、表达式和运算符 控制流程 函数 事件 对象,29,基本数据类型、表达式和运算符,基本数据类型：数值型、字符型、布尔型、空值。,变

6、量：用命令 var 作声明:,如：var mytest;定义了一个mytest变量，但没有赋予它的值；,var mytest = “Welcome ! ”;定义了一个mytest变量，同时赋予它字符串类型的值。,声明变量简单，不需要提前指定变量的数据类型,30,控制流程,if条件语句 for循环语句 while循环 break和continue语句,31,函数,JavaScript函数定义 function 函数名（参数列表）函数体;.return 表达式; ,函数名对大小写是敏感的。,32,事件,单击事件onClick当用户单击鼠标按钮时，产生onClick事件，同时onClick指定的事件

7、处理程序或代码将被调用执行。 通常在下列基本对象中产生： button（按钮对象） radio （单选钮） checkbox（复选框） reset（重置按钮） select（列表框） submit（提交按钮）,如 或Input type=button value=测试 onclick=alert(这是一个例子); ,在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript内部的函数，还可以直接使用JavaScript的代码等,33,事件,改变事件onChange 当text或textarea元素中输入的内容改变时发该事件，同时当在select列表项中一个选

8、项状态改变后也会引发该事件。 获得焦点事件onFocus/失去焦点事件onBlur 载入文件事件onLoad/卸载文件事件onUnload,function loadform( )alert(欢迎光临! ); ,34,可根据网页中元素的名称定位具体的元素，如网页中有一个名为“form1”的表单，可用 document.form1来定位,内部对象,String对象：字符串，掌握其常用属性和方法： Length：属性，返回字符串的长度。 Date对象：日期和时间 getFullYear( )、getMonth( )、getDate( ) 常结合window.setTimeOut(方法名( ); ,

9、 毫秒数); 使用，刷新时间。,window对象：浏览器窗口对象 该对象通常包括三个对象：document：当前HTML文档对象；location：当前地址对象； document.write( );或document.writeln( );,35,JavaScript文件,JavaScript程序可以直接嵌入在HTML中，也可以独立文件的形式出现：后缀名：.js 以“*.js”形式存在的JavaScript程序有更高的重用性，可以被多个HTML文件引用；,引用方式： 将原来写在中的JavaScript程序直接剪切出来，另存为check.js； 将原来的修改为：,36,具体应用：表单校验,form表单：, 用户名： 密码： ,验证要求： 用户没填用户名即提交：提示用户名不能为空； 用户密码小于6位：提示用户密码不能低于6位。,37,具体应用：表单校验,form表单：, function check( ) var name = document.form1.uname.value; var pwd = document.form1.upwd.value; if(name.length = 0) alert(请输入您的用户名!); document.form1.uname.focus( ); return