第三课 初探JavaScript魅力-03

函数传参

上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用。为了让函数的功能更加的丰富和实用，我们需要用到的就是函数传参。我们已经提过，JS将参数放在函数名后的圆括号内，而为了具体说明参数怎么使用，我们举一个小例子。

我们在HTML页面中放入一个有颜色的div块，并加入3个按钮，其目的是通过点击按钮来改变div块的颜色。通过前面两节课的学习，我们可以很轻松地写出下面的代码来实现这个功能：

<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:200px; height:200px; background:red; } </style> <script> function toGreen() { var oDiv=document.getElementById('div1'); oDiv.style.background='green'; } function toYellow() { var oDiv=document.getElementById('div1'); oDiv.style.background='yellow'; } function toBlack() { var oDiv=document.getElementById('div1'); oDiv.style.background='black'; } </script> </head> <body> <input type="button" value="变绿" onclick="toGreen();" /> <input type="button" value="变黄" onclick="toYellow();" /> <input type="button" value="变黑" onclick="toBlack();" /> <div id="div1"> </div> </body> </html>
 

效果如下：

可以看到，为了实现这一功能我们一共写了三个函数，作用分别是让div块变绿、变黄、变红。这三个函数的结构几乎一模一样：通过getElementById获取到div1并赋值给oDiv，然后修改其background属性，唯一的区别是具体的颜色值不同。所以，有没有办法将这三个函数进行合并呢？自然是有的，方法就是我们这节课要讲的函数传参。

这里，我们先将前面讲函数的定义和调用那个例子拿过来。

function show()

{                       //定义

  alert("a");

}

show();            //调用

运行网页后会固定弹出内容为“a”的窗口。这样的功能是不是太简单了？如果我希望它弹出的内容是我给定的内容应该怎么做？答案便是使用参数。

参数的使用方法其实很简单，在这个例子里，我们在函数的()放入一个num，这个num类似于前面讲的变量，名字由编写者自定，并且函数定义的时候num自身的值是未知的。如何确定num的值呢？在调用函数的时候，在()内输入的值便是num的具体值。示例如下：

function show(num)

{

  alert(num);

}

show(12);

结果如下：

运行程序后，弹出来的窗口值变为了12。我们修改show()里的值，运行结果也会发生相应的变化。于是，我们就可以称num为函数show()的参数。这个例子我们可以看出，函数参数扮演的是占位符的角色，在定义的时候参数仅仅是占据一个位置而没有具体的值，其值在函数调用时才被传入。

值得注意的是，对于一个函数来说，它的参数是可以有很多个的，传入多个参数时，我们用逗号将参数隔开：

function show(a,b)

{

  alert(a+b);

}

show(5,12);

结果如下：

需要注意传入的值要和参数一一对应（a=5，b=12）。

现在我们就通过传参的方法将前面的代码进行合并。我们写一个统一的函数setColor，并传入一个color参数（用于决定将div修改为什么颜色），保留前面三个函数的主体部分，只将颜色具体的值修改为color，color具体的值则在button里调用setColor函数时再决定。 修改后的代码如下：

<html>

  <head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    <style>

      #div1{

        width:200px;

        height:200px;

        background:red;

      }

    </style>

    <script>

      function setColor(color){

        var oDiv=document.getElementById('div1');

        oDiv.style.background=color;

      }

    </script>

  </head>

  <body>

    <input type="button" value="变绿" onclick="setColor('green');" />

    <input type="button" value="变黄" onclick="setColor('yellow');" />

    <input type="button" value="变黑" onclick="setColor('black');" />

    <div id="div1">

    </div>

  </body>

</html>

传参的具体内容就是这些，但关于传参，很多初学者都会有这样的疑惑：我们如何判断一个函数是否应该使用参数传递呢？一个比较简单的判断方法是，当我们的函数如果存在一部分内容在定义时无法确定下来，就有使用参数传递的必要。

改变Div的任意样式

刚才的程序里的函数setColor，其作用只能修改div的背景颜色。假设我们想通过一个函数，来改变一个div的各种样式，例如宽，高，边框等，又应该如何对我们的函数进行修改呢？

很明显，想修改Div的任意样式，有两处是无法确定的，一个是具体的样式名(name)，一个是具体样式的值(value)，因此我们需要两个参数。如果按照我们前面所讲，那么JS函数的写法应该如下：

functionsetStyle(name,value)

{

  var oDiv=document.getElementById('div1');

  oDiv.style.name=value;

}

实际上，尝试一下就会发现，这个函数是无法正常运行的。原因出在这种写法下，浏览器并不会认为oDiv.style.name中的name和参数中的name是同一个东西，而会认为这是一个叫“name”的样式，当然css中并没有名为“name”的样式，因此无法执行。

为了解决这个问题，我们必须了解第二种操作属性方法。第一种操作属性的方法就是我们已经学过的使用.字符连接，我们之前所有案例都是通过这种方法来操作属性。而第二种操作属性的方法，是通过['属性名']的方法来进行操作。具体的使用方法如下：

function setText()

{

  var oTxt=document.getElementById.('txt1');

  //第一种操作属性的方法

  oTxt.value='dsfasdfasdf';

  //第二种操作属性的方法

  oTxt['value']='dsfasdfasdf';

}

在这个小例子中，二者不存在任何区别。在平常的书写中，由于第一种比第二种更为简便，因此大多选用第一种写法。而第二种写法的好处是，[]内放置的是一个字符串（关于字符串的具体内容本课末会讲），而字符串可以通过变量来储存，也可以通过参数传递具体的值。因此，前一个案例里想通过参数改变样式名的目的便可以通过这种方法达成。 实现代码如下：

<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:200px; height:200px; background:red; } </style> <script> function setStyle(name, value) { var oDiv=document.getElementById('div1'); oDiv.style[name]=value; } </script> </head> <body> <input type="button" value="变宽" onclick="setStyle('width', '400px')" /> <input type="button" value="变高" onclick="setStyle('height', '400px')" /> <input type="button" value="变绿" onclick="setStyle('background', 'green')" /> <div id="div1"> </div> </body> </html>

效果如下：

这样，无论想改变div的什么属性，都可以通过传递参数来实现了。

顺便一提，在JS里，任何使用.字符的地方，都可以用[]代替，例如document.getElementById('div1')可以修改为document['getElementById']('div1')，oDiv.style.[name]可以修改为oDiv['style'][name]，具体如何使用视实际情况而定。

字符串和变量——区别和关系

观察前面的代码，可以看到有很多使用""和''的地方，在JS里使用引号标注的就是字符串。变量和字符串之间有什么关联或者区别呢？

说到这里，再提及JS里面一个与变量相对的概念：字面量（常量）。对于字面量来说，其值是固定的，我们可以清楚地知道它是多少。数字，字符串都是字面量。相对来说，变量的具体值则是不确定的，如果单独看变量本身我们是无法确定其值为多少的。

对于变量和参数来说，使用它们是不需要加引号的，而字符串则必须加上引号。 对于下面一个例子：

alert(abc);

我们的本意是想将abc输出，但由于没有加引号，浏览器会认为abc是一个变量，又由于abc没有被定义过值，所以会出现abc没有被定义的报错。字符串和变量在我们以后的课程中会不断地应用到，大家慢慢就会熟悉他们之间的关系和区别。

【JavaScript从入门到精通】第三课的更多相关文章

  1. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  2. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  3. 【JavaScript从入门到精通】第一课

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  4. 【JavaScript从入门到精通】第二课

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  5. JavaScript从入门到精通(转)

    JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...

  6. SaltStack 入门到精通第三篇：Salt-Minion配置文件详解

    SaltStack 入门到精通第三篇:Salt-Minion配置文件详解 作者:ArlenJ  发布日期:2014-06-09 17:52:16   ##### 主要配置设置 ##### 配置 默认值 ...

  7. GPU 编程入门到精通（三）之 第一个 GPU 程序

    博主因为工作其中的须要.開始学习 GPU 上面的编程,主要涉及到的是基于 GPU 的深度学习方面的知识,鉴于之前没有接触过 GPU 编程,因此在这里特地学习一下 GPU 上面的编程.有志同道合的小伙伴 ...

  8. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  9. Hibernate从入门到精通（三）Hibernate配置文件

    在上次的博文Hibernate从入门到精通(二)Hibernate实例演示我们已经通过一个实例的演示对Hibernate的基本使用有了一个简单的认识,这里我们在此简单回顾一下Hibernate框架的使 ...

随机推荐

  1. BZOJ_3620_似乎在梦中见过的样子_KMP

    BZOJ_3620_似乎在梦中见过的样子_KMP Description “Madoka,不要相信 QB!”伴随着 Homura 的失望地喊叫,Madoka 与 QB 签订了契约. 这是 Modoka ...

  2. P4455 [CQOI2018]社交网络

    这个题仔细一看就是生成树计数,但是我这个记性是真的差,早就忘了.复习了一下高斯消元,然后这个题就是很裸的题了. ps:高斯消元解行列式的时候要取反. 题干: 题目背景 当今社会,在社交网络上看朋友的消 ...

  3. hdu1026(bfs+优先队列+打印路径)

    Ignatius and the Princess I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  4. poj 3311(DP + 状态压缩)

    Hie with the Pie Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5205   Accepted: 2790 ...

  5. 反编译Android的apk包得到源码（使用工具：dex2jar和jd-gui）

    1. 先从 http://download.csdn.net/detail/dingyuming1991/9618125 下载反编译工具dex2jar和jd-gui(当然也可以google搜索下载): ...

  6. Python机器学习算法 — 关联规则（Apriori、FP-growth）

    关联规则 -- 简介 关联规则挖掘是一种基于规则的机器学习算法,该算法可以在大数据库中发现感兴趣的关系.它的目的是利用一些度量指标来分辨数据库中存在的强规则.也即是说关联规则挖掘是用于知识发现,而非预 ...

  7. bzoj 3470: Freda’s Walk【拓扑排序+期望dp】

    dfs会T,只好正反两遍拓扑了-- #include<iostream> #include<cstdio> #include<queue> #include< ...

  8. bzoj 1898: [Zjoi2005]Swamp 沼泽鳄鱼【dp+矩阵快速幂】

    注意到周期234的lcm只有12,也就是以12为周期,可以走的状态是一样的 所以先预处理出这12个状态的转移矩阵,乘起来,然后矩阵快速幂优化转移k/12次,然后剩下的次数暴力转移即可 #include ...

  9. bzoj 1597: [Usaco2008 Mar]土地购买【斜率优化】

    按xy降序排序,把能被完全包含的去掉 然后就得到了x升序y降序的一个数组 然后方程就显然了:f[i]=min(f[j]+y[j+1]x[i]) 斜率优化转移 说起来我还不会斜率优化呢是不是该学一下了 ...

  10. 洛谷 P3625 [APIO2009]采油区域【枚举】

    参考:https://blog.csdn.net/FAreStorm/article/details/49200383 没有技术含量但是难想难写,枚举情况图详见参考blog懒得画了 bzoj蜜汁TTT ...