本章內容:javascript
javascript是一門動態弱類型的解釋型編程語言,加強頁面動態效果,實現頁面與用戶之間的實時動態的交互。html
javascript是由三部分組成:ECMAScript、DOM、BOMjava
JavaScript中代碼註釋:python
1. 引入外部文件正則表達式
<script type="text/javascript" src="JS文件"></script>
2. 存放在HTML的<head>或<body>中編程
<script type="text/javascript"> Js代碼內容 </script>
3. 爲何要放在<body>代碼塊底部?數組
須要注意的是:局部變量必須以 var 開頭申明,若是不寫 var 則爲全局變量瀏覽器
<script type="text/javascript"> // 全局變量 name = 'nick'; function func(){ // 局部變量 var age = 18; // 全局變量 gender = "man" } </script>
注:須要注意變量提高,就是把變量位置放到函數體的最上方 閉包
1. 算術運算符dom
一元算術 | |
+ 一元加,數值不會產生影響 | 對非數值應用一元加運算時,會調用Number()轉型函數對這個值進行轉換 |
- 一元減,轉換爲負數 | ~ |
++ 遞增1 | 經過Number()轉型爲數字,再加1,再從新賦值給操做數值 |
-- 遞減1 | ~ |
二元算術 | |
+ 加法 | |
- 減法 | |
* 乘法 | |
/ 除法 | |
% 取模 |
1> 若是其中一個操做數是對象,則對象會轉換爲原始值:日期對象經過toString()方法執行轉換,其餘對象經過valueOf()方法執行轉換。若是結果還不是原始值,則再使用toString()方法轉換 2> 在進行了對象到原始值的轉換後,若是其中一個操做數是字符串的話,另外一個操做數也會轉換成字符串,進行字符串拼接 3> 兩個操做數都將轉換成數字或NaN,進行加法操做
2. 比較運算符
=== 嚴格運算符 | 比較過程沒有任何類型轉換 |
!== 嚴格運算符 | ===的結果取反 |
== 相等運算符 | 若是兩個操做值不是同一類型,相等運算符會嘗試進行一些類型轉換,而後再進行比較 |
!= 不相等運算符 | ==的結果取反 |
> 大於運算符 | |
>= 大於等於運算符 | |
< 小於運算符 | |
<= 小於等於運算符 |
1> 若是兩個值類型不一樣則返回false 2> 若是兩個值類型相同,值相同,則返回true,不然返回false 3> 若是兩個值引用同一個對象,則返回true,不然,返回false console.log([] === []);//false console.log({} === {});//false var a = {}; b = a; console.log(a === b);//true
對象類型和原始類型比較: 1> 對象類型會先使用valueOf()轉換成原始值,若是結果還不是原始值,則再使用toString()方法轉換,再進行比較(日期類只容許使用toString()方法轉換爲字符串) 2> 在對象轉換爲原始值以後,若是兩個操做數都是字符串,則進行字符串的比較 3> 在對象轉換爲原始值以後,若是至少有一個操做數不是字符串,則兩個操做數都將經過Number()轉型函數轉換成數字進行數值比較 注:若是一個值是null,另外一個值是undefined,則返回true; console.log(null == undefined);//true 若是一個值是null,另外一個值是0,則返回tfalse; console.log(null == 0);//false 空字符串或空格字符串會轉成0 console.log(null == []);//false console.log(null == '');//false console.log([] == ' ');//false,至關於'' == ' ' console.log([] == '');//true,至關於'' == '' console.log(0 == '');//true
數字和字符串比較: 1> 若是操做值是對象,則這個對象將先使用valueOf()轉換成原始值,若是結果還不是原始值,則再使用toString()方法轉換 2> 在對象轉換爲原始值以後,若是兩個操做數都是字符串,則按照unicode字符的索引順序對兩個字符串進行比較 3> 在對象轉換爲原始值以後,若是至少有一個操做數不是字符串,則兩個操做數都轉換成數字進行比較 console.log('B' > 'a');//false console.log('b' > 'a');//true console.log(9 > '2');//true
3. 邏輯運算符
! 非(兩個!!表示Boolean()轉型函數) |
返回一個布爾值 |
&& 與 | 兩個操做都爲true時返回true,不然返回false(返回值不必定是布爾值),能夠多個連用(..&&..&&..) |
|| 或 | 兩個操做都是false時返回false,不然返回true(返回值不必定是布爾值),能夠多個連用(..||..||..) |
//七個假值: console.log(!!undefined);//false console.log(!!null);//false console.log(!!0);//false console.log(!!-0);//false console.log(!!NaN);//false console.log(!!'');//false console.log(!!false);//false console.log(!!{});//true console.log(!![]);//true
1> 取代if語句 //前面條件成立則運行後面操做 (a == b) && dosomething(); 2> 用於回調函數 //若沒有給參數a傳值,則a默認爲undefined假值,因此不執行a()。 function fn(a){ a && a(); }
1> 變量設置爲默認值 //若是沒有向參數a傳入任何參數,則將該參數設置爲空對象 function func(a){ a = a || {}; }
特殊值:
一、數字(Number)
JavaScript中不區分整數和浮點數,全部數字均用浮點數值表示。
轉換:
特殊值:
Number | 對數字的支持 |
Number.MAX_VALUE | 最大數值 |
Number.MIN_VALUE | 最小數值 |
Number.NaN | 非數字 |
Number.NEGATIVE_INFINITY | 負無窮大 |
Number.POSITIVE_INFINITY | 正無窮大 |
Number.toExponential( ) | 返回四捨五入的科學計數法,加參數爲保留幾位 |
Number.toFixed( ) | 小數點後面的數字四捨五入,加參數爲保留幾位 |
Number.toPrecision( ) | 四捨五入,自動調用toFixed()或toExponential() |
Number.toLocaleString( ) | 把數字轉換成本地格式的字符串 |
Number.toString( ) | 將數字轉換成字符串 |
Number.valueOf( ) | 返回原始數值 |
二、字符串(String)
String.length | 字符串的長度 |
String.trim() | 移除空白 |
String.trimLeft() | 移除左側空白 |
String.trimRight() | 移除右側空白 |
String.concat(value, ...) | 拼接 |
String.slice(start, end) | 切片 |
String.split( ) | 分割 |
String.search( ) | 從頭開始匹配,返回匹配成功的第一個位置(g無效) |
String.match( ) | 全局搜索,若是正則中有g表示找到所有,不然只找到第一個 |
String.replace( ) | 替換,正則中有g則替換全部,不然只替換第一個匹配項;
$數字:匹配的第n個組內容;
$&:當前匹配的內容;
$`:位於匹配子串左側的文本;
$':位於匹配子串右側的文本
$$:直接量$符號
|
String.charAt( ) | 返回字符串中的第n個字符 |
String.charCodeAt( ) | 返回字符串中的第n個字符的代碼 |
String.fromCharCode( ) | 從字符編碼建立—個字符串 |
String.indexOf( ) | 查找子字符串位置 |
String.lastIndexOf( ) | 查找子字符串位置 |
String.localeCompare( ) | 用本地特定的順序來比較兩個字符串 |
String.substr( ) | 抽取一個子串 |
String.substring( ) | 返回字符串的一個子串 |
String.toLocaleLowerCase( ) | 把字符串轉換小寫(針對地區,在不知道程序在哪一個語言環境中運行時用) |
String.toLocaleUpperCase( ) | 將字符串轉換成大寫(針對地區) |
String.toLowerCase( ) | 小寫 |
String.toUpperCase( ) | 大寫 |
String.toString( ) | 返回原始字符串值 |
String.toString() | 返回原始字符串值 |
String.valueOf( ) | 返回原始字符串值 |
\0 空字節 \n 換行 \t 製表 \b 空格 \r 回車 \f 進紙 \\ 斜槓 \' 單引號 \" 雙引號
三、布爾類型(Boolean)
true(真)和false(假)
toString() | 返回Boolean的字符串值('true'或'false') |
toLocaleString() | 返回Boolean的字符串值('true'或'false') |
valueOf() | 返回Boolean的原始布爾值(true或false) |
四、數組(Array)
var name = Array("nick","jenny"); var name = ["nick","jenny"];
Array.length | 數組的大小 |
Array.push() | 尾部添加元素 |
Array.pop() | 刪除並返回數組的最後一個元素 |
Array.unshift() | 在數組頭部插入一個元素 |
Array.shift( ) | 在數組頭部移除一個元素 |
Array.slice( ) | 切片 |
Array.reverse( ) | 反轉 |
Array.join( ) | 將數組元素鏈接起來以構建一個字符串 |
Array.concat( ) | 拼接 |
Array.sort( ) | 排序 |
Array | 對數組的內部支持 |
Array.splice( start, deleteCount, value, ...) | 插入、刪除或替換數組的元素 obj.splice(n,
0
,val) 指定位置插入元素
obj.splice(n,
1
,val) 指定位置替換元素
obj.splice(n,
1
) 指定位置刪除元素
|
Array.toLocaleString( ) | 把數組轉換成局部字符串 |
Array.toString( ) | 將數組轉換成一個字符串 |
5. Math
Math對象是一個靜態對象,而不是構造函數。實際上,Math只是一個由Javascript設置的對象命名空間,用於存儲數學函數。
做用是執行普通的算數任務。
常量 Math.E 常量e,天然對數的底數。 Math.LN10 10的天然對數。 Math.LN2 2的天然對數。 Math.LOG10E 以10爲底的e的對數。 Math.LOG2E 以2爲底的e的對數。 Math.PI 常量figs/U03C0.gif。 Math.SQRT1_2 2的平方根除以1。 Math.SQRT2 2的平方根。 靜態函數 Math.abs( ) 計算絕對值。 Math.acos( ) 計算反餘弦值。 Math.asin( ) 計算反正弦值。 Math.atan( ) 計算反正切值。 Math.atan2( ) 計算從X軸到一個點的角度。 Math.ceil( ) 對一個數上舍入。 Math.cos( ) 計算餘弦值。 Math.exp( ) 計算e的指數。 Math.floor( ) 對一個數下舍人。 Math.log( ) 計算天然對數。 Math.max( ) 返回兩個數中較大的一個。 Math.min( ) 返回兩個數中較小的一個。 Math.pow( ) 計算xy。 Math.random( ) 計算一個隨機數。 Math.round( ) 舍入爲最接近的整數。 Math.sin( ) 計算正弦值。 Math.sqrt( ) 計算平方根。 Math.tan( ) 計算正切值。
一、條件語句
JavaScript中支持兩個條件語句,分別是:if 和 switch。
if 語句:
//if語句 if(條件){ }else if(條件){ }else{ }
Switch 語句:
//switch語句,name等於nick是執行第一個case,等於第二個執行第二個case,其它執行default. switch(name){ case 'nick': age = 18; break; case 'jenny': age = 21; break; default : age = 0; }
二、循環語句
JavaScript中支持四種循環語句,分別是:for、for in、while、do-while
for 循環:
var names = ["nick", "jenny"]; for(var i=0;i<names.length;i++){ console.log(i); //索引 console.log(names[i]); }
for in 循環:
var names = ["nick", "jenny"]; for(var index in names){ console.log(index); console.log(names[index]); }
while 循環:
while(條件){ // break; // continue; }
do-while 循環:
//循環的代碼至少執行一次,結果爲1 var num = 0; do { num++; }while (num>10);
3. label語句
label 語句能夠理解爲跳出任意循環
//輸出結果爲95 <script> var num = 0; for (var i=0;i<10;i++) { for (var j=0;j<10;j++) { if (i==5 && j==5) { break; } num++; } } console.log(num); </script>
//輸出結果爲55 //i和j都循環爲到5時,跳出了兩層循環 <script> var num = 0; outPoint: for (var i=0;i<10;i++) { for (var j=0;j<10;j++) { if (i==5 && j==5) { break outPoint; } num++; } } console.log(num); </script>
4. 異常處理
主動跑出異常 throw Error('xxxx')
try { //這段代碼從上往下運行,其中任何一個語句拋出異常該代碼塊就結束運行 } catch (e) { // 若是try代碼塊中拋出了異常,catch代碼塊中的代碼就會被執行。 //e是一個局部變量,用來指向Error對象或者其餘拋出的對象 } finally { //不管上述代碼怎麼,finally代碼塊始終會執行 }
函數定義的三種方式:
// 普通函數 function func(arg){ return true; } // 匿名函數 var func = function(arg){ return "nick"; } // 自執行函數 (function(arg){ console.log(arg); })('nick')
函數參數:
函數傳參的個數能夠小於實際需傳參的個數,沒傳參的默認爲undefined
參數傳多默認不起做用
function man(name,age) { console.log(name,age); } man("nick",18); //nick 18 man("nick"); //nick undefined man("nick",18,19); //nick 18
arguments 可接收全部參數,返回一個數組
function man() { console.log(arguments); } man("nick",18); //["nick", 18] man("nick"); //["nick"] man("nick",18,19); //["nick", 18, 19]
函數的做用域與做用域鏈:
JavaScript中沒有塊級做用域
var name = 'nick'; (function Main(){ console.log(name);//undefined if(1){ var name = 'jenny'; } console.log(name);//jenny })(); console.log(name);//nick //輸出結果第一個爲undefined //聲明需提早(Hoisting),在JavaScript引擎「預編譯」時進行,函數在被執行以前,會將其中的變量所有聲明,而不賦值
做用域鏈
每一個構造函數都有一個內部對象指針,指向原型對象,而原型對象也包含一個指向構造函數的指針。如此層層遞進,造成做用域鏈條
var name = 'nick'; function Main() { function F1(){ var name = 'jenny'; console.log(name);//jenny } function F2() { console.log(name);//nick } F1(); F2(); } Main(); // 從內到外的優先級尋找 // F2() 的做用域鏈爲 F2()-->Main()
閉包:
閉包就是可以讀取其餘函數內部變量的函數。
function f1(){ var n=1; Add=function(){ n++; }; function f2(){ console.log(n); } return f2; } var result=f1(); result(); //1 Add(); result(); //2 //result就是閉包f2函數 //函數f1中的局部變量n一直保存在內存中,並無在f1調用後被自動清除
閉包使函數中的變量都被保存在內存中,內存消耗大,因此少用閉包,不然會形成網頁的性能低,在IE中可能致使內存泄露。
因此在退出函數以前,將不使用的局部變量所有刪除。
面向對象
面向對象的三大特性:
封裝:隱藏代碼實現的細節,實現代碼的模塊化
繼承:擴展已經存在的代碼模塊,實現代碼重用
多態:接口的不一樣實現方式,實現接口重用
關鍵字:
this 代指此時的對象
new 建立對象時必須使用
構造函數模式:
function Foo (name,age) { this.Name = name; this.age = age; this.Func = function () { return this.Name + this.age } } var obj = new Foo("nick",18); var ret = obj.Func(); console.log(ret); var obj2 = new Foo("jenny",21);
上述模式把一樣的函數封裝到了不一樣對象,形成了內存浪費。
原型模式(prototype):
function Foo(name,age) { this.Name = name; this.Age = age; } Foo.prototype = { GetInfo: function () { var str = " is good"; return this.Name + str; }, Func: function () { return this.Name + this.Age; } }; var obj = new Foo("nick",18); console.log(obj.Name);//nick console.log(obj.Age);//18 var ret = obj.GetInfo(); console.log(ret);//nick is good var ret2 = obj.Func(); console.log(ret2);//nick18 var obj2 = new Foo("nick",18);
全部的構造函數的prototype屬性都指向另外一個對象(同一塊內存地址),這個對象的全部屬性和方法,都會被構造函數的實例繼承。
Prototype模式的驗證方法
1. isPrototypeOf()
用來判斷一個對象是否存在於另外一個對象的原型鏈中
Foo.prototype.isPrototypeOf(obj) true Foo.prototype.isPrototypeOf(obj2) true
2. hasOwnProperty()
用來判斷某一個對象(不包括原型鏈)是否具備指定屬性。
obj.hasOwnProperty('Name') true obj.hasOwnProperty('Age') true
3. in運算符
判斷某個實例是否具備某個屬性
'Name' in obj true 'Age' in obj true
一、序列化
二、轉義
三、eval
JavaScript中的eval既能夠運行代碼也能夠獲取返回值
a = eval('1+1'); console.log(a); //2
四、正則表達式
var p = /nick/g; console.log(p.test('nickjennynick')); // true console.log(p.exec('nickjennynick')); // ["nick", index: 0, input: "nickjennynick"]
JavaScript中支持正則表達式,其主要提供了兩個功能:
匹配模式:
g:表示全局(global)模式,匹配全部字符串,不會匹配到第一項時中止
i:表示不區分大小寫(case-insensitive)模式
m:表示多行(multiline)模式,到達一行文本末尾時還會繼續查找下一行中是否存在匹配的項
括號分組:
console.log(/(n)(i)ck/.exec('nickjenny')); // console.log(/(n)(i)ck/.exec('nickjenny')) console.log(/(n)(i)ck{2}/.exec('nickkjenny')); // ["nickk", "n", "i", index: 0, input: "nickkjenny"]
元字符 名稱 匹配對象 . 點號 單個任意字符(除回車\r、換行\n、行分隔符\u2028和段分隔符\u2029外) [] 字符組 列出的單個任意字符 [^] 排除型字符組 未列出的單個任意字符 ? 問號 匹配0次或1次 * 星號 匹配0交或屢次 + 加號 匹配1次或屢次 {min,max} 區間量詞 匹配至少min次,最多max次 ^ 脫字符 行的起始位置 $ 美圓符 行的結束位置 | 豎線 分隔兩邊的任意一個表達式 () 括號 限制多選結構的範圍,標註量詞做用的元素,爲反向引用捕獲文本 \1,\2... 反向引用 匹配以前的第1、第二...組括號內的表達式匹配的文本
\d 數字,等同於[0-9] \D 非數字,等同於[^0-9] \s 空白字符 \S 非空白字符 \w 字母、數字、下劃線,等同於[0-9A-Za-z_](漢字不屬於\w) \W 非字母、數字、下劃線,等同於[^0-9A-Za-z_]
五、時間處理
時間操做中有兩種時間:
Date 操做日期和時間的對象 Date.getDate( ) 返回一個月中的某一天 Date.getDay( ) 返回一週中的某一天 Date.getFullYear( ) 返回Date對象的年份字段 Date.getHours( ) 返回Date對象的小時字段 Date.getMilliseconds( ) 返回Date對象的毫秒字段 Date.getMinutes( ) 返回Date對象的分鐘字段 Date.getMonth( ) 返回Date對象的月份字段 Date.getSeconds( ) 返回Date對象的秒字段 Date.getTime( ) 返回Date對象的毫秒錶示 Date.getTimezoneOffset( ) 判斷與GMT的時間差 Date.getUTCDate( ) 返回該天是一個月的哪一天(世界時) Date.getUTCDay( ) 返回該天是星期幾(世界時) Date.getUTCFullYear( ) 返回年份(世界時) Date.getUTCHours( ) 返回Date對象的小時字段(世界時) Date.getUTCMilliseconds( ) 返回Date對象的毫秒字段(世界時) Date.getUTCMinutes( ) 返回Date對象的分鐘字段(世界時) Date.getUTCMonth( ) 返回Date對象的月份(世界時) Date.getUTCSeconds( ) 返回Date對象的秒字段(世界時) Date.getYear( ) 返回Date對象的年份字段(世界時) Date.parse( ) 解析日期/時間字符串 Date.setDate( ) 設置一個月的某一天 Date.setFullYear( ) 設置年份,也能夠設置月份和天 Date.setHours( ) 設置Date對象的小時字段、分鐘字段、秒字段和毫秒字段 Date.setMilliseconds( ) 設置Date對象的毫秒字段 Date.setMinutes( ) 設置Date對象的分鐘字段和秒字段 Date.setMonth( ) 設置Date對象的月份字段和天字段 Date.setSeconds( ) 設置Date對象的秒字段和毫秒字段 Date.setTime( ) 以毫秒設置Date對象 Date.setUTCDate( ) 設置一個月中的某一天(世界時) Date.setUTCFullYear( ) 設置年份、月份和天(世界時) Date.setUTCHours( ) 設置Date對象的小時字段、分鐘字段、秒字段和毫秒字段(世界時) Date.setUTCMilliseconds( ) 設置Date對象的毫秒字段(世界時) Date.setUTCMinutes( ) 設置Date對象的分鐘字段和秒字段(世界時) Date.setUTCMonth( ) 設置Date對象的月份字段和天數字段(世界時) Date.setUTCSeconds( ) 設置Date對象的秒字段和毫秒字段(世界時) Date.setYear( ) 設置Date對象的年份字段 Date.toDateString( ) 返回Date對象日期部分做爲字符串 Date.toGMTString( ) 將Date轉換爲世界時字符串 Date.toLocaleDateString( ) 回Date對象的日期部分做爲本地已格式化的字符串 Date.toLocaleString( ) 將Date轉換爲本地已格式化的字符串 Date.toLocaleTimeString( ) 返回Date對象的時間部分做爲本地已格式化的字符串 Date.toString( ) 將Date轉換爲字符串 Date.toTimeString( ) 返回Date對象日期部分做爲字符串 Date.toUTCString( ) 將Date轉換爲字符串(世界時) Date.UTC( ) 將Date規範轉換成毫秒數 Date.valueOf( ) 將Date轉換成毫秒錶示