11.15课堂笔记、作业
来源:互联网 发布:爱淘宝的红包怎么用 编辑:程序博客网 时间:2024/06/05 19:41
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:Tomp2.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调用函数a
alert 实际上也是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( )。
- 11.15课堂笔记、作业
- 11.30课堂笔记、作业
- 12.25课堂笔记、作业
- 11.3课堂笔记和作业
- 11.14课堂笔记以及作业
- 12.4课堂笔记及作业
- 12.06课堂笔记以及作业
- 11.09课堂笔记、作业以及学习心得
- 11.13课堂笔记、作业以及学习心得
- 11.16课堂笔记、作业以及学习心得
- 11.20课堂笔记、作业以及学习心得
- #11.21课堂笔记、作业以及学习心得
- 11.27课堂笔记以及周末大作业
- 12.13课堂笔记、课后作业、学习心得
- 12.14课堂笔记、课后作业、学习心得
- 课堂作业
- 课堂作业
- 课堂作业
- [http 1.1] M-POST w3
- Spring Hibernate JPA 联表查询 复杂查询
- oracle分析函数Rank, Dense_rank, row_number
- 微服务架构的基础框架选择:Spring Cloud还是Dubbo?
- 机器学习实战第五章Logistic回归的运行的小错误
- 11.15课堂笔记、作业
- 三元运算符和this
- px4源码学习四--固定翼姿态控制模块阅读
- KVM详解,太详细太深入了,经典
- 48. Rotate Image
- arcgis soe调试配置eclipse失败
- 安装Ubuntu后要做的事
- Safari低版本不兼容滚动条解决方案
- 记录一下,关于qq空间分享的Icon不显示的问题