作爲一名全棧工程師，在日常的工作中，可能更側重於後端開發，如：C#，Java，SQL ，Python等，對前端的知識則不太精通。在一些比較完善的公司或者項目中，一般會搭配前端工程師，UI工程師等，來彌補後端開發的一些前端經驗技能上的不足。但並非所有的項目都會有專職前端工程師，在一些小型項目或者初創公司中，職能劃分並不明確，往往要一個人前後端全都會做， 所以作爲一名全棧工程師或者後端工程師，掌握必備的前端知識，也是必不可少的一項技能。今天就着重講解一下，作爲一名全棧工程師，前端JavaScript方面的必須要掌握的相關知識。

什麼是JavaScript?

在前端Web開發中，共有3種語言是開發者必須要掌握的，這3種語言一起組成了Web開發的基石：

HTML 定義網頁的內容
CSS 規定網頁的佈局
JavaScript 對網頁行爲進行編程

JavaScript作爲一種函數式優先，解釋執行，輕量級的編程語言，是目前最爲流行的編程語言之一。JavaScript起於瀏覽器腳本編程，興於Web開發，卻不止於前端腳本語言。目前JavaScript也已經支持後端編程，面向對象等，如Node.js。當然本文講解的內容，主要是側重於Web前端腳本語言進行講解。

創建JavaScript方式

在日常開發中，創建JavaScript腳本一共有2種方式：

內嵌式：在Html頁面中，通過定義【<script type="text/javascript">//javascript代碼</script>】標籤，內嵌JavaScript腳本。這種內嵌式寫法，適用於和當前頁面強相關的業務邏輯內容。
外鏈式：在通常開發中，爲了方便維護，便於移植，JavaScript代碼通常寫在獨立的文件中【如：index.js】，然後在前端Html頁面中進行引入。外鏈式也是目前普遍使用的一種方式。

關於兩種創建形式，如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		//內嵌式javascript代碼
		var a=10;
		var b=2;
		var c=a+b;
		console.log('a+b='+c);
	</script>
	<script src="js/index.js"></script>
	<body>
	</body>
</html>

變量定義

變量在進行業務邏輯處理及數據運算中，主要用於存儲數據，是承載數據的載體。主要通【var 變量名 = 變量值;】的形式進行定義。

構造變量名稱（唯一標識符）的通用規則是：

名稱可包含字母、數字、下劃線和美元符號
名稱必須以字母開頭
名稱也可以 $ 和 _ 開頭（但是在本教程中我們不會這麼做）
名稱對大小寫敏感（y 和 Y 是不同的變量）
保留字（比如 JavaScript 的關鍵詞）無法用作變量名稱

提示：JavaScript 標識符對大小寫敏感。變量命名，建議具有明確的含義，這樣會更加方便理解與維護。

數據類型

在JavaScript中，根據變量所存儲的數據內容的類型不同，可以分爲不同的數據類型，主要有以下幾種：

數值類型number：用於表示數字，包括整數，單精度浮點數，雙精度浮點數等，如： var num=10;//數值類型
文本類型string：用於表示字符串，如： var text=”文本”;//字符串類型
布爾類型boolean：用於表示邏輯上的真和假，只有兩個值：true，false。如： var flag=true; //兩個值，true,false表示真或假
空類型：用於表示空，如：var kong=null;//用於清空變量內容，表示空
未定義：表示此變量只是被聲明，並未賦值。如： var aa;// undefined 默認值。
數組類型：用於存儲多個相同類型的值。
對象類型object：用於表示複雜的結果體，可以存儲多個不同類型的值。注意：空類型，數組類型，都屬於對象類型。

如何查看數據類型？通過typeof(數量名)的形式獲取數據類型，然後再通過console.log()在瀏覽器輸出的形式查看，如下所示：

var arr=[1,2,3,4,5];
console.log(typeof(arr));//輸出object

運算符

運算符主要用於在不同的變量之間進行相應的業務邏輯處理，如：加，減，乘，除等，運算符主要有以下幾種：

算術運算符：用於對數字執行算數運算，如：加，減，乘，除：var sum=1+2-3*4/2;
字符串拼接，用於將多個字符串拼接成一個字符串，不同文本之間用加號進行拼接。
比較運算符：主要用於對不同變量之間進行比較，如：大於，小於，等於，大於等於，小於等於，恆等於，恆不等於，三元表達式等。
邏輯運算符：主要是與，或，非，等邏輯上的運算。
位運算符：主要是針對數字進行的一些位之間的運算，如：位與，位或，位非，異或，左移，右移等。

關於運算符之間的一些示例，如下所示：

var a=10;
var b=2.1;
var c=a+b;
console.log('a+b='+c);
var arr=[1,2,3,4,5];
console.log(typeof(arr));

var flag1 = 2>3;
var flag2=2<3;
var flag3=2==2;//類型一致的比較
var flag4=2===’2’;//更準確，比較兩個值是不是完全一致

注意：不同的運算符都有優先級，如果不同運算符進行組合運算，則需要注意優先級。

代碼塊Statement

代碼塊是JS中用於設置複雜程序的一種語法。幾種常見的代碼塊，如下所示：

1. 條件代碼塊

條件代碼塊，主要用於判斷根據不同條件，執行不同分支的語句，格式主要有以下3種：

//第一種，簡單形
if (條件運算) {
	//滿足條件時執行
}
//第二種，兩分支形
if (條件運算) {
	//條件滿足時執行
} else {
	//條件不滿足時執行
}
//第三種，多分支形
if (條件運算1) {
	//條件1滿足時執行
} else if (條件運算2) {
	//條件2滿足時執行
} else {
	//條件都不滿足時執行
}

2. 循環

循環主要用於多次執行相同的代碼，且每次的執行參數不同。循環主要有以下幾種：

for - 多次遍歷代碼塊
for/in - 遍歷對象屬性
while - 當指定條件爲 true 時循環一段代碼塊
do/while - 當指定條件爲 true 時循環一段代碼塊

其中最常用的是for循環，格式如下所示：

for (語句 1; 語句 2; 語句 3) {
     要執行的代碼塊
}

代碼塊示例，綜合使用循環和條件判斷的示例如下所示：

//求0到100之間的偶數的和
var sum = 0;
for (var i = 0; i < 100; i++) {
	if (i % 2 == 0) {
		sum += i;
	}
}

函數function

函數被設計爲執行特殊功能的代碼塊，作爲一個整體，可以被重複的調用。函數通過 function 關鍵詞進行定義，格式如下所示：

function name(參數 1, 參數 2, 參數 3) {
    要執行的代碼
}

如上述求和的功能，就可封裝成函數，然後進行調用，如下所示：

function getSum(start, end) {
	var sum = 0;
	for (var i = stasrt; i < end; i++) {
		if (i % 2 == 0) {
			sum += i;
		}
	}
	return sum;
	//return後面的代碼將不再執行。
}
var sum1=getSum(0,100);//0,100之間的偶數和
var sum2=getSum(100,200);//100,200之間的偶數和

上述函數封裝以後，就可以方便的調用，以實現特定的功能，那麼，如果想要根據不同的輸入，實現不同的邏輯，如：某些情況下實現奇數邏輯，另些情況下實現偶數邏輯，要如何做呢？

在這種情況下，可以將特殊的邏輯提取出來，由調用方進行實現，即調用時輸入的奇數求和的邏輯，就實現奇數求和；輸入的是偶數求和的邏輯，就實現偶數的求和。或者其他的邏輯。具體如下所示：

//條件求和
function getSumWithCondition(start, end, fn) {
	var sum = 0;
	for (var i = stasrt; i < end; i++) {
		if (fn(i)) {
			sum += i;
		}
	}
	return sum;

}
//通過函數和條件處理相結合，可以完成一些相對複雜的邏輯的處理
var result = getSumWithCondition(1, 100, function(n) {
	if (n % 2 === 0) {
		return true;
	} else {
		return false;
	}
});

數組Array

數組主要用於存儲相關格式的一組數據。格式爲：var array-name = [item1, item2, ...]; 如：var arr=[1,2,3,4,5];

數組的一些屬性及使用方法，如下所示：

var arr = [1, 2, 3, 4, 5];

//數組的屬性：
var len = arr.length //數組的長度
var a = arr[1]; //數組的索引
arr.push(6) //往數組的末尾添加元素
arr.unshift(-1) //往數組的開頭添加元素。
arr.forEach(funciton(item, index) {
	console.log(item);
});

對象object

對象是一個整體，存儲不同類型的數據。關於對象的使用方式，如下所示：

var obj = {
	name: ’小六’,
	age: 18
};
obj.name //訪問某個值

for (var k in obj) {
	console.log(k, obj[k])
}

DOM（文檔對象模型）

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。整個頁面，就是一個可視化樹狀結構，如下所示：

通過JavaScript操作頁面上的對應的標籤及其屬性，屬於DOM範疇內的相關內容。主要包含以下幾個方面：

1. 獲取Html元素

通過JavaScript獲取Html元素，主要有以下幾種方式：

通過 id 找到 HTML 元素
通過標籤名找到 HTML 元素
通過類名找到 HTML 元素

具體示例，如下所示：

var block = document.getElementById(id);
block.textContent = ’文本內容’;
var contents = document.getElementsByName(name); //僞數組
var contents = document.querySelectorAll(‘p’); //標籤選擇器獲取
var contents = document.querySelectorAll(‘#container p’); //id選擇器
var contents = document.querySelectorAll(‘.text’); //類名
var content = document.querySelector(‘.text’); //返回首個滿足條件的標籤
content.previousElementSibling.textContext = ’’; //上一個兄弟節點
content.nextElementSibling.textContent = ’’; //下一個兄弟節點
var container = content.parentNode; //父節點標籤
var items = container.children;

2. 樣式處理

通過JavaScript也可以爲Html元素設置對應的樣式屬性。示例如下所示：

var block = document.getElementById(id);
block.style.width = ’80 px’;
block.style.height = ’80 px’;
block.style.backgroundColor = ’red’;
block.className = ’’; //通過設置類名，也可以設置樣式

注意：雖然CSS和JavaScript都可以設置樣式，但是非特殊情況下，建議採用CSS設置樣式

3. 文本處理

修改 HTML 內容的最簡單的方法是使用 innerHTML 屬性。

如需改變 HTML 元素的內容，請使用這個語法：

document.getElementById(id).innerHTML=新的 HTML

4. 事件監聽

當用戶需要和系統進行交互時，可以通過點擊Html元素觸發對應的事件，如：單擊事件，雙擊事件，以及選擇事件，切換事件等。事件主要是告訴系統，需要做哪些操作。

事件監聽主要有以下幾種形式：

var block = document.getElementById(id);
block.onclick=function(){

}

block.addEventListener(‘click’,function(){

});
//同一類型事件，可以添加多個而不會覆蓋
block.addEventListener(‘click’,function(){

});

綜合應用【輪播圖】

本示例主要綜合應用了Html，JavaScript，CSS樣式，實現輪播圖功能。主要如下所示：

Html代碼，如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link href="./css/index.css" type="text/css" rel="stylesheet" />
	<body>
		<div class="container">
			<ul>
				<li><img src="imgs/one.jpg"></li>
				<li><img src="imgs/two.jpg"></li>
				<li><img src="imgs/three.jpg"></li>
				<li><img src="imgs/four.jpg"></li>
				<li><img src="imgs/five.jpg"></li>
			</ul>
			<div class="dot">
				<span class="circle"></span>
				<span class="circle"></span>
				<span class="circle"></span>
				<span class="circle"></span>
				<span class="circle"></span>
			</div>
		</div>
		<div class="bottom">
			<button id="prev">上一個</button>
			<button id="next">下一個</button>
		</div>
		<script src="./js/index.js" type="text/javascript"></script>
	</body>
</html>

CSS樣式代碼

html,
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

.container {
	width: 100%;
	height: 50%;
	text-align: center;
	margin-bottom: 10px;
}

.container ul {
	width: 50%;
	height: 100%;
	position: relative;
	left: 25%;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

.container ul li {
	width: 100%;
	height: 100%;
	list-style: none;
	position: absolute;
}

.container ul li img {
	width: 100%;
	height: 100%;
	transition: all 2s;
	opacity: 0;
}

.container ul li .active {
	opacity: 1;
}

.bottom {
	text-align: center;
}

.container .dot {
	width: 100%;
	height: 15px;
	position: relative;
	margin-top: -40px;
	z-index: 5;
	opacity: 1;
}

.container .dot .circle {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	border: 1px solid greenyellow;
	background-color: white;
	display: inline-block;
	opacity: 1;

}

JavaScript代碼

console.log("----------begin-----------");
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = -1;
prev.addEventListener('click', function() {
	var images = document.querySelectorAll('.container ul li img');
	var circles = document.querySelectorAll('.container .dot .circle');
	var len = images.length;
	if (index <= 0) {
		index = len;
	}
	images.forEach(function(item, index) {
		item.className = '';
	});
	circles.forEach(function(item, index) {
		item.style.backgroundColor = 'white';
	});
	images[index - 1].className = 'active';
	circles[index - 1].style.backgroundColor = 'red';
	index = index - 1;
});

next.addEventListener('click', function() {
	var images = document.querySelectorAll('.container ul li img');
	var circles = document.querySelectorAll('.container .dot .circle');
	var len = images.length;
	if (index >= len - 1) {
		index = -1;
	}
	images.forEach(function(item, index) {
		item.className = '';
	});
	circles.forEach(function(item, index) {
		item.style.backgroundColor = 'white';
	});
	images[index + 1].className = 'active';
	circles[index + 1].style.backgroundColor = 'red';
	index = index + 1;
});
setInterval(function() {
	next.click();
}, 3000);
console.log("----------end-----------");

示例效果圖，如下所示：

以上就是全棧工程師必須要掌握的前端JavaScript技能全部內容。希望可以拋磚引玉，一起學習，共同進步。

全棧工程師必須要掌握的前端JavaScript技能

什麼是JavaScript?

創建JavaScript方式

變量定義

數據類型

運算符

代碼塊Statement

1. 條件代碼塊

2. 循環

函數function

數組Array

對象object

DOM（文檔對象模型）

1. 獲取Html元素

2. 樣式處理

3. 文本處理

4. 事件監聽

綜合應用【輪播圖】

容器中nginx無法使用同一個網絡下的容器域名

Python: SunMoonTimeCalculator

NETCore中實現一個輕量無負擔的極簡任務調度ScheduleTask

docker使用特定的網絡

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

nodejs學習07——API

避免DbContext同時在多個線程調用

GPT-4o 引領人機交互新風向，向量數據庫賽道沸騰了

WPF系列文章合集（低調奢華版）

淺談WPF之屬性系統

淺談WPF之MVVM工具包

淺談WPF之Binding時數據校驗和類型轉換

淺談WPF之DataGrid動態生成列

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結