前端小课堂 js:what is the function?
js 函数:
概念:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
说白了就是响应用户操作所执行的代码,通过js事件触发,然后调用执行函数里代码的操作。
比如常见的用户点击事件,用户点击了按钮,如果这个按钮绑定了点击事件的话就会触发点击事件,触发了点击事件干什么呢,这时候就需要给这个点击事件绑定一个函数了,这样用户点击以后就可以触发函数,然后执行函数里面的操作。如:
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
<button onclick="myFunction()">点击这里</button>
语法
用的时候直接 function funname(){}
需要记住的是 function
是 js
关键字,注意只能是小写,在调用函数时会执行函数{}里的代码块。如:
<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?相关推荐
- 两个相邻盒子的边框怎么只显示一个_【前端小课堂】0044 盒子
这是一个面向零基础的前端教程,很简单,用零散时间就可以学习. 推荐早上读一下,晚上复习一下,如果可以奢侈一点,白天稍微练习一下下,总共花费 5~15 分钟.就酱! 已经好几次提到块(block)元素了 ...
- 前端小练习JS实现网页开灯和关灯
思路:首先是获取开关灯按钮元素和body元素,然后写事件就是当用户点击关灯按钮后页面颜色由白色变为黑色,按钮的背景色变为白色,按钮由关灯字样变为开灯字样,然后再点击按钮,又由开灯变为关灯,页面背景色变 ...
- 【修真院WEB小课堂】定时器有哪些用法?
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [定时器有哪些用 ...
- 前端小项目(一)| 电影院座位预定(html,css,js)
前端小项目(一)| 电影院座位预定 前言 开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...
- 【修真院web小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的?
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js(职业)任务八,深度思考中的知识点--angular js常用指令 ng-bl ...
- 前端小奈叽须知---js/jquery(目前分不清)
jQuery 父级,祖先,兄弟,等选择性操作 - 芸芸众生! - 博客园jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").par ...
- python前端学习之js
01-Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Ja ...
- 前端html继承的方式,好程序员web前端教程之JS继承实现方式解析
好程序员 web 前端教程 之JS 继承实现方式解析 , JS 是 Web 前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应 JS 学习不易,各类知识点概念及应用常常让人抓耳挠腮 ...
- 前端知识点总结——JS高级(持续更新中)
前端知识点总结--JS高级(持续更新中) 1.字符串 什么是: 连续存储多个字符的字符数组 相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
最新文章
- python_2开发简单爬虫
- 分享10个实用的高效办公神器,极大地提高办公效率
- Echange配置企业邮件收发策略
- 解决MVN install一直处于下载jar包等待问题
- missforest_missforest最佳丢失数据插补算法
- Easyui动态加载后台数据的例子
- mysql更新数据库中int 1_Mysql数据库int(1)和tinyint(1)的区别扩展阅读
- English——视频总结(一)
- 2021中职网络空间安全国赛Web渗透测试
- 把统计代码改成“量子统计”了
- AcWing 4487. 最长连续子序列 单调栈上二分 数组模拟栈的好处
- 北大计算机论文答辩,自考同路人:在北大参加论文答辩的全过程
- 商业房间分隔器行业调研报告 - 市场现状分析与发展前景预测
- 日期:年月日的写法 / 倒计时写法 /获得date总的毫秒数方式date.valueOf()/date.getTime()/+new Date()/Date.now()/及多种写法案例
- python机器人编程教程入门_机器人操作系统(ROS)入门必备:机器人编程一学就会...
- F4 数组逆转 (10 分)
- 使用jdbc连接orcal数据库(完整教程)
- 2019年的SD-WAN:服务提供商的难题
- 初中生计算机专科学校,初中毕业可以直接上专科院校吗
- 数理逻辑——PC部分
热门文章
- java加密字符串,可解密
- python利用递归函数实现斐波那契数列_Python递归及斐波那契数列
- 修身论文2000字_软考论文怎么写
- python适配器模式角色_Python设计模式之适配器模式原理与用法详解
- 0xc000007b应用程序无法正常启动_应用程序无法正常启动0xc0000142
- 【微信小程序】token/session失效了该怎么跳转页面
- python使用json实现树结构_js怎样将获取json转换为树形结构
- android socket 服务,android 创建socket 通信型service
- 新手学java_新手如何学习Java
- php可以做门禁卡系统吗_PHP研发工程师入门篇:论PHP可以做什么?