泉州網(wǎng)站設(shè)計(jì)平臺(tái)北京網(wǎng)站優(yōu)化站優(yōu)化
Web開發(fā)基礎(chǔ)之JavaScript
學(xué)習(xí)目標(biāo)和內(nèi)容
1、能夠描述Javascript的作用
2、能夠使用分支結(jié)構(gòu)if語句邏輯判斷
3、能夠使用其中一種循環(huán)語句
4、能夠定義javaScript中的函數(shù)
5、能夠定義javaScript中的對(duì)象
6、能夠描述DOM的作用
7、能夠通過DOM操作HTML標(biāo)簽元素及其屬性
8、能夠?qū)崿F(xiàn)HTML元素事件的注冊
一、JavaScript簡介
1、JavaScript的強(qiáng)大
百度腦圖 - 便捷的思維工具
2、JavaScript是什么
JavaScript是一種運(yùn)行在客戶端(瀏覽器) 的編程語言，用來給網(wǎng)頁添加動(dòng)態(tài)功能。
JavaScript的歷史：JavaScript 的歷史
3、JavaScript的作用
①最初目的
為了處理表單的驗(yàn)證操作
②現(xiàn)在廣泛的應(yīng)用場景
-
網(wǎng)頁特效
-
服務(wù)端開發(fā)(Node.js)
-
命令行工具(Node.js)
-
桌面程序(Electron)
-
App(Cordova)
-
游戲開發(fā)
4、JavaScript和HTML、css的區(qū)別
HTML：提供網(wǎng)頁的結(jié)構(gòu)和內(nèi)容
CSS:修飾和美化內(nèi)容
JavaScript：控制頁面內(nèi)容，增加頁面動(dòng)態(tài)效果
5、JavaScript的組成
ECMAScript - JavaScript的核心
ECMAScript 是 JavaScript 的核心，描述了語言的基本語法和數(shù)據(jù)類型，ECMAScript是一套標(biāo)準(zhǔn)，定義了一種語言的標(biāo)準(zhǔn)與具體實(shí)現(xiàn)無關(guān)(就是 JavaScript 的語法規(guī)范)
BOM - 瀏覽器對(duì)象模型
一套操作瀏覽器功能的 API
通過BOM可以操作瀏覽器窗口，比如：彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等
DOM - 文檔對(duì)象模型
一套操作頁面元素的 API
DOM 可以把 HTML看做是文檔樹，通過 DOM 提供的 API 可以對(duì)樹上的節(jié)點(diǎn)進(jìn)行操作
6、JavaScript的書寫位置
JavaScript書寫位置和CSS類似(行內(nèi)樣式、嵌入樣式、外部樣式)
①寫在行內(nèi)
<input type="button" value="按鈕" οnclick="alert('Hello World')" />
②寫在script標(biāo)簽中
<head><script>alert('Hello World!');</script>
</head>
③寫在外部js文件中，在頁面引入使用
<script src="main.js"></script>
Tip：
①引入外部js文件的script標(biāo)簽中，不可以寫javaScript代碼，在</body>之前
②css在頭部引入，js文件在底部引入
二、JavaScript基本語法
1、變量
1.1、變量的定義
在js中使用var關(guān)鍵字定義變量
①變量的語法
var userName = 'linux'; var age = 18;
②同時(shí)聲明多個(gè)變量
var age, name, sex; age = 18; name = 'centos';
③同時(shí)聲明多個(gè)變量并賦值
var age = 23, name = 'shell';
1.2、變量的命名規(guī)則和規(guī)范
規(guī)則 - 必須遵守的，不遵守會(huì)報(bào)錯(cuò)
由字母、數(shù)字、下劃線、$符號(hào)組成，不能以數(shù)字開頭
不能是關(guān)鍵字和保留字，例如：for、while。
區(qū)分大小寫
規(guī)范 - 建議遵守的，不遵守不會(huì)報(bào)錯(cuò)
變量名必須有意義
遵守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。例如：userName、userPassword
2、數(shù)據(jù)類型
常用的數(shù)據(jù)類型為：Number、String、Boolean
2.1、Number類型
數(shù)字字面量：數(shù)值的固定值的表示方法
100 183.5
2.2、String類型
字符串是用引號(hào)括起來的一段內(nèi)容 ‘linux’’centos’ ‘sa’ ‘devops’ javaScript中的字符串，單雙引號(hào)都可以使用，推薦使用單引號(hào) 轉(zhuǎn)義字符 
字符串長度 length屬性可以用來獲取字符串的長度
var str = “我是一個(gè)運(yùn)維人員” console.log(str.length);
字符串的拼接 多個(gè)字符串，可以通過+符號(hào)進(jìn)行拼接
console.log(‘linux’+’centos’);
2.3、Boolean類型
字面量：true和false
Tip:
typeof(變量)查看數(shù)據(jù)的類型
Number(字符串類型) 字符串轉(zhuǎn)為數(shù)字類型
3、注釋
注釋作用：
1、解釋說明
2、注釋后的代碼不會(huì)被執(zhí)行
①單行注釋
//這是一個(gè)變量 var name = ‘linux’;
②多行注釋
/* var name = ‘linux’; var age = 18; var job = ‘server’; */
4、運(yùn)算符
運(yùn)算符(operator)，非常類似于數(shù)學(xué)中的運(yùn)算符
4.1、算術(shù)運(yùn)算符
+ 加
- 減
* 乘
/ 除
% 取余 做除法運(yùn)算，直到不能夠再被除數(shù)除的情況下，剩下的數(shù)就是余數(shù)
4.2、自增自減運(yùn)算符
一元運(yùn)算符：只有一個(gè)操作數(shù)的運(yùn)算符，自增自減運(yùn)算符屬于一元運(yùn)算符。
++ 自身+1
-- 自身-1
案例演示：前置++和后置++的區(qū)別
4.3、邏輯運(yùn)算符
&& 與 兩個(gè)操作數(shù)同時(shí)為true，結(jié)果為true，否則都是false 一損俱損 同時(shí)滿足多個(gè)條件
|| 或 兩個(gè)操作數(shù)有一個(gè)為true，結(jié)果為true，否則為false 滿足其中一個(gè)條件即可
! 非 取反 不滿足這個(gè)條件
4.4、比較運(yùn)算符
< > >= <= == != =\== !\==
\==與===的區(qū)別：
==只進(jìn)行值得比較
===類型和值同時(shí)相等，則相等
4.5、賦值運(yùn)算符
=
+= -= *= /= %=
先自運(yùn)算 后賦值
var num = 6; num += 6; //相當(dāng)于num = num+6 猜猜等于多少？ num /=2; //相當(dāng)于 num = num/2 猜猜等于多少？
5、分支結(jié)構(gòu)
分支語句，一般用來判斷不同的多種情況，并在代碼塊中進(jìn)行對(duì)應(yīng)處理。
5.1、if語句
①單分支語句(if) 語法：
if (/* 條件表達(dá)式 */) {// 執(zhí)行語句
}
②雙分支語句(if ...else)
語法：
if (/* 條件表達(dá)式 */){// 成立執(zhí)行語句
} else {// 否則執(zhí)行語句
}
③多分支語句(if...elseif...else)
語法：
if (/* 條件1 */){// 成立執(zhí)行語句
} else if (/* 條件2 */){// 成立執(zhí)行語句
} else if (/* 條件3 */){// 成立執(zhí)行語句
} else {// 最后默認(rèn)執(zhí)行語句
}
案例：求兩個(gè)數(shù)的最大值
判斷是奇數(shù)還是偶數(shù)
5.2、switch語句
語法：
switch(n)
{
case 1://執(zhí)行代碼塊 1break
case 2://執(zhí)行代碼塊 2break;
default://n 與 case 1 和 case 2 不同時(shí)執(zhí)行的代碼
}
案例：今天是星期幾？
day=new Date().getDay()
6、循環(huán)結(jié)構(gòu)
JavaScript 中，循環(huán)語句有三種，for、while、do..while循環(huán)
while和do...while一般用來解決無法確定循環(huán)次數(shù)的情況。一般常見固定的次數(shù)，使用for較為常見。
6.1、for語句
語法：
for (初始化表達(dá)式1; 判斷表達(dá)式2; 自增表達(dá)式3) {// 循環(huán)體4
}
6.2、while語句
// 當(dāng)循環(huán)條件為true時(shí)，執(zhí)行循環(huán)體，
// 當(dāng)循環(huán)條件為false時(shí)，結(jié)束循環(huán)。
while (循環(huán)條件) {//循環(huán)體
}
6.3、do...while語句
語法：
do {// 循環(huán)體;
} while (循環(huán)條件);
Tip:
do...while和while使用上非常像，區(qū)別在于do...while不管條件是否成立，會(huì)執(zhí)行一次操作。也就是先操作后判斷。
6.4、continue和break關(guān)鍵字
break:立即跳出整個(gè)循環(huán)，即循環(huán)結(jié)束，開始執(zhí)行循環(huán)后面的內(nèi)容（直接跳到大括號(hào)）
continue:立即跳出當(dāng)前循環(huán)，繼續(xù)下一次循環(huán)（跳到i++的地方)
7、數(shù)組
數(shù)組是一個(gè)有序的列表，可以在數(shù)組中存放任意數(shù)據(jù)，并且數(shù)組的長度可以動(dòng)態(tài)調(diào)整。
7.1、數(shù)組的定義
語法：
//創(chuàng)建一個(gè)空數(shù)組 var arr = []; //創(chuàng)建一個(gè)數(shù)字的數(shù)組 var arr1 = [1,2,3,4,5]; //創(chuàng)建包含字符串的數(shù)組 var arr2 = [‘linux’,’centos’,’redhat’];
Tip：
// 可以通過數(shù)組的length屬性獲取數(shù)組的長度
console.log(arr3.length);
// 可以設(shè)置length屬性改變數(shù)組中元素的個(gè)數(shù)
arr2.length = 0;
7.2、獲取訪問數(shù)據(jù)元素
語法：
// 格式：數(shù)組名[下標(biāo)] 下標(biāo)又稱索引 // 下標(biāo)從開始 // 功能：獲取數(shù)組對(duì)應(yīng)下標(biāo)的那個(gè)值，如果下標(biāo)不存在，則返回undefined。 var arr2 = [‘linux’,’centos’,’redhat’]; arr2[0]; //linux arr2[2]; //redhat arr2[3]; //undefined ?為什么呢
7.3、遍歷數(shù)組
遍歷數(shù)組：對(duì)數(shù)組的每一個(gè)元素進(jìn)行方式一次。
語法：
for(var i = 0; i < arr.length; i++) {// 數(shù)組遍歷的固定結(jié)構(gòu)
}
7.4、數(shù)組元素的操作
語法：
//格式：數(shù)組名稱[下標(biāo)/索引] = 值； //如果下標(biāo)對(duì)應(yīng)的值存在，即替換。不存在，就會(huì)新增。 var arr2 = [‘linux’,’centos’,’redhat’]; //redhat替換為devops arr2[2] = ‘devops’; //添加新元素之到數(shù)組中 arr2[3] = ‘sa’;
相關(guān)數(shù)組的操作方法：
8、函數(shù)
封裝一段代碼，以方便復(fù)用。使代碼也更加清晰，結(jié)構(gòu)更加明了。
8.1、函數(shù)的定義
語法：
function 函數(shù)名() {// 函數(shù)體
}
函數(shù)表達(dá)式：
var fn = function () {// 函數(shù)體
}
Tip:
函數(shù)被定義之后，不會(huì)執(zhí)行，需要調(diào)用才可以執(zhí)行
8.2、函數(shù)的參數(shù)
參數(shù)：函數(shù)體內(nèi)部是一個(gè)封閉的空間，需要通過參數(shù)的方式，把外部值傳遞給函數(shù)體內(nèi)部。
語法：
//帶參數(shù)的函數(shù)聲明
function 函數(shù)名(形參1,形參2,形參3...){//函數(shù)體
}
//帶參數(shù)的函數(shù)調(diào)用
函數(shù)名(實(shí)參1,實(shí)參2,實(shí)參3)
8.3、函數(shù)的返回值
當(dāng)函數(shù)被調(diào)用執(zhí)行完畢之后，并不是所有場景下都需要把結(jié)果打印出來。有些業(yè)務(wù)場景下需要，把函數(shù)的執(zhí)行結(jié)果返回，方便進(jìn)行后續(xù)的運(yùn)算操作。這時(shí)，就可以讓函數(shù)返回，也就是函數(shù)的返回值。函數(shù)可以通過return關(guān)鍵字語法，返回函數(shù)的返回值。
Tip:
①return 之后的代碼將不在執(zhí)行
②函數(shù)默認(rèn)返回值為undifined
語法：
//聲明一個(gè)帶返回值的函數(shù)
function 函數(shù)名(形參1, 形參2, 形參3...) {//函數(shù)體return 返回值;
}
//可以通過變量來接收這個(gè)返回值
var 變量 = 函數(shù)名(實(shí)參1, 實(shí)參2, 實(shí)參3...);
9、對(duì)象
js是基于對(duì)象的語言
對(duì)象：由屬性和方法組成
js中的對(duì)象，定義格式類似于學(xué)習(xí)過的字典?？梢钥醋鍪且粋€(gè)功能集合
語法：
var person = {name: 'linux',age: 18,sex: true,say: function () {console.log(this.name);}
};
三、DOM
學(xué)習(xí)DOM就可以使用javaScript進(jìn)行控制頁面(樣式、元素屬性、隱藏顯示等)
1、什么是DOM
DOM 是文檔對(duì)象模型，這是由瀏覽器生成的一個(gè)樹形結(jié)構(gòu)，使編程語言可以很容易的訪問HTML結(jié)構(gòu)。
在 DOM 中可以通過 document 獲取整個(gè)頁面。
2、獲取頁面元素
①getElementById() 根據(jù) id 獲取元素
②getElementsByTagName() 根據(jù)標(biāo)簽名稱 獲取元素(集合)
==③querySelector()== 使用選擇器獲取元素，只返回第一個(gè)匹配的元素
==④querySelectorAll()== 使用選擇器獲取元素，返回所有匹配的元素(集合)
3、設(shè)置元素屬性
- 獲取到元素，可以設(shè)置元素對(duì)應(yīng)的屬性，改變頁面的效果。
- 普通元素的屬性
- HTML 中標(biāo)簽的屬性一般對(duì)應(yīng) DOM 中元素的屬性，DOM 中元素的屬性，例如：
title、src、id 等
- 通過元素的 ==innerHTML== 屬性可以設(shè)置標(biāo)簽之間的內(nèi)容
- 通過 innerHTML 動(dòng)態(tài)生成列表
- 表單元素的屬性
- value、checked、selected、disabled
- 遍歷文本框給所有文本框賦值
- 獲取下拉框中的選項(xiàng)，設(shè)置下拉框中顯示的項(xiàng)
- 禁用按鈕
案例：
1、使用js動(dòng)態(tài)生成列表
2、操作表單，獲取表單相關(guān)值
4、注冊事件
DOM中的事件機(jī)制，可以實(shí)現(xiàn)一些常規(guī)操作。比如：點(diǎn)擊按鈕，按下鍵盤等的響應(yīng)。
語法：
element.onclick = function () {alert('hello world');
};
常用事件：
案列：實(shí)現(xiàn)按鈕的點(diǎn)擊事件，取消a標(biāo)簽調(diào)轉(zhuǎn)。
//按鈕的點(diǎn)擊事件
document.querySelector('button').onclick = function(){alert('綁定并執(zhí)行了點(diǎn)擊事件');
}
//取消a標(biāo)簽的默認(rèn)跳轉(zhuǎn)
document.querySelector('a').onclick = function(){return false;
}
5、改變元素的樣式
①改變行內(nèi)樣式
element.style.color = 'red';
②改變類樣式
element.className = 'active';