網(wǎng)頁(yè)三劍客：HTML+CSS+JavaScript 之JavaScript

番茄西紅柿發(fā)布于2019-04-23 11:46 / 2367人閱讀

摘要：對(duì)事件的反應(yīng)實(shí)例歡迎點(diǎn)我函數(shù)在中并不常用，但它對(duì)于代碼測(cè)試非常方便。實(shí)例不是數(shù)字以上實(shí)例只是普通的驗(yàn)證，如果要在生產(chǎn)環(huán)境中使用，需要嚴(yán)格判斷，如果輸入的空格，或者連續(xù)空格是判別不出來(lái)的。

JavaScript 簡(jiǎn)介

JavaScript 是互聯(lián)網(wǎng)上最流行的腳本語(yǔ)言，這門(mén)語(yǔ)言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。

JavaScript 是腳本語(yǔ)言

JavaScript 是一種輕量級(jí)的編程語(yǔ)言。
JavaScript 是可插入 HTML 頁(yè)面的編程代碼。
JavaScript 插入 HTML 頁(yè)面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。
JavaScript 很容易學(xué)習(xí)。

JavaScript：直接寫(xiě)入 HTML 輸出流

實(shí)例

document.write("

這是一個(gè)標(biāo)題

"); document.write("

這是一個(gè)段落。

");

JavaScript：對(duì)事件的反應(yīng)

實(shí)例

<button type="button" onclick="alert(歡迎!)">點(diǎn)我!button>

alert() 函數(shù)在 JavaScript 中并不常用，但它對(duì)于代碼測(cè)試非常方便。

JavaScript：改變 HTML 內(nèi)容

使用 JavaScript 來(lái)處理 HTML 內(nèi)容是非常強(qiáng)大的功能。

實(shí)例

x=document.getElementById("demo"); //查找元素 x.innerHTML="Hello JavaScript"; //改變內(nèi)容
您會(huì)經(jīng)常看到 document.getElementById("some id")。這個(gè)方法是 HTML DOM 中定義的。
DOM (Document Object Model)（文檔對(duì)象模型）是用于訪問(wèn) HTML 元素的正式 W3C 標(biāo)準(zhǔn)。

JavaScript：改變 HTML 圖像

本例會(huì)動(dòng)態(tài)地改變 HTML 的來(lái)源（src）：

點(diǎn)亮燈泡

以上實(shí)例中代碼 element.src.match("bulbon") 的作用意思是：檢索里面 src 屬性的值有沒(méi)有包含 bulbon 這個(gè)字符串，如果存在字符串 bulbon，圖片 src 更新為 bulboff.gif，若匹配不到 bulbon 字符串，src 則更新為 bulbon.gif

JavaScript 能夠改變?nèi)我?HTML 元素的大多數(shù)屬性，而不僅僅是圖片。

JavaScript：改變 HTML 樣式

改變 HTML 元素的樣式，屬于改變 HTML 屬性的變種。

實(shí)例

x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改變樣式

JavaScript：驗(yàn)證輸入

JavaScript 常用于驗(yàn)證用戶(hù)的輸入。

實(shí)例

if isNaN(x) { alert("不是數(shù)字"); }

以上實(shí)例只是普通的驗(yàn)證，如果要在生產(chǎn)環(huán)境中使用，需要嚴(yán)格判斷，如果輸入的空格，或者連續(xù)空格 isNaN 是判別不出來(lái)的。可以添加正則來(lái)判斷。

實(shí)例

if(isNaN(x)||x.replace(/(^s*)|(s*$)/g,"")==""){ alert("不是數(shù)字"); }

您知道嗎？

	JavaScript 與 Java 是兩種完全不同的語(yǔ)言，無(wú)論在概念上還是設(shè)計(jì)上。 Java（由 Sun 發(fā)明）是更復(fù)雜的編程語(yǔ)言。 ECMA-262 是 JavaScript 標(biāo)準(zhǔn)的官方名稱(chēng)。 JavaScript 由 Brendan Eich 發(fā)明。它于 1995 年出現(xiàn)在 Netscape 中（該瀏覽器已停止更新），并于 1997 年被 ECMA（一個(gè)標(biāo)準(zhǔn)協(xié)會(huì)）采納。

JavaScript 與 Java 是兩種完全不同的語(yǔ)言，無(wú)論在概念上還是設(shè)計(jì)上。
Java（由 Sun 發(fā)明）是更復(fù)雜的編程語(yǔ)言。

ECMA-262 是 JavaScript 標(biāo)準(zhǔn)的官方名稱(chēng)。

JavaScript 由 Brendan Eich 發(fā)明。它于 1995 年出現(xiàn)在 Netscape 中（該瀏覽器已停止更新），并于 1997 年被 ECMA（一個(gè)標(biāo)準(zhǔn)協(xié)會(huì)）采納。

ECMAScript 版本

JavaScript 已經(jīng)由 ECMA（歐洲電腦制造商協(xié)會(huì)）通過(guò) ECMAScript 實(shí)現(xiàn)語(yǔ)言的標(biāo)準(zhǔn)化。

年份	名稱(chēng)	描述
1997	ECMAScript 1	第一個(gè)版本
1998	ECMAScript 2	版本變更
1999	ECMAScript 3	添加正則表達(dá)式添加 try/catch
	ECMAScript 4	沒(méi)有發(fā)布
2009	ECMAScript 5	添加 "strict mode"，嚴(yán)格模式添加 JSON 支持
2011	ECMAScript 5.1	版本變更
2015	ECMAScript 6	添加類(lèi)和模塊
2016	ECMAScript 7	增加指數(shù)運(yùn)算符 (**) 增加 Array.prototype.includes

ECMAScript 6 也稱(chēng)為 ECMAScript 2015。

ECMAScript 7 也稱(chēng)為 ECMAScript 2016。

JavaScript的實(shí)現(xiàn)

雖然JavaScript和ECMAScript通常都被人們用來(lái)表達(dá)相同的含義,但是JavaScript的含義比ECMA-262中規(guī)定的多的多。所以，一個(gè)完整的JavaScript的實(shí)現(xiàn)由以下3個(gè)不同的部分組成：

ECMAScript,由ECMA-262定義，描述了該語(yǔ)言的語(yǔ)法和基本對(duì)象。
文檔對(duì)象模型(DOM)，描述處理網(wǎng)頁(yè)內(nèi)容的方法和接口。
瀏覽器對(duì)象模型(BOM)，描述與瀏覽器進(jìn)行交互的方法。

JavaScript的這三個(gè)組成部分，在當(dāng)前五個(gè)主要瀏覽器(IE、Firefox、Chrome、Safari和Opera)中都得到了不同程度的支持。其中，所有瀏覽器對(duì)ECMAScript第3版的支持大體上都還不錯(cuò)，而對(duì)ECMAScript5的支持程度越來(lái)越高，但對(duì)DOM的支持則彼此相差比較多。對(duì)HTML5已經(jīng)正式納入標(biāo)準(zhǔn)的BOM來(lái)說(shuō)，盡管各瀏覽器都實(shí)現(xiàn)了某些眾所周知的共同特性，但是其他特性還是會(huì)因?yàn)g覽器而異。