Script函数 入门

一、函数

---

• 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
• 申明方法 function add{方法名} （num）
• 调用程序：在调用的时候才在内存分配空间；
• 实参的数值不需要规定形参的数据类型，数据类型会根据传递进来的值来自动确定；
• 返回值不在申明中书写，需要返回就直接加return，不需要返回就去掉return；
• 接收的返回值类型按照返回的时候的类型来定义；

命名函数

function add(){
        console.info("执行add函数");
    }

匿名函数

var t = function（）{
console.info（执行了匿名函数里面的内容）
}

回调函数

function add(){
        console.info("执行add函数");
    }
    /*两秒钟后再执行函数,add成为回调函数，命名回调,时间毫秒*/
    setTimeout(add,2000);
    
    a，b两个函数，a函数作为参数传递到B函数，并且被调用。把a函数当成回调函数；
    function a (num){
        return 2*num；
    }
    function b（j，af）{
        return j + af；
    }
    b（10 ， a（5））；

匿名回调函数

setTimeout（function（）{
        console.info("执行add函数");
    }，2000）；

---

二、函数实例

---

• 含义：主要用来操作浏览器，与浏览器进行对话；
• 主要功能：弹出新浏览器窗口的能力； 移动，关闭，更改浏览器窗口大小的能力；支持cookie；
• 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。

2.3windows操作方法：

2.3.1Window

open()方法：

var wi = window.open("new.html","我的窗口","width:400,height=400,top=600,left=100");
创建一个我的窗口：高度、宽度、原点在100，600的

close（）方法：

wi.close();

2.3.2Screen

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

2.3.3Location

/*通过js带向控制当前a标签的跳转*/
        window.location.href="new.html";

2.3.4History

/*使用forword前提是必须使用back 或go他才能记录之前页面是哪一个*/
        window.history.forward();
        
        function ba(){
        /*back默认返回上一级目录*/
       /* window.history.back();*/
        /*go可以返回多级目录，根据参数来定 -1表示上一级目录*/
        history.go(-1);
    }

2.3.5Navigator

document.writeln(window.navigator.language);    获取浏览器使用语言
    document.writeln(window.navigator.onLine);      获取浏览器是否在线
    document.writeln(window.navigator.appName);     获取浏览器中的APP名称
    document.writeln(window.navigator.appVersion);  获取浏览器中的APP版本；
    document.writeln：在窗口进行打印//不能最后执行；会覆盖所有内容；

2.3.6PopupAlert

alert（）；

confirm（）；  //确定、删除按钮，确定返回true、false；

var boo = confirm("你确定要删除吗");
    console.info(boo);

/*该方法返回一个字符串，未输入返回object*/
    var str = prompt("请输入你要操作的数据");
    console.info(typeof  str);
</script>

2.3.7Timing

定时器：setTimeout(add,2000);

• 1、简单语句可以放在字符串里面，到时候后自动转换为JS代码； setTimeOut（“alert（）”，2000）；
• 2、消除延时执行； clearTimeout（标识符）；
• 3、递归实现隔一段时间执行一次效果：【不能使用for循环，循环会产生闭包！！必须使用递归的方法；】

1回调函数进行间隔时间打印

function add(){
        console.info("执行add函数");
    }
    setTimeout(add,2000);

2匿名函数执行时间间隔打印

var time1 = setTimeout(function(){
        console.info(123)
    },3000);
    console.info(time1);
    
    【备注】此时，time1是一个系统分配的一个参数代表这个对象引用；

3简单的语句可以放在字符串里面。到时间后自动转换为js代码

var time = setTimeout("alert()",4000);

4消除延时执行：

clearTimeout(time);   //time是上一个中的变量；
【备注】类似方法：setInterval（"alert()",4000）
            clearInterval（time）;

通过递归方法设计倒计时

var i=10;
        var time;
        /*function test(){
            console.info(i);
            --i;
            if(i>0){
               time = setTimeout(test,1000);
            }else{
                clearTimeout(time);
            }

        }

        test(); //调用test方法；
    ==不能使用循环，循环无法消除等待时间，直接执行完；造成闭包问题；==

通过匿名函数实现倒计时

time = setInterval(function(){
            console.info(i);
            --i;
            if(i<=0){
                clearInterval(time);
            }
        },1000);

2.3.8Cookies

---

3、事件

---

3.1创建事件：我们可以在事件发生时执行 JavaScript；

事件的例子：

• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

创建方式

动态绑定事件

<div id="div1" onclick="ck()"></div>
在div中建立静态的事件： 
ck()看成是字符串，只有点击了div才会触发事件，将字符串转换为js代码【（）在这里必须加，在动态中不要加；加上代表立即执行】
 function ck(obj){
            alert(obj);
        }

功能：当点击h1的时候触发事件执行js语句ck（）；

传统指派方法

var odiv = document.getElementById("div1");
        /*ck()表示调用函数，立即执行*/
        odiv.onclick = ck;

事件流：操作有个元素的时候页面上不止一个事件在触发

• 事件流执行顺序有冒泡和捕获两种方式：
• 执行顺序默认为冒泡排序，从小到大【div-body-html-docment-window】；
• 还有一种捕获排序：从大到小；
• 冒泡排序修改为捕获排序：在监听器后面增加形参true；false为冒泡浏览器
• IE默认为冒泡，只支持冒泡；标准DOM（火狐、谷歌）冒泡和捕获都支持；
• 现代指派：addEventListener用于绑定事件，现在指派事件，第一个参数为事件类型，第二个为参数事件执行的行为，第三个为控制排序方式（true为捕获，false为冒泡）；【标准DOM程序才支持这个程序；】 IE下的现代指派为attachEvent；

现代指派方法：

odiv.addEventListener("click",function(){
            alert('div');
        },true);

event

每次只要有事件触发都会产生一个event对象。当事件结束，event对象消失

• event：代表当前事件的状态。

<div id="div1" onclick="ck(event)" ondblclick="ck(event)"></div>
    
    function ck(e){
        console.info(e.type);
        console.info(e.clientX);
    }

事件信息

console.info(e.type)
        console.info(e.clientX);
        console.info(e.clientY);

鼠标事件：实现拖拽和查看是否有文档存在；

• 鼠标进来：onmouseover
• 鼠标移出：onmouseout
• 鼠标点下去：onmousedown
• 鼠标抬起：onmouseup；

onmouseover="ck(event)"
            onmouseout="ck(event)"
            onmousedown="ck(event)"
            onmouseup="ck(event)"

在窗口内

ondblclick="ck(event)"

键盘事件：

onkeydown
onkeyup
onkeypress：按压键盘；
获得键盘码：e.keyCode；

Html事件：

onchange事件；在下拉框中经常用； 获取改变的状态；

<body>
<select name="" id="sel">
    <option value="china">中国</option>
    <option value="usa">美国</option>
</select>

<script>
    var osel = document.getElementById("sel");
    osel.onchange = function(){
        console.info(osel.value);
    }
</script>
</body>

onfocus：获取到光标，触发事件； 经常用到验证里面；

<input type="text" id="inp"/>
<script>

    /*获取到光标，触发事件*/
    var oinp = document.getElementById("inp");
    oinp.onfocus = function(){
        this.style.backgroundColor="red";
    }
</script>

onblur：失去光标，

<input type="text" id="inp"/>
<script>

    /*获取到光标，触发事件*/
    var oinp = document.getElementById("inp");
     oinp.onblur = function(){
        if(this.value == ""){
            alert("验证失败");
        }else{
            alert("验证成功");
        }
    }
</script>

onload： 加载完页面之后再执行代码； 放在head的js代码中（通常js代码放在body最后）； 同类：尾类选择器：实现focus鼠标已过去变色； 提交按钮： <input type ="submit"/ >

<script>
        /*当页面加载完成后再执行js代码*/
        window.onload = function(){
            var oinpt1 = document.getElementById("inp");
            console.info(oinpt1);
        }

    </script>
</head>
<body>

事件中的返回值

事件的返回值：

<body>
//在form中 action  增加跳转的链接；
//onsubmit ：返回false就阻止提交，返回true则正常提交；
<form action="demo01_test.html" onsubmit="return sub();" onreset="re();">   
    <input type="text" id="inp"/>
    <input type="submit"/>
    <input type="button"/>
    <input type="reset"/>
</form>

<script>

    /*事件的返回值，返回false就阻止提交，true提交内容*/
    function sub(){
        var oinp = document.getElementById("inp");
        if(oinp.value=="" || oinp==null){
            return false;
        }
        return true;
    }

    function re(){
        alert();
    }
</script>