Javascripts簡介及應用（一）

一、javascripts歷史

1）1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).后將其改名ScriptEase.(客戶端執行的語言)

2）Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.后改名叫Javascript

3）微軟隨后模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.

4）為了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規范.國際標准化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標准（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有着不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規范

二、ECMAScript

盡管 ECMAScript 是一個重要的標准，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標准化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：

1. 核心（ECMAScript）
2. 文檔對象模型（DOM） Document object model (整合js，css，html)
3. 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

Javascript 在開發中絕大多數情況是基於對象的.也是面向對象的.

ECMAScript 描述了以下內容：語法，類型，語句，關鍵字，保留字，運算符，對象（封裝，繼承，多態）基於對象的語言，使用對象

三、js引入方式

3.1、直接編寫

<script>
    alert('hello')
</script>

3.2、導入文件

<script src="hello.js"></script>

四、js基礎-變量

1）變量是弱類型的

2）聲明變量時不用聲明變量類型. 全都使用var關鍵字，如var a;

3）一行可以聲明多個變量.並且可以是不同類型

var name="aa", age=20, job="lecturer";

4）聲明變量時 可以不用var. 如果不用var 那么它是全局變量

5）變量命名,首字符只能是字母,下划線,$美元符 三選一，且區分大小寫，x與X是兩個變量

6）變量還應遵守以下命名規則

#Camel 標記法
首字母是小寫的，接下來的字母都以大寫字符開頭。例如：
var myTestValue = 0, mySecondValue = "hi";

#Pascal 標記法
首字母是大寫的，接下來的字母都以大寫字符開頭。例如：
Var MyTestValue = 0, MySecondValue = "hi";

#匈牙利類型標記法
在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串
Var iMyTestValue = 0, sMySecondValue = "hi";

五、js基礎-基礎規范

1）每行結束可以不加分號. 沒有分號會以換行符作為每行的結束

2）注釋 支持多行注釋和單行注釋. /* */  //

3）使用{}來封裝代碼塊

六、js基礎-常量與標識符

常量：直接在程序中出現的數據值

標識符：

1）由不以數字開頭的字母、數字、下划線(_)、美元符號($)組成

2）常用於表示函數、變量等的名稱

3）例如：_abc,$abc,abc,abc123是標識符，而1abc不是

4）JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符

七、js基礎-數據類型

7.1、數字類型（number）

1）最基本的數據類型

2）不區分整型數值和浮點型數值

3）所有數字都采用64位浮點格式存儲，相當於Java和C語言中的double格式

4）能表示的最大值是±1.7976931348623157 x 10308

5）能表示的最小值是±5 x 10 -324

整數：

• 在JavaScript中10進制的整數由數字的序列組成
• 精確表達的范圍是
-9007199254740992 (-253) 到 9007199254740992 (253)
• 超出范圍的整數，精確度將受影響

浮點數：

• 使用小數點記錄數據，如3.4，5.6
• 使用指數記錄數據，如4.3e23 = 4.3 x 1023

16進制和8 進制表達：

• 16進制數據前面加上0x，八進制前面加0
• 16進制數是由0-9,A-F等16個字符組成
• 8進制數由0-7等8個數字組成
• 16進制和8進制與2進制的換算

# 2進制: 1111 0011 1101 0100   <-----> 16進制:0xF3D4 <-----> 10進制:62420
# 2進制: 1 111 001 111 010 100 <-----> 8進制:0171724

7.2、字符串(string)

1）是由Unicode字符、數字、標點符號組成的序列

2）字符串常量首尾由單引號或雙引號括起，JavaScript中沒有字符類型

3）字符串中部分特殊字符必須加上右划線\ ；常用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右划線

字符串使用：

• 特殊字符的使用方法和效果
• Unicode的插入方法

<script>
        var str="\u4f60\u597d\n歡迎來到\"JavaScript世界\"";
        alert(str);
</script>

7.3、布爾型(Boolean)

1）Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0

2）布爾值也可以看作on/off、yes/no、1/0對應true/false

3）Boolean值主要用於JavaScript的控制語句

7.4、undefined類型

1）Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined

2）當函數無明確返回值時，返回的也是值 "undefined"

var x;
console.log(x);  //undefined
function f() {
    document.write("<h1>hello!</h1>")
}
console.log(f())   //打印值，undefined
console.log(typeof f()) //打印類型undefined

7.5、Null類型

1）null 則用於表示尚未存在的對象

2）如果函數或方法要返回的是對象，那么找不到該對象時，返回的通常是 null。

7.6、數據類型轉換

1）JavaScript屬於松散類型的程序語言

2）變量在聲明的時候並不需要指定數據類型

3）變量只有在賦值的時候才會確定數據類型

4）表達式中包含不同類型數據則在計算過程中會強制進行類別轉換

• 數字 + 字符串：數字轉換為字符串
• 數字 + 布爾值：true轉換為1，false轉換為0
• 字符串 + 布爾值：布爾值轉換為字符串true或false

console.log("hello"+2); //hello2
console.log("hello"+true);  //hellotrue
console.log(2+true);  //3

7.7、強制類型轉換函數

1）函數parseInt： 強制轉換成整數 例如parseInt("6.12")=6 ; parseInt(“12a")=12 ; parseInt(“a12")=NaN ;parseInt(“1a2")=1

console.log(parseInt(6.9234454)); //6
console.log(parseInt("hello")); //NAN  ==>not a number,屬於Number的一種
console.log(parseInt("123"));   //123
console.log(parseInt("123abc"));//123
console.log(parseInt("abc1234"));//NAN

2）函數parseFloat： 強制轉換成浮點數 parseFloat("6.12")=6.12

3）函數eval： 將字符串強制轉換為表達式並返回結果 eval("1+1")=2 ; eval("1<2")=true

7.8、類型查詢函數(typeof)

函數typeof ：查詢數值當前類型
 (string / number / boolean / object )

console.log(typeof 123); //number
console.log(typeof "hello"); //string
console.log(typeof true); //boolean
console.log(typeof null);  //object
console.log(typeof undefined); //undefined
console.log(typeof [12,3,4]);  //object
console.log(typeof {"name":"123"}); //object

八、ECMAScript 運算符

8.1、算數運算符

1）加(＋)、 減(－)、 乘(*) 、除(/) 、余數(% ) 加、減、乘、除、余數和數學中的運算方法一樣 例如：9/2=4.5，4*5=20，9%2=1

2）-除了可以表示減號還可以表示負號 例如：x=-y

3）+除了可以表示加法運算還可以用於字符串的連接 例如："abc"+"def"="abcdef"

遞增(＋＋) 、遞減(－－)：

//假如x=2，那么x++表達式執行后的值為3，x--表達式執行后的值為1
//i++相當於i=i+1，i--相當於i=i-1
//遞增和遞減運算符可以放在變量前也可以放在變量后：--i
    
var i=1;
console.log(i++); //1   先顯示后加減
console.log(++i); //3   先加減后顯示
console.log(i--); //3
console.log(--i); //1

NaN特點:

var n=NaN;
console.log(n>5) ; //false
console.log(n<5) ;  //false
console.log(n==5) ; //false
console.log(n==NaN) ;//false  ==>NAN只要參與比較，布爾值一定是false,除非！=
console.log(n!=NaN) ; //true

8.2、邏輯運算符

等於 ( == )  、不等於( != ) 、 大於( > ) 、 小於( < ) 
大於等於(>=) 、小於等於(<=)
與 (&&) 、或(||) 、非(!)
&& 1 = 1  1 || 1 = 1
&& 0 = 0  1 || 0 = 1
&& 0 = 0  0 || 0 = 0

!0=1
!1=0

邏輯 AND 運算符(&&)：

邏輯 AND 運算的運算數可以是任何類型的，不止是 Boolean 值。

如果某個運算數不是原始的 Boolean 型值，邏輯 AND 運算並不一定返回 Boolean 值：

• 如果某個運算數是 null，返回 null。
• 如果某個運算數是 NaN，返回 NaN。
• 如果某個運算數是 undefined，返回undefined。

邏輯 OR 運算符(||)：

與邏輯 AND 運算符相似，如果某個運算數不是 Boolean 值，邏輯 OR 運算並不一定返回 Boolean 值

8.3、賦值運算符

JavaScript中=代表賦值，兩個等號==表示判斷是否相等

console.log(2==2);  //true
console.log("2"==2); //true
console.log(2==="2") //false

console.log(3>20); //false
console.log(3>"20"); //false
console.log("3">"28") //true

8.4、等性運算符

執行類型轉換的規則如下：

• 如果一個運算數是 Boolean 值，在檢查相等性之前，把它轉換成數字值。false 轉換成 0，true 為 1。
• 如果一個運算數是字符串，另一個是數字，在檢查相等性之前，要嘗試把字符串轉換成數字。
• 如果一個運算數是對象，另一個是字符串，在檢查相等性之前，要嘗試把對象轉換成字符串。
• 如果一個運算數是對象，另一個是數字，在檢查相等性之前，要嘗試把對象轉換成數字。

在比較時，該運算符還遵守下列規則：

• 值 null 和 undefined 相等。
• 在檢查相等性時，不能把 null 和 undefined 轉換成其他值。
• 如果某個運算數是 NaN，等號將返回 false，非等號將返回 true。
• 如果兩個運算數都是對象，那么比較的是它們的引用值。如果兩個運算數指向同一對象，那么等號返回 true，否則兩個運算數不等。

8.5、關系運算符

var bResult = "Blue" < "alpha";
alert(bResult); //輸出 true　　

//字符串 "Blue" 小於 "alpha"，因為字母 B 的字符代碼是 66，字母 a 的字符代碼是 97

比較數字和字符串:

var bResult = "25" < "3";
alert(bResult); //輸出 "true"
//比較的是字符串 "25" 和 "3"。兩個運算數都是字符串，所以比較的是它們的字符代碼（"2" 的字符代碼是 50，"3" 的字符代碼是 51）

var bResult = "25" < 3;
alert(bResult); //輸出 "false"
//字符串 "25" 將被轉換成數字 25，然后與數字 3 進行比較

總結：

1）比較運算符兩側如果一個是數字類型,一個是其他類型,會將其類型轉換成數字類型.

2）比較運算符兩側如果都是字符串類型,比較的是最高位的asc碼,如果最高位相等,繼續取第二位比較.

8.6、Boolean運算符

var temp=new Object();// false;[];0; null; undefined;object(new Object();)

    if(temp){
        console.log("AA")
    }else {
        console.log("BB")
    }

九、控制語句

9.1、if控制語句

if-else基本格式

if (表達式){
語句１;
......
}else{
語句２;
.....
}

if語句嵌套格式
if (表達式1) {
    語句1;
}else if (表達式2){
    語句2;
}else if (表達式3){
    語句3;
} else{
    語句4;
}

9.2、switch語句

switch基本格式
switch (表達式) {
    case 值1:語句1;break;
    case 值2:語句2;break;
    case 值3:語句3;break;
    default:語句4;
}

實例：

switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定義";
}

if與switch區別：

1）switch用來根據一個整型值進行多路分支，並且編譯器可以對多路分支進行優化 
2）switch-case只將表達式計算一次,然后將表達式的值與每個case的值比較,進而選擇執行哪一個case的語句塊 
3）if..else 的判斷條件范圍較廣，每條語句基本上獨立的，每次判斷時都要條件加載 一次。 
所以在多路分支時用switch比if..else if .. else結構要效率高。

9.3、for循環

//for循環基本格式
for (初始化;條件;增量){
    語句1;
    ...
}

示例：

for (var i=1;i<=7;i++){
    document.write("<H"+i+">hello</H "+i+"> ");
    document.write("<br>");
}
//----------------------------------------------

var arr=[1,"hello",true]//var dic={"1":"111"}
for (var i in arr){
    console.log(i)
    console.log(arr[i])
}

示例2：

   var eles_P=document.getElementsByTagName("p");
   console.log(eles_P);

//    for (var i in eles_P){  //不推薦使用
//        console.log(i)
//    }

   for (var i=0;i<eles_P.length;i++){
       console.log(i);
       console.log(eles_P[i]);
   }

9.4、while循環

//while循環基本格式
while (條件){
語句1；
...
}

//循環輸出H1到H7的字體大小
var i=1;
while (i<=7) {
    document.write("<H"+i+">hello</H "+i+"> ");
    document.write("<br>");
    i++;
}

// while 循環
   var x=0;
   var i=1;
   while (i<=100){
       x+=i;
       i++;
   }
   console.log(x)

// for 循環實現
   var sum=0;
   for (var i=0;i<101;i++){
       sum+=i;
   }
   console.log(sum)

十、異常處理

try {
    //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
    // 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
    //e是一個局部變量，用來指向Error對象或者其他拋出的對象
}
finally {
     //無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}

//主動拋出異常 throw Error('xxxx')

十一、ECMA對象

object對象：ECMAScript 中的所有對象都由這個對象繼承而來；Object 對象中的所有屬性和方法都會出現在其他對象中

ToString() :  返回對象的原始字符串表示。
ValueOf()  : 返回最適合該對象的原始值。對於許多對象，該方法返回的值都與 ToString() 的返回值相同。

11種內置對象：Array ,String , Date, Math, Boolean, Number  Function, Global, Error, RegExp , Object

<script language="javascript">

var aa=Number.MAX_VALUE; 
//利用數字對象獲取可表示最大數

var bb=new String("hello JavaScript"); 
//創建字符串對象

var cc=new Date();
//創建日期對象

var dd=new Array("星期一","星期二","星期三","星期四"); 
//數組對象

</script>

十二、String對象

12.1、創建string對象

 //創建字符串對象兩種方式
var str1="hello";
var str2=new String("hello2");
console.log(typeof str1);  //string
console.log(typeof str2);  //object

12.2、string對象屬性

//字符串的屬性length
var str1="hello";
console.log(str1.length);  //5

12.3、string對象方法

12.3.1、格式編排方法

//編排方法
var str1="hello";
console.log(str1.italics());  //<i>hello</i>
console.log(str1.bold());    //<b>hello</b>
console.log(str1.anchor());  //<a name="undefined">hello</a>

12.3.2、大小寫轉換

var str1="AbcdEfgh"; 

var str2=str1.toLowerCase();
var str3=str1.toUpperCase();
alert(str2);
//結果為"abcdefgh"
alert(str3);
//結果為"ABCDEFGH"

12.3.3、獲取指定字符

x.charAt(index)
x.charCodeAt(index)

//x代表字符串對象
//index代表字符位置
//index從0開始編號
//charAt返回index位置的字符
//charCodeAt返回index位置的Unicode編碼
//----------------------

var str1="welcome to the world of JS!";

var str2=str1.charAt(24);
var str3=str1.charCodeAt(2);
alert(str2); //J
alert(str3); //108

12.3.4、查詢字符串

//x.indexOf(findstr,index)
//x.lastIndexOf(findstr)

var str1="welcome to the world of JS!";

var str2=str1.indexOf("l");
var str3=str1.lastIndexOf("l");
alert(str2);  //結果為2
alert(str3);  //結果為18

//--------------------------------------

//x.match(regexp)
//x.search(regexp)

//x代表字符串對象
//regexp代表正則表達式或字符串
//match返回匹配字符串的數組，如果沒有匹配則返回null
//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

12.3.5、子字符串處理

1）截取子字符串

//x.substr(start, length)  
//x.substring(start, end) 顧頭不顧尾

var str1="abcdefgh";
var str2=str1.substr(2,4);
var str3=str1.substring(2,4);
alert(str2);  //結果為"cdef"
alert(str3);  //結果為"cd"

//--------------------------------

//x.slice(start, end)  切片

var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);  //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"

2）分割字符串

var str1="一,二,三,四,五,六,日"; 
var strArray=str1.split(",");
alert(strArray[1]);   //結果為"二"

3）替換子字符串

//x.replace(findstr,tostr)

var str1="abcdefgh";
var str2=str1.replace("cd","aaa");
alert(str2);  //結果為"abaaaefgh"

4）連接字符串

//y=x.concat(addstr)

var str1="abcd"; 
var str2=str1.concat("efgh");
alert(str2);  //結果為"abcdefgh" 

十三、 Array對象

13.1、數組創建

//創建方式1:
var a=[1,2,3];

//創建方式2:
new Array();     //  創建數組時允許指定元素個數也可以不指定元素個數。
new Array(size); //如果1個參數且為數字,即代表size,not content
    
//初始化數組對象:
var cnweek=new Array(7);
     cnweek[0]="星期日";
     cnweek[1]="星期一";
     ...
     cnweek[6]="星期六";

new Array(element0, element1, ..., elementn)//也可以直接在建立對象時初始化數組元素，元素類型允許不同
var test=new Array(100,"a",true);

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//創建二維數組
var cnweek=new Array(7);
for (var i=0;i<=6;i++){
    cnweek[i]=new Array(2);
}
cnweek[0][0]="星期日";
cnweek[0][1]="Sunday";
cnweek[1][0]="星期一";
cnweek[1][1]="Monday";
...
cnweek[6][0]="星期六";
cnweek[6][1]="Saturday";

13.2、數組屬性

獲取數組元素的個數：length

var cnweek=new Array(7);
cnweek[0]="星期日";
cnweek[1]="星期一";
cnweek[2]="星期二";
cnweek[3]="星期三";
cnweek[4]="星期四";
cnweek[5]="星期五";
cnweek[6]="星期六";
for (var i=0;i<cnweek.length;i++){
  document.write(cnweek[i]+" | ");
}

13.3、數組方法

13.3.1、連接數組-join方法

//x.join(bystr)

var arr1=[1, 2, 3, 4, 5, 6, 7];
var str1=arr1.join("-");
alert(str1);  //結果為"1-2-3-4-5-6-7" 

13.3.2、連接數組-concat方法

//x.concat(value,...)

var a = [1,2,3];
var a = new Array(1,2,3);
var b=a.concat(4,5) ;

alert(a.toString());
//返回結果為1,2,3
alert(b.toString());
//返回結果為1,2,3,4,5

13.3.3、數組排序-reverse sort

//x.reverse()
//x.sort()

var arr1=[32, 12, 111, 444];
//var arr1=["a","d","f","c"];

arr1.reverse(); //顛倒數組元素
alert(arr1.toString());
//結果為444,111,12,32

arr1.sort();    //排序數組元素，但按照高位排序
alert(arr1.toString());
//結果為111,12,32,444

//-------------------------------------------
//若按照數字大小排序
function intSort(a,b){
    if (a>b){
        return 1;
    }
    else if(a<b){
        return -1;
    }
    else {
        return 0
    }
}

//或者
function IntSort(a,b){
    return a-b;
}

arr.sort(intSort);

13.3.4、數組切片-slice

//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"

13.3.5、刪除子數組

//x. splice(start, deleteCount, value, ...)

//x代表數組對象
//splice的主要用途是對數組指定位置進行刪除和插入
//start表示開始位置索引
//deleteCount刪除數組元素的個數
//value表示在刪除位置插入的數組元素
//value參數可以省略


var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
//a變為 [1,4,5,6,7,8]
alert(a.toString());
a.splice(1,1);
//a變為[1,5,6,7,8]
alert(a.toString());
a.splice(1,0,2,3);
//a變為[1,2,3,5,6,7,8]
alert(a.toString());

13.3.6、數組的進出棧操作(1)

//push pop這兩個方法模擬的是一個棧操作

//x.push(value, ...)  壓棧
//x.pop()             彈棧      

//x代表數組對象
//value可以為字符串、數字、數組等任何值
//push是將value值添加到數組x的結尾
//pop是將數組x的最后一個元素刪除


var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//結果為"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//結果為"1,2,3,4,5,6,7"
arr1.pop();  //將[6,7]作為整體刪除
alert(arr1);
//結果為"1,2,3,4,5"

13.3.7、數組的進出棧操作(2)

// unshift shift 
//x.unshift(value,...)
//x.shift()

//x代表數組對象
//value可以為字符串、數字、數組等任何值
//unshift是將value值插入到數組x的開始
//shift是將數組x的第一個元素刪除

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);
//結果為"4,5,1,2,3"
arr1. unshift([6,7]);
alert(arr1);
//結果為"6,7,4,5,1,2,3"
arr1.shift();  //將[6,7]作為整體刪除
alert(arr1);
//結果為"4,5,1,2,3"

13.4、總結js的數組特性

1）js中的數組可以裝任意類型,沒有任何限制.

2）js中的數組,長度是隨着下標變化的.用到多長就有多長

var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')];
alert(arr5.length);//8
arr5[10] = "hahaha"; //直接跳過下標9，定義下標10的值
alert(arr5.length); //11
alert(arr5[9]);// undefined

十四、Function 對象

14.1、函數定義

function 函數名 (參數){
    函數體;
    return 返回值;
}

功能說明：

• 可以使用變量、常量或表達式作為函數調用的參數
• 函數由關鍵字function定義
• 函數名的定義規則與標識符一致，大小寫是敏感的
• 返回值必須使用return

用 Function 類直接創建函數的語法如下：

function 函數名 (參數){
    
函數體;
   return 返回值;
}

//another way:
var 函數名 = new Function("參數1","參數n","function_body");

示例：

alert(1);
function func1(){
    alert('hello AA!');
    return 8
}
 
    ret=func1();
    alert(ret)
//－－－－－－－－－－－－－－－－
 
var func1=new Function("name","alert(\"hello\"+name);")
func1("yuan")

注意：js的函數加載執行與python不同，它是整體加載完才會執行，所以執行函數放在函數聲明上面或下面都可以：

<script>
    //f(); --->OK

    function f(){
        console.log("hello")

    }

    f() //----->OK
</script>

14.2、函數屬性

ECMAScript 定義的屬性 length 聲明了函數期望的參數個數

alert(func1.length) //返回參數個數

14.3、函數調用

function func1(a,b){
    alert(a+b);
}

    func1(1,2);  //3
    func1(1,2,3);//3
    func1(1);    //NaN
    func1();     //NaN

//只要函數名寫對即可,參數怎么填都不報錯.

//------------------------------
 function a(a,b){
    alert(a+b);
}

   var a=1;
   var b=2;
   a(a,b)   //報錯a is not a function

14.4、函數內置對象arguments

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 ADD() {
      var sum=0;
    for (var i=0;i<arguments.length;i++){
        sum+=arguments[i]
    }
    return sum
}
console.log(ADD(1,2,89))  //不需要關心參數個數

//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!")
    }

14.5、匿名函數

// 匿名函數
    var func = function(arg){
        return "tony";
    }

// 匿名函數的應用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
    })('123')

14.6、函數的作用域

js的作用域和py相似，if while等控制語句並沒有自己作用域；而函數是有自己的作用域的

if(1==1){

     var s=12;
}
console.log(s);//12

// ----------------------
function f(){
    var temp=666;
}
f();
console.log(temp);  //Uncaught ReferenceError: temp is not defined

嵌套函數的作用域:

var city = 'beijing';
function func(){
    var city = 'shanghai';
    function inner(){
        var city = 'shenzhen';
        console.log(city);
    }
    inner();  
}
func();  //shenzhen

//----------------------------------

var city = 'beijing';
function Bar(){
    console.log(city);
}
function func(){

    var city = 'shanghai';
    return Bar;
}
var ret = func();  #ret = Bar
ret();    //beijing

閉包：

var city = 'beijing';

function func(){
    var city = "shanghai";
    function inner(){
        // var city = "langfang";
        console.log(city);
    }
    return inner;
}
var ret = func(); //ret = inner
ret();  //相當於執行inner()  ==>shanghai

示例：

var city = 'beijing';
function func(){
    var city = "shanghai";
    function inner(){
        // var city = "langfang";
        console.log(city);
    }
    return inner;  //閉包
}

var ret = func(); //ret=inner
ret(); //ret() ==>inner() //shanghai

//------------------------------------

var city = 'beijing';
function Bar(){
    console.log(city);
}

function func(){

    var city = 'shanghai';
    return Bar;
}

var ret = func(); //ret=Bar
ret();    //ret() ==>Bar() //beijing

十五、Date對象

15.1、創建date對象

//方法1：不指定參數
var nowd1=new Date();
alert(nowd1.toLocaleString( )); //2019/9/20 上午9:23:35

//方法2：參數為日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));  //2004/3/20 上午11:12:00

var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));  //2020/4/3 上午11:12:00

//方法3：參數為毫秒數
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));  //1970/1/1 上午8:00:05
alert(nowd3.toUTCString());     //Thu, 01 Jan 1970 00:00:05 GMT

//方法4：參數為年月日小時分鍾秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));  //2004/3/20 上午11:12:00
//毫秒並不直接顯示

15.2、Date對象方法—獲取日期和時間

//獲取日期和時間
getDate()                 //獲取日
getDay ()                 //獲取星期
getMonth ()               //獲取月（0-11）
getFullYear ()            //獲取完整年份
getYear ()                //獲取年
getHours ()               //獲取小時
getMinutes ()             //獲取分鍾
getSeconds ()             //獲取秒
getMilliseconds ()        //獲取毫秒
getTime ()                //返回累計毫秒數(從1970/1/1午夜)

//==============================================================

function getCurrentDate(){
        //1. 創建Date對象
        var date = new Date(); //沒有填入任何參數那么就是當前時間
        //2. 獲得當前年份
        var year = date.getFullYear();
        //3. 獲得當前月份 js中月份是從0到11.
        var month = date.getMonth()+1;
        //4. 獲得當前日
        var day = date.getDate();
        //5. 獲得當前小時
        var hour = date.getHours();
        //6. 獲得當前分鍾
        var min = date.getMinutes();
        //7. 獲得當前秒
        var sec = date.getSeconds();
        //8. 獲得當前星期
        var week = date.getDay(); //沒有getWeek
        // 2014年06月18日 15:40:30 星期三
        return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
    }

alert(getCurrentDate());

//解決 自動補齊成兩位數字的方法
    function changeNum(num){
    if(num < 10){
        return "0"+num;
    }else{
        return num;
    }

}
//將數字 0~6 轉換成 星期日到星期六
    function parseWeek(week){
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    //             0      1      2      3 .............
    return arr[week];
}

15.3、Date對象方法—設置日期和時間

//設置日期和時間
//setDate(day_of_month)       設置日
//setMonth (month)                 設置月
//setFullYear (year)               設置年
//setHours (hour)         設置小時
//setMinutes (minute)     設置分鍾
//setSeconds (second)     設置秒
//setMillliseconds (ms)       設置毫秒(0-999)
//setTime (allms)     設置累計毫秒(從1970/1/1午夜)
    
var x=new Date();
x.setFullYear (1997);    //設置年1997
x.setMonth(7);        //設置月7
x.setDate(1);        //設置日1
x.setHours(5);        //設置小時5
x.setMinutes(12);    //設置分鍾12
x.setSeconds(54);    //設置秒54
x.setMilliseconds(230);        //設置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5點12分54秒

x.setTime(870409430000); //設置累計毫秒數
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12點23分50秒

15.4、Date對象方法—日期和時間的轉換

//日期和時間的轉換:

getTimezoneOffset():   //8個時區×15度×4分/度=480;
//返回本地時間與GMT的時間差，以分鍾為單位

toUTCString()
//返回國際標准時間字符串

toLocalString()
//返回本地格式時間字符串

Date.parse(x)
//返回累計毫秒數(從1970/1/1午夜到本地時間)

Date.UTC(x)
//返回累計毫秒數(從1970/1/1午夜到國際時間)

十六、RegExp對象

十七、Math對象

//Math對象
//Math是內置對象 , 與Global的不同之處是, 在調用時 需要打出 "Math."前綴.

//屬性學習:
alert(Math.PI);

//方法學習:
alert(Math.random()); // 獲得隨機數 0~1 不包括1.
alert(Math.round(1.5)); // 四舍五入

//練習：獲取1-100的隨機整數，包括1和100
var num=Math.random();
num=num*10;
num=Math.round(num);
alert(num)

//============max  min=========================
alert(Math.max(1,2)); // 2
alert(Math.min(1,2));// 1 */
        
//-------------pow--------------------------------
alert(Math.pow(2,4));// pow 計算參數1 的參數2 次方.
        

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)    返回角的正切。

十七、BOM對象

1）BOM（瀏覽器對象模型），可以對瀏覽器窗口進行訪問和操作。使用 BOM，開發者可以移動窗口、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。

2）使 JavaScript 有能力與瀏覽器“對話”。

十八、window對象

所有瀏覽器都支持 window 對象。

概念上講.一個html文檔對應一個window對象（窗口）.

功能上講: 控制瀏覽器窗口的.

使用上講: window對象不需要創建對象,直接使用即可.

18.1、Window 對象方法

alert()            //顯示帶有一段消息和一個確認按鈕的警告框。
confirm()          //顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           //顯示可提示用戶輸入的對話框。

open()             //打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close()            //關閉瀏覽器窗口。
setInterval()      //按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval()    //取消由 setInterval() 設置的 timeout。
setTimeout()       //在指定的毫秒數后調用函數或計算表達式。
clearTimeout()     //取消由 setTimeout() 方法設置的 timeout。
scrollTo()         //把內容滾動到指定的坐標。

18.2、方法使用

//----------alert confirm prompt----------------------------
alert('aaa');
    
var result = confirm("您確定要刪除嗎?");
alert(result);

//prompt 參數1 : 提示信息.   參數2:輸入框的默認值. 返回值是用戶輸入的內容.
var result = prompt("請輸入一個數字!","haha");
alert(result);

//open方法 打開和一個新的窗口 並 進入指定網址.參數1 : 網址.
//調用方式1
open("http://www.baidu.com");
//參數1 什么都不填 就是打開一個新窗口.  參數2.填入新窗口的名字(一般可以不填). 參數3: 新打開窗口的參數.open('','','width=200,resizable=no,height=100'); // 新打開一個寬為200 高為100的窗口

//close方法  將當前文檔窗口關閉.
close();

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

var num = Math.round(Math.random()*100);
function acceptInput(){
//2.讓用戶輸入(prompt)    並接受 用戶輸入結果
var userNum = prompt("請輸入一個0~100之間的數字!","0");
//3.將用戶輸入的值與 隨機數進行比較
        if(isNaN(+userNum)){
            //用戶輸入的無效(重復2,3步驟)
            alert("請輸入有效數字!");
            acceptInput();
        }
        else if(userNum > num){
        //大了==> 提示用戶大了,讓用戶重新輸入(重復2,3步驟)
            alert("您輸入的大了!");
            acceptInput();
        }else if(userNum < num){
        //小了==> 提示用戶小了,讓用戶重新輸入(重復2,3步驟)
            alert("您輸入的小了!");
            acceptInput();
        }else{
        //答對了==>提示用戶答對了 , 詢問用戶是否繼續游戲(confirm).
            var result = confirm("恭喜您!答對了,是否繼續游戲?");
            if(result){
                //是 ==> 重復123步驟.
                num = Math.round(Math.random()*100);
                acceptInput();
            }else{
                //否==> 關閉窗口(close方法).
                close();
            }
        }

setInterval clearInterval：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>

<input type="text" id="id1" onclick="begin()">  //綁定開始事件，點擊輸入框，打印時間
<button onclick="end()">停止</button>  //綁定停止事件
<script>

    function showTime() {
             var current_time=new Date().toLocaleString();
             var ele=document.getElementById("id1")
             ele.value=current_time
    }
    var clock1;
    function begin() {
        if(clock1==undefined){
            showTime();
           clock1=setInterval(showTime,1000)
        }

    }

    function end() {
        clearInterval(clock1);
        clock1=undefined
    }
    
</script>
</body>
</html>

十九、History 對象

19.1、History 對象屬性

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問

length  返回瀏覽器歷史列表中的 URL 數量。

19.2、History 對象方法

back()       //加載 history 列表中的前一個 URL。
forward()    //加載 history 列表中的下一個 URL。
go()         //加載 history 列表中的某個具體頁面。

<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

二十、Location 對象

Location 對象包含有關當前 URL 的信息。

Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。

20.1、Location 對象方法

location.assign(URL)
location.reload()
location.replace(newURL)//注意與assign的區別