前端零基础入门-js函数+内置对象+DOM+BOM

• js函数
• 函数的定义和调用
• 函数的返回值
• arguments
• 求任意一组数的平均值
• js内置对象
• Array数组
• 如何创建数组
• 数组长度
• 数组方法
• 数组的栈方法
• 1、push（）
• 2、unshift（）
• 3、pop（）
• 4、shift（）
• 数组的转化方法
• 1、join（）
• 数组的重排序方法
• 1、reverse（）
• 2、sort（）
• concat（）
• slice（）
• splice（）
• 1、splice（）方法删除数组项
• 2、splice（）方法插入数组项
• 3、splice（）方法替换数组项
• 位置方法
• 1、indexOf（）
• 2、lastIndexOf（）
• String
• 掌握字符串对象的方法
• 1、charAt（）和charCodeAt（）
• 2、indexOf（）和lastIndexOf（）
• 其他slice（）、substring（）、substr（）、split（）、replace（）、toUpperCase（）、toLowerCase（）
• Math对象
• date对象
• DOM基础
• DOM查找
• 1、document.getElementById（）
• 2、document.getElementByTagName（）
• DOM（如何设置元素样式）
• DOM（innerHTML和className）
• DOM属性设置与获取
• DOM事件
• HTML事件
• DOM0级事件
• 事件类型
• 键盘事件
• BOM事件
• window对象
• window对象
• 定时器setTimeout
• 定时器setInterval
• location对象
• location对象属性
• location对象方法
• history对象
• history对象方法back
• history对象方法forward
• screen对象
• screen对象及属性
• navigator对象
• navigator对象及属性（userAgent）

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:"marry@sohu.com"}];
    //console.log(infos);
    console.log(cols[1]); //读取cols这个数组中索引为1的值
</script>

数组长度

<script>
    var arr=["a","b","c","d"];
    //console.log(arr.length); //4
    
    //数组的遍历
    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>

splice（）

1、splice（）方法删除数组项

2、splice（）方法插入数组项

3、splice（）方法替换数组项

位置方法

1、indexOf（）

2、lastIndexOf（）

String

掌握字符串对象的方法

1、charAt（）和charCodeAt（）

2、indexOf（）和lastIndexOf（）

其他slice（）、substring（）、substr（）、split（）、replace（）、toUpperCase（）、toLowerCase（）

注意：

Math对象

date对象

DOM基础

DOM查找

1、document.getElementById（）

2、document.getElementByTagName（）

DOM（如何设置元素样式）

DOM（innerHTML和className）

DOM属性设置与获取

DOM事件

HTML事件

DOM0级事件

事件类型

键盘事件

BOM事件

window对象

window对象

定时器setTimeout

定时器setInterval

location对象

location对象属性

location对象方法

history对象

history对象方法back

history对象方法forward

screen对象

screen对象及属性

navigator对象

navigator对象及属性（userAgent）