JavaScript对象操作
#重点在内部对象和BOM对象操作！
1 内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
1.1 Date对象
基本使用
var now = new Date();
//以下语句在浏览器控制台中测试：
now.getFullYear(); //年 2020
now.getMonth(); //月（0~11月） 2
now.getDate(); //日 30
now.getDay(); //周几 1
now.getHours(); // 时 12
now.getMinutes(); //分 29
now.getSeconds(); //秒 14
now.getTime(); //时间戳 全世界统一 1585542554732
now.toLocaleString(); // "2020/3/30 下午12:29:14"
时间的转换：
now = new Date(1585542554732)
Mon Mar 30 2020 12:29:14 GMT+0800 (中国标准时间)
now.toLocaleString()
"2020/3/30 下午12:29:14"
now.toGMTString()
"Mon, 30 Mar 2020 04:29:14 GMT"
1.2 JSON
json是什么？
早期所有数据传输习惯使用XML文件，其格式较为复杂，令人头疼，所有引入了JSON。JSON的介绍如下：
- JSON是一种轻量级的数据交换格式。
- JSON具有简洁和清晰的层次结构。
- 易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON来表示；
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对，都用key:value
JSON字符串和JS对象的转化：注意JSON.stringify() JSON.parse()的用法。
var user = {
name: "demut",
age:3,
gender:'female'
}
//对象转化为json字符串
var jsonuser = JSON.stringify(user);
//json字符串转化为对象
var obj = JSON.parse('{"name":"demut","age":3,"gender":"female"}');
测试如下：
说明：JSON和JS对象的区别：
var obj = {a:'hello', b:'world'}; //对象
var json = '{"a":"hello", "b":"world"}'; //json字符串
1.3 Ajax （待补充！）
- 原生的js写法 xhr异步请求
- jQuey封装好的方法 $("#name").ajax("")
- axios请求
2 面向对象编程
2.1 什么是面向对象？
JavaScript、Java、c#…面向对象，JavaScript中有所区别：
- 类：模版
- 对象：具体的实例
在JavaScript中需要转变一下思路：
- 原型的思想
var user = {
name: "demut",
age: 3,
run: function () {
console.log(this.name+" is running...");
}
};
var xiaoming = {
name: "xiaoming"
};
xiaoming.__proto__ = user; //说明xiaoming的原型指向user
测试结果：
2.2 class 继承（抄Java的）
class关键字，是从ES6引入的。
-
定义一个类、属性及方法
//ES6之后=============== //定义一个学生类 class Student{ constructor(name) { this.name = name; } //新增hello方法 hello(){ alert('hello') } } var xiaoming = new Student("xiaoming"); xiaoming.hello();测试结果：
-
类的继承
extends测试代码：
class Student{ constructor(name) { this.name = name; } //新增hello方法 hello(){ alert('hello') } } class Pupil extends Student{ constructor(name,grade) { super(name); this.grade = grade; } getGrade(){ alert("我是一名小学生！"); } } //定义对象 var xiaohong = new Pupil("xiaohong",5); xiaohong.getGrade();测试结果：
3 操作BOM对象（重点）
浏览器介绍
JavaScript和浏览器关系？
JavaScript的诞生就是为了能够让它在浏览器中运行！
BOM：浏览器对象模型。
内核：
- IE6-11
- Chrome
- Safari
- FireFox Linux
**第三方：**QQ浏览器、360浏览器…
window
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
378
window.innerWidth
720
window.outerHeight
900
window.outerWidth
800
navigator （不建议使用）
navigator，封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36"
navigator.platform
"MacIntel"
大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码！
screen
screen.width
1440
screen.height
900
location(重要)
location代表当前页面的URL信息
host: "cn.bing.com"
href: "https://cn.bing.com/"
protocol: "https:"
location.reload() //刷新网页
//设置新的地址
location.assign('https://blog.csdn.net/qq_44958172')
document（内容）
document代表当前的页面，HTML DOM文档树
获取具体的文档树节点：
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
运行结果：
获取cookie
document.cookie
""
劫持cookie原理：
<script src="aa.js"></script>
<!--恶意人员，通过js获取cookie并上传到他的服务器-->
服务器端可以设置cookie:httpOnly
history（不建议使用）
history代表浏览器的历史记录。
history.back() //后退
history.forward() //前进
写在最后
“If this should happen, please comfort me. Send me word that he has come back. ”
——The little prince
To Demut and Dottie!
