目錄
1、JavaScript概述
JavaScript不同於HTML、CSS，其是一種客戶端腳本語言，運行在客戶端瀏覽器中，每一個瀏覽器都有JavaScript的解析引擎。其是腳本語言，不需要編譯，直接可以被瀏覽器解析執行。
JavaScript可以增強用戶和html頁面的交互，可以控制html元素，讓頁面有一些動態的效果，增強用戶的體驗。
JavaScript發展史：
- 1992年，Nombase公司開發出全球第一款客戶端腳本語言，專門用於表單的校驗，命名爲：C--，後來更名爲ScriptEase；
- 1995年，Netspace(網景)公司，開發了一門客戶端腳本語言：LiveScript；後來請來SUN公司的專家，在LiveScript基礎上進行修改，命名爲JavaScript；
- 1996年，微軟抄襲了JavaScript抄襲了JScript語言，搭載在自己的IE瀏覽器上；
- 1997年，ECMA(歐洲計算機製造商協會)，ECMAScript，成了所有客戶端腳本語言的標準。
JavaScript=ECMAScript+JavaScript自己特有的東西（BOM+DOM）；
2、ECMAScript客戶端腳本語言標準
2.1、基本語法
- 與html結合
內部JS：定義一個<script>標籤，標籤體內容就是js代碼
外部JS：定義一個<script>標籤，通過src屬性引入外部js文件
【注意】：<script>標籤可以定義在html的任何外部，但是位置不同會影響執行順序；另外，可以定義多個。 - 註釋
單行註釋：//註釋內容
多行註釋：/*註釋內容*/ - 數據類型
原始數據類型（基本數據類型）：
number:數字。整數/小數/NaN(不上數字的數字類型)
string:字符串。字符/字符串 “abc” "a" 'abc'
boolean：true 、false
null：一個對象爲空的佔位符
undefined：未定義，若一個變量沒有初始化值，則默認爲undefined
引用數據類型：對象 - 變量
變量：一塊存儲數據的內存空間。
Java是強類型的語言，JavaScript是弱類型的語言。
強類型：開闢變量存儲空間時定義數據類型，只能存儲固定類型的數據；弱類型無需指定，可存儲任意類型。
語法：var 變量名 = 初始化值；
【舉例】：定義不同的數據類型
<script>
//定義number類型
var num =1;
var num2=1.2;
var num3=NaN;
//輸出到頁面
document.write(num+"---"+typeof(num) +"<br>");
document.write(num2+"---"+typeof(num2) +"<br>");
document.write(num3+"---"+typeof(num3) +"<br>");
//定義string類型
var str = '1bc';
var str2 = "aaa";
document.write(str+"---"+typeof(str) +"<br>");
document.write(str2+"---"+typeof(str2) +"<br>");
//定義boolean類型
var flag = false;
document.write(flag+"---"+typeof(flag) +"<br>");
//定義null
var obj = null;
var obj2 = undefined;
var obj3;
document.write(obj+"---"+typeof(obj) +"<br>");
document.write(obj2+"---"+typeof(obj2) +"<br>");
document.write(obj3+"---"+typeof(obj3) +"<br>");
</script>
- 運算符
一元運算符：只有一個運算數的運算符：++ ， -- ，+ ，-，+3
注意：JS中，若運算數不是運算符所要求的類型，那麼js引擎會自動的將運算數進行類型轉換。
算數運算符：+，-，*，///string轉number，按照字面值轉換，若字面值不是數字，則轉爲NaN var b =+"123"; document.write(b+"---"+typeof(b) +"<br>"); //boolean轉number，true轉爲1，false轉爲0 var flag = +true; var flag2 = +false; document.write(flag+"---"+typeof(flag) +"<br>"); document.write(flag2+"---"+typeof(flag2) +"<br>");
賦值運算符：=，+=，-=
比較運算符：> < >= <= == ===(全等於)
注意：比較類型：類型相同直接比較、類型不同先進行類型轉換再比較
字符串：按照字典大小順序比較，按位逐一比較，直到得出大小爲止。
===：全等於，比較前先判斷類型，若不一致，直接返回false。
邏輯運算符：&& || |document.write((3>4)+"<br>"); //fasle document.write(("abc" < "bcd") + "<br>");//true document.write(("123" == 123) + "<br>");//true document.write(("123" === 123) + "<br>");//fasle
注意：其他類型轉boolean，
number：0或NaN爲假，非0爲真；
string：除了空字符串("")，其他都爲真；
null&undefined：都是false；
對象：所有對象都是true；
三元運算符：?： - 特殊語法(瞭解即可)
1）語句以分號結尾，但是一行只有一行語句時，分號可以省略，但是不建議這麼做，不規範；
2）變量的定義可以不使用var關鍵字，用的話是局部變量，不用的話是全局變量，不建議用，不規範； - 流程控制語句：if else、switch、while、do...while、for
注意：在java中，switch語句可以接收的數據類型：byte、int、short、char、枚舉、String
在JS中，switch語句可以接收任意類型的數據；
【舉例】：練習實現99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9*9運算表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
//2.完成表格嵌套
document.write("<table align='center'>");
//1.完成基本的for循環嵌套，展示乘法表
for(var i=1; i<=9; i++){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>");
document.write(i+"*"+j+"="+(i*j)+" ");
}
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
2.2、JavaScript對象
JavaScript的基本對象包括：Function、Array、Boolean、Date、Math、Number、String、RegExp、Global。
1、Function：函數（方法）對象
創建：1）var fun = new Function(形參列表，方法體)； //基本不用，不用掌握
2）function 方法名稱(形參列表){ 方法體 }
<script>
function fun2(a,b) {
alert(a+b);
}
fun2(3,4);
</script>
3）var 方法名 = function(形參列表){ 方法體 }
var fun3 = function (a,b) {
alert(a+b);
}
fun3(3,4);
屬性：length：代表形參的個數；
特點：1）方法定義時，形參和返回值的類型不用寫；
2）方法是一個對象，如果定義名稱相同的方法，會覆蓋；
3）在JS中，方法的調用只與方法的名稱有關，和參數列表無關；
4）在方法聲明中隱藏一個內置對象（數組），arguments，封裝所有的實際參數；
function add() {
var sum =0;
for(var i=0;i<arguments.length;i++)
sum +=arguments[i];
return sum;
}
var sum = add(1,2,3,4);
alert(sum);
2、Array：數組對象
創建：1）var arr = new Array(元素列表)；
2）var arr = new Array(默認長度)；
3）var arr = [元素列表]；
<script>
var arr1 = new Array(1,2,3);
var arr2 = new Array(3);
var arr3 = [1,2,3];
var arr4 = new Array();
document.write(arr1+"<br>");
document.write(arr2+"<br>");
document.write(arr3+"<br>");
document.write(arr4+"<br>");
</script>
屬性： length：代表數組的長度；
方法：1）join(參數) 將數組中的元素按照指定的分隔符拼接爲字符串，不傳參數，默認爲按逗號拼接；
2）push(參數) 向數組的尾部添加一個或更多元素，返回新的長度；
特點：1）JS中數組元素的類型是可變的；
2）JS中數組的長度是可變的；
var arr = [1,"abc",true];
document.write(arr+"<br>");
document.write(arr[0]+"<br>");
document.write(arr[1]+"<br>");
document.write(arr[2]+"<br>");
document.write(arr[3]+"<br>"); //輸出爲 undefined
3、Date：日期對象
創建：1）var date= new Date()；
方法：1）toLocalString（）;返回當前date對象對應的時間本地字符串格式；
2）getTime(）;返回當前對象描述的時間到1970.1.1零點的毫秒值差，一般用作時間戳；
<script>
var date = new Date();
document.write(date);//Tue May 19 2020 16:09:20 GMT+0800 (中國標準時間)
document.write(date.toLocaleString());
</script>
4、Math：數學對象
屬性： PI
方法：1）radom(); 返回0-1之間的隨機數，含0不含1；
2）cell(); 對數進行向上舍入；
3）floor()； 對數進行向下舍入；
4）round()；四捨五入爲最接近的整數；
特點：1）JS中Math對象不用創建，直接使用：Math.方法；
【舉例】：產生一個1-100的隨機整數
<script>
document.write(Math.floor(100*Math.random())+1+"<br>");
</script>
5、RegExp：正則表達式對象
正則表達式是定義字符串的組成規則的：
1）單個字符：[]，如[a] [ab] [a-z] [a-zA-Z0-9]
特殊符號代表特殊含義的單個字符：
\d 單個數字字符 [0-9]
\w 單個單詞字符 [a-zA-Z0-9]
2）量詞符號：？ 表示出現0次或1次
* 表示出現0次或多次
+ 表示出現1次或多次
{m,n} 表示m<=數量 <=n，若m缺省，表示最多n次，若n缺省，表示最少m次
3）開始結束符號：^開始、$結束
創建：1）var reg = new RegExp("正則表達式"); 用這種方式需要注意加轉義符
2）var reg = /正則表達式/; 一般用這種方式；
方法：1）test(參數），驗證指定的字符串是否符號正則定義的規範；
<script>
var reg = new RegExp("^\\w{6,12}$");
var reg2 = /^\w{6,12}$/;
var name = "zhhhzhzhh";
var flag = reg2.test(name);
alert(flag);
</script>
6、Global對象
特點： 全局對象，其中封裝的方法不需要對象就可以直接調用；
方法：1）encodeURI() ，url編碼
2）dencodeURI()，url解碼
3）encodeURIComponent() ，url編碼，編碼的字符更多
4）dencodeURIComponent()，url解碼，編碼的字符更多
5）parseInt()，將字符串轉換爲數字，逐一判斷每一個字符是否是數字，直到不是數字爲止，將前面數字部分轉爲number
6）isNaN()，判斷一個值是否是NaN（NaN六親不認，NaN自己都不認）
7）eval()，將JS字符串，把它作爲腳本代碼執行
<script>
//encodeURI decodeURI encodeURIComponent decodeURIComponent
var str = "百度一下";
var encode = encodeURI(str);
document.write(encode+"<br>"); //%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B
var s = decodeURI(encode);
document.write(s+"<br>"); //百度一下
var str1 = "百度一下";
var encode1 = encodeURIComponent(str1);
document.write(encode1+"<br>"); //%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B
var s1 = decodeURIComponent(encode1);
document.write(s1+"<br>"); //百度一下
//parseInt()
var str2 = "123aa";
var num = parseInt(str2);
document.write(num+"<br>");
//isNaN
var a = NaN;
document.write((a==NaN)+"<br>");
document.write(isNaN(a)+"<br>");
//eval
var jscode = "alert(123)";
eval(jscode);
</script>
本文爲博主原創文章，轉載請註明出處，若本文對您有些許幫助，關注/評論/點贊/收藏，就是對我最大的支持，多謝！