JavaScript 對象操作 Day04

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引入的。

1. 定義一個類、屬性及方法

   //ES6之後===============
   //定義一個學生類
   class Student{
       constructor(name) {
           this.name = name;
       }
       //新增hello方法
       hello(){
           alert('hello')
       }
   }
   var xiaoming = new Student("xiaoming");
   xiaoming.hello();
   

   測試結果：

2. 類的繼承 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!