前言：“成功沒有捷徑，腳踏實地一步一個腳印，該來的總會來，不好高騖遠，不急功近利，付出總會有回報，不管處於哪個階段，都要一步一個腳印，踏實的走好每一步！”
你好，我是夢陽辰！快和我一起走進JavaScript的世界吧。
文章目錄
01.JavaScript概述
1.什麼是JavaScript?
JavaScript是運行在瀏覽器上的腳本語言。簡稱JS。
JavaScript是王景公司（NetScape)的 布蘭登·艾奇 開發的，最初叫做LiveScript。LiveScript的出現讓瀏覽器更加生動，使得頁面更具有交互性。
JavaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作爲開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基於原型編程、多範式的動態腳本語言，並且支持面向對象、命令式和聲明式（如函數式編程）風格。
JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因爲Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名爲JavaScript。但實際上它的語法風格與Self及Scheme較爲接近。
JavaScript和java沒有任何關係，只是語法類似。JavaScript運行在瀏覽器中，代碼由瀏覽器解釋後執行。而Java運行在JVM中。
JavaScript的“目標程序”以普通文本形式保存，這種語言都叫做"腳本語言“。
Java的目標程序已.class形式存在，不能使用文本編輯器打開，不是腳本語言。
1998年網景公司由“美國在線”公司收購。
王景公司最著名的就是“領航者瀏覽器”：Navigator瀏覽器。
LiveScript的出現，最初的時候是爲Navigator瀏覽器量身定製一門語言，不支持其他瀏覽器。
微軟一看不行，研發了只支持IE瀏覽器的腳本語言。JScript。
在兩者語言共存的時代，程序員需要寫兩套程序。這時一個叫做ECMA組織（歐洲計算機協會）根據JavaScript制定了ECMA-262標準，叫做ECMA-Script.
JavaScript是一種屬於網絡的腳本語言,已經被廣泛用於Web應用開發,常用來爲網頁添加各式各樣的動態功能,爲用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
2.區分JSP和JS
JSP：JavaServer Pages（隸屬Java）
JS: JavaScript.
02.HTML中嵌入JavaScript
1.HTML嵌入JavaScript的第一種方式
JS是一門事件驅動型的編程語言，依靠時間去驅動，然後執行對應的程序。在JS中有很多事件，其中一個事件叫做：鼠標單擊，單詞：click。並且任何事件都會對應一個事件句柄叫做：onclick。【注意：事件和事件句柄的區別是：事件句柄是在事件單詞前添加一個on】，而事件是以HTML標籤的屬性存在的。
οnclick="js代碼“，執行原理是什麼？
頁面打開的時候，js代碼並不會執行，只是把這段代碼註冊到按鈕的click事件上了。等這個按鈕發生click之後，註冊在onclick後面的js代碼會被瀏覽器自動調用。
*怎麼使用JS代碼彈出消息框。
在JS中有一個內置對象叫做window,全部小寫，可以直接拿來使用，window代表的是瀏覽器對象。
*window對象有一個函數叫做：alert，用法是：window.alert("消息”）;這樣就可以彈窗了。
*JS的字符串可以使用雙引號，也可以使用單引號。
*JS的一條語句結束之後可以使用分號“；”,也可以不使用。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JavaScript的第一種方式</title>
</head>
<body>
<!--點擊按鈕彈出消息框-->
<input type="button" value="Hello" onclick="window.alert('Hello JavaScript!')"/>
<input type="button" value="Hello" onclick="window.alert('Hello XingKong!')"/>
<input type="button" value="Hello" onclick="window.alert ('Hello MengYangChen');
alert('Hello MengYang')
alert('Hello Meng')"/>
</body>
</html>
2.HTML嵌入JavaScript的第二種方式
採用腳本塊的方式：
暴露在腳本塊中的程序，在頁面打開的時候執行，並且遵守自上而下的順序依次逐行執行。（不需要事件）
JavaScript腳本塊可以出現在任何位置，並且可以出現多次。
aler函數會阻塞整個HTML頁面的加載。
註釋語法跟Java一樣。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML嵌入JavaScript的第二種方式</title>
</head>
<body>
<input type="button" value="我是一個。。"/>
<script type="text/javascript">
window.alert("hello world!");
</script>
<input type="button" value="我是一個按鈕對象"/>
</body>
</html>
3.HTML嵌入JavaScript的第三種方式（推薦）
引入外部的js文件。
引入js腳本文件的語句：
同一個腳本文件可以引入多次。
腳本文件直接寫語句就好了。
<script type="text/javascript" src="路徑和文件名“></script>
結束的< /script>標籤必須有，不能用反斜槓取代，引入文件時，其中間的代碼不會執行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中嵌入JavaScript的第三種方式</title>
</head>
<body>
<script type="text/javascript" src="file/JS1.js"></script>
</body>
</html>
03.JavaScript標識符和變量
1.標識符的命名規則跟Java相同。
2.變量：
聲明變量：
var 變量名；
賦值：
變量名=值
javascript是一種弱類型語言，沒有編譯階段，一個變量可以隨意給其賦值。什麼類型的都可以。
變量沒有手動賦值時，默認賦值爲：undefined。
未聲明變量使用會報錯。
2.局部變量和全局變量
類似C語言：
全局變量在函數體之外聲明。瀏覽器關閉的時候纔會銷燬。
局部變量:在函數體內部聲明。在函數體執行完後才銷燬。
3.當一個變量聲明的時候沒有使用var關鍵字，那麼不管這個變量是在哪裏聲明的，都是全局變量。
04.函數的定義和使用
1.JS中的函數怎麼定義呢?
語法格式：
第一種方式：
function 函數名（形式參數列表）{
函數體；
}
第二種方式：
函數名=function(形式參數列表）{
函數體；
}
JS中的函數不需要指定返回值類型，返回什麼類型的數據都沒問題。
函數的形參也不需要聲明。
如：
<script>
function sum (a,b){
alert(a+b);
}
//或者
sum=function(a,b){
alert(a+b);
}
</script>
在調用函數的時候，如果沒有傳參數的值，或則傳了一部分，剩下未傳的參數默認賦值undefined。
NaN是一個具體的值，該值表示不是數字。
如果實參的數量大於形式參數的個數，默認只取前面兩個數據。即沒有數量限制（弱類型語言）。因此可以看出，JS不需要重載。
2.JS的函數不能重載。
如果出現同名函數，後面定義的函數會把前面定義的函數覆蓋。
因此JS函數不能重名。分辨函數就是根據函數名來分辨。
05.JS的數據類型
1.JS數據類型有:原始類型，應用類型。
原始類型：Undefined,Number,String,Boolean,Null
引用類型:Object以及子類。
2.在ES6規範後，又基於以上6種類型添加了一種新的類型：Symbol。
3.JS中有一個運算符叫做typeof,這個運算符可以在程序的運行階段動態地獲取變量的數據類型。
typeof運算符的語法格式：
typeof 變量名
typeof運算符的運算結果時以下6個字符串(全小寫）結果之一：
“undefined"
“number”
“string”
“boolean”
“object”
“function”
var d=null;
alert(typeof d);//“object”
比較字符串是否相等用雙等號。
4.Undefined數據類型只有一個值。這個值就是undefined，當一個變量沒有手動賦值，系統默認賦值爲undefined，當然也可以手動賦值爲undefined。
1.number數據類型
如：NaN，表示Not a Number不是一個數字，但是屬於Number類型。
Infinity，表示無窮大。
0,-1,123,…小數，複數，無窮大都是屬於number類型。
除數爲0時，結果爲無窮大。
函數isNaN（數據）：結果爲true表示不是一個數字。
parseInt()函數：可以將字符串自動轉換成數字。保留Int
parseFloat()函數：將字符串轉換成數字。
Math.Ceil()函數：向上取整。2.1會變爲3。
2.boolean數據類型
在boolean類型中有一個Boolean（）函數，會將非boolean類型，轉換成boolean類型。
當某個地方一定是boolean類型時，會自動轉換成boolean類型。例如if後面的括號。
NaN,0,"",null,undefined會自動轉換成false.
3.String數據類型
1.在JS當中字符串可以使用單引號和雙引號。
2.在JS當中，怎麼創建字符串對象
第一種：var s=“sag”;（小String，屬於String類型）
第二種：var a2= new String(“ab”);（大String，屬於Object類型）
Sting是一個內置的類，可以直接使用。
3.無論是小String還是大Sting字符串的長度相同。其中又一個length屬性求長度(x.length)
常用函數：
indexof: 獲取指定字符串在當前字符串中第一次出現的索引
lastIndexof
replace
substr
substring
toLowerCase
toUpperCase
spilt 拆分字符串
例如:alert(“fasdf".indexof(“sdf”));
replace只替換最前面一個子字符串
如果想全部替換需要使用正則表達式。
substr和substring的區別。
substr(startIndex length)
substring(startIndex endIndex)左閉右開。
4.Object數據類型
1.首先Object類型是所有類型的超類，自定義的任何類型，默認繼承Object。
2.Object的prototype屬性
作用：給類動態地擴展屬性和函數。
3.Object類的函數：
toString()
valueof()
toLocalString()
4.在JS中定義的類默認繼承Object的屬性和函數。
06.在JS當中怎麼定義類？怎麼new對象？
1.定義類的語法：
第一種方式：
function 類名（形參）{
}
第二種方式：
類名 function (形參）{
}
小朋友你是不是有很多問號？這不是函數的定義方式麼？
注意：用了new就是把他當作類看，如果沒有new則是把它當作普通的函數看待。
創建對象的語法：
new 構造函數名（實參）；//構造函數和類名一致
2.JS中類的定義，同時又是一個構造函數的定義
在JS中類的定義和構造函數的定義是放在一起來完成的。
如：
function User(a,b,c){
this.sno =a;
this.sname=b;
this.sage=c;
}
//a,b,c是形參，屬於局部變量
//聲明屬性（this 表示當前對象）
//User類中有三個屬性：sno/sname/sage
3.創建對象：
var u1 = new User(111,“lisi”,30)
4.訪問對象的屬性：
alert(u1.sno)
alert(u1.sname)
alert(u1.sage)
或者用另一種語法訪問屬性：
alert(u1[“sno”]);
alert(u1[“sage”]);
定義類的另一種語法：
Emp = function (ename ,sal)
this.ename =ename;
this.sal=sal;
}
5.在類中如何定義函數:
Product = function(pno,pname,price){
//屬性
this.pno=pno;
this.pname=pname;
this.price=price;
//函數
this.getPrice =function(){
return this.price
}
//new對象
var pro = new Product(111,"西瓜",4.0)
//調用函數
var pri = pro.getPrice();
alert(pri);//4.0
6.通過prototype這個屬性來動態擴展屬性以及函數
//給Product類擴展函數：
Product.prototype.getPname=function(){
return this.pname;
}
//給String類擴展函數
String.prototype.getPname=function(){
alert(“Hello”);
}
7.JS與Java的對比：
07.null,undefined,NaN的區別
1.數據類型不一致
alert(typeof null);//Object
alert(typeof NaN);//number
alert(typeof undefined);//undefined
2.null和undefined可以等同
alert(null=NaN);//false
alert(null=undefined);//true
alert(underfined=NaN);false
在JS當中有兩個比較特殊的運算符：
1."==" :等同運算符：只判斷值是否相等（雙等號）
2."= = ="：全等運算符：既判斷值是否相等，又判斷數據類型是否相等。（三等號）
alert(11 == ture);//true
alert(11=== ture);//false
對於this等內容學過Java的就應該秒懂，如果你沒有學Java，建議看看夢陽辰 寫的Java專欄。
至此JavaScript的入門教程結束：感謝看到這裏！別忘了素質三連啊！
關注公衆號【輕鬆玩編程】回覆“計算機資源”，“Java從入門到進階”，獲取更多精彩。
