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

来源:https://www.cnblogs.com/hsiang/archive/2023/09/26/17724864.html
-Advertisement-
Play Games

作為一名全棧工程師，在日常的工作中，可能更側重於後端開發，如：C#，Java，SQL ，Python等，對前端的知識則不太精通。在一些比較完善的公司或者項目中，一般會搭配前端工程師，UI工程師等，來彌補後端開發的一些前端經驗技能上的不足。但並非所有的項目都會有專職前端工程師，在一些小型項目或者初創公... ...


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

 

什麼是JavaScript?

 

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

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

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

 

創建JavaScript方式

 

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

  1. 內嵌式：在Html頁面中，通過定義【<script type="text/javascript">//javascript代碼</script>】標簽，內嵌JavaScript腳本。這種內嵌式寫法，適用於和當前頁面強相關的業務邏輯內容。
  2. 外鏈式：在通常開發中，為了方便維護，便於移植，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技能全部內容。希望可以拋磚引玉，一起學習，共同進步。


作者：小六公子
出處：http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段聲明，且在文章頁面明顯位置給出原文連接，謝謝。
關註個人公眾號，定時同步更新技術及職場文章


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 我封裝的一個REPR輪子 Biwen.QuickApi
    Biwen.QuickApi 項目介紹 [QuickApi("hello/world")] public class MyApi : BaseQuickApi<Req,Rsp>{} 提供一種簡單集成的Minimal Web Api交互模塊 遵循了 REPR 設計 （Request-Endpoint- ...
  • 嵌入式軟體調試與驗證3動態時態斷言
    重點：find 、ps 、grep 、管道 1、du 指令 作用：du表示directory used，顯示出目錄所占的磁碟空間大小的情況。 語法：#du -sh 目錄路徑 選項說明： -s：表示sumary，彙總統計 -h：表示以較高可讀性的形式顯示 案例：使用du指令統計出“/home”的大小情 ...
  • 生成式 AI：機會與風險並存，企業該如何取捨？
    作者 | 李晨 編輯 | Debra Chen Gartner最近對全球2,500名高管進行的一項調查發現，近一半（45%）的人表示，ChatGPT的宣傳促使他們增加人工智慧（AI）投資。調查報告稱，70%的高管表示他們正在調查人工智慧的使用，而19%的高管正在試點或已經在生產中部署人工智慧。 Ga ...
  • MySQL 索引、事務與存儲引擎
    MySQL 索引、事務與存儲引擎 MySQL 索引 1．索引的概念 ●索引是一個排序的列表，在這個列表中存儲著索引的值和包含這個值的數據所在行的物理地址（類似於C語言的鏈表通過指針指向數據記錄的記憶體地址）。 ●使用索引後可以不用掃描全表來定位某行的數據，而是先通過索引表找到該行數據對應的物理地址然後 ...
  • 華為雲HBase冷熱分離最佳實踐
    冷熱分離功能支持將冷熱數據存儲在不同的介質上，可以大大降低存儲成本，HBase支持對同一張表的數據進行冷熱分離存儲。 ...
  • NineData SQL 視窗支持深色模式，讓程式員不再怕長期用眼！
    NineData SQL開發工具現已支持深色模式，為用戶提供更舒適的使用體驗。長時間暴露在明亮屏幕下容易引發眼睛疲勞和不適，而深色模式通過降低屏幕亮度減輕了眼睛的負擔。此外，深色模式還能節省能源、改善低光環境，並適用於開發人員、夜間工作者和移動設備用戶等不同群體。您可以在NineData SQL視窗... ...
  • MySQL運維1-日誌
    一、錯誤日誌 錯誤日誌是MySQL中最重要的日誌之一，它記錄了當MySQL啟動和停止時，以及伺服器在運行過程中發生的任何嚴重錯誤時的相關信息，當資料庫出現任何故障導致無法正常使用時，建議首先查看此日誌 錯誤日誌預設是開啟的，預設存在目錄/var/log/，預設的日誌文件名為mysqld.log, 但 ...
  • OPPO主題組件開發 - 調試與預覽
    本篇作為 OPPO主題組件調試與預覽 文檔的補充，因為它真的很簡單而且太老，一些命令已發生變化😪 1. 調試前準備 1. PC 端下載 adb命令工具 下載 https://adbdownload.com/，或從其他地方下載也可 解壓，放在你想放的文件夾下 配置環境變數 右鍵 我的電腦/此電腦 選 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類