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)"

键盘事件：

onkeydownonkeyuponkeypress：按压键盘；获得键盘码：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>