HTML中关于函数的调用

目录

前言

一、关于函数的定义

二、函数的调用

三、示例（点击函数）

总结

---

前言

不管是在前端页面的设计中，还是后端的编程中，函数都是实现功能非常重要的一环，函数实质上是一个类似于单独的逻辑单元的JavaScript代码，使用函数可以使代码更为简洁，提供重用性，在JavaScript中，大约有95以上的代码是包含在函数中的，由此可见，函数在JavaScript中地位相当重要。

现在，让我们一起来具体了解一下函数，相信在看完本文后，你对函数会有一个更加全面的认识。

一、关于函数的定义

在JavaScript中函数是由关键字function、函数名加一组参数以及置于大括号中的需要执行的一段代码定义的。定义函数的基本语法如下：

function 函数名([参数1，参数2，....]){
    语句
    [return 返回值]
}

参数说明：

函数名：必选，用于执行函数名，在同一个页面中函数名必须是唯一的，并且区分大小写

参数：可选，用于指定参数列表。当使用多个参数时，参数间使用逗号进行分隔。一个函数最多可以有255各参数（不过我想信大部分场景用不到这么多参数的）。

语句：必选，是函数体，用于实现函数功能的语句。

返回值：可选，用于返回函数值。返回值可以是任意的表达式、变量或常量。

而参数又有形参和实参两种：

形参：一个特殊的变量，只能在函数内部使用，函数调用的时候，值由实参确定。

实参：给形参进行赋值，按照从左到右的顺序依次赋值。

二、函数的调用

函数的调用方法其实并不单一，不仅可以在html文件的scrip标签中定义，然后直接进行调用，也可以写在一个函数文件中，在head标签中引入该文件，然后进行调用。而对于标签来说，在创建的时候就可以通过href来调用函数。

例如：

<a href="" onclick="fun()">我是a标签</a>
<a href="javascript:fun()">我是a标签</a>
<a id='fun' >我是a标签</a>

三、示例（点击函数）

首先我们创建一个按钮，在定义时我们就给他一个onclick函数，即在点击此按钮时，会调用show函数，如下：

<div id="d2"><button onclick="show()">点击一下</button> </div>

然后，我们在head中的scrip标签中定义show函数：

function show() {
 alert("hello world");
}

 最后来看演示结果：

总结

只要涉及到编程，函数可以说是无处不在，没有它，我们的界面只是一副没有灵魂的空壳，由此可见函数的重要性。

其实关于函数的知识其实非常繁多，而且非常复杂，这里只是针对函数的概念和几个要素进行了简单的介绍，希望大家可以由简入繁，对于函数知识的掌握更上一层楼。