144-第6讲 网络应用基础.pptVIP

2005-02-25 第6讲 网络应用基础 第6讲 网络应用基础 指挥自动化学院 沙俊星 回顾 HTTP协议的通信过程 网页上显示的多彩多姿的页面，其本质是什么？ 教学目的和重点 教学目的 掌握ASP.NET编程必要的背景知识 对浏览器端的编程有一个较全面的了解 了解静态网页的运行、开发机制 重点 HTML标记语言 CSS层叠样式表 JavaScript语言 要点 HTML CSS JavaScript HTTP协议的工作原理 HTTP协议的工作原理 服务器端 简单地针对请求应答 浏览器端 向服务器提交请求 解析HTML 渲染HTML 什么是HTML 超文本标记语言（HyperText Markup Language） 除了能够标记文本外，还能够标记图像等众多元素 演示 - Hello World！ 代码 html head titleHello World!/title /head body h1Hello World!/h1 pThis is my first page./p /body /html HTML元素 标签 属性=值内容/标签 元素之间的嵌套形成树型结构 HTML元素的嵌套 Hello World分析 常用元素 – 标题和段落 h1这是一个标题/h1 h2这是一个标题/h2 h3这是一个标题/h3 h4这是一个标题/h4 h5这是一个标题/h5 h6这是一个标题/h6 p这是一段。/p p这又是一段，br 但有一个换行。/p 常用元素 – 超链 超链 a href=/微软/a 鼠标点击触发浏览器的请求动作 图像 img src=“logo.jpg 常用元素 – 表格 常用元素 – 表单（form） 包含类似于Windows控件的各种元素（按钮、文本框、单选框、复选框…） 按钮可以触发浏览器的提交请求、执行JavaScript函数等动作 在VS.NET中创建静态页面 如果记不住标签，可以从工具箱中拖放控件，十分方便 制作一个“计算器” 演示 在VS.NET中画出界面 问题 界面风格太凌乱 单独调整很麻烦 有没有好的方法？ 要点 HTML CSS JavaScript CSS技术 层叠样式表（Cascading Style Sheet） 可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制 CSS的作用 通用性 可以轻松地控制页面的布局 更新方便 CSS的好处 CSS语法 选择器 {属性: 值} 例如： body {color: black} p { text-align: center; color: black; font-family: arial ; } 选择器组 把需要设置相同样式的选择器组合书写 减少样式重复定义 例如： p, table{ font-size: 9pt } 效果完全等效于： p { font-size: 9pt } table { font-size: 9pt } 问题 相同的标签名需要设置不同的样式，怎么办？（例如input标签） 类选择器 把相同的元素分类定义不同的样式 定义： p.red { color: Red } p.blue { color: Blue } 使用 p class=redRED/p p class=blueBLUE/p CSS属性和HTML属性的关系 在当前的网页设计上，虽然基本语法还是HTML，但样式的设定则更倾向于使用CSS来取代HTML的标签属性 演示 用CSS美化计算器界面 问题 如何让“计算器”能够计算？ 要点 HTML CSS JavaScript JavaScript语言 实现了实时的、动态的、可交互式的表达能力 特点 是一种脚本编程语言 基于对象的语言 简单性 安全性 动态性 跨平台性 组成“语言”的两大要素 语法、库 语法 – 使JavaScript能够“转起来” 库 – 使JavaScript能够操纵页面上的元素 基本数据类型 “弱类型” var a = 10; var b = 2.5; var c = “Hello”; 控制语句 与C语言一样 包含： if条件语句 for循环语句 while循环 break和continue语句 … 函数 定义 function 函数名(参数表) { 函数体; return 表达式; } 可以自定义函数 也有现成的系统函数 对象 “基于对象” 可以自定义对象 也可以使用内部对象 文档对象模型（DOM） 1998 年，W3C 发布了第一级的 DOM 规范，允许访问和操作 HTML 页面中的每一个单独的元素，所有的浏览器都支持了这个标准，可用JavaScript操作DOM Core DOM - 针对任何结构化文档的对象 XML DOM - 针对 XML