作為一名全棧工程師，在日常的工作中，可能更側(cè)重于后端開發(fā)，如：C#，Java，SQL ，Python等，對前端的知識則不太精通。在一些比較完善的公司或者項目中，一般會搭配前端工程師，UI工程師等，來彌補后端開發(fā)的一些前端經(jīng)驗技能上的不足。但并非所有的項目都會有專職前端工程師，在一些小型項目或者初創(chuàng)公司中，職能劃分并不明確，往往要一個人前后端全都會做， 所以作為一名全棧工程師或者后端工程師，掌握必備的前端知識，也是必不可少的一項技能。今天就著重講解一下，作為一名全棧工程師，前端JavaScript方面的必須要掌握的相關(guān)知識。
?
什么是JavaScript?
?
在前端Web開發(fā)中，共有3種語言是開發(fā)者必須要掌握的，這3種語言一起組成了Web開發(fā)的基石：
- HTML?定義網(wǎng)頁的內(nèi)容
- CSS?規(guī)定網(wǎng)頁的布局
- JavaScript?對網(wǎng)頁行為進行編程
JavaScript作為一種函數(shù)式優(yōu)先，解釋執(zhí)行，輕量級的編程語言，是目前最為流行的編程語言之一。JavaScript起于瀏覽器腳本編程，興于Web開發(fā)，卻不止于前端腳本語言。目前JavaScript也已經(jīng)支持后端編程，面向?qū)ο蟮龋鏝ode.js。當然本文講解的內(nèi)容，主要是側(cè)重于Web前端腳本語言進行講解。
?
創(chuàng)建JavaScript方式
?
在日常開發(fā)中，創(chuàng)建JavaScript腳本一共有2種方式：
- 內(nèi)嵌式：在Html頁面中，通過定義【<script type="text/javascript">//javascript代碼</script>】標簽，內(nèi)嵌JavaScript腳本。這種內(nèi)嵌式寫法，適用于和當前頁面強相關(guān)的業(yè)務(wù)邏輯內(nèi)容。
- 外鏈式：在通常開發(fā)中，為了方便維護，便于移植，JavaScript代碼通常寫在獨立的文件中【如：index.js】，然后在前端Html頁面中進行引入。外鏈式也是目前普遍使用的一種方式。
關(guān)于兩種創(chuàng)建形式，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
//內(nèi)嵌式j(luò)avascript代碼
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>?
變量定義
?
變量在進行業(yè)務(wù)邏輯處理及數(shù)據(jù)運算中，主要用于存儲數(shù)據(jù)， 是承載數(shù)據(jù)的載體。主要通【var 變量名 = 變量值;】的形式進行定義。
構(gòu)造變量名稱（唯一標識符）的通用規(guī)則是：
- 名稱可包含字母、數(shù)字、下劃線和美元符號
- 名稱必須以字母開頭
- 名稱也可以?
$?和?_?開頭（但是在本教程中我們不會這么做） - 名稱對大小寫敏感（y 和 Y 是不同的變量）
- 保留字（比如 JavaScript 的關(guān)鍵詞）無法用作變量名稱
提示：JavaScript 標識符對大小寫敏感。變量命名，建議具有明確的含義，這樣會更加方便理解與維護。
?
數(shù)據(jù)類型
?
在JavaScript中，根據(jù)變量所存儲的數(shù)據(jù)內(nèi)容的類型不同，可以分為不同的數(shù)據(jù)類型，主要有以下幾種：
- 數(shù)值類型number：用于表示數(shù)字，包括整數(shù)，單精度浮點數(shù)，雙精度浮點數(shù)等，如： var num=10;//數(shù)值類型
- 文本類型string：用于表示字符串，如： var text=”文本”;//字符串類型
- 布爾類型boolean：用于表示邏輯上的真和假，只有兩個值：true，false。如： var flag=true; //兩個值，true,false表示真或假
- 空類型：用于表示空，如：var ?kong=null;//用于清空變量內(nèi)容，表示空
- 未定義：表示此變量只是被聲明，并未賦值。如： var aa;// undefined 默認值。
- 數(shù)組類型：用于存儲多個相同類型的值。
- 對象類型object：用于表示復雜的結(jié)果體，可以存儲多個不同類型的值。注意：空類型，數(shù)組類型，都屬于對象類型。
如何查看數(shù)據(jù)類型？通過typeof(數(shù)量名)的形式獲取數(shù)據(jù)類型，然后再通過console.log()在瀏覽器輸出的形式查看，如下所示：
var arr=[1,2,3,4,5];
console.log(typeof(arr));//輸出object?
運算符
?
運算符主要用于在不同的變量之間進行相應(yīng)的業(yè)務(wù)邏輯處理，如：加，減，乘，除等，運算符主要有以下幾種：
- 算術(shù)運算符：用于對數(shù)字執(zhí)行算數(shù)運算，如：加，減，乘，除：var sum=1+2-3*4/2;
- 字符串拼接，用于將多個字符串拼接成一個字符串，不同文本之間用加號進行拼接。
- 比較運算符：主要用于對不同變量之間進行比較，如：大于，小于，等于，大于等于，小于等于，恒等于，恒不等于，三元表達式等。
- 邏輯運算符：主要是與，或，非，等邏輯上的運算。
- 位運算符：主要是針對數(shù)字進行的一些位之間的運算，如：位與，位或，位非，異或，左移，右移等。
關(guān)于運算符之間的一些示例，如下所示：
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’;//更準確，比較兩個值是不是完全一致注意：不同的運算符都有優(yōu)先級，如果不同運算符進行組合運算，則需要注意優(yōu)先級。
?
代碼塊Statement
?
代碼塊是JS中用于設(shè)置復雜程序的一種語法。幾種常見的代碼塊，如下所示：
?
1. 條件代碼塊
?
條件代碼塊，主要用于判斷根據(jù)不同條件，執(zhí)行不同分支的語句，格式主要有以下3種：
//第一種，簡單形
if (條件運算) {
//滿足條件時執(zhí)行
}
//第二種，兩分支形
if (條件運算) {
//條件滿足時執(zhí)行
} else {
//條件不滿足時執(zhí)行
}
//第三種，多分支形
if (條件運算1) {
//條件1滿足時執(zhí)行
} else if (條件運算2) {
//條件2滿足時執(zhí)行
} else {
//條件都不滿足時執(zhí)行
}?
2. 循環(huán)
?
循環(huán)主要用于多次執(zhí)行相同的代碼，且每次的執(zhí)行參數(shù)不同。循環(huán)主要有以下幾種：
-
for?- 多次遍歷代碼塊 -
for/in?- 遍歷對象屬性 -
while?- 當指定條件為 true 時循環(huán)一段代碼塊 -
do/while?- 當指定條件為 true 時循環(huán)一段代碼塊
其中最常用的是for循環(huán)，格式如下所示：
for (語句 1; 語句 2; 語句 3) {
要執(zhí)行的代碼塊
}代碼塊示例，綜合使用循環(huán)和條件判斷的示例如下所示：
//求0到100之間的偶數(shù)的和
var sum = 0;
for (var i = 0; i < 100; i++) {
if (i % 2 == 0) {
sum += i;
}
}?
函數(shù)function
?
函數(shù)被設(shè)計為執(zhí)行特殊功能的代碼塊，作為一個整體，可以被重復的調(diào)用。函數(shù)通過?function?關(guān)鍵詞進行定義，格式如下所示：
function name(參數(shù) 1, 參數(shù) 2, 參數(shù) 3) {
要執(zhí)行的代碼
}如上述求和的功能，就可封裝成函數(shù)，然后進行調(diào)用，如下所示：
function getSum(start, end) {
var sum = 0;
for (var i = stasrt; i < end; i++) {
if (i % 2 == 0) {
sum += i;
}
}
return sum;
//return后面的代碼將不再執(zhí)行。
}
var sum1=getSum(0,100);//0,100之間的偶數(shù)和
var sum2=getSum(100,200);//100,200之間的偶數(shù)和上述函數(shù)封裝以后，就可以方便的調(diào)用，以實現(xiàn)特定的功能，那么，如果想要根據(jù)不同的輸入，實現(xiàn)不同的邏輯，如：某些情況下實現(xiàn)奇數(shù)邏輯，另些情況下實現(xiàn)偶數(shù)邏輯，要如何做呢？
在這種情況下，可以將特殊的邏輯提取出來，由調(diào)用方進行實現(xiàn)，即調(diào)用時輸入的奇數(shù)求和的邏輯，就實現(xiàn)奇數(shù)求和；輸入的是偶數(shù)求和的邏輯，就實現(xiàn)偶數(shù)的求和?；蛘咂渌倪壿?。具體如下所示：
//條件求和
function getSumWithCondition(start, end, fn) {
var sum = 0;
for (var i = stasrt; i < end; i++) {
if (fn(i)) {
sum += i;
}
}
return sum;
}
//通過函數(shù)和條件處理相結(jié)合，可以完成一些相對復雜的邏輯的處理
var result = getSumWithCondition(1, 100, function(n) {
if (n % 2 === 0) {
return true;
} else {
return false;
}
});?
數(shù)組Array
?
數(shù)組主要用于存儲相關(guān)格式的一組數(shù)據(jù)。格式為：var array-name = [item1, item2, ...]; 如：var arr=[1,2,3,4,5];
數(shù)組的一些屬性及使用方法，如下所示：
var arr = [1, 2, 3, 4, 5];
//數(shù)組的屬性：
var len = arr.length //數(shù)組的長度
var a = arr[1]; //數(shù)組的索引
arr.push(6) //往數(shù)組的末尾添加元素
arr.unshift(-1) //往數(shù)組的開頭添加元素。
arr.forEach(funciton(item, index) {
console.log(item);
});?
對象object
?
對象是一個整體，存儲不同類型的數(shù)據(jù)。關(guān)于對象的使用方式，如下所示：
var obj = {
name: ’小六’,
age: 18
};
obj.name //訪問某個值
for (var k in obj) {
console.log(k, obj[k])
}?
DOM（文檔對象模型）
?
當網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。整個頁面，就是一個可視化樹狀結(jié)構(gòu)，如下所示：
通過JavaScript操作頁面上的對應(yīng)的標簽及其屬性，屬于DOM范疇內(nèi)的相關(guān)內(nèi)容。主要包含以下幾個方面：
?
1. 獲取Html元素
?
通過JavaScript獲取Html元素，主要有以下幾種方式：
- 通過 id 找到 HTML 元素
- 通過標簽名找到 HTML 元素
- 通過類名找到 HTML 元素
具體示例，如下所示：
var block = document.getElementById(id);
block.textContent = ’文本內(nèi)容’;
var contents = document.getElementsByName(name); //偽數(shù)組
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 = ’’; //上一個兄弟節(jié)點
content.nextElementSibling.textContent = ’’; //下一個兄弟節(jié)點
var container = content.parentNode; //父節(jié)點標簽
var items = container.children;?
2. 樣式處理
?
通過JavaScript也可以為Html元素設(shè)置對應(yīng)的樣式屬性。示例如下所示：
var block = document.getElementById(id);
block.style.width = ’80 px’;
block.style.height = ’80 px’;
block.style.backgroundColor = ’red’;
block.className = ’’; //通過設(shè)置類名，也可以設(shè)置樣式注意：雖然CSS和JavaScript都可以設(shè)置樣式， 但是非特殊情況下， 建議采用CSS設(shè)置樣式
?
3. 文本處理
?
修改 HTML 內(nèi)容的最簡單的方法是使用 innerHTML 屬性。
如需改變 HTML 元素的內(nèi)容，請使用這個語法：
document.getElementById(id).innerHTML=新的 HTML
?
4. 事件監(jiān)聽
?
當用戶需要和系統(tǒng)進行交互時，可以通過點擊Html元素觸發(fā)對應(yīng)的事件，如：單擊事件，雙擊事件，以及選擇事件，切換事件等。事件主要是告訴系統(tǒng)，需要做哪些操作。
事件監(jiān)聽主要有以下幾種形式：
var block = document.getElementById(id);
block.onclick=function(){
}
block.addEventListener(‘click’,function(){
});
//同一類型事件，可以添加多個而不會覆蓋
block.addEventListener(‘click’,function(){
});?
綜合應(yīng)用【輪播圖】
?
本示例主要綜合應(yīng)用了Html，JavaScript，CSS樣式，實現(xiàn)輪播圖功能。主要如下所示：
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-----------");示例效果圖，如下所示：
文章來源：http://www.zghlxwxcb.cn/news/detail-710128.html
以上就是全棧工程師必須要掌握的前端JavaScript技能全部內(nèi)容。希望可以拋磚引玉，一起學習，共同進步。文章來源地址http://www.zghlxwxcb.cn/news/detail-710128.html
到了這里，關(guān)于全棧工程師必須要掌握的前端JavaScript技能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
