chapter 8 BOM(浏览器对象模型)

window对象

  表示浏览器的一个实例。

  

  直接在window对象上定义的属性可以通过delete操作符删除,而全局变量不可以。

窗口关系及框架

位置操作

    setTimeout(function(){
// location.replace("http://www.baidu.com/"); //该方式跳转,无法"后退"到跳转前的页面;
// window.location="http://www.baidu.com";
// window.href="http://www.baidu.com";
location.assign("http://www.baidu.com");
},1000); //一秒后执行;

页面重新加载:

  location.reload();  //重新加载(优先从缓存加载)

  locaiton.reload(true); //重新加载(从服务器重新加载)

navigator 对象

chapter 10 DOM (文档对象类型)

chapter 11 DOM扩展

自定义数据属性

  

var div = document.getElementById("myDiv");
var appId=div.dataset.appId;
var myName=div.dataset.myname;
div.dataset.appId=2323;
div.dataset.myname="Michael";

chapter 13 事件

事件处理程序

  事件就是用户或浏览器自身执行的某种动作。事件处理程序的名字以“on”开头。

事件对象

  

<button id="myBtn">Click</button>
<script type="text/javascript">
var btn=document.getElementById("myBtn");
/* btn.onclick=function(event){
alert(event.type);
} */
btn.addEventListener("click",function(event){
alert(event.type);
});
</script>

在需要通过一个函数处理多个事件时,可以使用type属性。

    var handler=function(event){
switch(event.type){
case "click":
alert("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor="red";
break;
case "mouseout":
event.target.style.backgroundColor="";
break;
}
};
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;

事件类型

  

UI事件:

  

内存和性能

  

事件委托

  事件委托你用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

chapter 14 表单脚本

表单基础

  

  event.preventDefault();取消事件的默认动作。
var form=document.getElementById("myForm");
form.submit;
form.reset;

表单字段

  

  

共有的表单字段属性

  

可以通过JavaScript动态修改其他任何属性。

  

防止重复单机表单的提交按钮:侦听submit事件,并在事件发生时禁用提交按钮,btn.disabled=true;

chapter 17 错误处理和调试

通信错误

  编码解码。

  

chapter 20 JSON

语法

  

JavaScript 字符串和JSON字符串的最大区别在于,JSON字符串必须使用双引号(单引号会导致语法错误)。

对象

  javascript对象可以写成:

  

  json 表示对象:

  

  

  数组:

  

解析与序列化

json对象有2个方法:

  1. stringify() 把JavaScript对象序列化为JSON字符串
  2. parse() 把JSON字符串解析为原生JavaScript值

  

  输出的jsonText是JSON字符串,不包含任何空格字符或缩进。

  反向操作,序列化为JavaScript对象时会忽略函数、原型成员和undefined属性。

  var bookCopy=JSON.parse(jsonText);

chapter 21 Ajax 与 Comet

Asynchronous JavaScript + XML 简写 Ajax技术,一种能够向服务器请求额外的数据而无须卸载页面的技术。用户单击后,可以不必刷新页面也能取得新数据。

XMLHttpRequest对象

获取XMLHttpRequest对象:

  1. 从MSXML库中的ActiveX对象实现
  2. 获取原生XHR对象 var xhr=new XMLHttpRequest();

  

  

  异步发送请求时,可以检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。

  

XHR对象的发送过程,会将Http头信息一并发送到服务器。可以在打开后发送前修改头信息。

  

GET 请求

  get请求可能导致乱码问题,要对查询字符串进行编码

  

POST 请求

  post请求的参数是序列化后通过send提交。

  

  与GET请求相比,POST请求消耗的资源会更多一些。从性能角度来看,以发送相同的数据计,GET请求的速度最多可达到POST请求的两倍。

XMLHttpRequest 2 级

FormData

var data=new FormData();
data.append("name","Nicholas");

var data1=new FormData(document.forms[0]);

超时设定

  

  触发timeout事件,会调用ontimeout事件处理程序。

进度事件

progress事件

  进度指示器:

  

  lengthComputable表示进度信息是否可用的布尔值,position表示已经接受的字节数,totalSize表示根据Content-Length响应头部确定的预期字节数。

跨源资源共享

图像Ping

  使用<img>标签,一个网页可以从任何网页中加载图像,不用担心跨域问题。图像Ping是与服务器进行简单、单向的跨域通信的一种方式。

    var img=new Image();
img.onload=img.onerror=function(){
alert("Done!");
};
img.src="www.baidu.com?name=Nick";

  只能发送GET请求,无法访问服务器的响应文本。

JSONP

Comet

  Ajax是一种从页面向服务器请求数据的技术,而Comet则是一种服务器向页面推送数据技术。

  短轮询和长轮询。

Web Sockets

  socket.send("Hello World");

  发送序列化后的数据:

  

  获取服务返回的数据:

  

同源策略

chapter 22 高级技巧

作用域安全的构造函数

  

  使用new 操作符 调用构造函数时,this会指向新创建的实例。

  而不使用new操作符 也能创建一个新的实例,此时this会指向window全局对象上。

  因此要对构造函数进行改造:

  

惰性载入函数

  在函数被调用时再处理函数,下次再调用就是调用被重写了的函数。

函数绑定

防篡改对象

不可扩展对象

  

  Object.preventExtensions(实例) 方法可以防止属性被修改(费严格模式静默失败,严格模式下抛出错误);

chapter 23 离线应用与客户端存储

离线检测

  

												

《javascript 高级程序设计》 笔记2 8~章的更多相关文章

  1. Javascript高级程序设计笔记 <第五章> 引用类型

    一.object类型 创建object实例的方式有两种: //第一种使用new操作符跟构造函数 var person= new Object(); person.name="小王" ...

  2. 《JAVASCRIPT高级程序设计》第三章

    <JAVASCRIPT高级程序设计>第三章主要讲述了这门语言的基础概念,内容多而浅,通过思维导图可以帮助我们很好的理清脉络. js函数使用function关键字来声明,以下是一个简单的例子 ...

  3. 《javascript高级程序设计》第三章学习笔记

    Undefined类型 该类型只有一个值,即undefined. 对未初始化的变量和未定义的变量,用typeof检测,都会返回'undefined' Null类型 该类型只有一个值,null.并且从逻 ...

  4. 《Javascript高级程序设计》第六章笔记整理

    一.创建对象的方法(6种) 1.工厂模式 即用函数来封装以特定接口创建对象的细节. function createPerson(name,age,job){ var o = new Object(); ...

  5. 笔记《javascript高级程序设计》 第12章 DOM2和DOM3

    DOM2 级核心:在 1 级基础上构建,为节点添加更多方法和属性 DOM2 级视图:为文档定义了基于样式信息的不同视图 DOM2 级事件:说明了如何使用事件和DOM文档交互 DOM2 级样式:如何以编 ...

  6. 《JavaScript高级程序设计》——第三章 基本概念

    这章讲了JavaScript的语法.数据类型.流控制语句和函数.理解还是挺好理解的,但有很多和C.C++.Java不同的地方需要记忆.比如, JavaScript标识符可以由Unicode字符字符组成 ...

  7. JavaScript高级程序设计:第十三章

    第十三章 一.理解事件流 事件流描述的是从页面中接收事件的顺序. 1.事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点.以下面的HTML页面为例: ...

  8. JavaScript高级程序设计:第六章

    第六章 面向对象的程序设计 一.理解对象 1.属性类型: ECMAScript中有两种属性:数据属性和访问器属性. (1)数据属性: 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性 ...

  9. JavaScript高级程序设计笔记(一)

    ---恢复内容开始--- 前三章为基础知识,为了方便以后查看,所以比较啰嗦.这里对函数的基本操作没有记录. 1.JavaScript的实现 虽然 JavaScript 和 ECMAScript 通常都 ...

  10. javascript高级程序设计---第二、三章

    在HTML中引用javaScript javascript的几个属性  type async(异步加载 只适用于外部JS且IE8以上 HTML5规范 先于load执行) src defer(延迟加载 ...

随机推荐

  1. Linux学习笔记 - 入门

    简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSI ...

  2. Kali下Ahmyth的使用

    项目地址:https://github.com/AhMyth/AhMyth-Android-RAT 下载后打开 安装nodejs,nodejs在官网下载,下载完后解压,切到bin目录下 设置全局 ro ...

  3. java成神之——集合框架之ArrayList,Lists,Sets

    集合 集合种类 ArrayList 声明 增删改查元素 遍历几种方式 空集合 子集合 不可变集合 LinkedList Lists 排序 类型转换 取交集 移动元素 删除交集元素 Sets 集合特点 ...

  4. JanusGraph :Cassandra作为存储后端的情况下,JanusGraph的安装方法

    Cassandra作为存储后端的情况下,JanusGraph的安装方法 Cassandra作为存储后端的情况下,JanusGraph的安装分为四种方式. 分别是: 1.本地服务器模式(这里的服务器指的 ...

  5. NUnit属性

    TestFixture:它标记一个类包含测试,申明该类是用来测试的.一般用在class的定义之前: Test一般是放在method之前,表示对该方法的测试:如前一篇文章所示的class. SetUp/ ...

  6. 01 java断言assert初步使用:断言开启、断言使用

    参考文件:http://blog.sina.com.cn/s/blog_59c9412d0100fd55.html 1 说明 java断言assert是jdk1.4引入的. jvm断言默认是关闭的. ...

  7. 无锁的同步策略——CAS操作详解

    目录 1. 从乐观锁和悲观锁谈起 2. CAS详解 2.1 CAS指令 2.3 Java中的CAS指令 2.4 CAS结合失败重试机制进行并发控制 3. CAS操作的优势和劣势 3.1 CAS相比独占 ...

  8. Linux开机启动详解

    Linux开机启动程序详解 我们假设大家已经熟悉其它操作系统的引导过程,了解硬件的自检引导步骤,就只从Linux操作系统的引导加载程序(对个人电脑而言通常是LILO)开始,介绍Linux开机引导的步骤 ...

  9. mfs测试

    续1 6. 参考文献: 6.1 文献 http://sery.blog.51cto.com/10037/263515  田逸 http://bbs.chinaunix.net/thread-16438 ...

  10. IP定位,天气接口

    首先获取IP ////获得本地真实IP function get_onlineip() { $ip_json = @file_get_contents("http://ip.taobao.c ...