html中怎么定义函数,JavaScript 函数的定义和使用
首先我们要搞清楚,JavaScript 中的函数是什么? 函数其实就是一段可以被执行或调用任意次数的 JavaScript 代码。
打个比方说,假设现在有十行代码,这十行代码我们有三个地方需要用到,那我们就需要重复写三次,这样不仅代码冗余,还增加了我们的工作量。使用函数就可以解决这个问题,我们将这十行代码放到一个定义好的函数中,要使用的时候只需要调用这个函数即可。
那接下来我们就来讲如何定义函数,和如何调用函数。
如何定义函数
我们先来看函数的语法,如下所示:
function fun_name(parameters){
// 要执行的代码块
}
其中 function 是 JavaScript 中专门用来定义函数的关键字,fun_name 是我们定义函数时自定义的函数名。函数名可以包含字母、数字、下划线和美元符号(规则与变量名类似)。
函数名后面接一对小括号 (),小括号中是参数列表(参数可以是零个或任意个),参数与参数之间使用逗号分隔。
小括号后面跟一对花括号 {},这个花括号里面的就是我们要执行的代码块。
我们知道了函数的语法,接下来让我们来尝试定义一个函数。
示例:
定义函数时需要用到 function 关键字,然后我们要给函数起一个名字,例如 show_name,因为是不带参函数,所以小括号 () 中没有参数,最后在花括号中编写要执行的代码块:
function show_name(){
console.log("你好,我是侠课岛");
}
上面的是不带参的函数,我们也可以定义带参的函数,例如定义一个求两个数之和的函数,函数带有两个参数:
function add_num(x, y){
console.log(x + y);
}
函数定义好后,我们需要清楚一个事情,就是此时函数体内的代码是不会自动执行的,所以就算现在我们执行上面的代码,也什么都不会输出。这样做有一个好处,就是我们只要不调用这个定义好的函数,就不会消耗时间和占用内存。那我们要如何调用函数呢?
函数调用
调用函数其实很简单,例如下面这个函数:
function show_name(){
console.log("你好,我是侠课岛");
}
如果我们我们想要调用这个函数,只需要函数名后面接一个小括号,即:
show_name();
这样我们再执行代码的时候,控制台就会输出“你好,我是侠课岛”的内容了。
这里需要注意一下的是带参函数的调用,在调用带参函数的时候,我们要在小括号中给参数赋值,例如:
function add_num(x, y){
console.log(x + y);
}
这个函数有两个参数x、y,在调用这个函数时,我们需要分别给 x 和 y 赋值,且要注意参数的顺序:
add_num(3, 6);
执行代码,控制台输出结果为9。
在HTML中绑定函数
这里我们再来讲一下,在 HTML 代码其实我们也可以用到函数,要怎么做呢,就是通过事件将定义好的函数绑定到 HTML 的标签上。
例如我们可以通过 onclick 点击事件来绑定一个函数, 这样 onclick 事件会在元素被点击时发生,同时触发绑定的函数。
示例:
点击按钮,使浏览器弹出一个弹出层,并输出指定内容:
JS_侠课岛(9xkd.com)
点击按钮
function show_name(){
alert("你好,我是侠课岛");
}
在浏览器中打开这个 HTML 文件,点击页面中的按钮,页面中会弹出一个弹出层,显示“你好,我是侠课岛”。你可以把这段代码放入一个 HTML 文件看下演示效果哟。
html中怎么定义函数,JavaScript 函数的定义和使用相关推荐
- .net中C#代码与javaScript函数的相互调用问题
.net中C#代码与javaScript函数的相互调用问题. 问: 1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript ...
- java调用javascript函数_使用Java程序中的参数调用Javascript函数
我有Java Swing应用程序.当用户点击MenuItem时,我想使用JavaScript在HTML页面上显示图形. Java代码: if(e.getActionCommand().equals(& ...
- html中js定义数组,javascript数组的定义及操作实例
数组是一组数据的集合,js中,数组里面的数据是可以 不同类型的 定义数组: 1.通过类实例化来创建数组 var alist01=new Array(1,2,3); 2.通过直接量的方式来创建数组 va ...
- JavaScript 函数的定义
一.关于函数 JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句. 比如我们有一个特定的功能需要三条语句实现 那么每次想实现这个功能的时 ...
- 盘点JavaScript函数的基本知识
本文旨在提供web开发人员必须了解的所有JavaScript函数的基本知识. 函数于软件开发者而言并不是什么奇幻世界.如果你的日常活动涉及到编码,哪怕是一点点,那么在一天结束的时候,你一定创建/修改了 ...
- 菜鸟教程 之 JavaScript 函数(function)
From:https://www.runoob.com/js/js-function-definition.html JavaScript 函数定义 JavaScript 使用关键字 function ...
- js执行oracle函数吗,执行javascript函数
JS--函数 JavaScript 函数语法 函数就是包裹在花括号中的代码块,前面使用了关键词 function: function 函数名([参数]){ 执行的代码: } 当调用该函数时,会执行函数 ...
- 在JavaScript函数中定义全局变量
是否可以在JavaScript函数中定义全局变量? 我想在其他函数中使用trailimage变量(在makeObj函数中声明). <html xmlns="http://www.w3. ...
- JavaScript中函数的三种定义方法
JavaScript中函数定义的三种方法. 函数的三种定义方法分别是:函数定义语句.函数直接量表达式和Function()构造函数的方法.下面依次介绍这几种方法具体怎么实现. 1. 函数定义语句 // ...
最新文章
- Linux网络编程中的几组类似功能的区别
- 一个Java程序员应该掌握的10项技能
- Java程序调用ssh, scp, sftp
- [iOS] UITextField隐藏软键盘心得(隐藏自身软键盘、点击Return自动转到下个文本框、轻触背景隐藏软键盘)...
- 【学习笔记】《数据挖掘:理论与算法》CH5 支持向量机
- Repeater 操作HeaderTemplat或FooterTemplat模板中控件
- 【TensorFlow官方文档】MNIST机器学习入门
- 网络版ATM项目的实现——客户端
- android 远程桌面 windows7,WIN7实现多用户远程桌面
- BZOJ 2708 [Violet 1]木偶 DP
- PyQt5的QAction多次响应triggered信号的处理方式
- (转)Maven仓库——私服介绍
- Okhttp之同步和异步请求简单分析
- 商业流程中的traversedpath
- nbu备份本机oracle,大话nbu九(nbu异机备份恢复oracle)
- 最强Redis实战学习笔记,没有之一!
- vue项目html5调取手机摄像头录像并上传
- 基于Java的俄罗斯方块游戏的设计与实现(含源文件)
- 【UE4】Bounds 详解
- Java 截取字符串
热门文章
- 身份证验证 校验码_用户身份验证最佳做法清单
- 【C++入门】文件流(fstream)介绍和使用
- 丢弃法(dropout)
- 空间计量 python_stata进行空间计量分析
- vue服务端渲染——基础
- QCOM camera架构
- Android帧动画特点,Android帧动画和补间动画看这篇足够了
- 争对让望对思野葛对山栀注解_笠翁对韵故事性理解与记忆之四支第四段不要着急成功...
- 基于JAVA早教课程管理系统计算机毕业设计源码+系统+数据库+lw文档+部署
- UE4虚幻引擎,编辑器基础应用,使用技巧(五)