如何在HTML中调用JavaScript函数?

在HTML文档中有很多方法可以调用JavaScript函数,这也不是一件容易的事。首先,我们使用了最简单的方法之一来调用HTML文档中的JavaScript函数:

在这种方法中,我们将在HTML文档的头部创建并定义一个函数。要在html文档中调用此函数,我们必须创建一个简单的按钮,并使用onclick事件属性(它是事件处理程序)以及它,我们可以通过单击按钮来调用该函数。

为了更清楚地了解它,让我们看一下给定的程序:

程序

程序说明

在上述程序中,我们创建了一个简单的HTML文档。在HTML文档的开头部分,我们在脚本标签内定义了一个函数(例如myfunction();) 。

另一方面,在主体部分内,我们显示了一些文本并创建了一个按钮。为了调用我们的函数,我们使用了onclick属性和按钮,当用户单击该按钮时,我们的函数将执行并显示警告消息,如您在输出中看到的。

输出量

使用外部JavaScript文件调用函数

我们还可以使用附加到HTML文档的外部JavaScript文件来调用JavaScript函数。为此,首先我们必须创建一个JavaScript文件,并在其中定义函数并使用(.Js)扩展名保存。

创建JavaScript文件后,我们需要创建一个简单的HTML文档。要将我们的JavaScript文件包含在HTML文档中,我们必须使用script标签

让我们借助程序来了解它:

程序

程序说明

首先,在上述程序中,我们创建了一个JavaScript文件并定义了函数,并以.js扩展名保存了该文件。

Function.js

创建JavaScript文件后,我们创建了一个HTML文档,并使用。因为我们已经将HTML文档和JavaScript文件存储在同一文件夹中,所以我们只是将JavaScript文件命名为“ scr”属性,而不是在标头部分中提供完整路径。

在主体部分内,我们显示了一些文本并创建了一个按钮。为了调用我们的函数,我们使用了onclick属性和按钮,当用户单击该按钮时,我们的函数将执行并显示警告消息,如您在输出中看到的。

输出量

现在单击给定的按钮:

0

相关文章:Javascript Function.length JavaScript Function的length属性返回一个函数期望的参数数量。 访问length属性的语 […]...

JavaScript数学sinh() JavaScript Math.sinh() 函数返回数字的双曲正弦值。 在数学上等于(e x -e -x ) […]...

Javascript Object.values() JavaScript Object.values()方法以数组形式返回对象自身的可枚举属性值。 values( […]...

JavaScript符号 在本教程中,您将在示例的帮助下了解JavaScript Symbol。 JavaScript符号 JavaSc […]...

JavaScript Object defineProperty()方法 JavaScript Object.defineProperty()方法 Object.definePrope […]...

JavaScript Object preventExtensions()方法 JavaScript Reflect.preventExtensions()方法 使用静态Reflect.pr […]...

JavaScript Symbol match JavaScript Symbol.match属性 JavaScript Symbol.match用于标识正则 […]...

JavaScript WeakMap get()方法 JavaScript WeakMap get()方法 JavaScript WeakMap get()方法从W […]...

html中调用javascript函数,如何在HTML中调用JavaScript函数相关推荐

  1. django html直接调用的方法,如何在Django中使用AJAX从html正确调用函数/url?

    我试图在一个框的顶部显示一个用户名,在这个框中,用户可以在表单中输入他们的员工,而不必刷新页面.在 例如,他们输入他们的#,然后在他们点击/tab到下一个字段后,它会在顶部显示他们的名字,这个名字来自 ...

  2. html img调用js,html调用js变量 如何在html中输出js文件中的变量

    html页面代码中怎么调用js变量?html页面代码中怎么调用js变量,例如 在html代码中插入js代码: a=取浏览你把index1.js 中的onReady 去掉,把index1.js改成 fu ...

  3. excel调用python编程-如何在excel中调用python脚本

    如何在excel中调用python脚本 发布时间:2020-07-03 14:15:28 来源:亿速云 阅读:155 如何在excel中调用python脚本?针对这个问题,这篇文章详细介绍了相对应的分 ...

  4. thinkphp中如何使用PHP函数,如何在ThinkPHP中使用函数进行回调

    如何在ThinkPHP中使用函数进行回调 发布时间:2020-12-23 15:11:45 来源:亿速云 阅读:85 作者:Leah 本篇文章为大家展示了如何在ThinkPHP中使用函数进行回调,内容 ...

  5. java中求组快速排序函数,如何在Java中实现快速排序?

    成为专业认证的快速排序是一种分而治之的算法.在分治算法的设计范式中,我们先递归地将问题分解成子问题,然后再求解子问题,最后将求解结果进行组合得到最终结果.在本文中,我们将重点讨论Java中的快速排序本 ...

  6. php中glob怎么用,如何在php中利用glob函数对文件进行遍历

    如何在php中利用glob函数对文件进行遍历 发布时间:2020-12-11 16:02:47 来源:亿速云 阅读:76 作者:Leah 如何在php中利用glob函数对文件进行遍历?相信很多没有经验 ...

  7. android sqlite自定义函数,如何在SQLite中创建用户定义的函数?

    SQLite不像Oracle或MS SQL Server那样支持用户定义的功能.对于SQLite,必须使用C / C ++创建一个回调函数,并使用sqlite3_create_function调用将该 ...

  8. python如何创建函数对列表里的元素进行分类_zip()函数如何在python中遍历多个列表?...

    在对列表的元素进行找寻时,会频繁的说到遍历的理念.对于复杂的遍历要求,如多个列表中查找就显然不适合用for循环.本篇所要带来的是zip() 函数的方法,能够对多个迭代器进行遍历.下面我们就python ...

  9. html页面调用ico图标,如何在HTML中使用图标字体 - icon font?

    日期:2012-8-27  来源:GBin1.com 在线演示  本地下载 主要特性 使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小 自由的修改颜色 添加阴影 ...

  10. 选下拉框的的值对应上传相应的图片_excel表格下拉菜单调用对应数据,如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据?...

    如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据? 选中这几列 打开菜单"数据"-"筛选"-"自动筛选"就是了. 另 ...

最新文章

  1. linux at shell,shell 用at命令来计划执行作业
  2. Android进程间通信(IPC)机制Binder简要介绍和学习计划
  3. 内存分配器ptmalloc,jemalloc,tcmalloc调研与对比
  4. mysql 触发器条件判断偶尔失效_mysql┃多个角度说明sql优化,让你吊打面试官!...
  5. TTS Service Extended (进程:com.google.tts)意外停止 恢复被阉割的TTS文字转语音功能
  6. CF995A Tesla
  7. 前端js-angluar定时刷新器
  8. (转)《C++ Qt 编程视频教程》(C++ Qt Programming)[MP4]
  9. 百度识图API教程一:使用百度api识别物体
  10. UVM设置超时退出timeout
  11. easyboot-code-generate 自动生成代码
  12. mysql删除表数据及其关联数据_MYSQL中delete删除多表数据与删除关联数据
  13. WLC5508 HA ( AP SSO)
  14. Kubernetes系列(一)基于CentOS8部署Kubernetes1.19集群
  15. 手机屏幕按键测试软件,涨见识了——手机居然能作为维修检测工具来用!
  16. SyntaxError: Missing parentheses in call to ‘print‘. Did you mean print(e)?
  17. python 自动化运维——实战 (一)
  18. 新唐单片机选型手册_新唐8051标准系列单片机选型指南
  19. CNN的Python实现——第五章:梯度下降法的最优化方法
  20. SQL存储过程(MySQL)

热门文章

  1. winHex创建指定大小二进制文件.bin(数据为全0或全FF或自己填充)并带winHex软件下载包
  2. 实现一个HTTP服务器的Demo
  3. 51test-day1【ofo测试第一天】
  4. 罗技g402鼠标宏设置教程
  5. SQL语句 常用语句
  6. 区块链技术指南之分布式的一致性
  7. 【测试开发】软件测试——测试用例设计测试分类详解
  8. TCP/IP---ping命令
  9. python格式化代码快捷键_推荐一个小而美的Python代码格式化工具
  10. springboot集成quzytz(简单易使用复制即可)