一、JavaScript 教程
JavaScript 輸出
JavaScript 可以通過不同的方式來輸出數(shù)據(jù)：
- 使用
window.alert()彈出警告框。
<script>
window.alert(5 + 6);
</script>
- 使用
document.write()方法將內(nèi)容寫到 HTML 文檔中。
<h1>我的第一個(gè) Web 頁面</h1>
<p>我的第一個(gè)段落。</p>
<script>
document.write(Date());
</script>
- 使用
innerHTML寫入到 HTML 元素。
如需從 JavaScript 訪問某個(gè) HTML 元素，您可以使用 document.getElementById(id)方法。
請(qǐng)使用 “id” 屬性來標(biāo)識(shí) HTML 元素，并innerHTML來獲取或插入元素內(nèi)容：
<p id="demo">我的第一個(gè)段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
document.getElementById("demo")是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。
innerHTML = "段落已修改。"是用于修改元素的 HTML 內(nèi)容的 JavaScript 代碼。
- 使用
console.log()寫入到瀏覽器的控制臺(tái)。
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
JavaScript 對(duì)象
- 對(duì)象定義
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; - 訪問對(duì)象屬性
你可以通過兩種方式訪問對(duì)象屬性:person.lastName;或person["lastName"]; - 對(duì)象方法
對(duì)象的方法定義了一個(gè)函數(shù)，并作為對(duì)象的屬性存儲(chǔ)。
對(duì)象方法通過添加 () 調(diào)用 (作為一個(gè)函數(shù))。
該實(shí)例訪問了 person 對(duì)象的 fullName() 方法: name = person.fullName();
- 訪問對(duì)象的方法
你可以使用以下語法創(chuàng)建對(duì)象方法：
methodName : function() {
// 代碼
}
你可以使用以下語法訪問對(duì)象方法：objectName.methodName()
JavaScript 函數(shù)
函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
<body>
<button onclick="myFunction()">點(diǎn)我</button>
</body>
- 函數(shù)語法
函數(shù)就是包裹在花括號(hào)中的代碼塊，前面使用了關(guān)鍵詞 function：
function functionname()
{
// 執(zhí)行代碼
}
- 調(diào)用帶參數(shù)的函數(shù)
<p>點(diǎn)擊這個(gè)按鈕，來調(diào)用帶參數(shù)的函數(shù)。</p>
<button onclick="myFunction('Harry Potter','Wizard')">點(diǎn)擊這里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
- 帶有返回值的函數(shù)
計(jì)算兩個(gè)數(shù)字的乘積，并返回結(jié)果：
<p>本例調(diào)用的函數(shù)會(huì)執(zhí)行一個(gè)計(jì)算，然后返回結(jié)果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
“demo” 元素的 innerHTML 將是：12
JavaScript 事件
HTML 事件是發(fā)生在 HTML 元素上的事情。
當(dāng)在 HTML 頁面中使用 JavaScript 時(shí)， JavaScript 可以觸發(fā)這些事件。
- HTML事件
HTML 事件可以是瀏覽器行為，也可以是用戶行為。
以下是 HTML 事件的實(shí)例：
- HTML 頁面完成加載
- HTML input 字段改變時(shí)
- HTML 按鈕被點(diǎn)擊
通常，當(dāng)事件發(fā)生時(shí)，你可以做些事情。
在事件觸發(fā)時(shí) JavaScript 可以執(zhí)行一些代碼。
在以下實(shí)例中，按鈕元素中添加了 onclick 屬性:
<button onclick="getElementById('demo').innerHTML=Date()">現(xiàn)在的時(shí)間是?</button>
<p id="demo"></p>
以上實(shí)例中，JavaScript 代碼將修改 id=“demo” 元素的內(nèi)容。
在下一個(gè)實(shí)例中，代碼將修改自身元素的內(nèi)容 (使用this.innerHTML):
<button onclick="this.innerHTML=Date()">現(xiàn)在的時(shí)間是?</button>
JavaScript代碼通常是幾行代碼。比較常見的是通過事件屬性來調(diào)用：
<p>點(diǎn)擊按鈕執(zhí)行 <em>displayDate()</em> 函數(shù).</p>
<button onclick="displayDate()">點(diǎn)這里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
JavaScript let 和 const
ES2015(ES6) 新增加了兩個(gè)重要的 JavaScript 關(guān)鍵字: let 和 const。
let 聲明的變量只在 let 命令所在的代碼塊內(nèi)有效。
const 聲明一個(gè)只讀的常量，一旦聲明，常量的值就不能改變。
重新定義變量
let 聲明的變量只在 let 命令所在的代碼塊 {} 內(nèi)有效，在 {} 之外不能訪問。
var x = 10;
// 這里輸出 x 為 10
{
let x = 2;
// 這里輸出 x 為 2
}
// 這里輸出 x 為 10
循環(huán)作用域
var i = 5;
for (let i = 0; i < 10; i++) {
// 一些代碼...
}
// 這里輸出 i 為 5
使用 let 關(guān)鍵字， 它聲明的變量作用域只在循環(huán)體內(nèi)，循環(huán)體外的變量不受影響。
const 關(guān)鍵字
const 用于聲明一個(gè)或多個(gè)常量，聲明時(shí)必須進(jìn)行初始化，且初始化后值不可再修改：
const PI = 3.141592653589793;
PI = 3.14; // 報(bào)錯(cuò)
PI = PI + 10; // 報(bào)錯(cuò)
并非真正的常量
const 的本質(zhì): const 定義的變量并非常量，并非不可變，它定義了一個(gè)常量引用一個(gè)值。使用 const 定義的對(duì)象或者數(shù)組，其實(shí)是可變的。下面的代碼并不會(huì)報(bào)錯(cuò)：
// 創(chuàng)建常量對(duì)象
const car = {type:"Fiat", model:"500", color:"white"};
// 修改屬性:
car.color = "red";
// 添加屬性
car.owner = "Johnson";
但是我們不能對(duì)常量對(duì)象重新賦值：
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // 錯(cuò)誤
以下實(shí)例修改常量數(shù)組：
// 創(chuàng)建常量數(shù)組
const cars = ["Saab", "Volvo", "BMW"];
// 修改元素
cars[0] = "Toyota";
// 添加元素
cars.push("Audi");
但是我們不能對(duì)常量數(shù)組重新賦值：
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; // 錯(cuò)誤
重置變量
const 關(guān)鍵字在不同作用域，或不同塊級(jí)作用域中是可以重新聲明賦值的:
const x = 2; // 合法
{
const x = 3; // 合法
}
{
const x = 4; // 合法
}
JavaScript JSON
JSON 是用于存儲(chǔ)和傳輸數(shù)據(jù)的格式。
JSON 通常用于服務(wù)端向網(wǎng)頁傳遞數(shù)據(jù)
什么是 JSON？
- JSON 英文全稱 JavaScript Object Notation
- JSON 是一種輕量級(jí)的數(shù)據(jù)交換格式。
- JSON是獨(dú)立的語言 *
- JSON 易于理解。
JSON 實(shí)例
以下 JSON 語法定義了 sites 對(duì)象: 3 條網(wǎng)站信息（對(duì)象）的數(shù)組:
{"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]}
JSON 語法規(guī)則
- 數(shù)據(jù)為 鍵/值 對(duì)。
- 數(shù)據(jù)由逗號(hào)分隔。
- 大括號(hào)保存對(duì)象
- 方括號(hào)保存數(shù)組
JSON 數(shù)據(jù) - 一個(gè)名稱對(duì)應(yīng)一個(gè)值
JSON 數(shù)據(jù)格式為 鍵/值 對(duì)，就像 JavaScript 對(duì)象屬性。
鍵/值對(duì)包括字段名稱（在雙引號(hào)中），后面一個(gè)冒號(hào)，然后是值：
"name":"Runoob"
JSON 對(duì)象
JSON 對(duì)象保存在大括號(hào)內(nèi)。
就像在 JavaScript 中, 對(duì)象可以保存多個(gè) 鍵/值 對(duì)：
{"name":"Runoob", "url":"www.runoob.com"}
JSON 數(shù)組
JSON 數(shù)組保存在中括號(hào)內(nèi)。
就像在 JavaScript 中, 數(shù)組可以包含對(duì)象：
"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]
在以上實(shí)例中，對(duì)象 “sites” 是一個(gè)數(shù)組，包含了三個(gè)對(duì)象。
每個(gè)對(duì)象為站點(diǎn)的信息（網(wǎng)站名和網(wǎng)站地址）。
JSON 字符串轉(zhuǎn)換為 JavaScript 對(duì)象
通常我們從服務(wù)器中讀取 JSON 數(shù)據(jù)，并在網(wǎng)頁中顯示數(shù)據(jù)。
簡單起見，我們網(wǎng)頁中直接設(shè)置 JSON 字符串:
首先，創(chuàng)建 JavaScript 字符串，字符串為 JSON 格式的數(shù)據(jù)：
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
然后，使用 JavaScript 內(nèi)置函數(shù) JSON.parse() 將字符串轉(zhuǎn)換為 JavaScript 對(duì)象:
var obj = JSON.parse(text);
最后，在你的頁面中使用新的 JavaScript 對(duì)象：
<h2>為 JSON 字符串創(chuàng)建對(duì)象</h2>
<p id="demo"></p>
<script>
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>
JavaScript void
下面的代碼創(chuàng)建了一個(gè)超級(jí)鏈接，當(dāng)用戶點(diǎn)擊以后不會(huì)發(fā)生任何事。
<a href="javascript:void(0)">單擊此處什么也不會(huì)發(fā)生</a>
當(dāng)用戶鏈接時(shí)，void(0) 計(jì)算為 0，但 Javascript 上沒有任何效果。
以下實(shí)例中，在用戶點(diǎn)擊鏈接后顯示警告信息：
<p>點(diǎn)擊以下鏈接查看結(jié)果：</p>
<a href="javascript:void(alert('Warning!!!'))">點(diǎn)我!</a>
href="#"與href="javascript:void(0)"的區(qū)別
包含了一個(gè)位置信息，默認(rèn)的錨是#top也就是網(wǎng)頁的上端，#pos是網(wǎng)頁的下端。
而javascript:void(0), 僅僅表示一個(gè)死鏈接。
在頁面很長的時(shí)候會(huì)使用 # 來定位頁面的具體位置，格式為：# + id。
JavaScript 異步編程
異步的概念
異步（Asynchronous, async）是與同步（Synchronous, sync）相對(duì)的概念。
在我們學(xué)習(xí)的傳統(tǒng)單線程編程中，程序的運(yùn)行是同步的（同步不意味著所有步驟同時(shí)運(yùn)行，而是指步驟在一個(gè)控制流序列中按順序執(zhí)行）。而異步的概念則是不保證同步的概念，也就是說，一個(gè)異步過程的執(zhí)行將不再與原有的序列有順序關(guān)系。
簡單來理解就是：同步按你的代碼順序執(zhí)行，異步不按照代碼順序執(zhí)行，異步的執(zhí)行效率更高。
以上是關(guān)于異步的概念的解釋，接下來我們通俗地解釋一下異步：異步就是從主線程發(fā)射一個(gè)子線程來完成任務(wù)。
什么時(shí)候用異步編程
現(xiàn)在有一個(gè)按鈕，如果我們?cè)O(shè)置它的 onclick 事件為一個(gè)死循環(huán)，那么當(dāng)這個(gè)按鈕按下，整個(gè)網(wǎng)頁將失去響應(yīng)。
為了避免這種情況的發(fā)生，我們常常用子線程來完成一些可能消耗時(shí)間足夠長以至于被用戶察覺的事情，比如讀取一個(gè)大文件或者發(fā)出一個(gè)網(wǎng)絡(luò)請(qǐng)求。因?yàn)樽泳€程獨(dú)立于主線程，所以即使出現(xiàn)阻塞也不會(huì)影響主線程的運(yùn)行。但是子線程有一個(gè)局限：一旦發(fā)射了以后就會(huì)與主線程失去同步，我們無法確定它的結(jié)束，如果結(jié)束之后需要處理一些事情，比如處理來自服務(wù)器的信息，我們是無法將它合并到主線程中去的。
為了解決這個(gè)問題，JavaScript 中的異步操作函數(shù)往往通過回調(diào)函數(shù)來實(shí)現(xiàn)異步任務(wù)的結(jié)果處理。
回調(diào)函數(shù)
回調(diào)函數(shù)就是一個(gè)函數(shù)，它是在我們啟動(dòng)一個(gè)異步任務(wù)的時(shí)候就告訴它：等你完成了這個(gè)任務(wù)之后要干什么。這樣一來主線程幾乎不用關(guān)心異步任務(wù)的狀態(tài)了，他自己會(huì)善始善終。
<p>回調(diào)函數(shù)等待 3 秒后執(zhí)行。</p>
<p id="demo"></p>
<script>
function print() {
document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);
</script>
主線程先執(zhí)行
三秒后子線程執(zhí)行
這段程序中的 setTimeout 就是一個(gè)消耗時(shí)間較長（3 秒）的過程，它的第一個(gè)參數(shù)是個(gè)回調(diào)函數(shù)，第二個(gè)參數(shù)是毫秒數(shù)，這個(gè)函數(shù)執(zhí)行之后會(huì)產(chǎn)生一個(gè)子線程，子線程會(huì)等待 3 秒，然后執(zhí)行回調(diào)函數(shù) “print”，在命令行輸出 “RUNOOB!”。
當(dāng)然，JavaScript 語法十分友好，我們不必單獨(dú)定義一個(gè)函數(shù) print ，我們常常將上面的程序?qū)懗桑?/p>
<p>回調(diào)函數(shù)等待 3 秒后執(zhí)行。</p>
<p id="demo"></p>
<script>
setTimeout(function () {
document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
</script>
3 秒后：
注意：既然 setTimeout 會(huì)在子線程中等待 3 秒，在 setTimeout 函數(shù)執(zhí)行之后主線程并沒有停止，所以：
setTimeout(function () {
document.getElementById("demo1").innerHTML="RUNOOB-1!"; // 三秒后子線程執(zhí)行
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!"; // 主線程先執(zhí)行
異步 AJAX
除了 setTimeout 函數(shù)以外，異步回調(diào)廣泛應(yīng)用于 AJAX 編程。有關(guān)于 AJAX 詳細(xì)請(qǐng)參見：https://www.runoob.com/ajax/ajax-tutorial.html
JavaScript Promise
Promise 是一個(gè) ECMAScript 6 提供的類，目的是更加優(yōu)雅地書寫復(fù)雜的異步任務(wù)。
構(gòu)造 Promise
現(xiàn)在我們新建一個(gè) Promise 對(duì)象：
new Promise(function (resolve, reject) {
// 要做的事情...
});
Promise 的構(gòu)造函數(shù)
Promise 構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)是同步的并且會(huì)被立即執(zhí)行，所以我們稱之為起始函數(shù)。起始函數(shù)包含兩個(gè)參數(shù) resolve 和 reject，分別表示 Promise 成功和失敗的狀態(tài)。
起始函數(shù)執(zhí)行成功時(shí)，它應(yīng)該調(diào)用 resolve 函數(shù)并傳遞成功的結(jié)果。當(dāng)起始函數(shù)執(zhí)行失敗時(shí)，它應(yīng)該調(diào)用 reject 函數(shù)并傳遞失敗的原因。
Promise 構(gòu)造函數(shù)返回一個(gè) Promise 對(duì)象，該對(duì)象具有以下幾個(gè)方法：
- then：用于處理 Promise 成功狀態(tài)的回調(diào)函數(shù)。
- catch：用于處理 Promise 失敗狀態(tài)的回調(diào)函數(shù)。
- finally：無論 Promise 是成功還是失敗，都會(huì)執(zhí)行的回調(diào)函數(shù)。
下面是一個(gè)使用 Promise 構(gòu)造函數(shù)創(chuàng)建 Promise 對(duì)象的例子：
當(dāng) Promise 被構(gòu)造時(shí)，起始函數(shù)會(huì)被同步執(zhí)行：
const promise = new Promise((resolve, reject) => {
// 異步操作
setTimeout(() => {
if (Math.random() < 0.5) {
resolve('success');
} else {
reject('error');
}
}, 1000);
});
promise.then(result => {
console.log(result);
}).catch(error => {
console.log(error);
});
在上面的例子中，我們使用 Promise 構(gòu)造函數(shù)創(chuàng)建了一個(gè) Promise 對(duì)象，并使用 setTimeout 模擬了一個(gè)異步操作。如果異步操作成功，則調(diào)用 resolve 函數(shù)并傳遞成功的結(jié)果；如果異步操作失敗，則調(diào)用 reject 函數(shù)并傳遞失敗的原因。然后我們使用 then 方法處理 Promise 成功狀態(tài)的回調(diào)函數(shù)，使用 catch 方法處理 Promise 失敗狀態(tài)的回調(diào)函數(shù)。
這段程序會(huì)直接輸出 error 或 success。
resolve 和 reject 都是函數(shù)，其中調(diào)用 resolve 代表一切正常，reject 是出現(xiàn)異常時(shí)所調(diào)用的：
new Promise(function (resolve, reject) {
var a = 0;
var b = 1;
if (b == 0) reject("Divide zero");
else resolve(a / b);
}).then(function (value) {
console.log("a / b = " + value);
}).catch(function (err) {
console.log(err);
}).finally(function () {
console.log("End");
});
這段程序執(zhí)行結(jié)果是:
a / b = 0
End
Promise 類有 .then() .catch() 和 .finally() 三個(gè)方法，這三個(gè)方法的參數(shù)都是一個(gè)函數(shù)，.then() 可以將參數(shù)中的函數(shù)添加到當(dāng)前 Promise 的正常執(zhí)行序列，.catch() 則是設(shè)定 Promise 的異常處理序列，.finally() 是在 Promise 執(zhí)行的最后一定會(huì)執(zhí)行的序列。 .then() 傳入的函數(shù)會(huì)按順序依次執(zhí)行，有任何異常都會(huì)直接跳到 catch 序列：
new Promise(function (resolve, reject) {
console.log(1111);
resolve(2222);
}).then(function (value) {
console.log(value);
return 3333;
}).then(function (value) {
console.log(value);
throw "An error";
}).catch(function (err) {
console.log(err);
});
執(zhí)行結(jié)果：
1111
2222
3333
An error
Promise 函數(shù)
上述的 “計(jì)時(shí)器” 程序看上去比函數(shù)瀑布還要長，所以我們可以將它的核心部分寫成一個(gè) Promise 函數(shù)：
function print(delay, message) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(message);
resolve();
}, delay);
});
}
然后我們就可以放心大膽的實(shí)現(xiàn)程序功能了：
print(1000, "First").then(function () {
return print(4000, "Second");
}).then(function () {
print(3000, "Third");
});
這種返回值為一個(gè) Promise 對(duì)象的函數(shù)稱作 Promise 函數(shù)，它常常用于開發(fā)基于異步操作的庫。
異步函數(shù)
異步函數(shù)（async function）是 ECMAScript 2017 (ECMA-262) 標(biāo)準(zhǔn)的規(guī)范，幾乎被所有瀏覽器所支持，除了 Internet Explorer。
在 Promise 中我們編寫過一個(gè) Promise 函數(shù)：
function print(delay, message) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(message);
resolve();
}, delay);
});
}
然后用不同的時(shí)間間隔輸出了三行文本：
print(1000, "First").then(function () {
return print(4000, "Second");
}).then(function () {
print(3000, "Third");
});
我們可以將這段代碼變得更好看：
async function asyncFunc() {
await print(1000, "First");
await print(4000, "Second");
await print(3000, "Third");
}
asyncFunc();
異步函數(shù) async function 中可以使用 await 指令，await 指令后必須跟著一個(gè) Promise，異步函數(shù)會(huì)在這個(gè) Promise 運(yùn)行中暫停，直到其運(yùn)行結(jié)束再繼續(xù)運(yùn)行。
處理異常的機(jī)制將用 try-catch 塊實(shí)現(xiàn)：
async function asyncFunc() {
try {
await new Promise(function (resolve, reject) {
throw "Some error"; // 或者 reject("Some error")
});
} catch (err) {
console.log(err);
// 會(huì)輸出 Some error
}
}
asyncFunc();
如果 Promise 有一個(gè)正常的返回值，await 語句也會(huì)返回它：文章來源：http://www.zghlxwxcb.cn/news/detail-714203.html
async function asyncFunc() {
let value = await new Promise(
function (resolve, reject) {
resolve("Return value");
}
);
console.log(value);
}
asyncFunc();
程序會(huì)輸出:Return value文章來源地址http://www.zghlxwxcb.cn/news/detail-714203.html
到了這里，關(guān)于JavaScript 教程---菜鳥教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
