整理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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
vue axios登录请求拦截器
Apr 02 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
javascript实现数字时钟效果
Feb 06 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
javascript onmouseout 解决办法
2010/07/17 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
python使用append合并两个数组的方法
2015/04/28 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
python用for循环求和的方法总结
2019/07/08 Python
超简单的Python HTTP服务
2019/07/22 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
如何理解Python中的变量
2020/06/01 Python
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
致铅球运动员广播稿精选
2014/01/12 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
学校标语大全
2014/06/19 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL