作為一名全棧工程師,在日常的工作中,可能更側重於後端開發,如: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種方式:
- 內嵌式:在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技能全部內容。希望可以拋磚引玉,一起學習,共同進步。
作者:小六公子
出處:http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有,寫文不易,支持原創,歡迎轉載【點贊】,轉載請保留此段聲明,且在文章頁面明顯位置給出原文連接,謝謝。
關註個人公眾號,定時同步更新技術及職場文章