11.15第十一课
来源:互联网 发布:历史数据库 编辑:程序博客网 时间:2024/05/18 00:32
一、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:Tomp2.desc(); // name:Jack
在上面的代码中,f函数中使用了this关键字,随着f所在的对象不同,this的指向也不同。
2.this在网页编程中的运用
<input type="button" value="删除" onclick="delLine(this)" />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对象,页面必须来自同一个域名,使用同一种协议,在同一个端口上。
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('name','Bizzbee'); //用属性设值 localStorage.username = "bizzbee"; console.log(localStorage); console.log(localStorage.getItem('username')); console.log(localStorage.name);
课后作业
完成check.html中的功能。
页面显示:
部分代码
<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; } } function selectNo(){ var hobbys = document.getElementsByName("hobby"); for (var i=0; i < hobbys.length; i++) { var hobby = hobbys[i]; hobby.checked=false; } } function selectFan(){ var hobbys = document.getElementsByName("hobby"); for (var i=0; i < hobbys.length; i++) { hobbys[i].checked=!hobbys[i].checked; //if(hobby.checked){ //hobby.checked=false; //}else{ // hobby.checked=true; //} } }
完成Coding Coffee产品页的like功能。
实现点击页面显示喜欢效果,并存储;点击过的喜欢的页面会被消除。
页面显示:
部分代码:
loadAll(); function loadAll(){ var item=document.getElementsByClassName('main'); //初始化 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('../img/like.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); lg(localStorage); loadAll(); return; } } localStorage.setItem(id,name); loadAll(); lg(localStorage); }
- 11.15第十一课
- 第十一课 数组
- 第十一课 jQuery part1
- 第十一课 jQuery part1
- Java第十一课
- C语言第十一课
- 【第十一课】异常---StringEquals
- 【第十一课】异常---toString
- 第十一课、C判断
- 第十一课 布局修改
- 第十一课:条件控制语句
- 第十一课 建造者模式
- 第十一课 常用字符串函数
- 韩语学习之第十一课
- 第十一课:2D文本
- 易语言学习第十一课
- Android第十一课;相对布局
- 第十一课,双向链表
- protobuf无法使用open函数打开文件
- Failed to execute goal org.apache.maven.plugins
- cherry-pick 多个commit
- 指针与字符串
- 链表翻转
- 11.15第十一课
- 配置Spring连接mysql数据库
- Ubuntu 中安装 IDEA 报错:Warning the selected directory is not a valid tomcat home
- 如何下载行政区划边界?
- 如何利用openUrl打开另外一个app
- 移动端UI界面设计:APP字体排版设计的七个原则
- const T、const T*、T *const、const T&、const T*& 的区别
- python使用sqlaclchemy关于中文报错
- c# 无损高质量压缩图片代码