11.15第十一节课

一、JSON对象

JSON 格式（Javascript Object Notation），是一种用于数据交换的文本格式。
简单的说，每个 JSON 对象就是一个值。要么是简单类型的值，要么是复合类型的值。
JSON 对值的类型和格式是有严格要求的。
1.复合类型的值只能是数组或对象，不能是函数、日期对象、正则表达式等。
2.简单类型的值包括：字符串、数值、布尔值和null（不能使用NaN/undefined）。
3.字符串必须使用双引号表示，不能使用单引号，或者没有双引号。
4.对象的键必须放在双引号里。
5.数组或对象的最后一个成员后面不能加逗号。

// 不合法的JSON对象
var obj = {name:”“,age:20}; // 对象键放在双引号中
{“name”:”zhangsan”,”age”:undefined} // 不能出现undefined
{“name”:”zhangsan”,”age”:function() {
alert(“”);
}} // 不能出现函数
// 合法的JSON对象
{“name”:”zhangsan”}
[“name”,”age”]
[{},{}]

1、JSON对象和JSON字符串的转换
在数据传输中，JSON是以字符串形式传递的，而JS操作的是JSON对象。
- JSON.stringify方法是用于将一个值转为字符串。该字符串符合 JSON 格式要求，并且可以通过JSON.parse方法还原。
- JSON.parse方法将 JSON 字符串转化为对象。

var jsonStr = ‘{“name”:”Lisa”,”password”:”123”}’;
var jsonObj = {“name”:”Lisa”,”password”:”123”};
// lg(jsonStr);
// lg(jsonObj);
//String转化为JSON对象
var jsonObject = JSON.parse(jsonStr);
// lg(jsonObject);
//将对象转回字符串
var jsonstr = JSON.stringify(jsonObject);
lg(jsonStr);

2、JSON的美化输出
JSON.stringify的第三个参数，可以指定缩紧的空格数。

var format = JSON.stringify(jsonObject,undefined,2);
lg(format);

二、面向对象编程中的 this

1、this在对象中的运用
this 关键字是个非常重要的语法点，在 javascript 编程中如果对 this 不能理解，大部分的编程任务是无法完成的。
this 返回的是一个对象，简单的说就是返回属性或者方法当前所在的对象。
this.property，在这个代码中，this就是指property属性所在的对象。

var person = {
name : “Tom”,
description: function() {
return “name:” + this.name;
}
};
console.log(person.description()); // name:Tom

上面代码中，this.name表示 descriptioin 方法所在的对象的name属性。调用person.description（）方法时，descriptioin 方法所有在当前对象是 person，所有就是调用person.name。

var f = function() {
console.log(“name:” + this.name);
}
var p1 = {
name : “Tom”,
desc : f
};
var p2 = {
name : “Jack”,
desc : f
};
p1.desc(); // name:Tom
p2.desc(); // name:Jack

在上面的代码中，f函数中使用了this关键字，随着f所在的对象不同，this的指向也不同。
2、this在网页编程中的运用

<input type=”button” value=”删除” onclick=”delLine” />
function delLine(obj){
var trNode = obj.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);

3、this在函数中的运用
列子1
this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能去确定this到底指向谁，实际上this最终指向的是调用它的对象。

function a(){ var user = ‘javascript’; lg(this.user);//undifined
lg(this);//Window

  }       a();    //window.a();

alert 实际上也是window的对象。
列子2

var o = { user:’javascript’, fn:function(){
lg(this.user);
lg(this); } } o.fn();
window.o.fn();

wondow是JS中的全局对象，我们创建变量实际上是给window对象添加属性。
列子3

var o = { a:10, b:{
a:12,
fn:function(){
lg(this.a);
lg(this);
} } } // window.o.b.fn(); var j = o.b.fn; j();

最终是window调用的fn方法。

三、Web Storage

Storage接口用于在浏览器客户端中存储用户自定义的信息。
有几种存储形式：
LocalStorage：永久的存储在浏览器中，但是要注意，在不同的浏览器中间数据是不能共享的。
SessionStorage：当前页面会话基本的存储，当浏览器关闭或页面关闭时，数据就会丢失。
GlobalStorage:HTML5中被localStorage代替。
为了能访问到同一个localStorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口上。
我们只介绍localStorage的相关用法。
1.LocalStorage接口的方法

1. localStorage.setItem(key,value)：用于将key-value键值对的方式插入localStorage中。
2. localStorage.getItem(key)：读取key的localStorage字符串值。
3. localStorage.removeItem(key)：删除localStorage中key。
4. localStorage.clear()：清空localStorage所有key。
5. 需要注意的是：在localStorage中只能存储字符串类型的数据。

//使用方法来存储数据 localStorage.setItem(‘name’,’Bizzbee’); //用属性设值
localStorage.username = “bizzbee”; console.log(localStorage);
console.log(localStorage.getItem(‘username’));
console.log(localStorage.name);

四、课后作业
1、check.html全选功能
代码：

<input type="checkbox" onchange="" checked="checked" />全选/全不选<br /><input type="checkbox" name="hobby" />足球<input type="checkbox" name="hobby" />篮球<input type="checkbox" name="hobby" />游泳<input type="checkbox" name="hobby" />唱歌 <br /><input type="button" value="全 选" onclick="selectAll()"/><input type="button" value="全不选" onclick="deselecAll()"/><input type="button" value="反选" onclick="reverseAll()"/><script type="text/javascript">function selectAll(){                  var hobbys = document.getElementsByName("hobby");                      for (var i=0; i < hobbys.length; i++)                {                      var hobby = hobbys[i];                      hobby.checked = true;                  }                         }   

结果显示：

2、全不选功能
代码：

function deselecAll(){     var hobbys = document.getElementsByName("hobby");                      for (var i=0; i < hobbys.length; i++)                {                      var hobby = hobbys[i];                      hobby.checked = false;                  }                         } 

结果显示：

3、反选功能
代码：

function reverseAll(){    var hobbys=document.getElementsByName("hobby");    for(var i=0; i < hobbys.length; i++){         var hobby = hobbys[i];         /*hobby.checked = ! hobby.checked;*/         if(hobby.checked){             hobby.checked=false;         }else{             hobby.checked=true;         }    }}

结果显示：

4、Coding Coffee产品页的like功能
部分代码：

loadAll();function loadAll(){    var item=document.getElementsByClassName('a');    for(var i=0;i<item.length;i++){        item[i].style.setProperty("background-image","none");    }    if(localStorage.length>0){        for(var i=0;i<localStorage.length;i++)        {        var id=localStorage.key(i);        document.getElementById(id).parentNode.parentNode.style.setProperty("background-image","url('../../图片/c6.png')");    }}}function like(obj){    var id=obj.childNodes[3].childNodes[1].id;    var name=obj.childNodes[3].childNodes[1].innerHTML;    for(var i=0;i<localStorage.length;i++){        if(localStorage.key(i)==id){            localStorage.removeItem(id);            console.log(localStorage);            loadAll();            return;        }    }   localStorage.setItem(id,name);    loadAll();    console.log(localStorage);}

结果显示：