javaweb學習筆記（八）：JavaScript（1）
目錄
1.3.5 typeof()、instanceof()運算子
1.javascript
Javascript
①核心（ECMAScript）
②文件物件模型（DOM） Document object model(整合js和html和css)
③瀏覽器物件模型（BOM） Browser object model(整合js和瀏覽器)
1.1 js的引入方式
①在頁面上使用script標籤，在標籤中書寫js程式碼。 例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js的引入方式</title> <script type="text/javascript"> alert("hello,xiao hua"); </script> </head> <body> </body> </html>
開啟瀏覽器，檢視：
②使用src屬性引入外部.js檔案。此時script標籤中，不能再書寫js程式碼。 例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js的引入方式</title>
<script type="text/javascript" src="a.js">
</script>
</head>
<body>
</body>
</html>其中a.js內容為：
開啟瀏覽器，檢視：
1.2 ECMAScript基礎
1.2.1語法
①變數區分大小寫,可一次宣告多個變數,並且變數不必具有相同的型別。 例：
var test = "hi", age = 25;
②變數是弱型別,可以隨時變化 例：
var a=1;
a=”hello”;
注：由於js是弱型別變數，一般在駝峰命名法命名變數前附加一個小寫字母，說明該變數的型別。 例：
var iMyTestValue = 0, sMySecondValue = "hi";
| 陣列 |
a |
aValues |
| 布林型 |
b |
bFound |
| 浮點型（數字） |
f |
fValue |
| 函式 |
fn |
fnMethod |
| 整型（數字） |
i |
iValue |
| 物件 |
o |
oType |
| 正則表示式 |
re |
rePattern |
| 字串 |
s |
sValue |
| 變型（可以是任何型別） |
v |
vValue |
③宣告變數時加var，作用範圍為所在程式碼塊，不加var,作用範圍為全域性。
③單行註釋：// 多行註釋：/* */
1.2.2資料型別
在 ECMAScript 中，變數可以存在兩種型別的值，即原始值和引用值。
原始值 ：儲存在棧（stack）中的簡單資料段，它們的值直接儲存在變數訪問的位置。
引用值 ：儲存在堆（heap）中的物件，儲存在變數處的值是一個指標（point），指向儲存物件的記憶體處。
原始值共有5中型別。如下:
undefined（一般是系統自動賦值，當建立一個變數，並且沒有初始化時，其值即為 undefined，或者函式無明確返回值時，返回的即是undefined。）
null（一般人為賦值為null，它是物件資料型別的佔位符）
boolean（布林）
number （數字，不區分整型或浮點型）
string（字串，可使用單引號或雙引號）
注：
①值 undefined 實際上是從值 null 派生來的，因此ECMAScript 把它們定義為相等的。儘管這兩個值相等，但它們的含義不同。undefined 是聲明瞭變數但未對其初始化時賦予該變數的值，null 則用於表示尚未存在的物件。如果函式或方法要返回的是物件，那麼找不到該物件時，返回的通常是 null。
② Number 型別既可以表示32位的整數，還可以表示64位的浮點數。對於浮點字面量，用它進行計算前，真正儲存的是字串。如：
定義十進位制整數var iNum = 86;
定義八進位制var iNum = 070;
定義十六進位制var iNum = 0xAB;
科學計數法var fNum = 5.618e7;var fNum = 8-e17
定義浮點數var fNum = 5.0;
數字的最大值:Number.MAX_VALUE
數字的最小值:Number.MIN_VALUE
超過最大值:Number.POSITIVE_INFINITY(不可參與運算)
小於最小值:Number.NEGATIVE_INFINITY(不可參與運算)
特殊值:NaN(Not A Number).一般說來，這種情況發生在型別（String、Boolean 等）轉換失敗時。NaN不等於NaN,可以使用isNaN()方法.
③轉義字元：
1.2.3 運算子
①js中的迴圈語句（while...do和do...while）、判斷語句（for、switch、if...else）都和java語法一致。
②當一元運算子（+、-）對字串進行操作時，會把字串轉換為數字型。它計算字串的方式與 parseInt() 相似，主要的不同是隻有對以 "0x" 開頭的字串（表示十六進位制數字），一元加法運算子才能把它轉換成十進位制的值。因此，用一元加法轉換 "010"，得到的總是 10，而 "0xB" 將被轉換成 11。 例：
var sStr="13";
var iNum1=+"13";
alert(typeof(sStr));//string
alert(typeof(iNum1));//number
③位運算子（同java）
AND(&) OR(|) NOT(~) XOR(^) 左移(<<) 右移(>>>) 無符號右移(>>>)
④js會在需要什麼型別時，自動轉換，下為常見型別自動轉Boolean表：
邏輯NOT(!) 例：
alert(!0);//true
alert(!null);//true
alert(!NaN);//true
在運算過程中，首先js 會將 && 和|| 兩邊的值轉成Boolean 型別，然後再算值 ，&&運算如果返回true，則取最後一個的值，如果為false，則取第一個false值。如果|| 返回true,則取第一個為true的值，如果為false，則取最後一個為false的值。
邏輯AND（&&） 例：
var a=4&&3&&null&&0;
var b=4&&3&&0&&null;
var c=4&&3&&"a";
alert(a);//null
alert(typeof(a));//object
alert(b);//0
alert(typeof(b));//number
alert(c);//a
alert(typeof(c));//string
邏輯OR（||） 例：
var a=""||null||3||4;
var b=""||0||null;
var c=""||null||0;
alert(a);//3
alert(typeof(a));//number
alert(b);//null
alert(typeof(b));//object
alert(c);//0
alert(typeof(c));//number
注：邏輯與優先順序高於邏輯或。 例：
var a=3||2&&5||0;
alert(a);//3 先算2&&5的值為5，然後再3||5為3，最後再3||0為3
⑤關係運算符
字串間比較時，比較的是其ASCII碼。當字串與數字型比較時，會將字串自動轉換為數字型再比較（注：只是比較時臨時轉換，其型別還是原型別）。 例：
var bResult="Blue"<"alpha";
alert(bResult);//true
var bNumber="25"<"3";
alert(bNumber);//true
var bNumber1="25"<3;
alert(bNumber1);//false
當數字型與布林值判斷相等性時，布林值將被轉換成數字值。其中false 轉換成 0，true 為 1。 例：
alert(1==true);//true
alert(0==false);//true
alert(2==true);//false
如果一個運算數是物件，另一個是字串，在檢查相等性之前，物件轉換成字串。 如果一個運算數是物件，另一個是數字，在檢查相等性之前，物件轉換成數字。如果兩個運算數都是物件，比較的是它們的引用值。如果兩個運算數指向同一物件，等號返回 true。
凡是NaN參與的關係運算，除了 ! 和 != ，其餘全是false。
全等號（===）參與比較時，包括自身的資料型別。 例：
alert(1===true);//false
alert("1"===true);//false
⑥三元運算子、賦值運算子同java
1.3 ECMA物件
java中八大基本資料型別都有其包裝類，同樣的，js中5個原始型別，其中三個有其包裝類，分別為：Number、String、Boolean。
Java中有自動拆箱裝箱機制實現兩者的轉換，js中也有偽物件的概念，原始型別可以直接呼叫對應包裝型別的屬性或函式。
1.3.1 Function物件
例1：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>function物件例1</title>
<script type="text/javascript">
//建立方式一（推薦）
function fun(a,b){
alert(a+b);
}
fun();//NaN
fun(1,2);//3
fun(1,2,3);//3,只取前兩個
alert(fun.toString());//返回物件的原始字串表示
alert(fun);//返回物件的原始字串表示
alert(fun.length);//2 代表函式的引數個數
//方式二（瞭解）
var fun2=function(){
alert("hello");
}
//方式三（瞭解）
var fun3=new Function("alert('hello');");
fun2();
fun3();
</script>
</head>
<body>
</body>
</html>例2：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- xiao hua 2018-10-29 -->
<title>function物件例2</title>
<script type="text/javascript">
function fun(){
var count=0;
for(var i=0;i<arguments.length;i++){
count+=arguments[i];
}
alert(count);
alert(arguments.length);//列印實際傳遞的引數個數
}
fun(1,3);//4 2
fun(1,3,5);//9 3
fun();//0 0
</script>
</head>
<body>
</body>
</html>函式的返回值用return（同java），同樣也可結束一個方法。void 運算子對任何值返回 undefined。可用於攔截方法的返回值。該運算子通常用於避免輸出不應該輸出的值，例如，從 HTML 的 <a> 元素呼叫 JavaScript 函式時。要正確做到這一點，函式不能返回有效值，否則瀏覽器將清空頁面，只顯示函式的結果。
例3：
<head>
<title>我的js</title>
<script type="text/javascript" >
function fun(a,b){
return a+b;
}
</script>
</head>
<body>
<!-- 會覆蓋瀏覽器原有內容 -->
<a href="javaScript:fun(1,2);">點我</a><br/>
<!-- 不影響原有內容 -->
<a href="javaScript:void(fun(1,2));">點我</a><br/>
</body>1.3.2Number物件
toFixed()、toExponential() 和 toPrecision() 方法都會進行舍入操作，以便用正確的小數位數正確地表示一個數。 例：
var oNum=new Number(68);
var iNum=oNum.valueOf();
alert(iNum);//68 為原始值 number型別
alert(Number.MAX_VALUE);
alert(oNum.toString());//68
alert(oNum.toFixed(2));//68.00
alert(oNum.toExponential(2));//6.80e+1
alert(oNum.toPrecision(1));//7e+1
alert(oNum.toPrecision(3));//68.0
1.3.3 String物件
屬性：length 返回字串中字元個數。 例：
var oStringObject=new String("hello");
alert(oStringObject.length);//5
alert("word".length);//4 偽物件機制
方法：①支援正則的四個方法（見1.3.10 RegExp物件）：
search（）、match（）、replace（）、split（）
②charAt() 和 charCodeAt()
這兩個方法都有一個引數，即要操作的字元的位置。前者返回指定字元，後者返回指定字元的字元程式碼。
③indexOf() 和 lastIndexOf()
返回的都是指定的子串在另一個字串中的位置，如果沒有找不到子串，則返回 -1。
④slice()和 substring()
返回的都是要處理的字串的子串，都接受一個或兩個引數。第一個引數是要獲取的子串的起始位置，第二個引數（如果使用的話）是要獲取子串終止前的位置（包頭不包尾）。如果省略第二個引數，終止位就預設為字串的長度。
注：1.兩個方法都不改變 String 物件自身的值。它們只返回原始的 String 值，保持 String 物件不變。
2.只在引數為負數時，它們處理引數的方式才稍有不同。對於負數引數，slice() 方法會用字串的長度加上引數，substring() 方法則將其作為 0 處理（也就是說將忽略它）
⑤toLowerCase()和toUpperCase() 分別返回小寫和大寫。 例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- xiao hua 2018-10-29-->
<title>function物件例2</title>
<script type="text/javascript">
var oStr=new String("hello world");
alert(oStr.charAt(1));//e
alert(oStr.charCodeAt(1));//101 返回ASCII碼
alert(oStr.indexOf("l"));//2
alert(oStr.lastIndexOf("l"));//9
alert(oStr.substring(0,5));//hello
alert(oStr.slice(0,5));//hello
alert(oStr.substring(-3));//hello world -3被轉成0
alert(oStr.slice(-3));//rld -3被轉成8
alert(oStr.substring(3,-4));//hel 被轉成（0,3），自動將最小的數字//作為起始位
alert(oStr.slice(3,-4));//lo w 被轉出（3，7）
alert(oStr.toLowerCase());//hello world
alert(oStr.toUpperCase());//HELLO WORLD
</script>
</head>
<body>
</body>
</html>1.3.4型別轉換
（1）轉換成字串
ECMAScript 的 Boolean 值、數字和字串的原始值都是偽物件，這意味著它們實際上具有屬性和方法。如:
nString的length屬性
nBoolean 值、數字和字串都有 toString() 方法
（2）轉換成數字
nparseInt() 和 parseFloat()都可以把非數字的原始值轉換成數字。parseInt()方法首先檢視位置 0 處的字元，判斷它是否是個有效數字；如果不是，該方法將返回 NaN，不再繼續執行其他操作。 例：
var iNum1=parseInt("123red");//123
var iNum2=parseInt("0xA");//10
var iNum3=parseInt("56.9.1");//56
var iNum4=parseInt("red");//NaN
var fNum1=parseFloat("123red");//123
var fNum2=parseFloat("0xA");//0
var fNum3=parseFloat("56.9.1");//56.9
var fNum4=parseFloat("red");//NaN
（3）強制型別轉換
①Boolean(value) - 把給定的值轉換成 Boolean 型；
②Number(value) - 把給定的值轉換成數字（可以是整數或浮點數）；
注：Number() 函式的強制型別轉換與 parseInt() 和 parseFloat() 方法的處理方式相似，只是它轉換的是整個值，而不是部分值。
③String(value) - 把給定的值轉換成字串
注：lString() 是最簡單的強制轉換成字串，和呼叫 toString() 方法的唯一不同之處在於，對 null 和 undefined 值強制型別轉換可以生成字串而不引發錯誤
var b1=Boolean("");//false
var b2=Boolean(4);//true
var b3=Boolean(new Object());//true
var n1=Number(null);//0
var n2=Number(undefined);//NaN
var n3=Number(true);//1
var n4=Number("1.2.3");//NaN
var s1=String(null);//null
var o1=null;
var s2=o1.toString();//會引發錯誤
1.3.5 typeof()、instanceof()運算子
在使用 typeof()時，會返回： l
undefined - 如果變數是 Undefined 型別的
lboolean - 如果變數是 Boolean 型別的
lnumber - 如果變數是 Number 型別的
lstring - 如果變數是 String 型別的
lobject - 如果變數是一種引用型別或 Null 型別的
instanceof（） 運算子與 typeof 運算子相似，用於識別正在處理的物件的型別。與 typeof 方法不同的是，instanceof 方法能夠明確地確認物件為某特定型別。 例：
var str=new String("abc");
alert(str instanceof String);//true
alert("abc" instanceof String);//false 原始值不是物件
1.3.6 Global物件
全域性物件是預定義的物件，作為 JavaScript 的全域性函式和全域性屬性的佔位符。通過使用全域性物件，可以訪問所有其他所有預定義的物件、函式和屬性。全域性物件不是任何物件的屬性，所以它沒有名稱。
不需要建立物件，其函式可以直接使用。
var name="http:www.baidu.com哈嘍";
var sStr1=encodeURI(name);//http:www.baidu.com%E5%93%88%E5%96%BD
var sStr2=decodeURI(sStr1);//http:www.baidu.com哈嘍
var sStr3=encodeURIComponent(name);
//http%3Awww.baidu.com%E5%93%88%E5%96%BD
var sStr4=decodeURIComponent(sStr3);//http:www.baidu.com哈嘍
alert(eval("1+1"));//2
alert(eval("new String('abc')"));//abc
1.3.7Math物件
var num=Math.PI;//3.141592653589793
var num1=Math.random();//0-1之間的隨機數
var num2=Math.round(3.4);//3 四捨五入
var num3=Math.pow(2,4);//16 計算冪
var num4=Math.min(2,3,5);//2
var num5=Math.max(2,3,5);//5
1.3.8 Array物件
語法:
new Array();
new Array(size);
new Array(element0, element1, ..., elementn)
屬性:
方法：
注：①陣列中的元素可以是任意型別。②陣列的長度可以隨時變化。③sort（）方法預設會按照字串的比較方式排序，也可以傳入比較器，自定義排序規則。 例：
var arr1=[1,2,3,4,5];
var arr2=new Array();
var arr3=new Array(5);//初始化長度
var arr4=new Array(1,2,3,4,5);
alert(arr1.pop());//5 刪除並返回陣列的最後一個元素
alert(arr1.push(6,7));//6 返回新的長度
alert(arr1.reverse());//7,6,4,3,2,1
var arr5=["ha",3.1,true,undefined,null,new Object()];
arr5[15]="world";
alert(arr5.length);//16
alert(arr5[15]);//world
alert(arr5[11]);//undefined
var arr6=new Array(14,1,100,8,5);
alert(arr6.sort());//1,100,14,5,8 按字串比較規則排序。
//自定義比較器
function compare(a,b){
return a-b;
}
alert(arr6.sort(compare));//1,5,8,14,100
1.3.9 Date物件
語法:
var myDate=new Date()
var myDate=new Date(毫秒數);//自1970年1月一日零時算起。
方法:
1.getFullYear() 獲取年份
2.getMonth() 獲取月份（0~11）
3.getDate() 獲取一個月中的某一天（0~31）
4.getHours() 獲取小時（0~23）
5.getMinutes() 獲取分鐘（0~59）
7.getSeconds() 獲取秒（0~59）
8.getMilliseconds()獲取毫秒（0~999）
9.getTime() 獲取從1970年1月1日至今的毫秒數
9.toLocaleString()根據本地時間格式，把Date物件轉換為字串。
10.toLocaleTimeString()根據本地時間格式，把Date物件的時間部分轉換為字串。
11.toLocaleDateString()根據本地時間格式，把Date物件的日期部分轉換為字串。
var data1=new Date();
var data2=new Date(125554666657);
//方法
alert(data2.getFullYear());//1973
alert(data2.getMonth());//11
alert(data2.getDate());//24
alert(data2.getHours());//12
alert(data2.getMinutes());//17
alert(data2.getSeconds());46
alert(data2.getMilliseconds());//657
alert(data2.getTime());//125554666657
alert(data2.toLocaleString());// 1973/12/24 下午12:17:46
alert(data2.toLocaleTimeString());// 下午12:17:46
alert(data2.toLocaleDateString());// 1973/12/24
1.3.10 RegExp物件
語法:
/pattern/attributes
new RegExp(pattern, attributes);
引數 pattern 是一個字串，指定了正則表示式的模式或其他正則表示式。
引數 attributes 是一個可選的字串，包含屬性 "g"、"i" 和 "m"，分別用於指定全域性匹配、區分大小寫的匹配和多行匹配。ECMAScript 標準化之前，不支援 m 屬性。如果 pattern 是正則表示式，而不是字串，則必須省略該引數。
方法：
支援正則表示式的String物件的方法：
例：//建立
var reg1=new RegExp("e","gi");
var reg2=/e/g;
//方法
alert(reg2.test("hello"));//true
//String物件與正則結合的方法
var str="hello world";
alert(str.split(/o/g));// hell, w,rld
alert(str.replace(/l/g,"a"));//heaao warld
alert(str.match(/or/g));//or
alert(str.search(/o/g));//4