《第一章 网页编程基础.ppt》由会员分享，可在线阅读，更多相关《第一章 网页编程基础.ppt（36页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第一章 网页编程基础1.3 中常用标记1.2 中常用标记1.1 HTML基础1.4 JavaScript编程入门1.5 窗口中的对象和元素1.0 任务引入任务引入能力目标C#SQL ServerXMLPSPMASP.NETOracleOOADComputer BaseHTML/JavaScriptSQL BaseOOP/JavaCSTBJSP/ServletEJB/WebServiceWinFormsStruts/JSFTesting/SQALinux能力目标了解B/S结构的工作原理，企业的开发模式及开发细节掌握多层架构技术，熟练应用MVC模式熟练应用表示层技术（HTML及有效的使用JavaS
2、cript验证）熟练应用数据层技术（JDBC数据访问技术）熟练应用业务逻辑层技术（Servlet和JSP）能力目标熟练应用控制层技术（JavaBean数据装载、Filter字符过滤)通过项目练习，独立开发企业级应用的 B/S系统能力目标HTML部分 熟练掌握HTML的基本结构 熟练应用HTML标记编写Web页面JavaScript部分 掌握JavaScript的语法 会使用JavaScript的内置对象与对话框 熟练应用JavaScript事件机制并进行表单验证态度目标学习态度；主动性；理解能力。本章知识点 HTML基本结构 标记：INPUT、RADIO、SELECT、TEXTAREA、CHE
3、CKBOX、BUTTON、SUBMIT、RESET、HIDDEN JavaScript基础：将JavaScript嵌入到HTML页面、注释、变量定义、流程控制、循环、函数定义本章知识点 JavaScript内置对象：window、document、form JavaScript对话框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基本框架基本框架Sample1.1 HTML基础标记文档中含有超文本的内容html文档
5、的头部，含有初始化信息页面的标题文档体，包含页面所有的具体内容1.1 HTML基础 超级链接图片标记1.2 中常用标记 ：用于设置一些头信息。用于定义格式。用于定义脚本。1.3 中常用标记：各级标题：字体的颜色、大小：黑体：斜体：下划线：斜向上表示：斜向下表示：无序号列表：有序号列表1.3 中常用标记：定义段落：换行：分区显示：定义表格：定义行：定义列：定义表头1.3 中常用标记定义表单 文本框 密码框 多选框 单选框 隐藏项 文本域1.4 JavaScript编程入门1.4.2 JavaScript基本语法1.4.1 JavaScript简介1.4.3 JavaScript函数1.4.4 J
6、avaScript事件处理1.4.5 JavaScript的对话框1.4.1 JavaScript简介 JavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用户之间的交互性能。由Netscape公司利用Sun的Java开发。它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似，但是，它只是函数式的语言。客户端的JavaScript 必须要有浏览器的支持。1.4.1 JavaScript简介在网页中加入在网页中加入JavaScript 通过在网页中加入标记JavaScript的开始和结束，将JavaScript代码放到之间。也可以引入一个外部的Ja
7、vaScript文件，这个JavaScript文件一般以.js作为扩展名原则上，放在之间。但视情况可以放在网页的任何部分。一个页面可以有几个，不同部分的方法和变量，可以共享。1.4.2 JavaScript基本语法 JavaScript是一门弱类型的语言，所有的变量定义均以var来实现。JavaScript的变量必需先定义，再使用。JavaScript区分大小写。1.4.2 JavaScript基本语法1.JavaScript基本语法变量 变量定义：用var来定义变量。虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做（例12.htm）。2.JavaScript基本语法数组
8、数组定义：var arr=new Array(3);通过arr.length取得数组的长度。例13.htm1.4.2 JavaScript基本语法3.JavaScript基本语法运算符 算术运算 +、-、*、/（例14.htm）、=、=、=。逻辑运算 与：&或：|非：!例15.htm1.4.2 JavaScript基本语法 字符串运算符 连接运算：+（例16.htm）取子集：substring(index1,index2)（例17.htm）条件表达式 条件?A:B(例18.htm)1.4.2 JavaScript基本语法 4.JavaScript基本语法控制语句if语句 if(条件)else
9、if(条件1)else(例19.htm)while语句 while(条件)例20.htmswitch 语句 switch(i)case i1:casei2:default:(例21.htm)1.4.2 JavaScript基本语法for 例22.htmdowhile 例23.htmwhile 例24.htm1.4.3 JavaScript函数函数的定义 例：利用function来定义一个函数（例25.htm）例：传入参数（例26.htm）例：传出值（例27.htm）1.4.4 JavaScript事件处理onBlur：在select、text、password、textarea失去焦点时。on
10、Change：在select、text、textarea的值被改变且失去焦点时。onClick：出现在一个课选对象被鼠标选中时（button,checkbox,radio,link,reset,submit,text,textarea等）。onFocus：在用户为了输入而选择select、text、textarea时onLoad：出现在一个文档完成对一个窗口的载入时。1.4.4 JavaScript事件处理onMouseOver：鼠标被移动到一个超连接上时。onMouseOut：鼠标从一个超连接上移开时。onSelect：当form对象中的内容被选中时。onSubmit：出现在用户通过提交按钮
11、提交一个表格时。onUnload：当用户退出一个文档时。1.4.5 JavaScript的对话框警告框(alert)：出现一个提示信息。例28.htm询问框(prompt)：返回输入的值。例29.htm确认框(confirm)：根据不同的选择，返回true/false。例30.htm1.5 窗口中的对象和元素window 当前窗口 新开窗口（例b1.htm）通过本地窗口控制新开窗口（例b2.htm）location 获取或设置现有文档的URL（例b3.htm /例b4.htm /例b5.htm）1.5 窗口中的对象和元素history 先前访问过的URL的历史列表（例b5.htm/例b6.ht
12、m）常用方法：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客户端验证实训作业实训作业