Javascripts簡介及應用（一）
1、javascripts歷史
1）1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其更名ScriptEase.(客戶端執行的語言)javascript
2）Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.後更名叫Javascriptcss
3）微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.html
4）爲了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 做爲標準（ISO/IEC-16262）。今後，Web 瀏覽器就開始努力（雖然有着不一樣的程度的成功和失敗）將 ECMAScript 做爲 JavaScript 實現的基礎。EcmaScript是規範java
2、ECMAScript
儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：python
- 核心（ECMAScript）
- 文檔對象模型（DOM） Document object model (整合js，css，html)
- 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
Javascript 在開發中絕大多數狀況是基於對象的.也是面向對象的.正則表達式
ECMAScript 描述瞭如下內容：語法，類型，語句，關鍵字，保留字，運算符，對象（封裝，繼承，多態）基於對象的語言，使用對象數組
3、js引入方式
3.一、直接編寫
<script>
alert('hello')
</script>
3.二、導入文件
<script src="hello.js"></script>
4、js基礎-變量
1）變量是弱類型的瀏覽器
2）聲明變量時不用聲明變量類型. 全都使用var關鍵字，如var a;閉包
3）一行能夠聲明多個變量.而且能夠是不一樣類型dom
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";
5、js基礎-基礎規範
1）每行結束能夠不加分號. 沒有分號會以換行符做爲每行的結束
2）註釋 支持多行註釋和單行註釋. /* */ //
3）使用{}來封裝代碼塊
6、js基礎-常量與標識符
常量：直接在程序中出現的數據值
標識符：
1）由不以數字開頭的字母、數字、下劃線(_)、美圓符號($)組成
2）經常使用於表示函數、變量等的名稱
3）例如：_abc,$abc,abc,abc123是標識符，而1abc不是
4）JavaScript語言中表明特定含義的詞稱爲保留字，不容許程序再定義爲標識符
7、js基礎-數據類型
7.一、數字類型（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.二、字符串(string)
1）是由Unicode字符、數字、標點符號組成的序列
2）字符串常量首尾由單引號或雙引號括起，JavaScript中沒有字符類型
3）字符串中部分特殊字符必須加上右劃線\ ；經常使用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右劃線
字符串使用：
- 特殊字符的使用方法和效果
- Unicode的插入方法
<script>
var str="\u4f60\u597d\n歡迎來到\"JavaScript世界\"";
alert(str);
</script>
7.三、布爾型(Boolean)
1）Boolean類型僅有兩個值：true和false，也表明1和0，實際運算中true=1,false=0
2）布爾值也能夠看做on/off、yes/no、1/0對應true/false
3）Boolean值主要用於JavaScript的控制語句
7.四、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.五、Null類型
1）null 則用於表示還沒有存在的對象
2）若是函數或方法要返回的是對象，那麼找不到該對象時，返回的一般是 null。
7.六、數據類型轉換
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.七、強制類型轉換函數
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.八、類型查詢函數(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
8、ECMAScript 運算符
8.一、算數運算符
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.二、邏輯運算符
等於 ( == ) 、不等於( != ) 、 大於( > ) 、 小於( < ) 大於等於(>=) 、小於等於(<=) 與 (&&) 、或(||) 、非(!) && 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.三、賦值運算符
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.四、等性運算符
執行類型轉換的規則以下：
- 若是一個運算數是 Boolean 值，在檢查相等性以前，把它轉換成數字值。false 轉換成 0，true 爲 1。
- 若是一個運算數是字符串，另外一個是數字，在檢查相等性以前，要嘗試把字符串轉換成數字。
- 若是一個運算數是對象，另外一個是字符串，在檢查相等性以前，要嘗試把對象轉換成字符串。
- 若是一個運算數是對象，另外一個是數字，在檢查相等性以前，要嘗試把對象轉換成數字。
在比較時，該運算符還遵照下列規則：
- 值 null 和 undefined 相等。
- 在檢查相等性時，不能把 null 和 undefined 轉換成其餘值。
- 若是某個運算數是 NaN，等號將返回 false，非等號將返回 true。
- 若是兩個運算數都是對象，那麼比較的是它們的引用值。若是兩個運算數指向同一對象，那麼等號返回 true，不然兩個運算數不等。
8.五、關係運算符
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.六、Boolean運算符
var temp=new Object();// false;[];0; null; undefined;object(new Object();)
if(temp){
console.log("AA")
}else {
console.log("BB")
}
9、控制語句
9.一、if控制語句
if-else基本格式
if (表達式){
語句１;
......
}else{
語句２;
.....
}
if語句嵌套格式
if (表達式1) {
語句1;
}else if (表達式2){
語句2;
}else if (表達式3){
語句3;
} else{
語句4;
}
9.二、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.三、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.四、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)
10、異常處理
try {
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
// 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變量，用來指向Error對象或者其餘拋出的對象
}
finally {
//不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}
//主動拋出異常 throw Error('xxxx')
11、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>
12、String對象
12.一、建立string對象
//建立字符串對象兩種方式
var str1="hello";
var str2=new String("hello2");
console.log(typeof str1); //string
console.log(typeof str2); //object
12.二、string對象屬性
//字符串的屬性length var str1="hello"; console.log(str1.length); //5
12.三、string對象方法
12.3.一、格式編排方法
//編排方法 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.二、大小寫轉換
var str1="AbcdEfgh"; var str2=str1.toLowerCase(); var str3=str1.toUpperCase(); alert(str2); //結果爲"abcdefgh" alert(str3); //結果爲"ABCDEFGH"
12.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.四、查詢字符串
//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.五、子字符串處理
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"
十3、 Array對象
13.一、數組建立
//建立方式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.二、數組屬性
獲取數組元素的個數：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.三、數組方法
13.3.一、鏈接數組-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.二、鏈接數組-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.三、數組排序-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.四、數組切片-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.五、刪除子數組
//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.六、數組的進出棧操做(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.七、數組的進出棧操做(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.四、總結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
十4、Function 對象
14.一、函數定義
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.二、函數屬性
ECMAScript 定義的屬性 length 聲明瞭函數指望的參數個數
alert(func1.length) //返回參數個數
14.三、函數調用
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.四、函數內置對象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.五、匿名函數
// 匿名函數
var func = function(arg){
return "tony";
}
// 匿名函數的應用
(function(){
alert("tony");
} )()
(function(arg){
console.log(arg);
})('123')
14.六、函數的做用域
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
十5、Date對象
15.一、建立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.二、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.三、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.四、Date對象方法—日期和時間的轉換
//日期和時間的轉換: getTimezoneOffset(): //8個時區×15度×4分/度=480; //返回本地時間與GMT的時間差，以分鐘爲單位 toUTCString() //返回國際標準時間字符串 toLocalString() //返回本地格式時間字符串 Date.parse(x) //返回累計毫秒數(從1970/1/1午夜到本地時間) Date.UTC(x) //返回累計毫秒數(從1970/1/1午夜到國際時間)
十6、RegExp對象
十7、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) 返回角的正切。
十7、BOM對象
1）BOM（瀏覽器對象模型），能夠對瀏覽器窗口進行訪問和操做。使用 BOM，開發者能夠移動窗口、改變狀態欄中的文本以及執行其餘與頁面內容不直接相關的動做。
2）使 JavaScript 有能力與瀏覽器「對話」。
十8、window對象
全部瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象（窗口）.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不須要建立對象,直接使用便可.
18.一、Window 對象方法
alert() //顯示帶有一段消息和一個確認按鈕的警告框。 confirm() //顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 prompt() //顯示可提示用戶輸入的對話框。 open() //打開一個新的瀏覽器窗口或查找一個已命名的窗口。 close() //關閉瀏覽器窗口。 setInterval() //按照指定的週期（以毫秒計）來調用函數或計算表達式。 clearInterval() //取消由 setInterval() 設置的 timeout。 setTimeout() //在指定的毫秒數後調用函數或計算表達式。 clearTimeout() //取消由 setTimeout() 方法設置的 timeout。 scrollTo() //把內容滾動到指定的座標。
18.二、方法使用
//----------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>
十9、History 對象
19.一、History 對象屬性
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問
length 返回瀏覽器歷史列表中的 URL 數量。
19.二、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>
二10、Location 對象
Location 對象包含有關當前 URL 的信息。
Location 對象是 Window 對象的一個部分，可經過 window.location 屬性來訪問。
20.一、Location 對象方法
location.assign(URL) location.reload() location.replace(newURL)//注意與assign的區別
相關文章
- 1. webService（一）簡介及應用場景
- 2. ftp簡介及vsftp應用
- 3. RabbitMQ簡介以及應用
- 4. redis簡介及應用
- 5. Matplotlib簡介及應用
- 6. Redis簡介及應用
- 7. JavaScripts
- 8. 反射簡介及簡單應用
- 9. hadoop簡介、安裝及簡單應用
- 10. SNMP簡介及簡單應用
- 更多相關文章...
- • Maven Web 應用 - Maven教程
- • Scala 簡介 - Scala教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. webService（一）簡介及應用場景
- 2. ftp簡介及vsftp應用
- 3. RabbitMQ簡介以及應用
- 4. redis簡介及應用
- 5. Matplotlib簡介及應用
- 6. Redis簡介及應用
- 7. JavaScripts
- 8. 反射簡介及簡單應用
- 9. hadoop簡介、安裝及簡單應用
- 10. SNMP簡介及簡單應用