Javascript基礎第三課時【讀書筆記】－互聯網

文章出處

繼續更新，大致類容為：函數返回值，函數傳參，數組基礎三塊內容，歡迎提問一起討論:)

函數返回值

如果有return，并且有相應的操作，那么就返回相應的操作結果。看下面兩種情況：

1 <script>
2     function sum(a,b)
3     {
4         return a+b;
5     };
6     alert(sum(2,3));
7 </script>　　//返回5；

1 <script>
2     function sum(a,b)
3     {
4         return;//這里的return沒有給他方法，他返回undefined
5     };
6     alert(sum(2,3));
7 </script>

函數傳參

不定參arguments

 1 <script>
 2     function total(){
 3         var result=0;
 4         var i=0;
 5         for(i=0;i<arguments.length;i++){
 6             result+=arguments[i];
 7         };
 8         alert(result);
 9     };
10     total(2,3,2,5,8,98);
11 </script>

通過上面這個函數可以給total傳很多的參數

 1 <script type="text/javascript">
 2 window.onload=function ()
 3 {
 4     var oDiv=document.getElementById('div1');
 5     
 6     //獲取計算后的樣式(當前樣式、最終樣式)
 7     //IE
 8     //alert(oDiv.currentStyle.width);
 9     
10     //FF
11     //alert(getComputedStyle(oDiv, false).width);
12     
13     if(oDiv.currentStyle)
14     {
15         //IE支持的方法
16         alert(oDiv.currentStyle.width);
17     }
18     else
19     {
20         //FF火狐支持的方法
21         alert(getComputedStyle(oDiv, false).width);第二個值可有可無，也就是flase值
22     }
23 }
24 </script>

通過上面的函數可以獲取IE，FF下的非行間樣式；

 1 <style>
 2 #div1 {width:200px; height:200px; background:red;}//簡單的設置div的樣式；
 3 </style>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>無標題文檔</title>
 6 <script type="text/javascript">
 7 function getStyle(obj, attr)
 8 {
 9     if(obj.currentStyle)
10     {
11         return obj.currentStyle[attr];
12     }
13     else
14     {
15         return getComputedStyle(obj, false)[attr];
16     }
17 } 　　//這個函數也就是與上面的功能類似的一個函數，經過簡化后的結果。命名為getStyle
18 
19 function css(obj, attr, value)
20 {
21     if(arguments.length==2)    //獲取屬性
22     {
23         return getStyle(obj, attr);
24     }
25     else if(arguments.length==3)    //設置屬性
26     {
27         obj.style[attr]=value;
28     }
29 }//這個函數類似于Jquery里面的功能
30 
31 window.onload=function ()
32 {
33     var oBtn=document.getElementById('btn1');
34     var oDiv=document.getElementById('div1');
35     
36     oBtn.onclick=function ()
37     {
38         css(oDiv, 'background-color', 'green');//只能是基本樣式，不能使background這樣的復合樣式,這個屬性就存在諸如images,color,attchment,position等等屬性，瀏覽器無法辨別
39         //alert(css(oDiv, 'width'));
40     }
41 }
42 </script>
43 </head>
44 
45 <body>
46 <input id="btn1" type="button" value="樣式"/>//一個按鈕和一個div
47 <div id="div1">
48     
49 </div>
50 </body>

數組基礎

定義數組　　var=arr[1,2,3,4,5];

　　　　　　var=new Array(1,2,3,4,5);通常使用第一種創建方法，簡單明了。

<script>
    var arr=[1,2,3,4];
    arr.length=10;
    alert(arr[5]);
</script>

可以設置數組的長度，如果長度小于你定義的元素個數那么會刪除多余的值，如果長于你設置的元素個數，出彈出undefined。

從數組尾部添加/刪除一個元素　　push和pop

從數組頭部添加/刪除一個元素　　unshift和shift

sort排序

1 <script>
2     var arr=[5,6,8,1,2,6,'love','about'];
3     arr.sort();
4     alert(arr);
5 </script>

由于sort太笨，所以編寫一個比較函數來對數值排序。但是運行的時候出錯了，幫忙找找error。嗷，找到了，function的大括號不能加分號。

1 var arr=[5,66,18,11,256,6];
2     arr.sort(function(num1,num2){
3         return num1-num2;
4     });
5     alert(arr);

concat--連接兩個數組

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

join--添加分隔符（只能是字符串）

var a=[1,2,3];
alert(a.join('-'));

split--把字符串轉成數組，但是是字符串，不是數值。(英文意思：分裂，分開)

var a='6-9-8-5';
alert(a.split('-'));

splice--從數組中間刪除元素，添加元素，替換元素。（英文意思：黏貼）

1 var a=[1,2,3,4,5,6,7,8,9];
2     //從第二個元素開始刪除一個元素a.splice(2,1);
3     //從第二個元素開始刪除0個元素，添加兩個元 a.splice(2,0,'a','b');
4     //從第二個元素開始，刪除兩個元素，也就是刪除3,4兩個數字，添加了a,b,c三個元素 a.splice(2,2,'a','b','c');
5     alert(a);