一.javaScript(如下簡稱js)的歷史
-
1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其更名ScriptEase.(客戶端執行的語言)css
-
Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.後更名叫Javascripthtml
-
微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.java
-
爲了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 做爲標準（ISO/IEC-16262）。今後，Web 瀏覽器就開始努力（雖然有着不一樣的程度的成功和失敗）將 ECMAScript 做爲 JavaScript 實現的基礎。EcmaScript是規範.python
二.ECMAScript
儘管ECMAScript是一個重要的標準,但他並非js惟一的部分,固然,也不是惟一被標準化的部分.實際上,一個完整的js實現是由如下3個不一樣部分組成的:面試
核心(ECMAScript)正則表達式
文檔對象模型(DOM) Document object model(整合js,css,html)數組
瀏覽器對象模型(BOM)Broswer object model(整合js和瀏覽器)瀏覽器
js在開發中絕大多數狀況是基於對象的,也是面向對象的.dom
簡單地說,ECMAScript描述了一下內容:函數
語法
類型
語句
關鍵字
保留字
運算符
對象(封裝,繼承,多態)基於對象的語言,使用對象.
三.js基礎
1.js的引入方式
1.直接編寫:
<script> alert("hello world!") </script>
2.導入文件:
<script src = "hello.js"></script>
2.js的變量
1.聲明變量時不用聲明變量類型,所有使用var關鍵字
var a = 3;
2.一行能夠聲明多個變量,而且能夠是不一樣類型
var name = "corn" , age = 21;
3.變量命名,首字母只能是字母,下劃線,美圓符號$,三選一,餘下的字符能夠是任意字符,且區分大小寫
3.常量和標識符
常量:直接在程序中出現的數據值
標識符:
1.由不是數字開頭的字母,數字,下劃線(_),美圓符號($)組成
2.經常使用於表示函數,變量等的名稱
3.例如:_abc.$abc,abc,abc123是標識符,而1abc不是
4.js語言中表明特定含義的詞稱爲保留字,不容許程序再定義爲標識符
關鍵字:
4.js的數據類型
數據類型有:
number ------ 數值 boolean ------ 布爾值 string ------ 字符串 undefined ------ undefined null ------ null
數字類型:
不區分整型數值和浮點型數值
字符串類型(string):
是由Unicode字符,數字,標點符號組成的序列;字符串常量首尾由單引號或雙引號括起;js中沒有字符類型;經常使用特殊字符在字符串中表達;
字符串中特殊部分必須加上右斜槓\;經常使用的轉義字符 \n:換行\` ; \':單引號 ; \":雙引號 ; \\:右斜槓
布爾類型(boolean):
Boolen類型僅有兩個值:true和false,也表明1和0,實際運算中true = 1,false = 0
布爾值也能夠看做on/off,yes/no,1/0對應true/false
Boolean值主要用於js的控制語句,例如:
if (x==1){ y=y+1; }else{ y=y-1; }
Null和Undedined類型
Undefined類型
1.Undefined類型只有一個值,即undefined.當聲明的變量未初始化時,該變量的默認值是undefined.
2.當函數無明確返回值時,返回的也是值"undedined".
Null類型
另外一種只有一個值的類型是Null,它只有一個專用值null,即它的字面量.值undefined其實是從值null派生來的,所以ECMAScript把它們定義爲相等的.
儘管這兩個值相等,但它們的含義不一樣.undefined是聲明瞭變量但未對其初始化時賦予該變量的值,null則用於表示還沒有存在的對象(在討論typeof運算符時,簡單的介紹過這一點).若是函數或者方法要返回的是對象時,返回的一般是null.
四.運算符
運算符分類
算數運算符： + - * / %求餘 ++ 自增 -- 自減 (++i:先計算後賦值,i++:先賦值後計算) 比較運算符： > >= < <= != == === !== 等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所作的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。 邏輯運算符： && || ！ 賦值運算符： = += -= *= /= 字符串運算符： + 鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算
五.流程控制
順序結構(從上向下執行)
分支結構
循環結構
分支結構:
1.if.....else結構
if (表達式1) { 語句1; }else if (表達式2){ 語句2; }else if (表達式3){ 語句3; } else{ 語句4; }
2.if.....else if.....else結構
var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); }
3.switch.....case結構
var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }
switch中的case字句一般都會加break語句,不然程序會繼續執行後續case中的語句.
循環結構:
for循環:(推薦使用)
for (var i=0;i<10;i++) { console.log(i); }
for循環的另外一種形式:
for( 變量 in 數組或對象) { 執行語句 …… }
while循環:
var i = 0; while (i < 10) { console.log(i); i++; }
三元運算:
var a = 1; var b = 2; var c = a > b ? a : b
六.string對象(字符串)
1.字符串對象的建立
字符串建立(兩種方式)
1)變量 = "字符串"
2)字符串對象名稱 = new String(字符串)
// 方式一 var s = 'sffghgfd'; // 方式二 var s1 = new String(' hel lo '); console.log(s,s1); console.log(typeof(s)); //object類型 console.log(typeof (s1)); //string類型
2.字符串對象的屬性和函數
-------屬性 x.length －－－－獲取字符串的長度 ------方法 x.toLowerCase() －－－－轉爲小寫 x.toUpperCase() －－－－轉爲大寫 x.trim() －－－－去除字符串兩邊空格 －－－－字符串查詢方法 x.charAt(index) －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index爲要獲取的字符索引 x.indexOf(index)－－－－查詢字符串位置 x.lastIndexOf(findstr) x.match(regexp) －－－－match返回匹配字符串的數組，若是沒有匹配則返回null x.search(regexp) －－－－search返回匹配字符串的首字符位置索引 示例： var str1="welcome to the world of JS!"; var str2=str1.match("world"); var str3=str1.search("world"); alert(str2[0]); // 結果爲"world" alert(str3); // 結果爲15 －－－－子字符串處理方法 x.substr(start, length) －－－－start表示開始位置，length表示截取長度 x.substring(start, end) －－－－end是結束位置 x.slice(start, end) －－－－切片操做字符串 示例： var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //結果爲"cd" alert(str3); //結果爲"efgh" alert(str4); //結果爲"cdefg" alert(str5); //結果爲"fg" x.replace(findstr,tostr) －－－－ 字符串替換 x.split(); －－－－分割字符串 var str1="一,二,三,四,五,六,日"; var strArray=str1.split(","); alert(strArray[1]);//結果爲"二" x.concat(addstr) －－－－ 拼接字符串
方法的使用
<script> // ======================== // 字符串對象的建立有兩種方式 // 方式一 var s = 'sffghgfd'; // 方式二 var s1 = new String(' hel lo '); console.log(s,s1); console.log(typeof(s)); //object類型 console.log(typeof (s1)); //string類型 // ====================== // 字符串對象的屬性和方法 // 1.字符串就這麼一個屬性 console.log(s.length); //獲取字符串的長度 // 2.字符串的方法 console.log(s.toUpperCase()) ; //變大寫 console.log(s.toLocaleLowerCase()) ;//變小寫 console.log(s1.trim()); //去除字符串兩邊的空格(和python中的strip方法同樣，不會去除中間的空格) //// 3.字符串的查詢方法 console.log(s.charAt(3)); //獲取指定索引位置的字符 console.log(s.indexOf('f')); //若是有重複的，獲取第一個字符的索引,若是沒有你要找的字符在字符串中沒有就返回-1 console.log(s.lastIndexOf('f')); //若是有重複的，獲取最後一個字符的索引 var str='welcome to the world of JS!'; var str1 = str.match('world'); //match返回匹配字符串的數組，若是沒有匹配則返回null var str2 = str.search('world');//search返回匹配字符串從首字符位置開始的索引，若是沒有返回-1 console.log(str1);//打印 alert(str1);//彈出 console.log(str2); alert(str2); // ===================== // 子字符串處理方法 var aaa='welcome to the world of JS!'; console.log(aaa.substr(2,4)); //表示從第二個位置開始截取四個 console.log(aaa.substring(2,4)); //索引從第二個開始到第四個，注意顧頭不顧尾 //切片操做（和python中的同樣，都是顧頭不顧尾的） console.log(aaa.slice(3,6));//從第三個到第六個 console.log(aaa.slice(4)); //從第四個開始取後面的 console.log(aaa.slice(2,-1)); //從第二個到最後一個 console.log(aaa.slice(-3,-1)); // 字符串替換、、 console.log(aaa.replace('w','c')); //字符串替換，只能換一個 //而在python中所有都能替換 console.log(aaa.split(' ')); //把字符串按照空格分割 alert(aaa.split(' ')); //把字符串按照空格分割 var strArray = aaa.split(' '); alert(strArray[2]) </script>
七.Array對象(數組)
1.建立數組的三種方式
建立方式1: var arrname = [元素0,元素1,….]; // var arr=[1,2,3]; 建立方式2: var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true); 建立方式3: var arrname = new Array(長度); // 初始化數組對象: var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; ... cnweek[6]="星期六";
2.數組的屬性和方法
// ==================== // 數組對象的屬性和方法 var arr = [11,55,'hello',true,656]; // 1.join方法 var arr1 = arr.join('-'); //將數組元素拼接成字符串，內嵌到數組了， alert(arr1); //而python中內嵌到字符串了 // 2.concat方法(連接) var v = arr.concat(4,5); alert(v.toString()) //返回11,55,'hello',true,656,4,5 // 3.數組排序reserve sort // reserve:倒置數組元素 var li = [1122,33,44,20,'aaa',2]; console.log(li,typeof (li)); //Array [ 1122, 33, 44, 55 ] object console.log(li.toString(), typeof(li.toString())); //1122,33,44,55 string alert(li.reverse()); //2,'aaa',55,44,33,1122 // sort :排序數組元素 console.log(li.sort().toString()); //1122,2,20,33,44,aaa 是按照ascii碼值排序的 // 若是就想按照數字比較呢?（就在定義一個函數） // 方式一 function intsort(a,b) { if (a>b){ return 1; } else if (a<b){ return -1; } else{ return 0; } } li.sort(intsort); console.log(li.toString());//2,20,33,44,1122,aaa // 方式二 function Intsort(a,b) { return a-b; } li.sort(intsort); console.log(li.toString()); // 4.數組切片操做 //x.slice(start,end); var arr1=['a','b','c','d','e','f','g','h']; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString());//結果爲"c,d" alert(arr3.toString());//結果爲"e,f,g,h" alert(arr4.toString());//結果爲"c,d,e,f,g" // 5.刪除子數組 var a = [1,2,3,4,5,6,7,8]; a.splice(1,2); console.log(a) ;//Array [ 1, 4, 5, 6, 7, 8 ] // 6.數組的push和pop // push:是將值添加到數組的結尾 var b=[1,2,3]; b.push('a0','4'); console.log(b) ; //Array [ 1, 2, 3, "a0", "4" ] // pop；是講數組的最後一個元素刪除 b.pop(); console.log(b) ;//Array [ 1, 2, 3, "a0" ] //7.數組的shift和unshift unshift: 將值插入到數組的開始 shift: 將數組的第一個元素刪除 b.unshift(888,555,666); console.log(b); //Array [ 888, 555, 666, 1, 2, 3, "a0" ] b.shift(); console.log(b); //Array [ 555, 666, 1, 2, 3, "a0" ] // 8.總結js的數組特性 // java中的數組特性：規定是什麼類型的數組,就只能裝什麼類型.只有一種類型. // js中的數組特性 // js中的數組特性1：js中的數組能夠裝任意類型,沒有任何限制. // js中的數組特性2： js中的數組,長度是隨着下標變化的.用到多長就有多長. </script>
八.日期
1.建立data對象
建立date對象 // 方式一： var now = new Date(); console.log(now.toLocaleString()); //2017/9/25 下午6:37:16 console.log(now.toLocaleDateString()); //2017/9/25 // 方式二 var now2 = new Date('2004/2/3 11:12'); console.log(now2.toLocaleString()); //2004/2/3 上午11:12:00 var now3 = new Date('08/02/20 11:12'); //2020/8/2 上午11:12:00 console.log(now3.toLocaleString()); //方法3：參數爲毫秒數 var nowd3=new Date(5000); alert(nowd3.toLocaleString( )); alert(nowd3.toUTCString()); //Thu, 01 Jan 1970 00:00:05 GMT
2.data對象的方法---獲取日期和時間
獲取日期和時間 getDate() 獲取日 getDay () 獲取星期 getMonth () 獲取月（0-11） getFullYear () 獲取完全年份 getYear () 獲取年 getHours () 獲取小時 getMinutes () 獲取分鐘 getSeconds () 獲取秒 getMilliseconds () 獲取毫秒 getTime () 返回累計毫秒數(從1970/1/1午夜)
九.math對象(數學相關的)
//該對象中的屬性方法 和數學有關. abs(x) 返回數的絕對值。 exp(x) 返回 e 的指數。 floor(x)對數進行下舍入。 log(x) 返回數的天然對數（底爲e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次冪。 random() 返回 0 ~ 1 之間的隨機數。 round(x) 把數四捨五入爲最接近的整數。 sin(x) 返回數的正弦。 sqrt(x) 返回數的平方根。 tan(x) 返回角的正切。
十.Function對象(重點)
1.函數的定義
function 函數名 (參數){ <br> 函數體; return 返回值; }
功能說明：
可使用變量、常量或表達式做爲函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類能夠表示開發者定義的任何函數。
用 Function 類直接建立函數的語法以下：
var 函數名 = new Function("參數1","參數n","function_body");
雖然因爲字符串的關係，第二種形式寫起來有些困難，但有助於理解函數只不過是一種引用類型，它們的行爲與用 Function 類明確建立的函數行爲是相同的。
示例：
var func2 = new Function('name',"alert(\"hello\"+name);"); func2('haiyan');
注意:js函數加載執行與python不一樣,它是總體加載完纔會執行,因此執行函數放在函數聲明上面或下面均可以:
f();//----->OK function f(){ console.log("hello") } f();//----->OK
2.Function對象的屬性
如前所說,函數屬於引用類型,因此它們也有屬性和方法.
好比,ECMAScript定義的屬性 length聲明瞭函數指望的參數個數
alert{func1.length}
3.Function的調用
// ========================函數的調用 function fun1(a,b) { console.log(a+b) } fun1(1,2);// 3 fun1(1,2,3,4); //3 fun1(1); //NaN fun1(); //NaN console.log(fun1()) // ===================加個知識點 var d="yuan"; d=+d; alert(d);//NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會獲得一個NaN數據 alert(typeof(d));//Number NaN特色: var n=NaN; alert(n>3); alert(n<3); alert(n==3); alert(n==NaN); alert(n!=NaN);//NaN參與的全部的運算都是false,除了!= =============一道面試題、、 function a(a,b) { console.log(a+b); } var a=1; var b=2; a(a,b) //若是這樣的話就會報錯了，不知道是哪一個a了。
4.函數的內置對象arguments
// 函數的內置對象arguments,至關於python中的動態參數 function add(a,b){ console.log(a+b);//3 console.log(arguments.length);//2 console.log(arguments);//[1,2] } add(1,2) // ------------------arguments的用處1 ------------------ function ncadd() { var sum = 0; for (var i =0;i<arguments.length;i++){ // console.log(i);//打印的是索引 // console.log(arguments);//Arguments { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 等 2 項… } console.log(arguments[i]);//1,2,3,4,5 sum +=arguments[i] } return sum } ret = ncadd(1,2,3,4,5,6); console.log(ret); // ------------------arguments的用處2 ------------------ function f(a,b,c){ if (arguments.length!=3){ throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments") } else { alert("success!") } } f(1,2,3,4,5)
5.匿名函數
/ =======================
// 匿名函數
var func = function(arg){ return "tony"; }; // 匿名函數的應用
(function(){ alert("tony"); } )() (function(arg){ console.log(arg); })('123')
6.RegExp對象
//RegExp對象 //建立正則對象方式1 // 參數1 正則表達式(不能有空格) // 參數2 匹配模式：經常使用g(全局匹配;找到全部匹配，而不是在第一個匹配後中止)和i(忽略大小寫) // 用戶名只能是英文字母、數字和_，而且首字母必須是英文字母。長度最短不能少於6位 最長不能超過12位。 // 建立RegExp對象方式（逗號後面不要加空格） var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配響應的字符串 var s1 = "bc123"; //RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。 reg1.test(s1); // true // 建立方式2 // /填寫正則表達式/匹配模式（逗號後面不要加空格） var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; reg2.test(s1); // true // String對象與正則結合的4個方法 var s2 = "hello world"; s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正則 的內容 s2.search(/h/g); // 0 查找字符串中符合正則表達式的內容位置 s2.split(/o/g); // ["hell", " w", "rld"] 按照正則表達式對字符串進行切割 s2.replace(/o/g, "s"); // "hells wsrld" 對字符串按照正則進行替換 // 關於匹配模式：g和i的簡單示例 var s1 = "name:Alex age:18"; s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18" s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不區分大小寫 // 注意事項1： // 若是regExpObject帶有全局標誌g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。 // 該屬性值默認爲0，因此第一次仍然是從字符串的開頭查找。 // 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改成字符串中本次匹配內容的最後一個字符的下一個索引位置。 // 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。 // 所以，當咱們使用test()函數執行了一次匹配以後，若是想要從新使用test()函數從頭開始查找，則須要手動將regExpObject.lastIndex的值重置爲 0。 // 若是test()函數再也找不到能夠匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置爲 0。 var reg3 = /foo/g; // 此時 regex.lastIndex=0 reg3.test('foo'); // 返回true // 此時 regex.lastIndex=3 reg3.test('xxxfoo'); // 仍是返回true // 因此咱們在使用test()方法校驗一個字符串是否徹底匹配時，必定要加上^和$符號。 // 注意事項2(說出來你可能不信系列)： // 當咱們不加參數調用RegExpObj.test()方法時, 至關於執行RegExpObj.test("undefined"), 而且/undefined/.test()默認返回true。 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test("undefined"); // 返回true