jsp html javascriptc常识.doc

补充 Web编程技术基础 河北金融学院信息管理与工程系 2.1 HTML语言 HTML语言简介 HTML是为创建网页而设计的一种标记语言。 HTML提供了一种描述文档中文本信息结构的 方法。 包含HTML内容的文件通常使用.htm或.html作 为文件扩展名。 河北金融学院信息管理与工程系 2.1 HTML语言 HTML文档基本结构 文档体 河北金融学院信息管理与工程系 2.1 HTML语言 HTML标记类型 结构性标记 描述HTML文档中文本的意图，如： 购物车 ? 常用结构性标记 ：标记HTML内容的开始和结束。 请输入你的姓名： 河北金融学院信息管理与工程系 2.1 HTML语言 表单元素： 表单输入标记。 用于在表单中提供：单行文本框、密码框、单 选按钮、复选框、普通按钮、提交按钮、重置 按钮和隐藏域等表单元素。 语法格式： 河北金融学院信息管理与工程系 用户名: 密码： 苹果 桔子 芒果 茶 咖啡 果汁 标记基本用法示例 河北金融学院信息管理与工程系 标记的显示效果 河北金融学院信息管理与工程系 2.1 HTML语言 表单元素： 下拉列表标记。 用于在表单中插入一个下拉列表。 需与标记配合使用： 标记定义了下拉列表中的每个选项。 语法格式： 河北金融学院信息管理与工程系 2.1 HTML语言 表单元素： 下拉列表选项标记。 语法格式： 河北金融学院信息管理与工程系 苹果 桔子 芒果   茶 咖啡 果汁 下拉列表代码示例 河北金融学院信息管理与工程系 2.1 HTML语言 表单元素： 多行文本框标记。 用于在表单中提供一个可输入多行文本信息的 输入框。 语法格式： 河北金融学院信息管理与工程系 请提宝贵意见： 河北金融学院信息管理与工程系 2.1 HTML语言 框架（Frame） 用于规划网页布局。 使用框架能够在一个浏览器窗口中同时显示多 个网页，每个框架内设定一个网页，各个网页 相互独立。 缺点： 网站开发人员必须管理、跟踪更多的网页； ? 难以打印整个网页。 河北金融学院信息管理与工程系 2.1 HTML语言 框架（Frame） 标记 ? ? ? 决定如何划分框架。 cols属性：表示框架按列分布； rows属性：表示框架按行分布； rows和cols的值指明了每个行/列在屏幕上所占的大 小。 河北金融学院信息管理与工程系 2.1 HTML语言 框架（Frame） 标记 用于定义每个框架中放入什么文件。 ? src属性：指定了网页的路径和文件名。 河北金融学院信息管理与工程系 2.1 HTML语言 框架（Frame） 河北金融学院信息管理与工程系 2.1 HTML语言 框架（Frame） 混合框架 河北金融学院信息管理与工程系 2.1 HTML语言 框架（Frame） 混合框架 河北金融学院信息管理与工程系 2.1 HTML语言 框架（Frame） 导航框架 导航框架内包含一个网页，网页中包含了一个超链 接列表，点击任何一个链接都会在另一个框架中显 示点击中的网页。 河北金融学院信息管理与工程系 2.1 HTML语言 框架（Frame） 导航框架 目录 项目1 项目2 项目3 河北金融学院信息管理与工程系 2.1 HTML语言 框架（Frame） 导航框架 河北金融学院信息管理与工程系 2.1 HTML语言 框架（Frame） 导航框架的导航目标 ? ? ? 新浏览器窗口： 当前框架： 父框架： 整个浏览器窗口： 河北金融学院信息管理与工程系 2.1 HTML语言 定位标记： 是一个块级元素，可以包含段落、标题、表格 等内容。 作用：设定文字、表格等元素的摆放位置。 主要属性：class、style、title、id等。 通常与CSS（样式表）结合起来使用。 河北金融学院信息管理与工程系 2.1 HTML语言 定位标记： 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript语言 是一种脚本语言 是基于对象的语言 是事件驱动的语言 是安全的语言 是平台无关的语言 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript常用对象 JavaScript为开发人员提供了一些非常有用的 常用内部对象和方法，这使得他们不需要用脚 本来实现这些功能，只需直接调用这些功能。 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript常用对象 window：最顶层的对象，它描述的是一个浏览 器窗口； screen：反映了当前用户的屏幕设置； navigator：包含了正在使用的浏览器的版本信 息； history：包含了一个数组，存放客户端访问的 URL历史信息； 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript常用对象 location：包含了关于当前 URL 的信息； document：表示含有当前文档信息的对象； Link：包含了文档中所有链接标记； Form：用于表单管理； Frame：用于框架管理。 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript常用对象 window对象 JavaScript最高层对象之一。 ? 是其它大部分对象的共同祖先，在调用其方法和属 性时，可以省略window对象的引用。 ? 使用当前窗口对象的任何方法或属性时可以省去窗 口的实例名称。 window.document.write(星期日); 或 document.write(星期日); 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript常用对象 window对象 创建window对象的实例： 遇到body、frameset或frame元素时自动建立； 由window.open()方法创建。 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript常用对象 screen对象 包含一些只读属性，用户可以通过这些属性获取当 前屏幕的设置信息。 例：height = screen.availHeight; 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript常用对象 navigator对象 由JavaScript运行时引擎自动创建的。 ? 可以让开发人员判断用户使用的浏览器的版本，浏 览器能够处理的MIME类型以及浏览器上安装的插件 种类等内容。 ? navigator对象的所有属性值都是只读的，不能修改 其内容。 例：var browser=navigator.appName 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript常用对象 document对象 包含了当前文档的信息，并且提供了将HTML输出 给用户的功能。 ? 对于任何一个包含标记的HTML文档都会创 建一个document对象。 ? 每一个window对象都包含一个document属性，它 的值就是一个document对象。 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript常用对象 document对象 创建document对象 使用标记的标准HTML语法，并在标记中包含 JavaScript的事件处理句柄。 例：document.write(Browser name: +navigator.appName); 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript中的表单与事件处理 处理表单中的多个同名元素 系统自动创建一个数组。 ? 数组中的每一个元素代表了表单中的相应元素，数 组下标从0开始。 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript中的表单与事件处理 处理表单中的多个同名元素 例： 用户名1： 用户名2： 用户名3： 用户名n： for (i=0;i4;i+) document.accountBean.usernamei.value=j2ee+i; 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript中的表单与事件处理 包含多个表单的网页 使用表单数组forms来实现对不同表单的访问； ? forms0表示第一个表单，forms1表示第二个表单， 依此类推。 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript中的表单与事件处理 常用表单事件：onSubmit，在提交表单时被触 发。 河北金融学院信息管理与工程系 请输入你的用户名和密码 用户名： 密码： 河北金融学院信息管理与工程系 运行结果 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript中的表单与事件处理 按下页面中不同按钮时，向不同的服务器或一 个服务器上的不同程序提交同一个表单数据。 例： 解决方法：借助JavaScript来动态设置表单的action属性 河北金融学院信息管理与工程系 用户名： 密码： 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript中的窗口管理 在窗口中弹出确认信息 function confirmOrder() if (confirm(您确定要生成该订单吗？) order(); 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript中的窗口管理 在窗口中弹出输入对话框 n = prompt(请输入您要购买的数量:, 0); 河北金融学院信息管理与工程系 2.2 客户端脚本语言 JavaScript中的窗口管理 打开包含菜单栏的新窗口 function wind