js 函数:

概念:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

说白了就是响应用户操作所执行的代码,通过js事件触发,然后调用执行函数里代码的操作。
比如常见的用户点击事件,用户点击了按钮,如果这个按钮绑定了点击事件的话就会触发点击事件,触发了点击事件干什么呢,这时候就需要给这个点击事件绑定一个函数了,这样用户点击以后就可以触发函数,然后执行函数里面的操作。如:

<script>
function myFunction()
{
alert("Hello World!");
}
</script>
<button onclick="myFunction()">点击这里</button>

语法

用的时候直接 function funname(){} 需要记住的是 functionjs 关键字,注意只能是小写,在调用函数时会执行函数{}里的代码块。如:

<button class="btn" onclick="fun1()">点击</button>
<script>function fun1(){alert(num);alert(type);}
</script>

参数和变量

在调用函数的时候可以传递参数,在调用的函数里面多个参数用“,”分开。然后在定义函数的时候需要在小括号里将参数使用变量代替,这里需要注意的是变量的位置要和调用那里的参数一一对应,变量名可以随便写。

<button class="btn" onclick="fun1(index,type)">点击</button>  <script>function fun1(i,t){alert(i);alert(t);}</script> 

通过参数的传递可以使函数变得更灵活,比如有三个地方需要调用这个函数,每个调用的地方参数有不一样,这样也是没问题的。

<button class="btn" onclick="fun1("1")">点击</button>
<button class="btn" onclick="fun1("2",type)">点击</button>
<button class="btn" onclick="fun1("3")">点击</button>  <script>function fun1(i,t){type = type?"type":"";alert(num);alert(type);}</script>

扩展:

return
一个函数生来就是为了输出处理过的返回值的时候,需要将返回值抛出,这时候就需要return了,看例子:

<script>function fun1(i,t){type = type?"type":"";if(i ==1){return "ok"; }else{return "no";}}</script>

这里随便写了个函数,根据用户调用函数时传的参数进行判断,然后输出不同的值。

局部变量:
局部变量说白了就是函数内部定义的变量,这个变量的作用域只在这个函数内部(需要注意的是必须是通过var定义的变量),在函数外部访问变量的话是underfind。例子:

 <script>function fun1(i,t){var type1 = type?"type":"";if(i ==1){return "ok"; }else{return "no";}}alert(type1);</script>

这里一定会 alert(underfind)

© 著作权归作者所有

著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

转载于:https://www.cnblogs.com/wbg21521/p/6898944.html

前端小课堂 js:what is the function?相关推荐

  1. 两个相邻盒子的边框怎么只显示一个_【前端小课堂】0044 盒子

    这是一个面向零基础的前端教程,很简单,用零散时间就可以学习. 推荐早上读一下,晚上复习一下,如果可以奢侈一点,白天稍微练习一下下,总共花费 5~15 分钟.就酱! 已经好几次提到块(block)元素了 ...

  2. 前端小练习JS实现网页开灯和关灯

    思路:首先是获取开关灯按钮元素和body元素,然后写事件就是当用户点击关灯按钮后页面颜色由白色变为黑色,按钮的背景色变为白色,按钮由关灯字样变为开灯字样,然后再点击按钮,又由开灯变为关灯,页面背景色变 ...

  3. 【修真院WEB小课堂】定时器有哪些用法?

    这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [定时器有哪些用 ...

  4. 前端小项目(一)| 电影院座位预定(html,css,js)

    前端小项目(一)| 电影院座位预定 前言 开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...

  5. 【修真院web小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的?

    大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js(职业)任务八,深度思考中的知识点--angular js常用指令 ng-bl ...

  6. 前端小奈叽须知---js/jquery(目前分不清)

    jQuery 父级,祖先,兄弟,等选择性操作 - 芸芸众生! - 博客园jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").par ...

  7. python前端学习之js

    01-Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Ja ...

  8. 前端html继承的方式,好程序员web前端教程之JS继承实现方式解析

    好程序员 web 前端教程 之JS 继承实现方式解析 , JS 是 Web 前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应 JS 学习不易,各类知识点概念及应用常常让人抓耳挠腮 ...

  9. 前端知识点总结——JS高级(持续更新中)

    前端知识点总结--JS高级(持续更新中) 1.字符串 什么是: 连续存储多个字符的字符数组 相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...

最新文章

  1. python_2开发简单爬虫
  2. 分享10个实用的高效办公神器,极大地提高办公效率
  3. Echange配置企业邮件收发策略
  4. 解决MVN install一直处于下载jar包等待问题
  5. missforest_missforest最佳丢失数据插补算法
  6. Easyui动态加载后台数据的例子
  7. mysql更新数据库中int 1_Mysql数据库int(1)和tinyint(1)的区别扩展阅读
  8. English——视频总结(一)
  9. 2021中职网络空间安全国赛Web渗透测试
  10. 把统计代码改成“量子统计”了
  11. AcWing 4487. 最长连续子序列 单调栈上二分 数组模拟栈的好处
  12. 北大计算机论文答辩,自考同路人:在北大参加论文答辩的全过程
  13. 商业房间分隔器行业调研报告 - 市场现状分析与发展前景预测
  14. 日期:年月日的写法 / 倒计时写法 /获得date总的毫秒数方式date.valueOf()/date.getTime()/+new Date()/Date.now()/及多种写法案例
  15. python机器人编程教程入门_机器人操作系统(ROS)入门必备:机器人编程一学就会...
  16. F4 数组逆转 (10 分)
  17. 使用jdbc连接orcal数据库(完整教程)
  18. 2019年的SD-WAN:服务提供商的难题
  19. 初中生计算机专科学校,初中毕业可以直接上专科院校吗
  20. 数理逻辑——PC部分

热门文章

  1. java加密字符串,可解密
  2. python利用递归函数实现斐波那契数列_Python递归及斐波那契数列
  3. 修身论文2000字_软考论文怎么写
  4. python适配器模式角色_Python设计模式之适配器模式原理与用法详解
  5. 0xc000007b应用程序无法正常启动_应用程序无法正常启动0xc0000142
  6. 【微信小程序】token/session失效了该怎么跳转页面
  7. python使用json实现树结构_js怎样将获取json转换为树形结构
  8. android socket 服务,android 创建socket 通信型service
  9. 新手学java_新手如何学习Java
  10. php可以做门禁卡系统吗_PHP研发工程师入门篇:论PHP可以做什么?