整理Javascript函数学习笔记


Posted in Javascript onDecember 01, 2015

1、什么是函数
如果需要多次使用同一段代码,可以把它们封装成一个函数。函数(function)就是一组允许在你的代码里随时调用的语句。每个函数实际上是一个短小的脚本。
如:要完成多组数和的功能。

var sum;
sum = 3+2;
alear(sum);
 
sum = 7+8;
alear(sum);
......//不停的重复两行代码

如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省去重复输入大量代码的麻烦。使用函数完成:

function add(a,b){
  sum = a+b;//只需要写一次就可以
 };
 add2(3,2);
 add2(7,8);
 ......//只需要调用函数就可以

2、定义函数
定义函数语法

function 函数名(参数argument){
函数体statements;
 }
 //function定义函数的关键字,“函数名”你为函数取的名字,“函数体”替换为完成特定功能的代码。
function shout(){
   var beatles = Array("John","Paul","George","Ringo");
   for (var count = 0; count < beatles.length; count++){
     alert(beatles[count]);
   }
 }
 //这个函数里面的循环语句将依次弹出对话框来显示beatles里面内容。 
 shout();调用函数,执行脚本里的动作

完成对两个数求和并显示结果的功能:

<script type="text/javascript">
  function add2(){
    sum = 3+2;
    alert()sum;
   }
   add2();
 </script>

3、函数调用
函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。
第一种情况:在<script>标签内调用。

<script type="text/javascript">
   function add(){
     sum = 1+1;
     alert(sum);
  }
   add();//调用函数,直接写函数名。
</script>

第二种情况:在HTML文件中调用,如通过点击按钮后调用定义好的函数。

<html>
 <head>
 <script type="text/javascript">
   function add2(){
     sum = 5 + 6;
     alert(sum);
   }  
 </script>
 </head>
 <body>
 <form>
  <input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件,直接写函数名
 </form>
 </body>
 </html>

4、有参数的函数
其实,定义函数还可以如下格式:
function 函数名(参数1,参数2){
 

函数代码
 }
在定义函数时,你可以为它声明任意多个参数,只要用逗号把它们分隔开来就行。在函数内部,你可以像使用普通变量那样使用它的任何一个参数。
按照这个格式,函数实现任意两个数的和应该写成:

function add2(x,y){
   sum = x + y;
   document.write(sum);
 }
 //x和y则是函数的两个参数,调用函数的时候,我们可通过这两个参数把两个实际的加数传递给函数了。

实现如下功能:
定义函数实现三个数的和,函数名为add3。
计算5、8、3/7、1、4两组三个数的和。

<script type="text/JavaScript">
   function add3(x,y,z) {
   sum = x + y +z;
     document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");
   }
   add3(5,8,3);
   add3(7,1,4); 
 </script>

5、返回值的函数
函数不仅能够(以参数的形式)接收数据,还能够返回数据。我们完全可以创建一个函数并让它返回一个值、一个字符串、一个数组或是一个布尔值。这是需要用到return语句。

function multiply(num1,num2){
   var total = num1*num2;
   return total;
 }

之前通过"document.write"把结果输出来,现在使用函数输出
我们只要把"document.write(sum)"这行改成如下代码:

function add2(x,y){
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
 }
 //还可以通过变量存储调用函数的返回值:
 result = add2(3,4);//语句执行后,result变量中的值为7。

例:下面这个函数只有一个参数(一个华氏温度值),它将返回一个数值(同一温度的摄氏温度值):

<script type="text/javascript">
   function convertToCelsius (temp) {
     var result = temp - 32;
     result = result / 1.8;
     return result;
   }
   //函数的真正价值体现在,我们还可以把它们当做一种数据类型来使用,这意味着可以把一个函数的调用结果赋给一个变量:
   var temp_fahrenheit = 95;
   var temp_celsius = convertToCelsius(temp_fahrenheit);
   alert(temp_celsius);
 </script>

整理Javascript函数学习笔记

在这个例子里,变量temp_celsius的值将是35,这个数值由convertToCelsius函数返回。
在命名变量时,我用下划线来分隔各个单词;在命名函数时,我从第二个单词开始把每个单词的第一个字母写成大写形式(也就是驼峰命名法)。
 1)、变量的作用域
变量既可以是全局的,也可以是局部的。
全局变量(global variable)可以在脚本中的任何位置被引用。一旦你在某个脚本里声明了一个全局变量,就可以从这个脚本中的任何位置------包括函数内部------引用它。全局变量的作用域是整个脚本。
局部变量(local variable)只存在于声明它的那个函数的内部,在那个函数的外部是无法引用它的。局部变量的作用域仅限于某个特定的函数。
可以用var关键字明确地为函数变量设定作用域。
如果在某个函数中使用了var,那个变量就将被视为一个局部变量,它只存在于这个函数的上下文中;反之,如果没有使用var,那个变量就将被视为一个全局变量,如果脚本里已经存在一个与之同名的全局变量,这个函数就会改变那个全局变量值。
例子:

function square(num){
   total = num*num;
   return total;
 }
 var total = 50;
 var number = square(20);
alert(total);

这是错误的,number的值为400,但是这里alert弹出的是total的值,应该是50.

这些代码将不可避免地导致全局变量total的值发生变化。

全局变量total的值变成了400.我的本意是让square()函数只把它计算出来的平方值返回给变量number,但因为未把这个函数内部total变量明确地声明为局部变量,这个函数把名字同样是total的那个全局变量的值也改变了。

把这个函数写成如下的样子才是正确的:

function square(num){
   var total = num*num;
   return total;
 }
 var total = 50;
 var number = square(20);
 alert(total);
 </script>

正确结果:

整理Javascript函数学习笔记

以上就是关于Javascript函数的学习笔记,还涉及到了一些变量的知识点,希望对大家的学习有所帮助。

Javascript 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 #Javascript
js获取及判断键盘按键的方法
Dec 01 #Javascript
Eclipse引入jquery报错如何解决
Dec 01 #Javascript
JS验证邮件地址格式方法小结
Dec 01 #Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 #Javascript
常见JS验证脚本汇总
Dec 01 #Javascript
详解JavaScript函数
Dec 01 #Javascript
You might like
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
python实现实时监控文件的方法
2016/08/26 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
竞选学习委员演讲稿
2014/04/28 职场文书
会计求职信
2014/05/29 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
 Python 中 logging 模块使用详情
2022/03/03 Python