前端零基礎入門-js函數+內置對象+DOM+BOM

js函數

函數的定義和調用

函數的作用：通過函數可以封裝任意多條語句，而且可以任何地方、任何時候調用執行
函數的定義：函數使用function聲明，後跟一組參數以及函數體，語法如下

function functionName([arg0,arg1,...argn]){
    statements
}

說明：[]說明裏面的內容不是必須的，它不是語法

函數的調用：
語法：函數名([arg0,arg1,…argn])

函數定義好後，需要調用才能執行

舉例：

  function myLove(){
      //聲明一個函數
      alert("我是一個函數");
  }
  //函數的調用
  myLove();
  //聲明一個帶有參數的函數
  function add(num1,num2){
      var sum=num1+num2;
      alert(num1+'和'+num2+'的和是'+sum);
  }
  add(3,5);
  add(99,789);
  add(-1,-9);

函數的返回值

函數的返回值：任何函數通過return語句，後面跟着返回的值來實現返回值
說明：1、函數會在執行完return語句之後停止並立即退出
2、return語句也可以不帶任何返回值，用於提前停止函數執行又不需要返回值的情況
舉例：

  function myLove(){
      //聲明一個函數
      alert("我是一個函數");
  }
  //函數的調用
  //myLove();
  //聲明一個帶有參數的函數
  function add(num1,num2){
      var sum=num1+num2;
      return sum;
  }
  console.log(add(3,5)); //結果可以打印出來
  alert(add(99,789)); //結果也可以alert
  var s=add(-1,-9);
  //console.log(s);
  document.write('-1+-9'+s)//結果也可以document輸出

  //或者以下
  function myfunction(arg){
       //如果arg是非數字，不做任何操作，否則返回arg的2倍
       if(isNaN(arg)) return;
       return arg*2;
   }
  myfunction("abc");

arguments

<script>
   function inner(){
       console.log(arguments.length);
       console.log(arguments[0]);//索引是從0開始的正整數
   }
   inner(10,5);
   //
   function add(num1,num2){
        arguments[0]=99;
        console.log(num1);
   }
   add(55,88);//控制檯輸出是99
</script>

求任意一組數的平均值

<script>
   function getAvg(num1,num2){
        console.log(arguments.length);
        //所有參數進行求和
        var sum=0,len=arguments.length,i;
        for(var i=0;i<len;i++){
            //console.log(arguments[i]);
            //sum=sum+arguments[i];
            sum+=arguments[i];
            //sum=0+6
            //sum=0+6+40
            //sum=0+6+40+110
            //sum=0+6+40+110+23
            //sum=0+6+40+110+23+88
        }   
        //console.log(sum);
        return sum/len;
   }
   var avg=getAvg(6,40,110,23,88);
   console.log(avg);
</script>

js內置對象

字符串、函數、數組都叫對象
直接調用對象的屬性、方法
屬性是對象的特性，方法是對象可以幹嘛
數組主要是用來存儲一組數據的

Array數組

如何創建數組

<script>
    //創建一個保存顏色的數組
    var colors=new Array(3);
    colors[0]="#f00";
    colors[1]="#0f0";
    colors[2]="#00f";
    console.log(colors);
    var nums=new Array(1,3,6,9);
    //console.log(nums);
    var cols=["red","yellow","green"];
    //console.log(cols);
    var infos=[6,"marry",true,{email:"[email protected]"}];
    //console.log(infos);
    console.log(cols[1]); //讀取cols這個數組中索引爲1的值
</script>

數組長度

<script>
    var arr=["a","b","c","d"];
    //console.log(arr.length); //4
    /*arr.length=3;
    console.log(arr[3]);
    arr[99]="z";
    console.log(arr.length); //100*/
    //數組的遍歷
    for (var i=0;i<arr.length;i++){
        //console.log(i);
        console.log(arr[i]);
        }
</script>

數組方法

數組的棧方法

1、push（）

<script>
    var colors=new Array("red","green");
    colors.push("blue");
    console.log(colors);  //["red","green","blue"]
</script>

2、unshift（）

<script>
    var nums=[2,7,8,6];
    var size=nums.unshift(99,66)
    console.log(nums); //[99,66,2,7,8,6]
</script>

3、pop（）

<script>
    var nums=[2,7,8,6];
    var size=nums.unshift(99,66)
    //pop
    var n=nums.pop();
    console.log(nums); //[99,66,2,7,8]
</script>

4、shift（）

<script>
    var colors=new Array("red","green");
    colors.push("blue");
    //pop
    var m=colors.shift();
    console.log(m); //[99,66,2,7,8]
</script>

數組的轉化方法

1、join（）

數組轉換方法：數組轉換爲字符串

<script>
    var nums=[2,7,8,6];
    var str=nums.join();//不寫，輸出是逗號，2,7,8,6
    console.log(str);
    var words=["border","left",'color'];
    var wordstr=words.join("-");
    console.log(wordstr);//border-left-color
</script>

數組的重排序方法

1、reverse（）

<script>
    var nums=[2,7,8,6];
    var str=nums.join();//不寫，輸出是逗號，2,7,8,6
    console.log(str);
    var words=["border","left",'color'];
    var wordstr=words.join("-");
    console.log(wordstr);//border-left-color
    //reverse
    nums.reverse();
    console.log(nums); //[6,8,7,2]
    var strs=["a","b","c","d"]; 
    var newstr=strs.reverse().join("")
    console.log(newstr); //dcba
</script>

2、sort（）

<script>
    var arr=[9,23,15,88,12]
    //console.log(arr.sort()); //[12,15,23,88,9] 不是按照大小排序
    //降序
    arr.sort(function (a,b) {return b-a});
    //升序
    arr.sort(function (a,b) {return a-b});
    console.log(arr); //[88,23,15,12,9]  [9,12,15,23,88] 
</script>

concat（）

<script>
    var arr1=["a","b","c"],
        arr2=["d","e",1,3],
        arr3;
    arr3=arr1.concat(arr2);
    console.log(arr3);//["a","b","c"，"d","e",1,3]
</script>

slice（）

<script>
    var colors=["red","green","blue","yellow","orange"];
    var newColors=colors.slice(1,3);
    var newColors3=colors.slice(-2,4); //3,3
    console.log(newColors); //["green","blue"]
    console.log(newColors3); //["yellow"]
</script>