JavaScript已經成為現代web開發的主流。這種強大的語言已經發展成為任何web開發人員都能理解的基本工具。

JavaScript具有不同於傳統編程語言的特殊特性。我們將深入研究它是什麼，它是如何工作的，以及你能用它做什麼。我們把它分解一下。

什麼是javascript語言(javascript)？

JavaScript是一種web腳本語言。它是一種解釋語言，這意味著它不需要編譯器來翻譯它的代碼，如C或C++。JavaScript代碼直接在web瀏覽器中運行。

該語言的最新版本是ECMAScript 2018，於2018年6月發佈。

JavaScript與HTML和CSS一起構建web應用程序或web頁面。大多數現代網絡瀏覽器都支持JavaScript，如Google Chrome、Firefox、Safari、Microsoft Edge、Opera等。大多數Android和iPhone**瀏覽器現在也支持JavaScript。

JavaScript控制web頁面的動態元素。它適用於網絡瀏覽器，最近也適用於網絡服務器。JavaScript還支持應用程序編程接口（API），為您提供了更多功能。

當您瞭解web編程的工作原理時，瞭解JavaScript的所有工作方式就容易多了，所以讓我們瞭解更多。

web應用構建塊

構建網站和應用程序有三個組件：超文本標記語言（HTML）、級聯樣式表（CSS）和JavaScript。每個人在創建web應用程序時都有一個角色。

• HTML是一種創建網頁框架的標記語言。所有的段落、節、圖像、標題和文本都是用HTML編寫的。內容在網站上的顯示順序是以HTML編寫的。
• CSS控制樣式和佈局的其他方面。CSS用於創建網站的設計，創建顏色、字體、列、邊框等。它將網站從純文本元素轉換為彩色設計。
• 第三個元素是JavaScript。HTML和CSS創建了這個結構，但是它們不從那裡做任何事情。JavaScript在應用程序上創建動態活動。JavaScript中的腳本控制按鈕被點擊時的功能、密碼錶單的身份驗證方式、媒體的控制方式。

這三個部分協同工作，創造出全方位的應用程序。如果你對HTML和CSS不太熟悉的話，最好多瞭解它們。

javascript是如何工作的？

在編寫JavaScript之前，瞭解它是如何工作的是很重要的。有兩個重要的部分需要學習：web瀏覽器的工作原理和文檔對象模型（documentobjectmodel，DOM）。

web瀏覽器加載一個web頁面，解析HTML，並從內容中創建一個文檔對象模型（documentobjectmodel，DOM）。DOM向JavaScript代碼提供web頁面的實時視圖。

然後瀏覽器會抓取所有鏈接到HTML的內容，比如圖像和CSS文件。CSS信息來自CSS解析器。

DOM首先將HTML和CSS放在一起創建網頁。然後，瀏覽器的JavaScript引擎加載JavaScript文件和內聯代碼，但不會立即運行代碼。它等待HTML和CSS完成加載。

一旦完成，JavaScript將按照編寫代碼的順序執行。這導致DOM由JavaScript代碼更新並由瀏覽器呈現。

這裡的秩序很重要。如果JavaScript沒有等待HTML和CSS完成，它將無法更改DOM元素。

我可以用javascript做什麼？

JavaScript是一種成熟的編程語言，可以完成像Python這樣的常規語言所能做的大多數事情。其中包括：

• 聲明變量。
• 存儲和檢索值。
• 定義和調用函數，包括箭頭函數。
• 定義JavaScript對象和類。
• 加載和使用外部模塊。
• 編寫響應單擊事件的事件處理程序。
• 正在寫入服務器代碼。
• 還有更多。

警告：由於JavaScript是一種功能強大的語言，因此也有可能編寫惡意軟件、病毒和瀏覽器黑客攻擊來對用戶造成傷害。從盜取瀏覽器cookie、密碼、信用卡到將病毒下載到你的電腦上。

使用javascript

讓我們通過代碼示例來了解一些JavaScript基礎知識。

聲明變量

JavaScript是動態類型的，這意味著您不必在代碼中聲明變量的類型。

let num = 5;let myString = "Hello";var interestRate = 0.25;

操作員

加法

12 + 5>> 17

減法

20 - 8>> 12

乘法

5 * 2>> 10

分部

50 / 2>> 25

模數

45 % 4>> 1

數組

let myArray = [1,2,4,5];let stringArray = ["hello","world"];

功能

JavaScript可以編寫函數，這裡有一個簡單的函數可以添加數字。

function addNumbers(num1,num2){return num1 + num2;}>> addNumbers(10,5);>> 15

循環

JavaScript可以為迭代執行循環，比如for循環和while循環。

for(let i = 0; i < 3; i++){ c***ole.log("echo!"); } >> echo!>> echo!>> echo! let i = 0;while(i < 3) { c***ole.log("echo!");i++; } >> echo!>> echo!>> echo!

評論

// Writing a comment /*Writing a multi-line commentYou can use as many lines as you liketo break up text and make comments more readable*/

在網頁中

在網頁中加載JavaScript最常用的方法是使用scripthtml標記。根據您的需求，您可以使用以下方法之一。

• Load an external JavaScript file into a web page as follows: <script type="text/javascript" src="/path/to/javascript"></script>
• You can specify the complete URL if the javascript is from a different domain from the web page as follows: <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
• JavaScript can be directly embedded in the HTML. Here is an <script type="text/javascript">alert("Page is loaded");</script>

除了這些方法之外，還有一些按需加載JavaScript代碼的方法。事實上，有一些框架專門用於加載和運行JavaScript模塊，並在運行時解析適當的依賴關係。

這些都是更高級的主題，現在你正在學習基礎知識。

javascript代碼片段示例

下面是一些簡單的JavaScript代碼示例，以說明如何在web頁面上使用它。這些是使用DOM的代碼示例。

• The following selects all bold elements in the document and sets the color of the first to red. var elems = document.getElementsByTagName('b');elems[0].style.color = 'red';
• Want to change the image in an img tag? The following associates an event handler for the click event of a button. <img id="myImg" src="prev-image.png"><button onclick="document.getElementById('myImg').src='new-image.png'">Change Image</button>
• Update the text content of a paragraph (p) element? Set the innerHTML property of the element as shown: <p id="first-para">Hello World</p><button onclick="document.getElementById('first-para').innerHTML = "Welcome to JavaScript!"'>Click me</button>

這些代碼示例僅提供了在網頁上使用JavaScript可以做些什麼的一點信息。有很多教程可以教你如何開始編寫代碼。你可以在任何網頁上嘗試，即使是這個！打開您的控制檯並嘗試一些JavaScript代碼。

現在你知道javascript是做什麼的了

希望本文的介紹能給JavaScript帶來一些見解，並讓您對web編程感到興奮。您可以在我們方便的JavaScript備忘單中重述這一切。關於JavaScript還有很多需要學習的地方。一旦您覺得更舒服了，為什麼不嘗試學習如何使用文檔對象模型呢？你也可能對學習打字感興趣。