函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
事件所简单一点就是你想做一件什么事情,比如你肚子饿了,要吃饭,那你肚子饿就是驱动(事件),触发了要吃饭的代码块(函数)。
这里先讲一个单击事件onclick
,所谓单击事件即你用鼠标点击它,就可以触发某一代码块的功能,先记着它,后面说怎么用的。
函数的语法
function add()
{
// 执行代码
}
如上,即为一个代码块, function
是JavaScript的函数关键字,有了它才能叫做函数,add
为函数名想要去什么名就取什么名,不过最好按照驼峰命名法或是其他的命名规则来命名,可以让别人一眼就看出这个函数是干什么的最好。
无参函数
所谓无参函数,就是不需要传入参数的函数(如果不知道什么是参数可以百度)。
<script>
function output() {
//循环十次
for (var i = 0; i < 10; i++) {
//在页面上打印出来
document.write("hello word<br/>")
}
}
//调用函数
output();
</script>
效果
如上即为一个简单的函数
除了document.write
的打印方式还有如下
alert("hello word!"); //弹出框显示
console.log("hello word!"); // 在浏览器控制台显示
在写项目是,经常的打印拿到的数据,及检测数据是否出错
有参函数
所谓有参函数即是有参数传入的函数
<script>
function output(n){
for (var i = 0; i < n; i++) {
document.write("hello word<br/>")
}
}
//调用方法并传入参数
output(5);
</script>
如上n
为参数,而在调用该函数时output(5);
将5
传到了n
那里,所有上面的代码有n
的都会被赋值成5
,所有for
循环也就循环了5
次
有参有返回值的函数
所谓有返回值,就是时在调用该函数后会有一个结果出来,就好比你去检查,就有一个检查的结果,这里有个关键字return
,用来返回结果的
<script>
function add(num1,num2){
return num1 + num2;
}
//传入参数后值返回用sun接收
var sun = add(20,34);
//将值打印出来
document.write(sun);
</script>
如上函数,当传入参数后进行相加的操作num1 + num2
,也就是20+34
,然后通过return
关键字饭后,给函数调用者add(20,34)
,可以定义一个变量来接收返回的值。
如上就是函数的几种形式,但是一般前端不会这样用,前端是将函数和HTML元素绑定成一个事件,或者用函数来处理某些数据等等,反正就是不会简单的打印,不过基本的形式就和上面差不多。
对于HTML元素与单击事件的绑定有两种,一种是内联,一种是外联
<body>
<button onclick="add()">内联</button>
<button id="id1">外联</button>
</body>
<script>
function add() {
//弹出个提示框
alert("内联")
}
window.onload = function () {
//获取id名为id1的HTML元素
var ad = document.getElementById("id1");
//绑定单击事件
ad.onclick = function () {
alert("外联");
}
}
</script>
如上通过onclick="add()"
来调用函数,是先绑定了单击事件onclick
当有鼠标点击该HTML元素是,它会调用到add()函数来处理点击后的动作。
如上只用到id
的就是外联,window.onload
是当整个页面加载完成后,才会加载该函数,以保证document.getElementById
能拿到id
为id1
的HTML元素,拿到该HTML元素后,绑定单击事件,用来触发函数。
如上的种方式都可以是用,可以混合使用也可以单独使用,总之那个便于后期代码的维护那还是外联,不过内联可以让你很快的定位到调用了哪一个函数。