網頁三劍客：HTML+CSS+JavaScript 之JavaScript

番茄西紅柿發布于2019-04-23 11:46 / 2373人閱讀

摘要：對事件的反應實例歡迎點我函數在中并不常用，但它對于代碼測試非常方便。實例不是數字以上實例只是普通的驗證，如果要在生產環境中使用，需要嚴格判斷，如果輸入的空格，或者連續空格是判別不出來的。

JavaScript 簡介

JavaScript 是互聯網上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備。

JavaScript 是腳本語言

JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行。
JavaScript 很容易學習。

JavaScript：直接寫入 HTML 輸出流

實例

document.write("

這是一個標題

"); document.write("

這是一個段落。

");

JavaScript：對事件的反應

實例

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

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

JavaScript：改變 HTML 內容

使用 JavaScript 來處理 HTML 內容是非常強大的功能。

實例

x=document.getElementById("demo"); //查找元素 x.innerHTML="Hello JavaScript"; //改變內容
您會經常看到 document.getElementById("some id")。這個方法是 HTML DOM 中定義的。
DOM (Document Object Model)（文檔對象模型）是用于訪問 HTML 元素的正式 W3C 標準。

JavaScript：改變 HTML 圖像

本例會動態地改變 HTML 的來源（src）：

點亮燈泡

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

JavaScript 能夠改變任意 HTML 元素的大多數屬性，而不僅僅是圖片。

JavaScript：改變 HTML 樣式

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

實例

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

JavaScript：驗證輸入

JavaScript 常用于驗證用戶的輸入。

實例

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

以上實例只是普通的驗證，如果要在生產環境中使用，需要嚴格判斷，如果輸入的空格，或者連續空格 isNaN 是判別不出來的。可以添加正則來判斷。

實例

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

您知道嗎？

	JavaScript 與 Java 是兩種完全不同的語言，無論在概念上還是設計上。 Java（由 Sun 發明）是更復雜的編程語言。 ECMA-262 是 JavaScript 標準的官方名稱。 JavaScript 由 Brendan Eich 發明。它于 1995 年出現在 Netscape 中（該瀏覽器已停止更新），并于 1997 年被 ECMA（一個標準協會）采納。

ECMAScript 版本

JavaScript 已經由 ECMA（歐洲電腦制造商協會）通過 ECMAScript 實現語言的標準化。

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

ECMAScript 6 也稱為 ECMAScript 2015。

ECMAScript 7 也稱為 ECMAScript 2016。

JavaScript的實現

雖然JavaScript和ECMAScript通常都被人們用來表達相同的含義,但是JavaScript的含義比ECMA-262中規定的多的多。所以，一個完整的JavaScript的實現由以下3個不同的部分組成：

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

JavaScript的這三個組成部分，在當前五個主要瀏覽器(IE、Firefox、Chrome、Safari和Opera)中都得到了不同程度的支持。其中，所有瀏覽器對ECMAScript第3版的支持大體上都還不錯，而對ECMAScript5的支持程度越來越高，但對DOM的支持則彼此相差比較多。對HTML5已經正式納入標準的BOM來說，盡管各瀏覽器都實現了某些眾所周知的共同特性，但是其他特性還是會因瀏覽器而異。

GPU云服務器云服務器 html css javascript html5css3javascript javascript+css javascript修改css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1140.html

前端的發展歷程

摘要：前端的發展歷程什么是前端前端針對瀏覽器的開發，代碼在瀏覽器運行后端針對服務器的開發，代碼在服務器運行前端三劍客超文本標記語言是構成世界的基石。前端的發展歷程什么是前端前端：針對瀏覽器的開發，代碼在瀏覽器運行后端：針對服務器的開發，代碼在服務器運行前端三劍客 HTML CSS JavaScript HTML HTML（超文本標記語言——HyperText Markup ...

劉明 2019-08-23 14:17 評論0 收藏0
web前端入門教程【1】

摘要：本人水平有限，文中錯誤不當之處難免，敬請不吝賜教。前端需要什么前端工程師是離用戶最近的開發人員，我們要讓用戶有最完美的體驗忽略無理取鬧的需求。掌握基本的前端開發技術。 showImg(https://segmentfault.com/img/bVbkf1c?w=1800&h=1200); 本人水平有限，文中錯誤不當之處難免，敬請不吝賜教。前言本人自己看視頻看書入門之后從事前端工作，...

shmily 2019-08-23 13:46 評論0 收藏0
web前端入門教程【1】

摘要：本人水平有限，文中錯誤不當之處難免，敬請不吝賜教。前端需要什么前端工程師是離用戶最近的開發人員，我們要讓用戶有最完美的體驗忽略無理取鬧的需求。掌握基本的前端開發技術。 showImg(https://segmentfault.com/img/bVbkf1c?w=1800&h=1200); 本人水平有限，文中錯誤不當之處難免，敬請不吝賜教。前言本人自己看視頻看書入門之后從事前端工作，...

Yi_Zhi_Yu 2019-08-02 12:07 評論0 收藏0
web前端入門教程【1】

摘要：本人水平有限，文中錯誤不當之處難免，敬請不吝賜教。前端需要什么前端工程師是離用戶最近的開發人員，我們要讓用戶有最完美的體驗忽略無理取鬧的需求。掌握基本的前端開發技術。 showImg(https://segmentfault.com/img/bVbkf1c?w=1800&h=1200); 本人水平有限，文中錯誤不當之處難免，敬請不吝賜教。前言本人自己看視頻看書入門之后從事前端工作，...

betacat 2019-08-29 17:25 評論0 收藏0
Javascript 打包工具

摘要：所以，打包工具就出現了，它可以幫助做這些繁瑣的工作。打包工具介紹僅介紹款主流的打包工具，，，，以發布時間為順序。它定位是模塊打包器，而屬于構建工具。而且在其他的打包工具在處理非網頁文件比如等基本還是需要借助它來實現。本文當時寫在本地，發現換電腦很不是方便，在這里記錄下。前端的打包工具打包工具可以更好的管理html，css，javascript，使用可以錦上添花，不使用也沒關系...

Sleepy 2019-08-23 18:03 評論0 收藏0