[toc]
# 每日單詞
1. `prompt` 提示
2. `confirm` 確認
# 作為值的函數
- 因為 ECMAScript 中的函數名本身就是變量，所以函數也可以作為值來使用。
- 不僅可以像傳遞參數一樣把一個函數傳遞給另一個函數，而且可以將一個函數作為另一個函數的結果返回
```javascript
function callSomeFunction(someFunction, someArgument) {
return someFunction(someArgument);
}
function add10(num) {
return num + 10;
}
console.log(callSomeFunction(add10, 10)); // 20
function getGreeting(userName) {
return "Hello " + userName + " !!!";
}
console.log(callSomeFunction(getGreeting, "ZhangSan")); // hello ZhangSan
```
## 再談數組排序`arr.sort`(默認每個元素都會調用`toString()`方法)
### 數字排序 vs 字符串排序
```javascript
var arr = [1, 11, 22, 2, 3, 4];
var arr1 = ["1", "11", "22", "2", "3", "4"];
arr.sort();
console.log(arr);
arr1.sort();
console.log(arr1);
arr.sort(function(a, b) {
return a - b;
});
console.log(arr);
arr1.sort(function(a, b) {
return a - b;
});
console.log(arr1);
console.log("123" - "22");
```
### 對象排序
> 函數的返回值, 還是函數
```javascript
function createComparisonFunction(propertyName) {
return function(object1, object2) {
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
}
var data = [
{
name: "Mike",
age: 29
},
{
name: "ZhangSan",
age: 28
}
];
data.sort(); // 如果不傳參數, 默認每個元素toString(), 然后排序, 對象的toString()返回結果都一樣, 所以看起來好像排序沒有作用...
console.log(data);
```
## array.sort 接收函數做參數的原理
```javascript
function mySort(fnName) {
for (var k = 1; k < this.length; k++) {
for (var j = 0; j < this.length - k; j++) {
if (fnName(this[j], this[j + 1]) > 0) {
temp = this[j + 1];
this[j + 1] = this[j];
this[j] = temp;
}
}
}
return this;
}
var arr = [5, 4, 3, 2, 1, 23];
arr.__proto__.mySort = mySort;
console.log(arr);
function fnName(a, b) {
return a - b;
}
console.log(arr.mySort(fnName));
console.log(arr);
```
# 聊聊 css 函數
## css 函數如何使用?(函數重載)
> css(oDiv, 'width') 獲取樣式
> css(oDiv, 'width', '200px') 設置樣式
第一個版本
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1" style="width:200px;height: 200px;background: red;"></div>
</body>
<script>
function css() {
if (arguments.length === 2) {
return arguments[0].style[arguments[1]];
} else {
arguments[0].style[arguments[1]] = arguments[2];
}
}
window.onload = function() {
var oDiv = document.getElementById("div1");
// alert(css(oDiv, "width"));
css(oDiv, "background", "green");
};
</script>
</html>
```
優化函數參數之后的版本
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1" style="width:200px;height: 200px;background: red;"></div>
</body>
<script>
function css(obj, name, value) {
if (arguments.length === 2) {
return obj.style[name];
} else {
obj.style[name] = value;
}
}
window.onload = function() {
var oDiv = document.getElementById("div1");
// alert(css(oDiv, "width"));
css(oDiv, "background", "green");
};
</script>
</html>
```
函數參數的默認值問題
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div
id="div1"
style="width:200px;height: 200px;background: red;font-size: 20px"
></div>
</body>
<script>
function css(obj, name, value="") {
console.log(value); // 嚴格模式下, 會報錯 expected token =
if (arguments.length === 2) {
return obj.style[name];
}
if (arguments.length === 3) {
obj.style[name] = value;
}
}
window.onload = function() {
var oDiv = document.getElementById("div1");
// console.log(css(oDiv, "width"));
console.log(css(oDiv, "background"));
};
</script>
</html>
```
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div
id="div1"
style="width:200px;height: 200px;background: red;font-size: 20px"
></div>
</body>
<script>
function css(obj, name, value) {
value = value || ""; // 參數默認值的推薦寫法
console.log(value);
if (arguments.length === 2) {
return obj.style[name];
}
if (arguments.length === 3) {
obj.style[name] = value;
}
}
window.onload = function() {
var oDiv = document.getElementById("div1");
// console.log(css(oDiv, "width"));
console.log(css(oDiv, "background"));
};
</script>
</html>
```
# 獲取對象樣式(非行間)
## 先復習一下獲取行間樣式
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1" style="width:200px;height: 200px;background: red;"></div>
</body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
alert(oDiv.style.width);
};
</script>
</html>
```
**當樣式寫在樣式表里...**
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
alert(oDiv.style.width);
};
</script>
</html>
```
**獲取不到怎么辦?**
> currentStyle
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
alert(oDiv.currentStyle.width);
};
</script>
</html>
```
#### js 第二定律
> 但凡好功能, 一定不兼容(currentStyle 只支持 IE)
沒關系, 還有一個函數可以用(`getComputedStyle`)
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
// alert(oDiv.currentStyle.width);
alert(getComputedStyle(oDiv).width);
};
</script>
</html>
```
### 解決兼容性問題
##### 什么叫解決兼容性問題?
> 代碼, 在所有瀏覽器都可以正常運行
> 找到不同瀏覽器之間的不同, 根據不同瀏覽器, 寫不同的代碼
_可以兩個寫法都用嗎?_
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
alert(oDiv.currentStyle.width);
alert(getComputedStyle(oDiv).width);
};
</script>
</html>
```
## 到底如何解決兼容性
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
if (oDiv.currentStyle) {
alert(oDiv.currentStyle.width);
} else {
alert(getComputedStyle(oDiv).width);
}
};
</script>
</html>
```
還有優化的可能
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
var objStyle = oDiv.currentStyle || getComputedStyle(oDiv);
alert(objStyle.width);
};
</script>
</html>
```
### 右滑解決方案(封裝一個自己的函數)
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj)[name];
}
}
window.onload = function() {
var oDiv = document.getElementById("div1");
console.log(getStyle(oDiv, "width"));
};
</script>
</html>
```
#### background 和 background-color 的問題
> 只能獲取單一樣式, 不能獲取復合樣式(IE)
解決方案
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
function getStyle(obj, name) {
if (name === "background") {
name = "backgroundColor";
}
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj)[name];
}
}
window.onload = function() {
var oDiv = document.getElementById("div1");
alert(getStyle(oDiv, "background"));
console.log(getStyle(oDiv, "background"));
};
</script>
</html>
```
# window 對象
在瀏覽器中， window 對象有雙重角色，
它既是通過 JavaScript 訪問瀏覽器窗口的一個接口，又是 ECMAScript 規定的 Global 對象。
## 全局作用域
> 由于 window 對象同時扮演著 ECMAScript 中 Global 對象的角色，因此所有在全局作用域中聲明的變量、函數都會變成 window 對象的屬性和方法
```javascript
var age = 29;
function sayAge() {
alert(this.age);
}
alert(window.age);
sayAge();
window.sayAge();
```
## 系統對話框
> 瀏覽器通過 alert() 、 confirm() 和 prompt() 方法可以調用系統對話框向用戶顯示消息。
### `alert()`
### `confirm()`
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
if (confirm("你是一個帥哥嗎?")) {
alert("你居然點了確定, 臭不要臉! ");
} else {
alert("做人要有自信啊...");
}
</script>
</body>
</html>
```
### `prompt()`
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
var result = prompt("帥哥, 處對象不?", "請輸入你的回答...");
if (result !== null) {
alert("你居然回答'" + result + "'?! 就喜歡你強勢的樣子...");
}
</script>
</body>
</html>
```
# location 對象
location 是最有用的 BOM 對象之一，它提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。
location 對象是很特別的一個對象，因為它既是 window 對象的屬性，也是 document 對象的屬性；
換句話說， window.location 和 document.location 引用的是同一個對象。
location 對象的用處不只表現在它保存著當前文檔的信息，還表現在它將 URL 解析為獨立的片段，讓開發人員可以通過不同的屬性訪問這些片段
`hash`
> eg: "#contents"
> 返回 URL 中的 hash（#號后跟零或多個字符），如果 URL 中不包含散列，則返回空字符串
`host`
> eg: "www.baidu.com:80"
> 返回服務器名稱和端口號（如果有）
`hostname`
> eg: "www.baidu.com"
> 返回不帶端口號的服務器名稱
`href`
> eg: "http:/www.baidu.com"
> 返回當前加載頁面的完整 URL。而 location 對象的 toString()方法也返回這個值
`pathname`
> eg: "/WileyCDA/"
> 返回 URL 中的目錄和（或）文件名
`port`
> eg: "8080"
> 返回 URL 中指定的端口號。如果 URL 中不包含端口號，則這個屬性返回空字符串
`protocol`
> eg: "http:"
> 返回頁面使用的協議。通常是 http:或 https:
`search`
> eg: "?q=javascript"
> 返回 URL 的查詢字符串。這個字符串以問號開頭
## 頁面跳轉
使用 a 標簽
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com">百度一下</a>
</body>
</html>
```
點擊按鈕跳轉呢?
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com">
<input type="button" value="百度一下" />
</a>
</body>
</html>
```
js 的三種跳轉方式
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
location.assign("https://www.baidu.com");
window.location = "https://www.sina.com";
location.href = "https://www.sohu.com";
</script>
</body>
</html>
```
# history 對象
history 對象保存著用戶上網的歷史記錄，從窗口被打開的那一刻算起。因為 history 是 window 對象的屬性，因此每個瀏覽器窗口、每個標簽頁，都有自己的 history 對象與特定的 window 對象關聯。
使用 go() 方法可以在用戶的歷史記錄中任意跳轉，可以向后也可以向前。這個方法接受一個參數， 表示向后或向前跳轉的頁面數的一個整數值。負數表示向后跳轉（類似于單擊瀏覽器的“后退”按鈕）， 正數表示向前跳轉（類似于單擊瀏覽器的“前進”按鈕）。
```javascript
//后退一頁
history.go(-1);
//前進一頁
history.go(1);
//前進兩頁
history.go(2);
```
還可以使用兩個簡寫方法 back() 和 forward() 來代替 go() 。顧名思義，這兩個方法可以模仿瀏覽器的“后退”和“前進”按鈕。
```javascript
//后退一頁
history.back();
//前進一頁
history.forward();
```
history 對象還有一個 length 屬性，保存著歷史記錄的數量
```javascript
history.length;
```
- 每日單詞
- JavaScript 入門
- JavaScript 基礎
- JavaScript 基礎回顧
- JavaScript 函數
- 匿名函數,多維數組,數據類型轉換
- JavaScript 類型轉換, 變量作用域
- js 運算符(一)
- js 運算符(二)
- js 流程控制語句
- JavaScript 掃盲日
- JavaScript 牛刀小試(一)
- JavaScript 牛刀小試(二)
- JavaScript 再談函數
- JavaScript-BOM
- JavaScript-定時器(一)
- JavaScript-定時器(二)
- 番外-輪播圖源碼
- JavaScript 輪播圖和 DOM 簡介
- JavaScript-DOM 基礎-NODE 接口-屬性
- JavaScript-DOM 基礎-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 節點
- CSS 復習與擴展(一)
- CSS 復習與擴展(二)
- 走進 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高級
- jquery 備忘清單-1
- jquery 備忘清單-2
- 聊聊 json
- jquery 備忘清單-3