这节是根据慕课网和JavaScript DOM编程艺术一书加起来做的笔记

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

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

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

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

定义函数
定义函数语法

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

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

  1.  <script type="text/javascript">
  2.      function add2(){
  3.          sum = 3+2;
  4.          alert()sum;
  5.      }
  6.      add2();
  7.  </script>

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

  1.  <script type="text/javascript">
  2.      function add(){
  3.          sum = 1+1;
  4.          alert(sum);
  5.      }
  6.      add();//调用函数，直接写函数名。
  7.  </script>

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

  1.  <html>
  2.  <head>
  3.  <script type="text/javascript">
  4.      function add2(){
  5.          sum = 5 + 6;
  6.          alert(sum);
  7.      }
  8.  </script>
  9.  </head>
  10.  <body>
  11.  <form>
  12.      <input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件，直接写函数名
  13.  </form>
  14.  </body>
  15.  </html>

有参数的函数
其实，定义函数还可以如下格式：

  1.  function 函数名(参数1，参数2){
  2.  　　函数代码
  3.  }

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

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

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

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

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

  1.  function multiply(num1,num2){
  2.      var total = num1*num2;
  3.      return total;
  4.  }

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

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

例：下面这个函数只有一个参数（一个华氏温度值），它将返回一个数值（同一温度的摄氏温度值）：

  1.  <script type="text/javascript">
  2.      function convertToCelsius (temp) {
  3.          var result = temp - 32;
  4.          result = result / 1.8;
  5.          return result;
  6.      }
  7.      //函数的真正价值体现在，我们还可以把它们当做一种数据类型来使用，这意味着可以把一个函数的调用结果赋给一个变量：
  8.      var temp_fahrenheit = 95;
  9.      var temp_celsius = convertToCelsius(temp_fahrenheit);
  10.      alert(temp_celsius);
  11.  </script>
在这个例子里，变量temp_celsius的值将是35，这个数值由convertToCelsius函数返回。
 
 
 
在命名变量时，我用下划线来分隔各个单词；在命名函数时，我从第二个单词开始把每个单词的第一个字母写成大写形式（也就是驼峰命名法）。
 
 
 
 
变量的作用域
变量既可以是全局的，也可以是局部的。
全局变量（global variable）可以在脚本中的任何位置被引用。一旦你在某个脚本里声明了一个全局变量，就可以从这个脚本中的任何位置------包括函数内部------引用它。全局变量的作用域是整个脚本。
局部变量（local variable）只存在于声明它的那个函数的内部，在那个函数的外部是无法引用它的。局部变量的作用域仅限于某个特定的函数。
可以用var关键字明确地为函数变量设定作用域。
如果在某个函数中使用了var，那个变量就将被视为一个局部变量，它只存在于这个函数的上下文中；反之，如果没有使用var，那个变量就将被视为一个全局变量，如果脚本里已经存在一个与之同名的全局变量，这个函数就会改变那个全局变量值。
例子：
  1.  function square(num){
  2.      total = num*num;
  3.      return total;
  4.  }
  5.  var total = 50;
  6.  var number = square(20);
  7.  alert(total);

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

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

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

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

  1.  function square(num){
  2.      var total = num*num;
  3.      return total;
  4.  }
  5.  var total = 50;
  6.  var number = square(20);
  7.  alert(total);
  8.  </script>

正确结果

我是根据慕课网学习计划实际敲完代码，去找些资料，有些内容书上有更详细的解释，实际操作之后再去看书就能理解了。

Javascript进阶篇——(函数)笔记整理的更多相关文章

  1. Javascript进阶篇——(数组)笔记整理

    什么是数组数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. <script type="text/javascript"& ...

  2. 二、JavaScript语言--JS基础--JavaScript进阶篇--函数

    1.什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; alert(s ...

  3. 5、JavaScript进阶篇②——函数、事件、内置对象

    一.函数 1. 什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; a ...

  4. ＃笔记＃JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  5. 慕课网JavaScript入门篇课程笔记

    1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...

  6. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  7. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  8. JavaScript进阶篇 - -第1章 系好安全带

    第1章 系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", ...

  9. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

随机推荐

  1. CLR via C# - Char_String

    .NET中Char表示为16为的Unicode值,Char提供两个public const字段MinValue('\0',写成'\u0000'也是一样的)和MaxValue('\uffff'). Ch ...

  2. 学习AJAX（一）

  3. poj2243 bfs

    O - 上一个题的加强版 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:65536KB     6 ...

  4. (转) C/C++中结构体(struct)知识点强化

    本文转载于 http://pcedu.pconline.com.cn/empolder/gj/c/0503/567942_all.html#content_page_1 所有程序经过本人验证,部分程序 ...

  5. Nubiers to follow

    VGG Andrea Vedaldi Berkeley Trevor Darrell Jeff Donahue Ross Girshick Sergio Guadarrama Stanford And ...

  6. 详解一名合格PHP工程师应该具备的基本知识结构

    在学习php时的一些小沉淀,供童鞋们欣赏哈.. 1.掌握语言本身的语法,熟悉常用类库是必须的: 2.面向对象最为当今的主流也是必须掌握的: 3.常用设计模式必须掌握,设计模式是前辈的总结.经验: 4. ...

  7. JavaScript this 局部变量全局变量 作用域 作用域链 闭包

    从阮老师博客的一道测试题说起: 代码段一: var name = "The Window"; var object = { name : "My Object" ...

  8. checkbox 实现单选效果（html）

    note:在html <input> 标签类中的checkbox实现单选效果. 在最近的开发项目中,客户要求使用小方格子实现“单选”功能,显然圆点的radio被out了,只能选择chckb ...

  9. 图片ppm编码格式

    ppm图片有2种格式, ASCII格式和binary格式. (1)ppm头部分 由三部分组成,这三部分由回车或换行分割,但PPM的标准中是要求空格. 第一行通常是P3或P6,说明是PPM格式: 第二行 ...

  10. Happy 2004（快速幂+乘法逆元）

    Happy 2004 问题描述 : Consider a positive integer X,and let S be the sum of all positive integer divisor ...