基礎語法 · TUNA-daily

[TOC] ## 1. 變量和數據類型 ### 1.1 定義和賦值變量 var 變量名=值; > 1. 使用var關鍵詞定義變量，var可以省略的，但是不建議省略var > 2. 在js中可以重復定義變量，后面定義的變量會覆蓋前面的變量。 > 3. js是弱類型語言，使用var來定義任何數據類型 > 4. js中變量的類型是由變量的值決定的，所以只定義不賦值的變量，就是一個未賦值變量（undefined），未賦值的變量不能使用 > 5. typeof(變量)：查看變量的數據類型 > #### 變量的作用域變量的作用域無非就是兩種：全局變量和局部變量。 1. 函數內部可以直接讀取全局變量。 2. 在函數外部自然無法讀取函數內的局部變量。 3. 函數內部聲明變量的時候，一定要使用var命令。如果不用的話，你實際上聲明了一個全局變量！ ### 1.2 js的數據類型分類(四種)： > 1. number：無論整數還是小數，都是number類型 > 2. string: 無論字符還是字符串，都是string類型 > 3. boolean > 4. object 對象類型 ~~~ var a = 10; //var a = 20; var b = 3.14; var c = 'c'; var d = "hello"; var e = true; var f = new Object(); document.write("a的值為："+a +",a的數據類型是:"+typeof(a)+" "); document.write("b的值為："+b +",b的數據類型是:"+typeof(b)+" "); document.write("c的值為："+c +",c的數據類型是:"+typeof(c)+" "); document.write("d的值為："+d +",d的數據類型是:"+typeof(d)+" "); document.write("e的值為："+e +",e的數據類型是:"+typeof(e)+" "); document.write("f的值為："+f +",f的數據類型是:"+typeof(f)+" "); ~~~ ### 1.3 類型轉換函數 1. string->整數： parseInt(變量) 使用parseInt函數轉換時，轉換的內容中的第一個是數值類型，就可以繼續轉換，直到遇到非數組類型為止。 2. string->小數： parseFloat(變量) ~~~ */ var a = "10"; a = "10a"; document.write("a的類型是(轉換前)："+typeof(a)+" "); //轉換 a = parseInt(a); document.write("a的類型是(轉換后)："+typeof(a)+",值為："+a+" "); var b = "3.14"; b = parseFloat(b); document.write("b的類型是(轉換后)："+typeof(b)+",值為："+b+" "); ~~~ ### 1.4 運算符 > 1. 算術運算符： + - * / % > 2. 比較運算符： > < >= <= == > 3. 邏輯運算符： && || ! > 4. 三目運算符: 表達式 ? true的結果 : false的結果在js中，布爾值可以用true用1來代表，false用0來代表(可用于數學運算) ~~~ var a = 10; var b = false; document.write("結果為："+(a/b)+" "); document.write("結果為："+(a+b)+" "); ~~~ ### 1.5 流程控制語句 #### 1.5.1 if 語句 ~~~ if語句 if(表達式){ 語句 }else{ 語句 } ~~~ 條件可以是： 1. 布爾值 true：成立； false:不成立 2. number 非0（包括負數）：成立； 0：不成立 3. string 非空字符串：成立；空字符串：不成立 4. object 非null: 成立； null：不成立 #### 1.5.2 swtich語句 ~~~ swtich(變量){ case 選項1: 語句; break; # 不break，就會繼續下面選項的語句 case 選項2:：語句; break; default: 默認; } ~~~ ** case的條件： ** > 1. 可以是常量. string,number > 2. 可以是變量。（java是不能是變量） > 3. 可以是表達式（java不能這樣） #### 1.5.3 for語句 ~~~ for(初始化語句;判斷進入條件;步長語句){ 語句 } ~~~ #### 1.5.4 while語句 ~~~ while(表達式){ true的時候才進入循環語句 } ~~~ #### 1.5.5 do-while ~~~ do{ 語句 }while(表達式) ~~~ #### 1.5.6 for-in語句： 1. 遍歷數組 2. 遍歷對象屬性（遍歷對象的成員變量和方法） ~~~ for(var 遍歷 in 數組|對象){ } ~~~ ~~~ var arr = [10,20,30,40]; //遍歷數組 //使用for循環 for(var i=0;i<arr.length;i++){ document.write(arr[i]+","); } document.write("<hr/>"); //使用for-in遍歷數組 for(var i in arr){ document.write(arr[i]+","); } */ //定義對象 function Person(name,age){ this.name = name; this.age = age; } //創建對象 var p = new Person("eric",20); //遍歷對象 for(var i in p){ document.write(p[i]+" "); } ~~~ #### 1.5.7 with 每次在向瀏覽器寫入東西的時候，document.write("內容")，每次都要寫document，使用with就可以簡化書寫 ~~~ with(對象){ 直接寫該對象的方法實現調用，而不用寫對象點的形式調用 } ~~~ 例如： ~~~ with(document){ for(var i=1;i<=5;i++){ for(var j=1;j<=i;j++){ write("* "); // 不用document.write } write(" "); } write("<hr/>"); for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ write(i+"*"+j+"="+(i*j)+" "); } write(" "); } ~~~ ### 1.6 函數 ~~~ 函數定義： function 函數名稱(形式參數列表){ 語句 } ~~~ > 1. js的函數使用function定義，但是形式參數列表不能使用var關鍵詞 > 2. js的函數可以有返回值，直接使用return關鍵詞返回即可，不需要聲明返回值類型 > 3. js沒有方法重載的概念，后面定義的函數會覆蓋前面的函數。 > 4. js中的形式參數和實際參數的數量可以不一致，依然可以調用。 > 5. js的每個函數中都隱藏了一個叫arguments的數組，這個數組用于接收函數調用時傳遞過來的實際參數值。 > 6. arguments數組接收完實際參數后，會逐一的依次從左到右賦值給形式參數,如果實際參數數量大于形式參數，則丟失剩下的實際參數 ### 1.7 基于對象編程（內置對象） #### 1.7.1 String對象 ##### 生成String對象的方法 1. new String（） ~~~ var str1 = new String("hello"); var str2 = new String("hello"); document.write("結果："+(str1==str2)+" "); //false,比較對象地址 document.write("結果："+(str1.valueOf()==str2.valueOf())); //true,比較對象內容 ~~~ 2. 字符串 ~~~ var str1 = "hello"; var str2 = "hello"; document.write("結果："+(str1==str2)+" "); //true,存在于常量池中的同一個String對象 ~~~ ##### 常用方法 > 1. charAt(): 返回指定索引的內容 > 2. indexOf(): 返回首次出現指定字符的索引位置 > 3. lastIndexOf(): 返回最后出現指定字符的索引位置 > 4. fontcolor(): 直接給字符串添加顏色 > 5. replace(): 替換指定的字符串 > 6. split(): 使用指定字符串切割字符串，返回字符串數組 > 7. substring(start,end); 截取字符串，start：開始索引， end:結束索引 > 8. substr(strat,[length]) 截取字符串， start：開始索引 length: 截取的字符串長度 #### 1.7.2 Number對象類似于String ~~~ var num1 = new Number(20); var num2 = new Number(20); var num1 = 20; var num2 = 20; ~~~ #### 1.7.3 Boolean對象 #### 1.7.5 Math對象 > 1. ceil()：向上取整。如果有小數部分的話，直接+1 > 2. floor(): 向下取整。如果有小數部分的話，直接丟失小數部分，保利整數位 > 3. round(): 四舍五入取整。滿5進一 > 4. random(): 生成一個隨機的0-1的小數 .包含0，不包含1 > 5. max(): 返回最大值 > 6. min(): 返回最小值 > ~~~ var num = 3.50; document.write(Math.ceil(num)+" "); //4 document.write(Math.floor(num)+" "); //3 document.write(Math.round(num)+" "); //4 document.write(Math.round(Math.random()*100)+" "); document.write(Math.max(10,6,54,23,76)+" "); //76 document.write(Math.min(10,6,54,23,76)+" "); //6 ~~~ #### 1.7.6 Date對象 ##### 創建對象 ~~~ var date = new Date(); //取當前系統日期時間 java: SimpleDateFormat對象 yyyy-MM-dd 格式化 //document.write(date); //默認格式 //年份 document.write(date.getFullYear()+"年"); //月 document.write((date.getMonth()+1)+"月"); //日 document.write(date.getDate()+"日"); //星期 document.write("星期"+date.getDay()+" "); //時 document.write(date.getHours()+"時"); //分 document.write(date.getMinutes()+"分"); //秒 document.write(date.getSeconds()+"秒"); ~~~ ##### 網頁時鐘 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>網頁時鐘</title> </head> <body> 當前的日期為： </body> <script type="text/javascript"> function genNewDate(){ //生成一個系統的當前時間，格式：2015-06-01 15:22:30 var date = new Date(); //當前日期時間的字符串 var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); //把日期字符串放到span中 //得到span對象 var dateTip = document.getElementById("dateTip"); //讀到了沒有加載的標簽，無法讀取的 //設置span的innerHTMl屬性給span賦值 dateTip.innerHTML=dateStr; } //設置定時器，每個多少毫秒調用1次任務（函數） window.setInterval("genNewDate()",1000); //每秒鐘調用一次genNewDate函數去更新時間 </script> </html> ~~~ #### 1.7.7 Array數組對象 1. 數組的長度會隨著元素的添加而變化，不用擔心出現索引位置越界的異常。 2. js的數組可以存放任意類型的元素。 ##### 創建數組 1. new ~~~ //1.1 指定數組長度 //var arr = new Array(3); //1.2 不指定數組長度、默認0個元素 //var arr = new Array(); //1.3 指定具體內容 //var arr = new Array(10,"hello",true); ~~~ 2. 直接指定內容 ~~~ var arr = [10,"java",false]; arr[0]=10; arr[1]="hello"; arr[2]=true; for(var i=0;i<arr.length;i++){ document.write(arr[i]+","); } ~~~ ##### 常用的方法： 1. join(字符串): 使用指定的字符串，把數組的所有元素連接在一起，最終組成一個新的字符串 2. reverse(): 反轉數組中的元素 ~~~ var arr = ["java","net","php","ios"]; var str = arr.join("-"); document.write(str); for(var i=0;i<arr.length;i++){ document.write(arr[i]+","); } document.write("<hr/>"); //反轉 arr = arr.reverse(); for(var i=0;i<arr.length;i++){ document.write(arr[i]+","); } ~~~ ### 1.8 自定義對象 java：使用class來定義對象 javascript：使用function來定義對象 #### 1.8.1 有參數的構造函數 ~~~ //定義對象 function 對象名稱(形式參數){ 定義屬性定義方法 } //創建對象 var 變量 = new 對象名稱(實際參數); ~~~ 例：定義人對象 ~~~ function Person(name,age){ //this: 表示當前調用的對象 //定義屬性賦值 this.name = name; this.age = age; //定義方法 this.say = function(){ alert("這個對象的方法"); } } //創建人對象 var p = new Person("狗娃",12); ~~~ #### 1.8.2 無參數的構造函數通過追加屬性填值 ~~~ //定義對象 function Person(){ } //創建對象 var p = new Person(); //追加屬性 p.name = "狗剩"; p.age = 14; //追加方法 p.say = function(){ alert("狗剩的函數"); } ~~~ #### 1.8.3 使用Object對象。 Object對象可以作為任意對象的模板 ~~~ //創建對象 var p = new Object(); //追加屬性 p.name = "狗蛋"; p.age = 16; //追加方法 p.say = function(){ alert("狗蛋的函數"); } ~~~ #### 1.8.4 使用字面量的形式創建對象（json） ~~~ //直接創建人對象 var p = { //定義屬性（屬性名：屬性值） "name":"鐵蛋", "age": 20, //定義方法 "say":function(){ alert("鐵蛋的函數"); } }; //查看屬性值 document.write(p.name); document.write(p.age); //調用對象方法 p.say(); document.write(" "); //使用for-in遍歷對象（成員變量和方法） for(var i in p){ document.write(p[i]+" "); } ~~~ ### 1.9 原型 1. js的每個對象中都包含有了原型屬性（prototype） 2. 如果往某個對象的原型屬性添加了方法，那么添加的這個方法就會自動地添加到當前對象的方法中。 3. 原型的作用：給內置對象追加方法的 ~~~ /* 給Array追加一個search和max方法 */ Array.prototype.search = function(target){ //遍歷 for(var i=0;i<this.length;i++){ if(this[i]==target){ return i; } } return -1; //找不到就是-1 } Array.prototype.max = function(){ //存儲最大值 var max = this[0]; for(var i=1;i<this.length;i++){ if(this[i]>max){ max = this[i]; } } return max; } var arr = [10,43,21,65,3,87]; var index = arr.search(87); document.write("位置是："+index+" "); var max = arr.max(); document.write("最大值："+max); ~~~