本文详细介绍了JSON格式的要求与转换方法，探讨了面向对象编程中this关键字的应用，并讲解了WebStorage的不同存储形式及其使用方法。
11.15课堂笔记、作业以及学习心得
11.15课堂笔记
1、JSON对象
JSON 格式（Javascript Object Notation），是一种用于数据交换的文本格式。
简单的说，每个 JSON 对象就是一个值。要么是简单类型的值，要么是复合类型的值。
JSON 对值的类型和格式是有严格要求的。
- .复合类型的值只能是数组或对象，不能是函数、日期对象、正则表达式等。
- 简单类型的值包括：字符串、数值、布尔值和null（不能使用NaN/undefined）。
- 字符串必须使用双引号表示，不能使用单引号，或者没有双引号。
- 对象的键必须放在双引号里。
- 数组或对象的最后一个成员后面不能加逗号。
// 不合法的JSON对象
var obj = {name:"",age:20}; // 对象键放在双引号中
{"name":"zhangsan","age":undefined} // 不能出现undefined
{"name":"zhangsan","age":function() {
alert("");
}} // 不能出现函数
// 合法的JSON对象
{"name":"zhangsan"}
["name","age"]
[{},{}]1.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"};
//console.log(jsonStr);
//console.log(jsonObj);
//String转化为JSON对象
var jsonObject = JSON.parse(jsonStr);
//console.log(jsonObject);
//将对象转回字符串
var jsonstr = JSON.stringify(jsonObject);
console.log(jsonStr);1.2 JSON的美化输出
JSON.stringify的第三个参数，可以指定缩紧的空格数。
var format = JSON.stringify(jsonObject,undefined,2);
console.log(format);2、面向对象编程中的this
2.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.2 this在网页编程中运用
<input type="button" value="删除" onclick="delLine(this)" />
function delLine(obj){
var trNode = obj.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}2.3 this在函数中运用
（1）、this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能去确定this到底指向谁，实际上this最终指向的是调用它的对象。
function a(){
var user = 'javascript';
console.log(this.user);//undifined
console.log(this);//Window
}
a();
//window.a();
//等同于window调用函数aalert 实际上也是window的对象。
（2）、wondow是JS中的全局对象，我们创建变量实际上是给window对象添加属性。
var o = {
user:'javascript',
fn:function(){
console.log(this.user);
console.log(this);
}
}
o.fn();
window.o.fn();（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.j();最终是window调用的fn方法。
3、Web Storage
Storage接口用于在浏览器客户端中存储用户自定义的信息。
有几种存储形式：
- LocalStorage：永久的存储在浏览器中，但是要注意，在不同的浏览器中间数据是不能共享的。
- SessionStorage：当前页面会话基本的存储，当浏览器关闭或页面关闭时，数据就会丢失。
- GlobalStorage:HTML5中被localStorage代替。
为了能访问到同一个localStorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口上。
3.1 localStorage接口的方法
- localStorage.setItem(key,value)：用于将key-value键值对的方式插入localStorage中。
- localStorage.getItem(key)：读取key的localStorage字符串值。
- localStorage.removeItem(key)：删除localStorage中key。
- localStorage.clear()：清空localStorage所有key。
- 需要注意的是：在localStorage中只能存储字符串类型的数据。
- key():在指定的数字位置获取该位置的名字。
//使用localStorage.setItem(key,value)方法来存储数据
localStorage.setItem('name','Bizzbee');
//用属性设值
localStorage.username = "bizzbee";
console.log(localStorage);
console.log(localStorage.getItem('username'));
console.log(localStorage.name);11.15作业
（1）、完成check.html中的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>请选择您的爱好：</h1>
<input type="checkbox" onchange="" checked="checked" />全选/全不选<br />
<input class="hobby" type="checkbox" name="hobby" />足球
<input class="hobby" type="checkbox" name="hobby" />篮球
<input class="hobby" type="checkbox" name="hobby" />游泳
<input class="hobby" type="checkbox" name="hobby" />唱歌 <br />
<input type="button" value="全 选" onclick="allCheck()"/>
<input type="button" value="全不选" onclick="allUnCheck()"/>
<input type="button" value="反选" onclick="reverseCheck()"/>
<script type="text/javascript">
var checkBoxs=document.getElementsByClassName("hobby");
console.log(checkBoxs);
function allCheck(){
for(var i=0;i<checkBoxs.length;i++){
checkBoxs[i].checked=true;
}
}
function allUnCheck(){
for(var i=0;i<checkBoxs.length;i++){
checkBoxs[i].checked=false;
}
}
function reverseCheck(){
for(var i=0;i<checkBoxs.length;i++){
checkBoxs[i].checked=!checkBoxs[i].checked;
}
}
</script>
</body>
</html>（2）、完成Coding Coffee产品页的like功能。
html部分
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Coffee Mune</title>
<link type="text/css" rel="stylesheet" href="../css/list.css"></link>
</head>
<body>
<div class="act">
<div class="add">
咖啡名：<p><input id="name" type="text" value=""></p>
主题：<p><input id="aaa" type="text" value=""></p>
小标题：<p><input id="bbb" type="text" value=""></p>
图片地址：<p><input id="img_url" type="text" value=""></p>
描述：<p><textarea id="description" type="text" cols="20" rows="10"></textarea></p>
<button onclick="addCoffee()">新增咖啡</button>
<button onclick="correctCoffee()">修改咖啡</button>
</div>
<div class="remove">
咖啡名：<p><input id="removeName" type="text" value=""></p>
<button onclick="removeCoffee()">删除咖啡</button>
</div>
</div>
<hr>
<div id="index">
<h1 id="title">Coding Coffee欢迎您！</h1>
<div id="parent1">
<div class="parent" onclick="like(this)">
<div class="left" id="left1">
<img src="../img/c2.jpg">
</div>
<div class="right" id="right1">
<h2 class="smallTitle" id="smallTitle1">蓝山咖啡</h2>
<p class="theme">
当季新品
</p>
<p class="bigTheme">
给咖啡多一口热爱！
</p>
<p class="smallTheme">
纯蓝山咖啡口感、香味较淡，但喝起来却非常香醇精致；
具有贵族的品味，乃咖啡中之极品。
</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
<hr>
<div id="parent2">
<div class="parent" onclick="like(this)">
<div class="left" id="left2">
<img src="../img/c5.jpg">
</div>
<div class="right" id="right2">
<h2 class="smallTitle" id="smallTitle2">卡布其诺</h2>
<p class="theme">
美好邂逅
</p>
<p class="bigTheme">
给咖啡多一口热爱！
</p>
<p class="smallTheme">
卡布奇诺是一种加入以同量的意大利特浓咖啡和蒸汽泡沫牛奶
相混合的意大利咖啡。此时咖啡的颜色，就象卡布奇诺教会的
修士在深褐色的外衣上覆上一条头巾一样，咖啡因此得名。
</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
<hr>
<div id="parent3">
<div class="parent" onclick="like(this)">
<div class="left" id="left3">
<img src="../img/c6.jpg">
</div>
<div class="right" id="right3">
<h2 class="smallTitle" id="smallTitle3">拿铁咖啡</h2>
<p class="theme">
经典再现
</p>
<p class="bigTheme">
给咖啡多一口热爱！
</p>
<p class="smallTheme">
拿铁是最为国人熟悉的意式咖啡品项，它是在沉厚浓郁的意式
浓缩咖啡中，加入牛奶等调和，甚至更多牛奶的花式咖啡，有了
牛奶的温润调味，让原本甘苦的咖啡变得柔滑香甜、甘美浓郁。
</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
<hr>
<div id="parent4">
<div class="parent" onclick="like(this)">
<div class="left" id="left4">
<img src="../img/c4.jpg">
</div>
<div class="right" id="right4">
<h2 class="smallTitle" id="smallTitle4">欧蕾咖啡</h2>
<p class="theme">
恬淡悠闲
</p>
<p class="bigTheme">
给咖啡多一口热爱！
</p>
<p class="smallTheme">
欧蕾咖啡最大的特点就是它要求牛奶和浓缩咖啡一同注入杯中，
牛奶和咖啡在第一时间相遇，碰撞出的是一种闲适自由的心。
</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
<hr>
<div id="parent5">
<div class="parent" onclick="like(this)">
<div class="left" id="left5">
<img src="../img/c7.jpg">
</div>
<div class="right" id="right5">
<h2 class="smallTitle" id="smallTitle5">猫屎咖啡</h2>
<p class="theme">
奢华享受
</p>
<p class="bigTheme">
给咖啡多一口热爱！
</p>
<p class="smallTheme">
麝香猫咖啡（Kopi Luwak），又称猫屎咖啡，它是由麝香猫
在吃完咖啡果后把咖啡豆原封不动的排出，人们把它的粪便
中的咖啡豆提取出来后进行加工而成。
</p>
<div>
<div style="clear:both;"></div>
</div>
</div>
<hr>
<br>
<div class="shopCar" style="clear:both">
<a href="" id="pic"><img id="shopPic" src="../img/c13.jpg"></a>
<a href="" id="shopCar"><p>购物车</p></a>
<a href="" id="payment"><p>去结算</p></a>
</div>
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/list.js"></script>
</body>
</html>
js部分
loadAll();
function loadAll(){
var item=document.getElementsByClassName("parent");
for (var i=0;i<item.length ;i++ ){
item[i].style.setProperty("background-color","");
//console.log(item[i]);
}
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-color","pink");
//console.log(document.getElementById(id).parentNode.parentNode);
}
}
}
function like(obj){
var id=obj.childNodes[3].childNodes[1].id;
//console.log(id);
var name=obj.childNodes[3].childNodes[1].innerHTML;
//console.log(name);
for (var i=0;i<localStorage.length ;i++ ){
//console.log(localStorage.key(i));
if(id==localStorage.key(i)){
localStorage.removeItem(id);
loadAll();
return;
}
}
localStorage.setItem(id,name);
//console.log(localStorage);
loadAll();
}11.15学习心得
今天学习了JSON对象、面向对象编程中的this和Web Storage。
JSON对象的格式和类型的要求非常严格，每个JSON对象就是一个值，要么是简单类型的值，要么是符合类型的值。同时对象的键必须放在双引号里，且数组或对象的最后一个成员后面不能加逗号。
面向对象编程中的this关键字，
是就近原则，说调用就指向谁。
Web Storage中获取key，格式为localStorage.key( )。
扫一扫
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
