《BTC-CS-HTML-01-第1章-Web客户端编程技术概述.pptx》由会员分享，可在线阅读，更多相关《BTC-CS-HTML-01-第1章-Web客户端编程技术概述.pptx（27页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Inspur Education 第第1 1章章 WebWeb客户端编程技术概述客户端编程技术概述Inspur Education 本章目标本章目标u了解了解WebWeb相关基础知识相关基础知识u了解了解有哪些有哪些WEBWEB客户端编程技术客户端编程技术u了解了解浏览器工具浏览器工具u掌握掌握WEBWEB客户端开发工具客户端开发工具2Inspur Education WebWeb概述概述uWebWeb概念概念uWebWeb项目项目3Inspur Education WebWeb概念概念uWebWeb（World Wide WebWorld Wide Web）即全球广域网，也称为万维网，）即全
2、球广域网，也称为万维网，它是一种基于超文本和它是一种基于超文本和HTTPHTTP的、全球性的、动态交互的、的、全球性的、动态交互的、跨平台的分布式图形信息系统跨平台的分布式图形信息系统。u是是建立在建立在InternetInternet上的一种网络服务，为浏览者在上的一种网络服务，为浏览者在InternetInternet上查找和浏览信息提供了图形化的、易于访问上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将的直观界面，其中的文档及超级链接将InternetInternet上的信上的信息节点组织成一个互为关联的网状结构息节点组织成一个互为关联的网状结构。uWebWeb
3、的本意是蜘蛛网和网，在网页设计中称为网页。的本意是蜘蛛网和网，在网页设计中称为网页。u一句话概括：一句话概括：WebWeb是一个分布式图形信息系统，它将大是一个分布式图形信息系统，它将大量的信息分布在万维网上，为我们提供更多的多媒体网量的信息分布在万维网上，为我们提供更多的多媒体网络信息服务。络信息服务。4Inspur Education Web Web项目项目uWebWeb项目也可以称之为项目也可以称之为WebWeb工程或者工程或者WebWeb应用程序应用程序。uWebWeb项目是一种可以通过项目是一种可以通过WebWeb访问的应用程序访问的应用程序。uWebWeb项目的一个最大好处就是用户
4、很容易访问，用户只项目的一个最大好处就是用户很容易访问，用户只要有浏览器即可，不需要再安装其他软件。要有浏览器即可，不需要再安装其他软件。5Inspur Education WebWeb项目项目的组成的组成uWebWeb项目由两大部分组项目由两大部分组成成,分别分别是是WebWeb客户端和客户端和WebWeb服务器服务器端端。uWebWeb客户端作用是用来组织和显示来自于客户端作用是用来组织和显示来自于WebWeb服务器端的服务器端的信息，以及接受用户从界面上输入的信息并传递到信息，以及接受用户从界面上输入的信息并传递到WebWeb服务器服务器端。端。uWebWeb服务器端作用是进行业务逻辑的
5、处理和数据存储，服务器端作用是进行业务逻辑的处理和数据存储，并把处理后的结果反馈到并把处理后的结果反馈到WebWeb客户端，供用户使用。客户端，供用户使用。6Inspur Education WebWeb客户端概述客户端概述uWebWeb客户端客户端概念概念uWebWeb客户端编程技术客户端编程技术7Inspur Education WebWeb客户端概念客户端概念uWebWeb客户端是指基于客户端是指基于WebWeb的，现在一般是指动态页面技术的，现在一般是指动态页面技术的客户端软件。也就是我们通常说的在浏览器端运行的的客户端软件。也就是我们通常说的在浏览器端运行的网页程序网页程序。u优点：
6、优点：l降低了应用软件部署的难度，减少了更新操作。l现在的动态页面技术基本上可以实现所有的传统C/S客户端的功能。u缺点：缺点：l交互性和响应速度仍然不如传统C/S客户端那么友好。8Inspur Education WebWeb客户端编程技术客户端编程技术uHTMLHTML英语全称是英语全称是HyperText Markup Language,HyperText Markup Language,中文全称中文全称是超文本标记语言，作用是浏览器端组织和显示网页信是超文本标记语言，作用是浏览器端组织和显示网页信息（文本、图片、视频等息（文本、图片、视频等）。）。uCSSCSS英文全称是英文全称是Ca
7、scading Style SheetsCascading Style Sheets，中文全称是，中文全称是层叠样式表，作用是格式化网页的层叠样式表，作用是格式化网页的样式。样式。uJavaScriptJavaScript是客户端脚本语言，使网页与用户之间产生是客户端脚本语言，使网页与用户之间产生动态交互效果，属于网页的行为层动态交互效果，属于网页的行为层9Inspur Education WebWeb客户端编程技术客户端编程技术uWeb1.0Web1.0到到Web2.0Web2.0，再到现在的，再到现在的Web3.0,Web3.0,WebWeb前端的编程前端的编程技术发展成为基于技术发展成为
8、基于浏览器端的浏览器端的webAppwebApp应用，以浏览器为应用，以浏览器为载体，去实现类似桌面软件那样的用户体验效果载体，去实现类似桌面软件那样的用户体验效果。uWebWeb前端框架前端框架技术技术l“框架”是指一套包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，目标是使开发人员把重点放在任务项目所特有的方面，避免重复开发。10Inspur Education WebWeb客户端编程技术客户端编程技术u框架技术优点：框架技术优点：l效率：降低开发成本和周期。l社区：各大框架都有一个很大的社区，便于解决遇到的问题。l标准：只要遵循框架的标准，让团队合作更容易。l体验：
9、可以更好的开发出跟原生一样的应用。l工程化：可维护性和工程性有更大提升。11Inspur Education WebWeb前端框架前端框架ujQuery.jsjQuery.js是一个快速、简洁的是一个快速、简洁的JavaScriptJavaScript框架，是继框架，是继PrototypePrototype之后又一个优秀的之后又一个优秀的JavaScriptJavaScript代码库代码库,由由JohnJohn开发，开发，20062006年年1 1月正式发布月正式发布。u特点特点l快速获取文档元素l提供漂亮的页面动态效果l创建AJAX无刷新网页l提供对JavaScript语言的增强l增强的事件
10、处理l可以更改网页内容12Inspur Education WebWeb前端框架前端框架uAngularJSAngularJS由由GoogleGoogle开发，开发，20092009年首次发布年首次发布。u特点特点l流行的前端框架l使用Angular.js创建第一个UI，成本很低l对于团队来说，AngularJ.js有许多很棒的工具可用l很适合创建一个快速、混合型复杂的解决方案l比起React，更合适于创建小型企业级应用l由Google负责维护基础包13Inspur Education WebWeb前端框架前端框架uEmber.jsEmber.js是一个是一个JavaScriptJavaScr
11、ipt框架，由框架，由Yehuada katzYehuada katz开发，开发，20112011年发布年发布。u特点特点l很活跃的社区l持续开发特性l很简单，很易于学习l稳定的性能l具有自主配置能力l两种数据绑定方式l加载和运行都很快14Inspur Education WebWeb前端框架前端框架uAurelia.jsAurelia.js由由Rob Eisenberg Rob Eisenberg 开发，开发，20152015年年1 1月发布月发布。u特点特点l整洁的文档l结构合理（组成Aurelia.js模块既可以用于构建完整的框架也可单独使用）l具有两种能够和用户界面自动同步模块的数据绑
12、定方式l高度易测的代码l各种各样额外的工具可用l可以得到开发者的商业支持15Inspur Education WebWeb前端框架前端框架uMeteor.jsMeteor.js由由MeteorMeteor团队发开，团队发开，20122012年发布年发布。u特点特点l很快速l很适合小型响应式应用l是一个全栈框架l能够在浏览器上根据数据的刷新进行实时渲染l能够与Apache Coredova集成l能得到很好的支持16Inspur Education WebWeb前端框架前端框架uPolymer.jsPolymer.js由由GoogleGoogle开发，开发，20132013年发布年发布。u特点特点
13、l很快速l可以创建自定义元素l提供了模板和双向数据绑定l减小了开发者和设计者之间的跨度l很适合特性丰富的应用17Inspur Education WebWeb前端框架前端框架uVue.jsVue.js由由Evav youEvav you开发，开发，20142014年发布年发布。u特点特点l具有非常简单的APIl可选择性添加的模块l易于被开发者接纳l易于与其它库和工程集成l可以通过两种数据绑定方式更新模型和视图l适合于大型的应用18Inspur Education 浏览器浏览器u浏览器是指可以显示网页服务器或者文件系统的浏览器是指可以显示网页服务器或者文件系统的HTMLHTML文文件（标准通用标
14、记语言的一个应用）内容，并让用户与件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件，而且是最经常使用到的客户这些文件交互的一种软件，而且是最经常使用到的客户端程序端程序。u浏览器浏览器是是HTMLHTML文件（文件（HTMLHTML网页）运行的环境。网页）运行的环境。19Inspur Education 浏览器浏览器u浏览器浏览器本身支持除了本身支持除了HTMLHTML之外的广泛的格式，例如之外的广泛的格式，例如JPEGJPEG、PNGPNG、GIFGIF等图像格式，并且能够扩展支持众多的插件等图像格式，并且能够扩展支持众多的插件（plug-insplug-ins）。u许
15、多许多浏览器还支持其他的浏览器还支持其他的URLURL类型及其相应的协议，如类型及其相应的协议，如FTPFTP、GopherGopher、HTTPSHTTPS（HTTPHTTP协议的加密版本）协议的加密版本）。uHTTPHTTP内容类型和内容类型和URLURL协议规范允许网页设计者在网页中协议规范允许网页设计者在网页中嵌入图像、动画、视频、声音、流媒体等。嵌入图像、动画、视频、声音、流媒体等。20Inspur Education 浏览器浏览器u常用常用浏览器浏览器有有：lInternet ExplorerlMozilla FirefoxlGoogle ChromelSafaril百度浏览器l搜
16、狗浏览器l360浏览器lUC浏览器l21Inspur Education WebWeb客户端编程工具客户端编程工具uAdobe DreamweaverAdobe Dreamweaver，简称，简称“DW”DW”，中文名称，中文名称 梦想编梦想编织织者者“.“.uDWDW是集网页制作和管理网站于一身的所见即所得网页代是集网页制作和管理网站于一身的所见即所得网页代码编辑器码编辑器。u利用利用对对 HTMLHTML、CSSCSS、JavaScriptJavaScript等内容的支持，设计师等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。和程序员可以在几乎任何地方快速制作和进行网
17、站建设。22Inspur Education WebWeb客户端编程工具客户端编程工具u实现实现所见即所得的功能，亦有所见即所得的功能，亦有HTMLHTML编辑的功能，借助经编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态过简化的智能编码引擎，轻松地创建、编码和管理动态网站网站。u访问访问代码提示，即可快速了解代码提示，即可快速了解 HTMLHTML、CSS CSS 和其他和其他Web Web 标准标准。u使用使用视觉辅助功能减少错误并提高网站开发速度。视觉辅助功能减少错误并提高网站开发速度。23Inspur Education WebWeb客户端编程工具客户端编程工具u官官
18、网下载地址：网下载地址：lhttps:/ Adobe Dreamweaver cc Dreamweaver cc 20172017为例演示安装过程为例演示安装过程24Inspur Education WebWeb客户端编程工具客户端编程工具u以开发以开发HTMLHTML文件为例文件为例来演示来演示Adobe Adobe Dreamweaver cc Dreamweaver cc 20172017的的使用使用方法方法l新建HTML文件l编写网页显示内容l保存编写好的HTML文档l在浏览器中运行编写好的HTML文档25Inspur Education 本本章章总结总结u相关相关概念，包括概念，包括WebWeb、WebWeb客户端、客户端、WebWeb客户端编程技术、客户端编程技术、浏览器、浏览器、WebWeb客户端编程客户端编程工具。工具。u重点重点是是WebWeb客户端编程技术和客户端编程技术和WebWeb客户端编程客户端编程工具。工具。u下载下载、安装和使用、安装和使用WebWeb客户端编程工具（客户端编程工具（Adobe Adobe Dreamweaver cc 2017Dreamweaver cc 2017），并能够灵活的运用），并能够灵活的运用WebWeb客户端客户端编程工具进行网页开发和设计。编程工具进行网页开发和设计。Inspur Education 谢谢谢谢!27