笔记

83 阅读5分钟
**发送Ajax请求的五个步骤:**

1.创建异步对象。即XMLHttpRequest对象。

2.使用open方法设置请求的参数。Open(method,URL,async);get/post等|资源定位标识符|是否否异步。也就是Ajax中的“A”。

3.发送请求。**Send()     **

4.注册事件。onreadystatechange( )

5.获取返回的数据

**在客户端JavaScript中Windows对象是全局对象。它的属性和方法也是全局变量和全局函数。Window对象有一个引用自身的属性叫做window。窗口对象就是window**

       Window对象的属性:window/location/document/事件处理属性onclick()

Window对象的方法: setTimeout(function(){},ms);/alert( );/onload( )

Document对象可以被Window对象的document属性引用。

         Document对象表示显示在Window(窗口)文档。

         Document对象的属性:事件处理属性on

         Document对象的方法:getElementById( )/getElementsByClassName( )

Element对象可以被Document对象使用它的一些诸如getElementById( )方法返回调用。

          Element对象的属性:firstChild/style/className/事件处理属性on--

           Element对象的方法:appendChild() .....

Node对象:

**             Document对象,Element对象,Text对象都是Node对象。**

**             Node对象的属性:**_ parent  :父节点/   ChildNodes  :子节点类数组对象 /_

_firstChild , lastChild  :节点的子节点中的第一个和最后一个/    __ nodeValue :Text节点或Comment节点的文本内容/nodeName:元素的标签名/ _nodeType :节点类型 9 是Document节点 1是Elenment节点 3 是Text节点 8 是Comment节点

11是DocumentFragment节点/

JavaScript程序可以通过Documen对象和它包含的Element对象遍历和管理文档内容。

          它可以通过操纵CSS样式和类,修改文档内容的呈现。

         可以通过注册事件处理程序来定义文档元素的行为。

**浏览器是一个简易的操作系统。**

         多标签和操做系统的多任务相比。

           Web浏览器定义了底层网络API,保存数据,和绘制图像。

Web应用是用JavaScript访问更多浏览器提供的高级服务(网络,图像和数据存储)的应用程序。

             浏览器高级服务:XMLHttpRequest对象,可以对HTTP请求编程来启用网络。这样的应用叫Ajax应用。

HTML5标准和相关标准为Web应用定义了很多其他重要的API。

              数据存储和图像API。

              地理位置信息API。

             历史管理和后台线程API

Web文档和Web应用的区别:

              设计良好的Web文档,在禁用JavaScript后还能继续工作,这一特性叫平稳增强,渐进退化。Web应用本质上是JavaScript程序,禁用JavaScript后,必定不能正常工作,完成使用Web浏览器提供的操作系统类型的服务。

HTML嵌入JavaScript的方式:

             内联脚本:放在HTML的Script标签对之间。

              外联脚本:放置在Script标签的src属性指定的外部文件中

               内嵌脚本:放置在HTML属性中

**编程哲学(Unobtrusive JavaScript)**:尽量使用外联脚本,实现内容和行为的分离。

MVC

                是一种软件架构设计模式

                 Model处理所有的数据存储的增删查改操作,

                ** View**处理所有的表现上的事情,用户能看见可以理解为View.
                **  Controller**负责处理告诉Model和View去完成的各种操作。接受View的输入,处理View发送的请求,从Model得到数据。传送数据View.

www.youtube.com/watch?v=pCv… What Is MVC? Simple ExplanationTraversy Media

Script标签SRC属性的一些优点:

                   内容和行为分离,简化HTML文档。

                   一份JS代码,只需下载一次,管理多个Web页面。

                   SRC属性值为:URL,因此可以来自Web上的其他服务器的JS程序。互联网广告可以依赖于此。

**当脚本所在的HTML文件被载入浏览器时,这个脚本的JavaScript代码只会执行一次。**

                 为了可交互,JavaScript程序必须定义事件处理程序。

                 事件处理程序是一种Web浏览器先注册JavaScript函数,并在之后调用它作为事件的响应的程序。

JavaScript程序可以通过把函数赋值给Element对象的属性来注册事件处理程序

                     Element对象的用于处理事件处理程序的s属性                   onclick,/onmouseover,/onchange

事件都有名字,用来指示事件的通用类型:

**                          click / change/load/mouseover /keypress/readystatechange**

**  兼容性和互用性**

**              _   Web文档和应用会在不同操作系统的不同的浏览器上运行       _**

                  演化:标准和标准的实现。1._可以由标准规范会制定标准,浏览器实现标准,Web开发者使用实现的标准。2.浏览器开发出一种标准的实现,Web开发者使用这种实现,使其成为一个标准。_我们需要处理老旧浏览器中不支持的标准和新式浏览器支持的标准的兼容性问题。

                    未实现:_IE8不支持元素,微软不实现Dom Level 2 Event标准它使用的是attachEvent( )而不是addEventListener(  ) _

ES5: ES5和ES3之间的兼容性问题

                 **处理兼容性:**引入处理兼容性的类库   excanvas.js    Jquery.js

                                           Jqurey使用bind( )绑定事件处理程序,不存在一些Dom level 2 Event标准未实现的兼容性问题

CSS属性

   position   /    top , left  /     bottom ,right   /   width   height   /z-index   /

display/  visibility  /  clip  /  overflow   /   background  / opacity   /

                position: static   /   absolute    /   fixed    /  relative  /

** 事件类型:**

              事件标准: DOM Level 3 Events事件

      HTML5规范新事件标准

    移动端的触摸事件标准

                ** 事件分类:            事件和输入设备有关:**鼠标键盘触摸屏    : mouse   key                                                           touch 类事件

独立于设备的事件: click事件

                                              ** 用户界面事件**:focus  事件   change事件     submit事件

                                              **状态变化事件:**onload 事件   readystatechange事件