04_web编程技术

嵌入式系统工程师2Web编程技术3大纲概述Web监控项目HTMLJSAJAXCGI4大纲概述Web历史回顾Web技术简介Web监控项目HTMLJSAJAXCGI5Web的历史回顾(WorldWideWeb)起源TimBerners-Lee欧洲原子能研究中心（CERN）MosaicW3C6Web技术简介的特点平台无关分布性动态性交互性C/S模式B/S模式客户/服务器模式胖客户/瘦服务器QQ、飞信浏览器/服务器模式瘦客户/胖服务器浏览器就可完成操作WebQQ7Web技术简介8Web技术简介常见的Web编程技术Web前端开发技术HTML、CSS、XML、Javascript、AjaxWeb服务器端开发技术CGI、ASP、PHP数据管理Oracle、MySQL、SQLServer、SQLiteHTML静态网页JSPPHPASP动态脚本AJAX异步局部刷新9大纲概述Web监控项目HTMLJSAJAXCGI10Web监控项目项目模型及架构：RJ45WiFi嵌入式WebServer串口GPRS模组B/S架构实现对LED(GPIO)和GPRS模组（UART）监控IOLED11Web监控项目12Web监控项目软件层次：BOAHTMLJS(AJAX)CGI用户应用程序文件系统Linux内核引导加载程序（bootbootloader）13Web监控项目功能展示：14大纲概述Web监控项目HTMLJSAJAXCGI15HTML概述什么是HTML?超文本标记语言(HyperTextMarkupLanguage)使用标记标签描述网页：通过各种成对标签标识文档的结构以及超链接的信息，如html/html、body/bodyHTML文档=网页:一种纯文本文件，扩展名为.htm或.html最终显示结果取决于Web浏览器的显示风格及其对标记的解释能力编辑工具：记事本，写字板、FrontPage、Dreamweaver等16HTML概述HTML标签由尖括号包围的关键词，比如html通常是成对(开始标签，结束标签)出现的比如b/b,例外:br、img、!doctype…注释标签:!--注释--、comment注释/commentHTML元素开始标签（starttag）到结束标签（endtag）的所有代码。HTML属性在HTML元素的开始标签中规定以名称/值对的形式出现，比如：name=value。17HTML标签开启我的html之旅head…/headbody…/body我是一个html，分为头部和主体两大部分Htmldemo118HTML标签HTML头部标签head/head标题标记title/title声明网页标题，指示网页作用默认为网页另存为后的网页文件名字默认为收藏此网页时的收藏夹中的名字元信息标记meta提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词用法：meta属性=值content=值例如：metaname=“keywords”content=“html”Htmldemo219HTML标签HTML主体标记是body/body放置页面中所有的内容，如文字、链接、图片、表格、表单等文字标签：标题标签：h1-h6链接标签：a图片标签：img表格标签：tablethtrtd表单标签：formHtmldemo320HTML标签表单formHTML页面与服务器交互的手段属性：name：表单的名称method：表单数据从浏览器传输到服务器的方法get：将表单数据附加在URL地址后面，长度不超过8192个字符,不具有保密性，默认为getpost：将表单数据包含在表单的主体中，一起传输到服务器上。没有长度限制,密文传输action：用来定义表单处理程序21HTML标签form标记内的标记input表单输入标记select菜单和列表标记option菜单和列表项目标记textarea文字域标记22HTML标签输入标记input常用的文本域、按钮都是使用这个标记属性：name域名称type域类型type属性值：text文字域password密码域file文件域checkbox复选框radio单选框button普通按钮submit提交按钮reset重置按钮hidden隐藏域image图像域23HTML标签菜单和列表标记select,option表单中的对象主要是为了节省网页的空间而产生的属性：name菜单和列表的属性size显示的选项数目multiple列表中的选项为多项value选项值selected默认选项24HTML标签文字域标记textarea这标记用来制作多行文字域，可以在其中输入更多的文本属性：name文字域的名称rows文字域的行数cols文字域的列数25HTML高级更炫的HTML充分利用HTML标签的属性学习HTML布局表格布局框架布局使用CSS美化HTML标签元素使用HTML事件事件触发浏览器中的行为，例如：当用户点击某个HTML元素时启动一段JavaScript。HTMLDOMHtmldemo4Htmldemo5Html_demo6Html_demo726大纲概述Web监控项目HTMLJSAJAXCGI27JS概述JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言由浏览器内解释器翻译成可执行格式后执行在概念和设计方面，Java和JavaScript是两种完全不同的语言JavaScript的五个特点：基于对象的语言简单性安全性动态性跨平台性28JS概述网页使用脚本的三种方式：直接添加脚本inputtype=buttononclick=‚javascript:alert(‘欢迎’);‛value=‚点击JS_demo1使用script标记插入脚本scriptlanguage=‚JavaScript‛type=‚text/javascript‛//在这里编写JavaScript代码/scriptJS_demo2链接脚本文件scripttype=‚text/javascript‛src=‚文件名.js‛/scriptJS_demo329JS语法JavaScript支持两种类型的注释：行注释——在行末//块注释——可以跨越多行/**/分号是语句的结束符号大小写JavaScript是大小写敏感的，这意味着大写字母同相应有小写字母是不同的JavaScript的保留关键字是小写的30JS语法JavaScript保留关键字(全部用小写)breakcasecatchcontinuedebuggerdefaultdeletedoelsefalsefinallyforfunctionifinInstanceofnewnullreturnswitchthisthrowtruetrytypeofvarvoidwhilewith31JS语法变量、数据类型和表达式变量的声明使用var关键字进行变量的声明：varx;在声明的时候可以同时对变量进行初始化：vary=4;使用逗号将多个变量隔开：varx,y=5,z='hello';变量的命名第一个字符是ASCII字母（大小写皆可），或者是下划线。但是不可以是数字变量必须由字母、数字和下划线组成变量不可以是保留字变量区别大小写32JS语法算术运算符+、－、*、/、++、－－逻辑运算符&&或AND（逻辑与）、║或OR（逻辑或）、！或NOT（逻辑非）比较运算符==、、、＝、＝位运算符&或AND(按位与)、∣或OR（按位或）、^（按位异或）（左移）、（右移）、（补零右移）33Javascript编程基础字符串运算符：+(合并运算符)赋值运算符：=（等号）、+＝、-=、!=、=、=表达式：没有等号的式子算术表达式：a+b+c逻辑表达式：a==b、a=b字符串表达式：a+’abcd’条件运算符：？：（条件？结果1：结果2）34JS控制语句JavaScript控制语句if语句if(条件表达式){执行语句或语句群;}else{执行语句或语句群;}35JS控制语句switch语句switch(表达式){case值1:执行语句1;break;case值n:执行语句n;break;}for语句for(初始值；判断条件；调整值)执行语句或语句群;while语句while(条件表达式){执行语句;}Dowhile语句do{执行语句;}while(条件表达式)36JS函数JavaScript函数函数的语法结构:function函数名(参数1,参数2,…){函数体}函数参数不是函数的必选内容在调用一个需要参数的函数时没有传递参数，JavaScript使用空值代替37JS对象JS是面向对象的编程语言(OOP)对象是一种特殊的数据类型，拥有属性和方法属性：属性指与对象有关的值方法：方法指对象可以执行的行为JavaScript中的常用对象文本对象:Document（HTMLDOM）内部对象:Date、Math、Array38JS对象Document对象提供了从JS脚本中对HTML页面中的所有元素进行访问可以通过title，URL属性获取当前文档的标题，URL信息等可以通过getElementById(),来根据对应的ID号控制文档的某个标签元素可以通过open,close,write方法实现对文档的打开，关闭及对应的写操作等JS_demo439JS对象Date对象提供了操作时间和日期的方法拥有一系列属性和方法，可以用来表示任意的日期和时间，获取系统当前时间或者获取两个时间的间隔。从1970年1月1日00:00:00.000GMT开始计时的，并且以毫秒为单位。GMT是格林威治标准时间40Javascript编程基础Date对象方法getDay()：返回星期中的某一天，0～6,0表示周六getDate()：返回一月中的某一天getFullYear()：返回当前年份getMonth()：返回当前月份，0～11getHours()：返回当前时间的小时，0～23getMinutes()：返回当前时间的分钟，0～59getSeconds()：返回当前时间的秒，0～59JS_demo541JS对象Math对象执行常见的算数任务Math对象提供多种算数值类型和函数，无需在使用这个对象之前对它进行定义42JS对象其他对象43JS全局对象函数JS_demo644大纲概述Web监控项目HTMLJSAJAXCGI45AJAX概述AJAX核心是XMLHttpRequest对象通过JavaScript的XMLHttpRequest对象完成发送请求到服务器并返回结果的任务，然后使用JavaScript更新局部的网页具有异步特性46AJAX原理47XMLHttpRequest根据不同的浏览器创建异步请求对象functiongetXMLHttpRequest(){varxmlRequest=null;if(window.ActiveXObject){xmlRequest=newActiveXObject(Microsoft.XMLHTTP);}elseif(window.XMLHttpRequest){xmlRequest=newXMLHttpRequest();}returnxmlRequest;}48XmlHttpRequest标准XMLHttpRequest属性属性描述onreadystatechange每个状态改