1、第一章 网页编程基础,1.3 中常用标记,1.2 中常用标记,1.1 HTML基础,1.4 JavaScript编程入门,1.5 窗口中的对象和元素,1.0 任务引入,能力目标,C#,SQL Server,XML,PSPM,ASP.NET,Oracle,OOAD,Computer Base,HTML/JavaScript,SQL Base,OOP/Java,C,STB,JSP/Servlet,EJB/WebService,WinForms,Struts/JSF,Testing/SQA,Linux,能力目标,了解B/S结构的工作原理，企业的开发模式及开发细节 掌握多层架构技术，熟练应用MVC模式
2、 熟练应用表示层技术（HTML及有效的使用JavaScript验证） 熟练应用数据层技术（JDBC数据访问技术） 熟练应用业务逻辑层技术（Servlet和JSP）,能力目标,熟练应用控制层技术（JavaBean数据装载、Filter字符过滤) 通过项目练习，独立开发企业级应用的 B/S系统,能力目标,HTML部分熟练掌握HTML的基本结构熟练应用HTML标记编写Web页面 JavaScript部分掌握JavaScript的语法会使用JavaScript的内置对象与对话框熟练应用JavaScript事件机制并进行表单验证,态度目标,学习态度； 主动性； 理解能力。,本章知识点,HTML基本结构
3、标记：INPUT、RADIO、SELECT、TEXTAREA、CHECKBOX、BUTTON、SUBMIT、RESET、HIDDENJavaScript基础：将JavaScript嵌入到HTML页面、注释、变量定义、流程控制、循环、函数定义,本章知识点,JavaScript内置对象：window、document、formJavaScript对话框alert、confirm、prompt事件处理：onLoad、onFocus、onBlur、onclick、onChange、onSelect、onSubmit表单验证,任务引入,美国Loucs公司希望开发一套客户投保系统，由客户自行在系统中选择投
4、保内容，为方便各地客户操作，系统应采用网络方式进行，并且为了给客户留下良好的印象，要求界面干净整洁，并且对于客户的操作有良好的验证性，以解决公司员工的工作量。本章节的HTML界面设计及JavaScript验证内容可以很好的解决上述问题。,1.1 HTML基础,HTTP-HyperText Transfer Protocol：超文本传输协议 HTML-HyperText Markup Language：超文本标记语言 FTP-File Transfer Protocol：文件传输协议 URL-Uniform Resource Locators：统一资源定位器,1.1 HTML基础,HTML基本框
5、架Sample,1.1 HTML基础, 标记文档中含有超文本的内容 html文档的头部，含有初始化信息 页面的标题 文档体，包含页面所有的具体内容 ,1.1 HTML基础, 超级链接图片标记,1.2 中常用标记,：用于设置一些头信息。用于定义格式。用于定义脚本。,1.3 中常用标记,：各级标题 ：字体的颜色、大小 ：黑体 ：斜体 ：下划线 ：斜向上表示 ：斜向下表示 ：无序号列表 ：有序号列表,1.3 中常用标记,：定义段落 ：换行 ：分区显示：定义表格 ：定义行 ：定义列 ：定义表头,1.3 中常用标记,定义表单文本框密码框多选框单选框隐藏项 文本域,1.4 JavaScript编程入门,1
6、.4.2 JavaScript基本语法,1.4.1 JavaScript简介,1.4.3 JavaScript函数,1.4.4 JavaScript事件处理,1.4.5 JavaScript的对话框,1.4.1 JavaScript简介,JavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用户之间的交互性能。由Netscape公司利用Sun的Java开发。它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似，但是，它只是函数式的语言。客户端的JavaScript 必须要有浏览器的支持。,1.4.1 JavaScript简介,在网页中加入JavaS
7、cript通过在网页中加入标记JavaScript的开始和结束，将JavaScript代码放到之间。也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名 原则上，放在之间。但视情况可以放在网页的任何部分。一个页面可以有几个 ，不同部分的方法和变量，可以共享。,1.4.2 JavaScript基本语法,JavaScript是一门弱类型的语言，所有的变量定义均以var来实现。JavaScript的变量必需先定义，再使用。JavaScript区分大小写。,1.4.2 JavaScript基本语法,1.JavaScript基本语法变量变量定义：用var来定义
8、变量。虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做（例12.htm）。 2.JavaScript基本语法数组数组定义：var arr = new Array(3);通过arr.length取得数组的长度。例13.htm,1.4.2 JavaScript基本语法,3. JavaScript基本语法运算符算术运算+、-、*、/（例14.htm）、=、=、=。逻辑运算与：&或：|非：!例15.htm,1.4.2 JavaScript基本语法,字符串运算符连接运算：+ （例16.htm）取子集：substring(index1,index2)（例17.htm）条件表达式条件?A
9、:B(例18.htm),1.4.2 JavaScript基本语法,4. JavaScript基本语法控制语句 if语句if(条件) else if(条件1) else(例19.htm) while语句while(条件)例20.htm switch 语句switch(i) case i1: casei2: default: (例21.htm),1.4.2 JavaScript基本语法,for例22.htm dowhile例23.htm while例24.htm,1.4.3 JavaScript函数,函数的定义例：利用function来定义一个函数（例25.htm）例：传入参数（例26.htm）例
10、：传出值（例27.htm）,1.4.4 JavaScript事件处理,onBlur：在select、text、password、textarea失去焦点时。onChange：在select、text、textarea的值被改变且失去焦点时。 onClick：出现在一个课选对象被鼠标选中时（button,checkbox,radio,link,reset,submit,text,textarea等）。 onFocus：在用户为了输入而选择select、text、textarea时onLoad：出现在一个文档完成对一个窗口的载入时。,1.4.4 JavaScript事件处理,onMouseOver
11、：鼠标被移动到一个超连接上时。 onMouseOut：鼠标从一个超连接上移开时。 onSelect：当form对象中的内容被选中时。 onSubmit：出现在用户通过提交按钮提交一个表格时。 onUnload：当用户退出一个文档时。,1.4.5 JavaScript的对话框,警告框(alert)：出现一个提示信息。 例28.htm 询问框(prompt)：返回输入的值。 例29.htm 确认框(confirm)：根据不同的选择，返回true/false。 例30.htm,1.5 窗口中的对象和元素,window当前窗口新开窗口（例b1.htm）通过本地窗口控制新开窗口（例b2.htm） loc
12、ation获取或设置现有文档的URL（例b3.htm /例b4.htm / 例b5.htm ）,1.5 窗口中的对象和元素,history先前访问过的URL的历史列表（例b5.htm/例b6.htm）常用方法：back()，go(number) document当前的文档对象document.write()document.formName(),HTML基本结构 标记：INPUT、RADIO、SELECT、TEXTAREA、CHECKBOX、BUTTON、SUBMIT、RESET、HIDDEN 将JavaScript嵌入到HTML页面、注释、变量定义、流程控制、循环、函数定义 JavaScript内置对象及DOM结构 JavaScript 对话框alert、confirm、prompt,本章小结,JavaScript事件处理：onLoad、onFocus、onBlur、onclick、onChange、onSelect、onSubmit表单验证,本章小结,设计：在线报名页面制作及验证 要求：使用HTML与CSS样式单完成在线报名页面的设计（见后图）对必要的项目进行完整的JavaScript客户端验证,实训作业,实训作业,
