web开发入门学习.ppt

Web开发基础知识 研发一部 周环 前端开发 什么是前端开发主要职责是与交互设计师 视觉设计师协作 根据设计图用HTML和CSS完成页面制作 同时 在此基础之上 对完成的页面进行维护和对网站前端性能做相应的优化 需要使用JavaScript或者ActionScript来编写和封装具有良好性能的前端交互组件 浏览器介绍 IE firefox chromeHtml介绍 HTML标签 DOM BOMCss介绍 简单样式应用与定义 ID选择器与class选择器 Javascript介绍 常用DOM操作调试工具介绍 firebugIEDeveloper 浏览器介绍 IE系浏览器 IE6 7 8 360浏览器 国内大部分浏览器渲染引擎 Tridentjs引擎 Chakra ie9 MozillaFirefox firefox渲染引擎 Gecko引擎js引擎 TraceMonkey引擎webkit chrome safari渲染引擎 webkitjs引擎 V8Opera Opera未知 html介绍 HTML标签 标签性语言 DOM HTMLDocumentObjectModel 文档对象模型 BOM 浏览器对象模型 BrowserObjectModel HTML标签 标题我是段落 HTML注意事项 嵌套的HTML元素不要忘记结束标签空的HTML元素使用小写标签始终属性值加引号块元素与内联元素块元素 pdivh1formulollitable等内联元素 aspanimginputselect等 DOM文档对象模型 DOM是这样规定的 整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每一个HTML属性是一个属性节点注释属于注释节点 HTMLDOM结构图 BOM 浏览器对象模型 弹出新浏览器窗口的能力 移动 关闭和更改浏览器窗口大小的能力 可提供WEB浏览器详细信息的导航对象 可提供浏览器载入页面详细信息的本地对象 可提供用户屏幕分辨率详细信息的屏幕对象 支持Cookies BOM操作 window open window screen width window navigator userAgentwindow location hrefwindow navigator screen document cookie Css介绍 CSS是英语CascadingStyleSheets 层叠样式表单 的缩写 它是一种用来表现HTML或XML等文件式样的计算机语言 是为了解决内容与表现分离的问题css使用依赖HTML或XML red background f00 Css语法 selector property value id与class选择器 id选择器 css定义以 开始 限HTMLid属性使用单一使用 dockbar height 10px class选择器 css定义以 开始 限HTMLclass属性使用 支持重复使用 menu height 10px 公开页面私有页面 Css定义方式 多重声明p text align center color red 值的不同写法和单位p width 100 height 100 p width 100px height 100px 选择器的分组h1 h2 h3 h4 h5 h6 color green JavaScript Javascript的出现使得网页和用户之间实现了一种实时性的 动态的 交互性的关系 使网页包含更多活跃的元素和更加精彩的内容 增强人机交互 改善用户体验 JavascriptDOM操作 获取DOM getElementById getElementsByTagNamedocument getElementById username document getElementsByTagName input 创建DOM createElement createTextNodevarinput document createElement input input id username input name user 插入DOM appendChild insertBeforedocument body appendChild input 删除DOM removeChilddocument body removeChild input 层级DOM parentNode childNodes firstChild Javascript注意事项 window myValue aa age 0 job developer document all dockbar value window open Javascript技巧与优化 局部变量的访问速度要比全局变量的访问速度更快 因为全局变量其实是window对象的成员 而局部变量是放在函数的栈里的varage 0 job developer 预设默认值 varage this get age 0 减少DOM操作新增与删除 隐藏与显示 延时删除 代替 判断对象是否存在 vardock A one dock dock Ajax技术 对于InternetExplorer浏览器 xmlhttp request newActiveXObject Msxml2 XMLHTTP 3 0 3 0或4 0 5 0对于Mozilla Netscape Safari等浏览器 创建XMLHttpRequest方法如下 xmlhttp request newXMLHttpRequest 需要发送Http请求 web服务支持 常用的AJAX数据格式json 名称 值对 first Brett xml 标签形式Bretttxt 字符串 first Brett 浏览器调试工具介绍 IE调试工具 IeDeveloperInner htmljscsshttptimelineIEhttpWacth httprequestFF调试工具 Firebug htmljscsshttptimelinechrome调试工具 webkitInner htmlj