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!