當前位置：首頁 > news >正文

泉州網(wǎng)站設計平臺北京網(wǎng)站優(yōu)化站優(yōu)化

news 2025/7/3 18:16:38

泉州網(wǎng)站設計平臺,北京網(wǎng)站優(yōu)化站優(yōu)化,交互網(wǎng)站百度,醫(yī)療網(wǎng)站模板Web開發(fā)基礎之JavaScript 學習目標和內(nèi)容 1、能夠描述Javascript的作用 2、能夠使用分支結構if語句邏輯判斷 3、能夠使用其中一種循環(huán)語句 4、能夠定義javaScript中的函數(shù) 5、能夠定義javaScript中的對象 6、能夠描述DOM的作用 7、能夠通過DOM操作HTML標簽元素及其屬性 8、能夠…

Web開發(fā)基礎之JavaScript

學習目標和內(nèi)容

1、能夠描述Javascript的作用

2、能夠使用分支結構if語句邏輯判斷

3、能夠使用其中一種循環(huán)語句

4、能夠定義javaScript中的函數(shù)

5、能夠定義javaScript中的對象

6、能夠描述DOM的作用

7、能夠通過DOM操作HTML標簽元素及其屬性

8、能夠?qū)崿F(xiàn)HTML元素事件的注冊

一、JavaScript簡介

1、JavaScript的強大

百度腦圖 - 便捷的思維工具

2、JavaScript是什么

JavaScript是一種運行在客戶端(瀏覽器) 的編程語言，用來給網(wǎng)頁添加動態(tài)功能。

JavaScript的歷史：JavaScript 的歷史

3、JavaScript的作用

①最初目的

為了處理表單的驗證操作

②現(xiàn)在廣泛的應用場景

網(wǎng)頁特效
服務端開發(fā)(Node.js)
命令行工具(Node.js)
桌面程序(Electron)
App(Cordova)
游戲開發(fā)

4、JavaScript和HTML、css的區(qū)別

HTML：提供網(wǎng)頁的結構和內(nèi)容

CSS:修飾和美化內(nèi)容

JavaScript：控制頁面內(nèi)容，增加頁面動態(tài)效果

5、JavaScript的組成

ECMAScript - JavaScript的核心

ECMAScript 是 JavaScript 的核心，描述了語言的基本語法和數(shù)據(jù)類型，ECMAScript是一套標準，定義了一種語言的標準與具體實現(xiàn)無關(就是 JavaScript 的語法規(guī)范)

BOM - 瀏覽器對象模型

一套操作瀏覽器功能的 API

通過BOM可以操作瀏覽器窗口，比如：彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等

DOM - 文檔對象模型

一套操作頁面元素的 API

DOM 可以把 HTML看做是文檔樹，通過 DOM 提供的 API 可以對樹上的節(jié)點進行操作

6、JavaScript的書寫位置

JavaScript書寫位置和CSS類似(行內(nèi)樣式、嵌入樣式、外部樣式)

①寫在行內(nèi)

<input type="button" value="按鈕" οnclick="alert('Hello World')" />

②寫在script標簽中

<head><script>alert('Hello World!');</script>
</head>

③寫在外部js文件中，在頁面引入使用

<script src="main.js"></script>

Tip：

①引入外部js文件的script標簽中，不可以寫javaScript代碼，在</body>之前

②css在頭部引入，js文件在底部引入

二、JavaScript基本語法

1、變量

1.1、變量的定義

在js中使用var關鍵字定義變量

①變量的語法

var userName = 'linux';
var age = 18;

②同時聲明多個變量

var age, name, sex;
age = 18;
name = 'centos';

③同時聲明多個變量并賦值

var age = 23, name = 'shell';

1.2、變量的命名規(guī)則和規(guī)范

規(guī)則 - 必須遵守的，不遵守會報錯

由字母、數(shù)字、下劃線、$符號組成，不能以數(shù)字開頭

不能是關鍵字和保留字，例如：for、while。

區(qū)分大小寫

規(guī)范 - 建議遵守的，不遵守不會報錯

變量名必須有意義

遵守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。例如：userName、userPassword

2、數(shù)據(jù)類型

常用的數(shù)據(jù)類型為：Number、String、Boolean

2.1、Number類型

數(shù)字字面量：數(shù)值的固定值的表示方法

100 183.5

2.2、String類型

字符串是用引號括起來的一段內(nèi)容 ‘linux’’centos’ ‘sa’ ‘devops’ javaScript中的字符串，單雙引號都可以使用，推薦使用單引號轉(zhuǎn)義字符

字符串長度 length屬性可以用來獲取字符串的長度

var str = “我是一個運維人員”
console.log(str.length);

字符串的拼接 多個字符串，可以通過+符號進行拼接

console.log(‘linux’+’centos’);

2.3、Boolean類型

字面量：true和false

Tip:

typeof(變量)查看數(shù)據(jù)的類型

Number(字符串類型) 字符串轉(zhuǎn)為數(shù)字類型

3、注釋

注釋作用：

1、解釋說明

2、注釋后的代碼不會被執(zhí)行

①單行注釋

//這是一個變量
var name = ‘linux’;

②多行注釋

/*
var name = ‘linux’;
var age = 18;
var job = ‘server’;
*/

4、運算符

運算符(operator)，非常類似于數(shù)學中的運算符

4.1、算術運算符

+ 加

- 減

* 乘

/ 除

% 取余做除法運算，直到不能夠再被除數(shù)除的情況下，剩下的數(shù)就是余數(shù)

4.2、自增自減運算符

一元運算符：只有一個操作數(shù)的運算符，自增自減運算符屬于一元運算符。

++ 自身+1

-- 自身-1

案例演示：前置++和后置++的區(qū)別

4.3、邏輯運算符

&& 與兩個操作數(shù)同時為true，結果為true，否則都是false 一損俱損同時滿足多個條件

|| 或兩個操作數(shù)有一個為true，結果為true，否則為false 滿足其中一個條件即可

! 非取反不滿足這個條件

4.4、比較運算符

< > >= <= == != =\== !\==

\==與===的區(qū)別：

==只進行值得比較

===類型和值同時相等，則相等

4.5、賦值運算符

+= -= *= /= %=

先自運算后賦值

var num = 6;
num += 6;  //相當于num = num+6   猜猜等于多少？
num /=2;   //相當于 num = num/2   猜猜等于多少？

5、分支結構

分支語句，一般用來判斷不同的多種情況，并在代碼塊中進行對應處理。

5.1、if語句

①單分支語句(if) 語法：

if (/* 條件表達式 */) {// 執(zhí)行語句
}

②雙分支語句(if ...else)

語法：

if (/* 條件表達式 */){// 成立執(zhí)行語句
} else {// 否則執(zhí)行語句
}

③多分支語句(if...elseif...else)

語法：

if (/* 條件1 */){// 成立執(zhí)行語句
} else if (/* 條件2 */){// 成立執(zhí)行語句
} else if (/* 條件3 */){// 成立執(zhí)行語句
} else {// 最后默認執(zhí)行語句
}

案例：求兩個數(shù)的最大值

判斷是奇數(shù)還是偶數(shù)

5.2、switch語句

語法：

switch(n)
{
case 1://執(zhí)行代碼塊 1break
case 2://執(zhí)行代碼塊 2break;
default://n 與 case 1 和 case 2 不同時執(zhí)行的代碼
}

案例：今天是星期幾？

day=new Date().getDay()

6、循環(huán)結構

JavaScript 中，循環(huán)語句有三種，for、while、do..while循環(huán)

while和do...while一般用來解決無法確定循環(huán)次數(shù)的情況。一般常見固定的次數(shù)，使用for較為常見。

6.1、for語句

語法：

for (初始化表達式1; 判斷表達式2; 自增表達式3) {// 循環(huán)體4
}

6.2、while語句

// 當循環(huán)條件為true時，執(zhí)行循環(huán)體，
// 當循環(huán)條件為false時，結束循環(huán)。
while (循環(huán)條件) {//循環(huán)體
}

6.3、do...while語句

語法：

do {// 循環(huán)體;
} while (循環(huán)條件);

Tip:

do...while和while使用上非常像，區(qū)別在于do...while不管條件是否成立，會執(zhí)行一次操作。也就是先操作后判斷。

6.4、continue和break關鍵字

break:立即跳出整個循環(huán)，即循環(huán)結束，開始執(zhí)行循環(huán)后面的內(nèi)容（直接跳到大括號）

continue:立即跳出當前循環(huán)，繼續(xù)下一次循環(huán)（跳到i++的地方)

7、數(shù)組

數(shù)組是一個有序的列表，可以在數(shù)組中存放任意數(shù)據(jù)，并且數(shù)組的長度可以動態(tài)調(diào)整。

7.1、數(shù)組的定義

語法：

//創(chuàng)建一個空數(shù)組
var arr = [];
//創(chuàng)建一個數(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);

// 可以設置length屬性改變數(shù)組中元素的個數(shù)

arr2.length = 0;

7.2、獲取訪問數(shù)據(jù)元素

語法：

// 格式：數(shù)組名[下標]	下標又稱索引
// 下標從開始
// 功能：獲取數(shù)組對應下標的那個值，如果下標不存在，則返回undefined。
var arr2 = [‘linux’,’centos’,’redhat’];
arr2[0];   //linux
arr2[2];   //redhat
arr2[3];   //undefined  ?為什么呢

7.3、遍歷數(shù)組

遍歷數(shù)組：對數(shù)組的每一個元素進行方式一次。

語法：

for(var i = 0; i < arr.length; i++) {// 數(shù)組遍歷的固定結構
}

7.4、數(shù)組元素的操作

語法：

//格式：數(shù)組名稱[下標/索引] = 值；
//如果下標對應的值存在，即替換。不存在，就會新增。
var arr2 = [‘linux’,’centos’,’redhat’];
//redhat替換為devops
arr2[2] = ‘devops’;
//添加新元素之到數(shù)組中
arr2[3] = ‘sa’;

相關數(shù)組的操作方法：

8、函數(shù)

封裝一段代碼，以方便復用。使代碼也更加清晰，結構更加明了。

8.1、函數(shù)的定義

語法：

function 函數(shù)名() {// 函數(shù)體
}

函數(shù)表達式：

var fn = function () {// 函數(shù)體
}

Tip:

函數(shù)被定義之后，不會執(zhí)行，需要調(diào)用才可以執(zhí)行

8.2、函數(shù)的參數(shù)

參數(shù)：函數(shù)體內(nèi)部是一個封閉的空間，需要通過參數(shù)的方式，把外部值傳遞給函數(shù)體內(nèi)部。

語法：

//帶參數(shù)的函數(shù)聲明
function 函數(shù)名(形參1,形參2,形參3...){//函數(shù)體
}
//帶參數(shù)的函數(shù)調(diào)用
函數(shù)名(實參1,實參2,實參3)

8.3、函數(shù)的返回值

當函數(shù)被調(diào)用執(zhí)行完畢之后，并不是所有場景下都需要把結果打印出來。有些業(yè)務場景下需要，把函數(shù)的執(zhí)行結果返回，方便進行后續(xù)的運算操作。這時，就可以讓函數(shù)返回，也就是函數(shù)的返回值。函數(shù)可以通過return關鍵字語法，返回函數(shù)的返回值。

Tip:

①return 之后的代碼將不在執(zhí)行

②函數(shù)默認返回值為undifined

語法：

//聲明一個帶返回值的函數(shù)
function 函數(shù)名(形參1, 形參2, 形參3...) {//函數(shù)體return 返回值;
}
//可以通過變量來接收這個返回值
var 變量 = 函數(shù)名(實參1, 實參2, 實參3...);

9、對象

js是基于對象的語言

對象：由屬性和方法組成

js中的對象，定義格式類似于學習過的字典?？梢钥醋鍪且粋€功能集合

語法：

var person = {name: 'linux',age: 18,sex: true,say: function () {console.log(this.name);}
};

三、DOM

學習DOM就可以使用javaScript進行控制頁面(樣式、元素屬性、隱藏顯示等)

1、什么是DOM

DOM 是文檔對象模型，這是由瀏覽器生成的一個樹形結構，使編程語言可以很容易的訪問HTML結構。

在 DOM 中可以通過 document 獲取整個頁面。

2、獲取頁面元素

①getElementById() 根據(jù) id 獲取元素

②getElementsByTagName() 根據(jù)標簽名稱獲取元素(集合)

==③querySelector()== 使用選擇器獲取元素，只返回第一個匹配的元素

==④querySelectorAll()== 使用選擇器獲取元素，返回所有匹配的元素(集合)

3、設置元素屬性

- 獲取到元素，可以設置元素對應的屬性，改變頁面的效果。

- 普通元素的屬性

- HTML 中標簽的屬性一般對應 DOM 中元素的屬性，DOM 中元素的屬性，例如：

title、src、id 等

- 通過元素的 ==innerHTML== 屬性可以設置標簽之間的內(nèi)容

- 通過 innerHTML 動態(tài)生成列表

- 表單元素的屬性

- value、checked、selected、disabled

- 遍歷文本框給所有文本框賦值

- 獲取下拉框中的選項，設置下拉框中顯示的項

- 禁用按鈕

案例：

1、使用js動態(tài)生成列表

2、操作表單，獲取表單相關值

4、注冊事件

DOM中的事件機制，可以實現(xiàn)一些常規(guī)操作。比如：點擊按鈕，按下鍵盤等的響應。

語法：

element.onclick = function () {alert('hello world');
};

常用事件：

案列：實現(xiàn)按鈕的點擊事件，取消a標簽調(diào)轉(zhuǎn)。

//按鈕的點擊事件
document.querySelector('button').onclick = function(){alert('綁定并執(zhí)行了點擊事件');
}
//取消a標簽的默認跳轉(zhuǎn)
document.querySelector('a').onclick = function(){return false;
}