JS复习二函数函数的定义函数表达式函数的调用函数声明的提升弹出警告框函数表达式不能提升函数优先提升形参和

函数

函数的定义

function fun(){
    //函数体语句
}

函数表达式

var fun=function(){
    //函数体语句
}

函数的调用
```
fun();
```

函数声明的提升

fun()
function fun(){
    alert("我被执行了")
}

弹出警告框

函数表达式不能提升

fun()  //引发错误
var fun=function(){
    alert("函数被执行了")
}

函数优先提升

fun()   //弹出B
var fun=function(){
    alert("A")
}
function fun(){
    alert('B')
}
fun();  //弹出A

形参和实参个数不同的情况

function add(a,b){
    var sum=a+b;
    console.log('和为：'+sum)
}
add(3,5,6)  
# 结果为8  只接收了前两个参数

function add(a,b,c){
    var sum=a+b+c;
    console.log('和为：'+sum)
}
add(1,2)  
# 结果NaN  C无参数传入

arguments表示接收到的实参列表

function fun(){
    console.log(arguments[0]);
     console.log(arguments[1]);
     console.log(arguments[2]);
     console.log(arguments[3]);
    console.log(arguments)
}

arguments类似数组，有length属性，能从下标访问元素项，但是不能调用数组的方法

内置sort()函数

var arr=[33,22,55,11];
arr.sort(function(a,b){
    if(a>b){
        return 1;
    }else{
        return -1;
    }
})

a表示靠前项，b表示靠后项，需要交换位置，则返回任意正数，否则返回负数

实现深克隆

//原数组
var arr1=[33,44,11,22,[77,88,[33,44]]];
//这个函数会被递归
function deepClone(arr){
    //结果数组
    var result=[];
    //遍历数组的每一项
    for(var i=0;i<arr.length;i++){
        //类型判断，如果遍历到的项是数组
        if(Array.isArray(arr[i])){
            //递归
            result.push(deepClone(arr[i]))
        }else{
            //如果遍历到的项不是数组，是基本类型值，就直接推入到结果数组中
            //相当于是递归的出口
            result.push(arr[i])
        }
    }
    //返回结果数组
    return result;
}

闭包

闭包是函数本身和该函数声明时所处的环境状态的组合

function fun(){
    var name='慕课网'
    
    function innerFun(){
        alert(name)
    }
    return innerFun;
}

var inn=fun();
inn();  //弹出警告框

闭包的记忆性

function testA(biaozhun){
    function testB(wendu){
        if(wendu>biaozhun){
            alert("温度过高")
        }else{
            alert("温度正常")
        }
    }
    return testB;
}

var tt1=testA(37.2);
tt1(37.5)  //温度过高

var tt2=testA(37.6)
tt2(3.75)    //温度正常

模拟私有变量

function person(){
    var name;
    function getName(){
        return name;
    }
    return getName;
}

var getName=person();
getName();

# 多个对象函数
function person(){
    var a=0;
    
    return {
        getA:function(){
            return a;
        },
        add:function(){
            a++
        },
        pow:function(){
            a*=a;
        }
    }
}

var obj=fun();
obj.getA();

闭包面试题

function addCount(){
    var count=0;
    return function(){
        count=count+1;
        console.log(count)
    };
}

var fun1=addCount();
var fun2=addCount();
fun1()  //1
fun2()  //1
fun2()  //2
fun1()  //2 
# 函数的实例相互独立

立即执行函数IIFE

(function(){
    //执行语句块
})();

#作用1 为变量赋值
var age=12;
var sex='男';
var title=(function(){
    if(age<18){
        return "小朋友"
    }else{
        if(sex=='男'){
            return '先生'
        }else{
            return '女士'
        }
    }
})();
# 当执行到此，自动判断年龄和姓名 赋值给title

#作用2 将全局变量变为局部变量
#作用前
var arr=[];
for(var i=0;i<5;i++){
    arr.push(function(){
        alert(i)
    })
}
arr[2]();
#作用后
var arr=[];
for(var i=0;i<5;i++){
    (function(i){
        alert(i)
    })(i);
}
arr[2]();

DOM

nodeType属性可以现实这个节点具体的类型

nodeType值节点类型
1 元素节点，例如<p>和<div>
3 文字节点
8 注释节点
9 document节点
10 DTD节点
```
document.write(document.nodeType)

//9
```

nodeType值	节点类型
1	元素节点，例如<p>和<div>
3	文字节点
8	注释节点
9	document节点
10	DTD节点

访问元素节点的常用方法

方法	功能
document.getElementById()	通过id得到元素
document.getElementByTagName()	通过标签名得到元素数组
document.getElementByClassName()	通过类名得到元素数组
document.querySelector()	通过选择器得到元素
document.querySelectorAll()	通过选择器得到元素数组

如果JS写在html之前，需要window.onload=function(){}
任何一个节点元素也可以调用getElementByTagName()方法，从而得到其内部的某种类的元素节点

节点的关系

关系	考虑所有关系	只考虑元素节点
子节点	childNodes	children
父节点	parentNode	同
第一个子节点	firstChild	firstElementChild
最后一个子节点	lastChild	lastElementChild
前一个兄弟节点	previousSibling	previousElementSibling
后一个兄弟节点	nextSibling	nextElementSibling

<div class='box'>
	<p>
        我是段落A
    </p>    
    <p class='para'>
        我是段落B
    </p>
    <p>
        我是段落c
    </p>
</div>

<script>
	var box=document.getElementById('box')
    var para=document.getElementById('para')
    
    //所有子节点
    console.log(box.childNodes)
    //所有元素子节点
    console.log(box.children)
    
</script>

改变元素节点的内容

innerHTML以html语法设置节点中的内容

innerText以text设置内容

<div id="box"></div>

var oBox=document.getElementById('box')
oBox.innerHTML='<ul><li>苹果</li></ul>'
oBox.innerText='<ul><li>苹果</li></ul>'

改变CSS样式
```
oBox.style.backgroundColor='red'
```
改变元素的html属性 标准W3C属性
```
oPic.src='images/dog.png'
```
改变元素的html属性非标准W3C属性
- 使用setAttribute()和getAttribute()来设置读取
```
oBox.setAttribute('data-n',10)

var n=oBox.getAttribute('data-n')
alert(n)
```

节点的创建

<div id="box">
        <p>我是段落0</p>
        <p>我是段落1</p>
        <p>我是段落2</p>
    </div>
    <script>
        var oBox=document.getElementById('box')
        var oPs=oBox.getElementsByTagName('p')
        //创建孤儿节点
        var oP=document.createElement('p')
        //设置内部文字
        oP.innerText='我是新来的'
        oBox.appendChild(oP)

        //oBox.insertBefore(oP,oPs[0])


oBox.insertBefore(oP,oPs[0])

动态生成表格

 <table id="tb" border="1" cellspacing='0' width="600" height="400">

    </table>
    <script>
        var oTb=document.getElementById('tb')
        for(let i=0;i<20;i++){
            var oTr=document.createElement('tr');
            for(let j=0;j<12;j++){
                var oTd=document.createElement('td');
                oTr.appendChild(oTd)
            }
            oTb.appendChild(oTr)
        }
    </script>

移动节点

<div id="box1" style="background-color: aqua;">
       <p id="para">我是段落</p>
   </div>

   <div id="box2"></div>
   <script>
       var box1=document.getElementById('box1')
       var box2=document.getElementById('box2')
       var para=document.getElementById('para')

       box2.appendChild(para);
   </script>

因为dom树上一个节点不能同时放在树的两个位置，所以追加就是移动

删除节点
- 父节点.removeChild(要删除子节点)
```
box1.removeChild(para)
```

克隆节点

var 孤儿节点=老节点.cloneNode(true)
如果是true则采用深克隆，false浅克隆

var box1=document.getElementById('box1')
var box2=document.getElementById('box2')
var theul=box1.cloneNode(true);
box2.appendChild(theul)

var box3=document.getElementById('box3')
var th=box1.cloneNode(false)
box3.appendChild(th)

事件监听

点击事件

oBox.onclick=function(){
    alert("我是点击事件函数")
}

常见鼠标事件监听

onmouseenter不冒泡，当事件委托时监听的是当前元素，而不是子孙元素，onmouseover要冒泡。
常见键盘事件监听
常见表单事件监听

表单form设置id，里面的表单内容只需要设置name然后打点调用，不再需要单独设置id
常见的页面事件监听

事件对象

事件处理函数提供一个形式参数，它是一个对象，封装了本次事件的细节

用单词event或字母e表示

oBox.onmousemove=function(e){
    //对象e就是这次事件的“事件对象”
    
}

鼠标位置
e.charCode和e.keyCode

e.charCode 用于onkeypress 不获取功能键方向键

e.keyCode用于onkeydown要获取功能键

e.preventDefault()阻止事件产生的默认动作

oField.onkeypress=function(e){
    if(!(e.charCode>=48&&e.charCode<=57||e.charCode>=97&&e.charCode<=122)){
        e.preventDefault();
    }
}
# 当文本框中输入的不是数字和小写字母时，阻止默认事件，也就是输入其他的不会显示

onmousewheel鼠标滚轮事件，e.deltaY属性表示滚动方向，向下滚动时返回正值，向上滚动时返回负值

oBox.onmousewheel=function(e){
    //阻止默认事件：当用户在盒子里面滚动鼠标滚轮的时候，此时不会引发页面的滚动条的滚动
    e.preventDefault();
    if(e.deltaY>0){
        a++;
    }else{
        a--;
    }
    oInfo.innerText=a;
}

e.stopPropeagation()阻止事件继续传播

    <div id="box">
        <button id="btn">按我</button>
    </div>
    <script>
        var oBox=document.getElementById('box')
        var oBtn=document.getElementById('btn')

        oBox.onclick=function(e){
            console.log("我是盒子");
            
        }

        oBtn.onclick=function(){
            console.log("我是按钮");
            //e.stopPropagation();
        }
    </script>

当不阻止事件传播时，点击按钮，也会冒泡触发盒子事件

阻止之后，添加阻止在事件源

事件委托

利用事件冒泡机制，将后代元素事件委托给祖先元素

e.target和e.currentTarget属性

    <button id="btn">按我添加元素</button>
    <ul id="list">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

    <script>
        var oList=document.getElementById('list')
        var oBtn=document.getElementById("btn")

        oList.onclick=function(e){
            //e.target表示用户真正点击的元素
            e.target.style.color='red'
        }

        oBtn.onclick=function(){
            var oLi=document.createElement('li')
            oLi.innerText="我是新来的"
            oList.appendChild(oLi)
        }
    </script>

最内层元素不能再有额外的内存元素了

<ul id="list">
    <li><span>我是span</span>列表项</li>
    <li><span>我是span</span>列表项</li>
    <li><span>我是span</span>列表项</li>
</ul>
# 使用委托 只有 "我是span"会变红

定时器和延时器

定时器设置

var a=0;
setInterval(function(){
    console.log(++a)
},1000)

setInterval(function(a,b){
    //形参a的值是2，形参b的值是3
},1000,2,3)

var a=0;
function fun(){
    console.log(++a)
}
setInterval(fun,1000)
# 第一个参数是函数  第二个参数是间隔时间
# 第三个参数是a  第四个参数是b 依次类推

清除定时器

//设置定时器，并且用timer变量接收这个定时器
//为了防止定时器叠加 先清除定时器
var timer=setInterval(function(){
    
},2000)

//点击按钮时，清除定时器
oBtn.onclick=function(){
    clearInterval(timer)
}

延时器设置

setTimeout(function(){
    //这个函数会在2秒
    consolg.log('你好')
},2000)

清除延时器
```
clearTime
```

BOM

window对象

全局变量会成为window对象的属性

var a=10;
console.log(window.a==a)  //true

内置函数普遍是window的方法啊

console.log(window.alert==alert)  //true
console.log(window.setInterval==setInterval)  //true

窗口尺寸相关属性

属性	意义
innerHeight	浏览器窗口的内容区域的高度，包含水平滚动条（如果有的话）
innerWidth	浏览器窗口的内容区域的宽度，包含垂直滚动条（如果有的话）
outerHeight	浏览器窗口的外部高度
outerWidth	浏览器窗口的外部宽度
document.documentElement.clientWidth	浏览器窗口的内部宽度，不包含滚动条

resize事件
- 在窗口大小改变之后，就会触发resize事件，可以使用window.onresize或者window.addEventListener('resize')来绑定事件处理函数
已卷动高度
- window.scrollY表示在垂直方向已滚动的像素值
- document.documentElement.scollTop表示卷动高度
- 通常两个都使用，可以增加兼容性 var scrollTop = window.scrollY || document.documentElement.scrollTop
- document.documentElement.scrollTop可以设置值，通常用于返回顶部设置为0
scroll事件
- 在窗口被卷动之后，就会触发scroll事件，可以使用window.onscroll或window.addEventListener('scroll')来绑定事件处理函数

Navigator对象

window.navigator属性可以检索navigator对象，它内部含有用户此次活动的浏览器的相关属性和标识

属性意义
appName 浏览器官方名称
appVersion 浏览器版本
userAgent 浏览器的用户代理
platform 用户操作系统
```
var userAgent=navigator.userAgent;
```

属性	意义
appName	浏览器官方名称
appVersion	浏览器版本
userAgent	浏览器的用户代理
platform	用户操作系统

History对象

window.history对象提供了操作浏览器会话历史的接口 回退实现

history.back()   //等同于点击浏览器的回退按钮
history.go(-1)   //等同于history.back()  
# 两个都可以实现回退

Location对象

window.location标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转
```
window.location='https://www.baidu.com'
window.location.href='https:www.baidu.com'
```
可以调用location的reload方法以重新加载页面，参数为true表示强制从服务器强制加载
```
window.location.reload(true)
```
GET请求查询参数
- window.location.search属性表示当前浏览器的GET请求查询参数
```
例：https://www.baidu.com/?a=10&b=1
console.log(window.location.search)  //'?a=10&'
```