1.1 介紹
html完成了架子，css做了美化，但是網(wǎng)頁(yè)是死的，我們需要給他注入靈魂，所以我們需要學(xué)習(xí)JavaScript，這門語言會(huì)讓我們的頁(yè)面能夠和用戶進(jìn)行交互。
1.2 引入方式
同樣，js代碼也是書寫在html中的，那么html中如何引入js代碼呢？主要通過下面的2種引入方式：
第一種方式：內(nèi)部腳本，將JS代碼定義在HTML頁(yè)面中。
- JavaScript代碼必須位于<script></script>標(biāo)簽之間。
- 在HTML文檔中，可以在任意地方，放置任意數(shù)量的<script>
- 一般會(huì)把腳本置于<body>元素的底部，可改善顯示速度。
例子：
<script>
alert("Hello JavaScript")
</script>
第二種方式：外部腳本，將 JS代碼定義在外部 JS文件中，然后引入到 HTML頁(yè)面中。
- 外部JS文件中，只包含JS代碼，不包含<script>標(biāo)簽。
- 引入外部js的<script>標(biāo)簽，必須是雙標(biāo)簽。
例子：
<script src="js/demo.js"></script>
注意：demo.js中只有js代碼，沒有<script>標(biāo)簽。
第一步：在VS Code中創(chuàng)建名為 10.JS-引入方式.html 的文件。
第二步：按照上述第一種內(nèi)部腳本的方式引入js，編寫如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-引入方式</title>
<!-- 內(nèi)部腳本 -->
<script>
alert('Hello JS');
</script>
</head>
<body>
</body>
</html>
第三步：瀏覽器打開效果如圖所示：
第四步：接下來演示外部腳本，注釋掉內(nèi)部腳本，然后在css目錄同級(jí)創(chuàng)建js目錄，然后創(chuàng)建一個(gè)名為demo.js的文件：
第五步：在demo.js中編寫如下js內(nèi)容：
alert('Hello JS2');
第六步：注釋掉之前的內(nèi)部腳本代碼，添加<script>標(biāo)簽來引入外部demo.js文件,具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-引入方式</title>
<!-- 內(nèi)部腳本 -->
<!-- <script>
alert('Hello JS');
</script> -->
<!-- 外部腳本 -->
<script src="js/demo.js"></script>
</head>
<body>
</body>
</html>
第七步：瀏覽器刷新效果如圖：
1.3 基礎(chǔ)語法
1.3.1 書寫語法
掌握了js的引入方式，那么接下來我們需要學(xué)習(xí)js的書寫了，首先需要掌握的是js的書寫語法，語法規(guī)則如下：
-
區(qū)分大小寫：與 Java 一樣，變量名、函數(shù)名以及其他一切東西都是區(qū)分大小寫的
-
每行結(jié)尾的分號(hào)可有可無
-
大括號(hào)表示代碼塊
-
注釋：
-
單行注釋：// 注釋內(nèi)容
-
多行注釋：/* 注釋內(nèi)容 */
-
我們需要借助js中3鐘輸出語句，來演示書寫語法
| api | 描述 |
|---|---|
| window.alert() | 警告框 |
| document.write() | 在HTML 輸出內(nèi)容 |
| console.log() | 寫入瀏覽器控制臺(tái) |
演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-基本語法</title>
</head>
<body>
</body>
<script>
/* alert("JS"); */
//方式一: 彈出警告框
window.alert("hello js");
</script>
</html>
瀏覽器打開如圖所示效果：
我們注釋掉上述代碼，添加代碼 document.write(“hello js”); 來輸出內(nèi)容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-基本語法</title>
</head>
<body>
</body>
<script>
/* alert("JS"); */
//方式一: 彈出警告框
// window.alert("hello js");
//方式二: 寫入html頁(yè)面中
document.write("hello js");
</script>
</html>
刷新瀏覽器，效果如圖所示：
最后我們使用console.log(“hello js”); 寫入到控制臺(tái)，并且注釋掉之前的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-基本語法</title>
</head>
<body>
</body>
<script>
/* alert("JS"); */
//方式一: 彈出警告框
// window.alert("hello js");
// //方式二: 寫入html頁(yè)面中
// document.write("hello js");
//方式三: 控制臺(tái)輸出
console.log("hello js");
</script>
</html>
瀏覽器f12抓包，去控制臺(tái)頁(yè)面，如圖所示：
1.3.2 變量
書寫語法會(huì)了，變量是一門編程語言比不可少的，所以接下來我們需要學(xué)習(xí)js中變量的聲明，在js中，變量的聲明和java中還是不同的。首先js中主要通過如下3個(gè)關(guān)鍵字來聲明變量的：
| 關(guān)鍵字 | 解釋 |
|---|---|
| var | 早期ECMAScript5中用于變量聲明的關(guān)鍵字 |
| let | ECMAScript6中新增的用于變量聲明的關(guān)鍵字，相比較var，let只在代碼塊內(nèi)生效 |
| const | 聲明常量的，常量一旦聲明，不能修改 |
在js中聲明變量還需要注意如下幾點(diǎn)：
- JavaScript 是一門弱類型語言，變量可以存放不同類型的值 。
- 變量名需要遵循如下規(guī)則：
- 組成字符可以是任何字母、數(shù)字、下劃線（_）或美元符號(hào)（$）
- 數(shù)字不能開頭
- 建議使用駝峰命名
代碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-基礎(chǔ)語法</title>
</head>
<body>
</body>
<script>
//var定義變量
var a = 10;
a = "張三";
alert(a);
</script>
</html>
可以看到瀏覽器彈出張三
在js中，我們var聲明的變量可以接受任何數(shù)據(jù)類型的值。并且var聲明的變量的作用于是全局的，注釋掉之前的代碼，添加如下代碼：
<script>
//var定義變量
// var a = 10;
// a = "張三";
// alert(a);
//特點(diǎn)1 : 作用域比較大, 全局變量
{
var x = 1;
}
alert(x);
</script>
瀏覽器照樣成功彈出：
而且var關(guān)鍵字聲明的變量可以重復(fù)定義，修改代碼如下：
{
var x = 1;
var x = "A";
}
alert(x);
瀏覽器彈出內(nèi)容是A
所以在ECMAScript 6 新增了 let關(guān)鍵字來定義變量，它的用法類似于 var，但是所聲明的變量，只在 let關(guān)鍵字所在的代碼塊內(nèi)有效，且不允許重復(fù)聲明。注釋掉之前的代碼，添加代碼如下：
<script>
//var定義變量
// var a = 10;
// a = "張三";
// alert(a);
//特點(diǎn)1 : 作用域比較大, 全局變量
//特點(diǎn)2 : 可以重復(fù)定義的
// {
// var x = 1;
// var x = "A";
// }
// alert(x);
//let : 局部變量 ; 不能重復(fù)定義
{
let x = 1;
}
alert(x);
</script>
瀏覽器打開，f12抓包，來到控制臺(tái)頁(yè)面，發(fā)現(xiàn)報(bào)錯(cuò)，變量沒有定義，說明let聲明的變量在代碼塊外不生效
接著我們使用let重復(fù)定義變量，代碼修改如下：發(fā)現(xiàn)idea直接幫我們報(bào)錯(cuò)了，說明let聲明的變量不能重復(fù)定義
在ECMAScript6中，還新增了const關(guān)鍵字用來聲明常量，但是一旦聲明，常量的值是無法更改的。注釋之前的內(nèi)容，添加如下代碼：
const pi = 3.14;
pi = 3.15;
alert(pi);
瀏覽器f12抓包，來到控制臺(tái)頁(yè)面發(fā)現(xiàn)直接報(bào)錯(cuò)了，
關(guān)于變量的講解我們就此結(jié)束，完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-基礎(chǔ)語法</title>
</head>
<body>
</body>
<script>
//var定義變量
// var a = 10;
// a = "張三";
// alert(a);
//特點(diǎn)1 : 作用域比較大, 全局變量
//特點(diǎn)2 : 可以重復(fù)定義的
// {
// var x = 1;
// var x = "A";
// }
// alert(x);
//let : 局部變量 ; 不能重復(fù)定義
// {
// let x = 1;
// alert(x);
// }
//const: 常量 , 不能給改變的.
const pi = 3.14;
pi = 3.15;
alert(pi);
</script>
</html>
1.3.3 數(shù)據(jù)類型和運(yùn)算符
雖然js是弱數(shù)據(jù)類型的語言，但是js中也存在數(shù)據(jù)類型，js中的數(shù)據(jù)類型分為 ：原始類型 和 引用類型，具體有如下類型
| 數(shù)據(jù)類型 | 描述 |
|---|---|
| number | 數(shù)字（整數(shù)、小數(shù)、NaN(Not a Number)） |
| string | 字符串，單雙引皆可 |
| boolean | 布爾。true，false |
| null | 對(duì)象為空 |
| undefined | 當(dāng)聲明的變量未初始化時(shí)，該變量的默認(rèn)值是 undefined |
代碼演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-數(shù)據(jù)類型</title>
</head>
<body>
</body>
<script>
//原始數(shù)據(jù)類型
alert(typeof 3); //number
alert(typeof 3.14); //number
alert(typeof "A"); //string
alert(typeof 'Hello');//string
alert(typeof true); //boolean
alert(typeof false);//boolean
alert(typeof null); //object
var a ;
alert(typeof a); //undefined
</script>
</html>
熟悉了js的數(shù)據(jù)類型了，那么我們需要學(xué)習(xí)js中的運(yùn)算法，js中的運(yùn)算規(guī)則絕大多數(shù)還是和java中一致的，具體運(yùn)算符如下：
| 運(yùn)算規(guī)則 | 運(yùn)算符 |
|---|---|
| 算術(shù)運(yùn)算符 | + , - , * , / , % , ++ , – |
| 賦值運(yùn)算符 | = , += , -= , *= , /= , %= |
| 比較運(yùn)算符 | > , < , >= , <= , != , == , === 注意 == 會(huì)進(jìn)行類型轉(zhuǎn)換，=== 不會(huì)進(jìn)行類型轉(zhuǎn)換 |
| 邏輯運(yùn)算符 | && , || , ! |
| 三元運(yùn)算符 | 條件表達(dá)式 ? true_value: false_value |
在js中，絕大多數(shù)的運(yùn)算規(guī)則和java中是保持一致的，但是js中的==和===是有區(qū)別的。
- ==：只比較值是否相等，不區(qū)分?jǐn)?shù)據(jù)類型，哪怕類型不一致，==也會(huì)自動(dòng)轉(zhuǎn)換類型進(jìn)行值得比較
- ===：不光比較值，還要比較類型，如果類型不一致，直接返回false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-運(yùn)算符</title>
</head>
<body>
</body>
<script>
var age = 20;
var _age = "20";
var $age = 20;
alert(age == _age);//true ，只比較值
alert(age === _age);//false ，類型不一樣
alert(age === $age);//true ，類型一樣，值一樣
</script>
</html>
在js中，雖然不區(qū)分?jǐn)?shù)據(jù)類型，但是有時(shí)候涉及到數(shù)值計(jì)算，還是需要進(jìn)行類型轉(zhuǎn)換的，js中可以通過parseInt()函數(shù)來進(jìn)行將其他類型轉(zhuǎn)換成數(shù)值類型。注釋之前的代碼，添加代碼如下：
// 類型轉(zhuǎn)換 - 其他類型轉(zhuǎn)為數(shù)字
alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)
除此之外，在js中，還有非常重要的一點(diǎn)是：0,null,undefined,“”,NaN理解成false,反之理解成true。注釋掉之前的代碼，添加如下代碼：
if(0){ //false
alert("0 轉(zhuǎn)換為false");
}
瀏覽器刷新頁(yè)面，發(fā)現(xiàn)沒有任何彈框，因?yàn)?理解成false，所以條件不成立。注釋掉上述代碼，添加如下代碼：
if(1){ //true
alert("除0和NaN其他數(shù)字都轉(zhuǎn)為 true");
}
瀏覽器刷新，因?yàn)?理解成true，條件成立，所以瀏覽器效果如下；
其他情況可以一一演示，完整演示代碼如下：
// if(0){ //false
// alert("0 轉(zhuǎn)換為false");
// }
// if(NaN){//false
// alert("NaN 轉(zhuǎn)換為false");
// }
if(1){ //true
alert("除0和NaN其他數(shù)字都轉(zhuǎn)為 true");
}
// if(""){ //false
// alert("空字符串為 false, 其他都是true");
// }
// if(null){ //false
// alert("null 轉(zhuǎn)化為false");
// }
// if(undefined){ //false
// alert("undefined 轉(zhuǎn)化為false");
// }
流程控制語句if，switch，for等和java保持一致，此處不再演示
需要注意的是：在js中，0,null,undefined,“”,NaN理解成false,反之理解成true
1.4 函數(shù)
在java中我們?yōu)榱颂岣叽a的復(fù)用性，可以使用方法。同樣，在JavaScript中可以使用函數(shù)來完成相同的事情。JavaScript中的函數(shù)被設(shè)計(jì)為執(zhí)行特定任務(wù)的代碼塊，通過關(guān)鍵字function來定義。接下來我們學(xué)習(xí)一下JavaScript中定義函數(shù)的2種語法
1.4.1 第一種定義格式
第一種定義格式如下：
function 函數(shù)名(參數(shù)1,參數(shù)2..){
要執(zhí)行的代碼
}
因?yàn)镴avaScript是弱數(shù)據(jù)類型的語言，所以有如下幾點(diǎn)需要注意：
- 形式參數(shù)不需要聲明類型，并且JavaScript中不管什么類型都是let或者var去聲明，加上也沒有意義。
- 返回值也不需要聲明類型，直接return即可
如下示例：
function add(a, b){
return a + b;
}
代碼演示：
<script>
function add(a,b){
return a + b;
}
</script>
但是上述只是定義函數(shù)，函數(shù)需要被調(diào)用才能執(zhí)行！所以接下來我們需要調(diào)用函數(shù)
let result = add(10,20);
alert(result);
查看瀏覽器運(yùn)行結(jié)果：瀏覽器彈框內(nèi)容如下圖所示：
1.4.2 第二種定義格式
第二種可以通過var去定義函數(shù)的名字，具體格式如下：
var functionName = function (參數(shù)1,參數(shù)2..){
//要執(zhí)行的代碼
}
接下來我們按照上述的格式，修改代碼如下：只需要將第一種定義方式注釋掉，替換成第二種定義方式即可，函數(shù)的調(diào)用不變
<script>
//定義函數(shù)-1
// function add(a,b){
// return a + b;
// }
//定義函數(shù)-2
var add = function(a,b){
return a + b;
}
//函數(shù)調(diào)用
var result = add(10,20);
alert(result);
</script>
瀏覽器彈框效果和上述一致
我們?cè)谡{(diào)用add函數(shù)時(shí)，再添加2個(gè)參數(shù)，修改代碼如下：
var result = add(10,20,30,40);
瀏覽器打開，發(fā)現(xiàn)沒有錯(cuò)誤，并且依然彈出30，這是為什么呢？
因?yàn)樵贘avaScript中，函數(shù)的調(diào)用只需要名稱正確即可，參數(shù)列表不管的。如上述案例，10傳遞給了變量a，20傳遞給了變量b,而30和40沒有變量接受，但是不影響函數(shù)的正常調(diào)用。文章來源：http://www.zghlxwxcb.cn/news/detail-729096.html
后記
????????美好的一天，到此結(jié)束，下次繼續(xù)努力！欲知后續(xù)，請(qǐng)看下回分解，寫作不易，感謝大家的支持??！ ??????文章來源地址http://www.zghlxwxcb.cn/news/detail-729096.html
到了這里，關(guān)于掌握 JavaScript：從初學(xué)者到高級(jí)開發(fā)者的完整指南（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
