誰在嘗試訪問某些網站時沒有遇到過更新Java的請求？
雖然許多人通過互動式網站功能熟悉Java，但使用者可能不太熟悉JavaScript——或者，實際上，他們可能錯誤地認為兩者是相同的。
在本文中，我們將討論JavaScript 是什麼以及Java和JavaScript之間的區別。然後我們將概述一些更重要的JavaScript函式。
- 什麼是JavaScript？
- JavaScript用於什麼
- Java和JavaScript之間的差異
- JavaScript安全嗎？
- 原生JavaScript
- JavaScript庫
- JavaScript與網站框架的關係
- JavaScript DOM
- JavaScript的基本元件
- Hoisting
- 物件
- 使用常量和變數
- 函式和方法
- JavaScript中的Promise
- JavaScript中的閉包
什麼是JavaScript？
簡而言之，JavaScript是一種流行的指令碼語言，用於向網頁新增互動功能和其他動態Web內容。眾所周知的JavaScript內容示例包括可填寫的表單、圖片庫幻燈片和動畫圖形。
JavaScript也相對直觀且易於學習。對於那些希望瞭解有關網站開發的更多資訊的人來說，這是一個很好的起點。
JavaScript是高度互動性網站上的最後一層功能。HTML提供頁面的基本結構。CSS是您網站的時尚功能——它設定了您網站的風格。然後JavaScript充當“興奮劑”。
學習JavaScript時，必須瞭解HTML、CSS和JavaScript之間的關係，以及它們如何結合在一起顯示網站。
JavaScript用於什麼
JavaScript有各種應用程式，任何訪問過互動式網頁或移動應用程式的人都可能體驗過。雖然網站開發（包括新增互動表單和動畫等元素）是 JavaScript 最傳統的用途，但它也可用於：
- 基於網路瀏覽器的遊戲——包括2D和3D遊戲
- 移動應用程式開發——有益，因為它與手機平臺無關
- 簡報——建立基於網路的動畫幻燈片
儘管大多數JavaScript應用程式都是客戶端，但JavaScript在伺服器端應用程式中也很有幫助，例如建立Web伺服器。
The Dinosaur Game，一個使用JavaScript建立的內建網頁瀏覽器遊戲的例子
Java和JavaScript之間的差異
首先，重要的是要注意Java和JavaScript並不相關，儘管共享術語“Java”。Java和JavaScript都是用於開發網頁和Web應用程式的語言。但是，它們有明顯的區別，包括：
- 物件導向程式設計： Java是一種物件導向的程式語言。JavaScript是一種基於物件的指令碼語言。
- 語法： JavaScript語法不像Java那樣正式或結構化。因此，對於大多數使用者來說，它更簡單。
- 編譯： Java是編譯型語言，而JavaScript是解釋型語言，在執行時逐行解釋；編譯型語言往往更快，但解釋型語言往往更靈活。
- 環境：通過在虛擬機器或瀏覽器中執行，您基本上可以在任何環境中使用Java應用程式；JavaScript僅適用於瀏覽器。
- 記憶體使用： Java比JavaScript更需要記憶體；這使得JavaScript更適合網頁和Web應用程式。
JavaScript安全嗎？
儘管JavaScript被廣泛接受並用於Web開發，但它確實存在眾所周知的漏洞。通過JavaScript漏洞引入的最常見的網路攻擊之一是跨站點指令碼 (XSS) 攻擊。網路犯罪分子使用XSS攻擊來訪問和竊取身份資訊。為了最大限度地減少漏洞利用，在開發過程中測試和審查您的程式碼至關重要。靜態和動態應用程式安全測試（SAST和DAST）等測試方法有助於識別軟體開發生命週期各個階段的漏洞。根據Cloud Defense的安全分析師的說法, SAST檢查您的程式碼是否違反安全規則，並比較源分支和目標分支之間發現的漏洞。如果您的專案的依賴項受到新披露的漏洞的影響，您會收到通知。
原生JavaScript
Vanilla JavaScript是純JavaScript語言的輕量級實現，沒有新增庫。這裡，術語“vanilla”指的是未定製的JavaScript。許多大公司都使用Vanilla JS，包括谷歌、微軟、蘋果、亞馬遜等。在新增與庫中提供的更高階功能的聯絡之前，Vanilla JavaScript是學習JavaScript程式設計基礎知識的絕佳方式。
JavaScript庫
JavaScript庫是一組執行特定功能的預先編寫的程式碼。圖書館甚至允許新手使用者快速構建有用的網站。它們為新手和有經驗的使用者節省了大量構建站點和應用程式的時間。雖然有許多JavaScript庫，但一些最流行的庫包括 jQuery、Anime.js、Animate on Scroll和Leaflet.js。
JavaScript與網站框架的關係
網站框架是高階網站構建器，通常具有廣泛的預構建功能庫和測試套件。您可能熟悉伺服器端框架，例如Laravel、Ruby on Rails或Django。但也有一些基於JavaScript的流行的客戶端框架，包括React.js，Vue.js，和Node.js。
React庫（圖片來源：Betica）
JavaScript DOM
DOM或文件物件模型充當程式語言（如JavaScript）與底層文件（具體而言，HTML和XML 文件）之間的介面。DOM是W3C（全球資訊網聯盟）標準，定義為“一種平臺和語言中立的介面，允許程式和指令碼動態訪問和更新文件的內容、結構和樣式。” 文件由單個元素和屬性（文字、按鈕、連結等）的集合組成。
JavaScript的基本元件
與其他程式語言一樣，JavaScript使用變數來標識資料的儲存位置。變數可以是全域性的（可由程式碼中的任何函式訪問）或區域性的，也稱為塊範圍（僅在宣告它們的塊中可訪問）。變數可以包含固定值（稱為文字的常量）或可變值。JavaScript有一種特殊的語法來宣告（建立）常量和變數，併為它們賦值。
宣告一個常量
真正的常量是使用const宣告建立的。Const建立只讀的、不可更改的、塊範圍的常量（“塊範圍”意味著常量不能從其宣告的塊外部訪問）。使用const建立常量的示例是：
const GOLDEN_RATIO = 1.618; // create a constant named GOLDEN_RATIO with value 1.618
請注意使用大寫字母命名常量；這是一個普遍接受的命名約定，儘管它不是必需的。變數名稱，包括常量名稱，必須以字母（小寫或大寫）、下劃線字元 ( _) 或美元符號 ( $)開頭。它們區分大小寫，所以一定要記住如何命名變數。與變數不同，常量必須在建立時賦值。以下語句將返回錯誤：
const GOLDEN_RATIO;
宣告一個變數
變數使用var關鍵字宣告。它們不需要在宣告時分配值，儘管這樣做是允許的並且經常這樣做。var關鍵字具有全域性範圍，而不是塊範圍（除非它是一個函式，那麼它的功能範圍內）。
var variable1; // declare a variable called variable1 var variable2 = "2021"; // declare a string variable called variable2 and initialize with value 2021 variable1 = "Thank goodness it's" // assign string value to previously declared variable variable1 console.log(variable1 + " " + variable2); // display "Thank goodness it's 2021"
請注意，JavaScript中的語句必須以分號結尾。您可以使用建立註釋 // — JavaScript ignores anything between // 行尾之間的任何內容。變數可以包含多種資料型別，包括數字、字串和物件。JavaScript中的變數賦值是動態的。因此，您可以在同一程式碼中將變數分配給不同的資料型別。
Hoisting
現在您瞭解了JavaScript中的變數宣告，我們可以討論JavaScript如何處理變數宣告的位置。普遍接受的編碼實踐要求在定義變數之前或同時宣告變數。一些程式語言實際上需要這樣做。然而，JavaScript允許在定義或使用變數後宣告變數。使用稱為提升的功能，JavaScript將宣告移動到當前指令碼或函式的頂部。雖然提升可以通過允許程式設計師更正宣告失敗而無需回滾程式碼來簡化程式設計，但在使用後宣告變數與最佳程式設計實踐不一致. 提升也會導致意外問題，主要是因為提升僅適用於宣告。如果在同一個語句中宣告並初始化了一個變數，提升將在塊的頂部建立一個宣告，併為該變數分配一個未定義的值。因此，在實際宣告語句之前的塊中使用該變數將假定該變數是未定義的，而不是具有初始化值。讓我們使用上面的示例來檢視提升行為：
var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1 console.log(variable_1 + " " + variable_2); // var variable_2 = "2021" // declare and initialize a string variable called variable2
當提升將宣告移動variable_2到塊的頂部時，它不會移動分配的值。此邏輯的工作原理大致相當於以下語法：
var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1 var variable_2; console.log(variable1 + " " + variable2); // variable_2 = "2021" // assign string value to variable2
無論哪種情況，最終值“謝天謝地，現在是2021年”都不是輸出的一部分。我們建議您使用宣告變數的最佳實踐來避免潛在問題並建立更清晰的程式碼。
物件
JavaScript基於物件的概念。物件是可以包含屬性、方法或兩者的容器。考慮一個簡單的例子。您有一個名為“國家”的物件。它的屬性包括它的名稱、大陸、首都和人口。您可以使用JavaScript以多種方式建立此物件。首先，您可以使用物件字面量或物件初始值設定項方法：
var country = {
name:"France",
continent:"Europe",
capital:"Paris",
population:62250000;
}
您還可以例項化一個物件，然後分配其屬性：
var country = new Object(); country.name = "France"; country.continent = "Europe"; country.capital = "Paris"; country.population = 62250000;
請注意，您使用語法來引用物件的屬性object.property。最後，您可以使用建構函式建立物件：
function country(name, continent, capital, population) {
country.name = name;
country.continent = continent;
country.capital = capital;
country.population = population;
}
然後通過以下方式建立物件的例項：
france = new country("France","Europe","Paris",62250000)
物件屬性可以是變數或函式。如下所述，當一個物件屬性是一個函式時，它被稱為一個方法。
物件與類
簡而言之，類是物件的通用結構模板。類使用建構函式形式來描述物件。
class country {
Constructor (name,continent,capital,population) {
country.name = name;
country.continent = continent;
country.capital = capital;
country.population = population;
}
}
就像物件一樣，類也可以有方法。
使用常量和變數
與其他語言一樣，JavaScript有多種型別的運算子用於變數和函式，其中大部分可以立即識別：
- 賦值運算子 (
=,+=,-=,*=,/=,%=) - 比較運算子 (
==,===,!=,!==,>,>=,<,<=) - 按位和邏輯運算子（見下文）
- 算術運算子 (
+,-,*,/,%,++,--) - 特殊運算子
一些運算子對於新手程式設計師來說不太熟悉，例如相同和不相同的比較運算子。===比較兩個運算元是否具有相同的值和型別（即它們相同）。!==比較兩個運算元是否不相同。考慮以下示例：
var variable_1 = 5; // declare variable_1 and assign numeric value 5 var variable_2 = "5"; // declare variable_2 and assign string value "5" console.log(variable_1 === variable_2); console.log(variable_1 !== variable_2);
這段程式碼的輸出將是：
FALSE TRUE
瞭解=（賦值運算子）和==（比較運算子）之間的區別也很重要。while=設定變數的值，==檢查兩個運算元是否具有相同的值，包括變數是否具有給定值。您不應=在條件語句（如 IF 語句）中使用運算子來檢查等效性。
按位和邏輯運算子
JavaScript 支援 AND ( &)、OR ( |)、NOT ( ~) 和 XOR ( ^) 運算。在 JavaScript 中，這些被稱為按位運算子。位運算在運算前將運算元轉換為32位二進位制表示（即20變為10100）。這些操作稱為按位運算，因為它們逐位比較轉換後的運算元，然後返回轉換為整數的32位二進位制結果。例子：
var variable_1 = 20; var variable_2 = 50; console.log(variable_1 | variable_2) // display the result of variable_1 OR variable_2
將運算元轉換為二進位制：
FALSE TRUE
OR運算在任一位為1時返回真 (1)，因此顯示的比較值是110110或53。在JavaScript中，術語邏輯運算子是指運算元只有布林值0或1的運算。JavaScript邏輯運算子是&&(邏輯與）、||（邏輯或）和!（邏輯非）。
var variable_1; var variable_2; variable _1 = (6 > 5); // sets variable_1 to true or 1 variable_2 = (7 <= 6); // sets variable_2 to false or 0 Console.log(variable_1 && variable_2); // displays 0
函式和方法
將函式視為JavaScript中的主力。它們是執行特定任務的程式碼塊。如果您熟悉其他程式語言中的過程和子例程，您會立即認出函式。函式使用以下語法定義：
function function_name(parameter list) {
// tasks to be performed
}
定義函式只是第一步；您稍後必須()在程式碼中使用以下方法呼叫函式：
$()
$()函式是getElementByID方法的簡寫，如上所述，該方法返回HTML DOM的特定元素的ID。它經常用於操作文件中的元素。$()允許更短、更高效的JavaScript編碼。傳統方法：
document.getElementByID("element_id")
$() method:
$("element_id")
函式vs方法
函式執行任務；方法是包含功能定義的物件的屬性。呼叫方法的語法是object.function(). 函式是獨立的；方法與物件相關聯。在上面的示例中，方法document.getElementByID("element_id")引用了一個物件 (document) 和該物件的關聯屬性(getElementbyID())。JavaScript中有兩種型別的方法：
- 例項方法
- 靜態方法
例項方法可以訪問和操作物件例項的屬性。例項方法也可以呼叫另一個例項方法或靜態方法。靜態方法包含與類而不是類的例項相關的邏輯。要建立靜態方法，您必須在函式定義之前使用static一詞。靜態方法只能訪問靜態欄位；他們無法訪問例項欄位。
JavaScript中的Promise
Promise是在未來時間產生結果的物件。在JavaScript術語中，promise被稱為生產和消費程式碼。功能可能需要未指定的大量時間去完成。消費程式碼在執行其功能之前等待非同步生成程式碼的結果。Promise定義了生產程式碼和消費程式碼之間的關係。Promise具有三種可能的狀態：pending、fulfiled或denied。在promise的定義中，指定了兩個引數：resolve或reject。Pending是promise的初始狀態，意味著promise既沒有被實現也沒有被拒絕。Fulfilled意味著promise已經返回了。拒絕意味著承諾已經返回。不再處於掛起狀態的承諾被視為已解決。建立承諾的示例語法是：
var newPromise = new Promise(
function(resolve, reject) {
// condition to be tested
}
)
JavaScript中的閉包
閉包是一個經常讓程式設計師感到困惑的JavaScript特性，雖然它們沒有那麼複雜。JavaScript閉包是處理巢狀函式操作的方法。具體來說，除了通常可以訪問的全域性變數之外，閉包還允許內部函式訪問父函式的內容。請注意，雖然內部函式可以訪問外部函式變數，但反之則不然。要理解閉包，您必須記住作用域基礎知識。函式內的變數通常只能從該函式訪問，並且每次呼叫都會建立作用域，而不是一般的函式。閉包解決了變數通常在函式完成後消失的事實。它們還允許在函式執行後仍然可以訪問變數。考慮以下示例程式碼：
function outer_closure_function() {
var outer_variable = "we want to keep the outer variable";
var inner_closure_function = function() {
inner_variable = "use closures because"
console.log(inner_variable + " " + outer_variable);
}
return inner_closure_function;
}
var closure = outer_closure_function(); // returns a reference to inner_closure_function
closure(); // displays "use closures because we want to keep the outer variable"
要了解此閉包的工作原理，請逐行逐行執行程式碼。首先，定義外部函式，然後定義與之關聯的變數。接下來，您定義內部函式。重要的是要注意您沒有呼叫內部函式——只是定義了它。接下來是返回內部函式的語句。但它返回的不是內部函式的結果；相反，它是函式本身。因此，當您將閉包定義為outer_closure_function時，它不會返回內部函式的實際值。相反，它返回對inner_closure_function的引用。即使在此語句之後外部函式已經完成，並且outer_variable不再正式存在。但它仍然保留在對inner_closure_function的引用中。現在，當您在最後一條語句中呼叫閉包時，將顯示所需的結果。為了更好地理解閉包，您應該自己編寫和測試一些示例。這需要時間來讓他們正確。此外，重複的更新和測試將幫助您建立敏捷開發思維。但是，在使用過程中，請始終牢記安全問題—JavaScript可能會受到嚴重安全問題的影響，例如SQL和LDAP注入、XSS攻擊等。
小結
如果您對Web頁面的興趣比從Wix和Square等開箱即用服務中獲得的更多，您應該考慮學習JavaScript。這是一個簡單易學的網站和應用程式程式設計介紹，可以幫助您向網站新增高度互動的功能，而無需在學習過程中投入太多時間。如果您最終決定進入下一個級別，JavaScript也是開始培養您的編碼技能的絕佳方式。
評論留言