【JavaScript从入门到精通】第三课 初探JavaScript魅力-03
第三课 初探JavaScript魅力-03
函数传参
上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用。为了让函数的功能更加的丰富和实用，我们需要用到的就是函数传参。我们已经提过，JS将参数放在函数名后的圆括号内，而为了具体说明参数怎么使用，我们举一个小例子。
我们在HTML页面中放入一个有颜色的div块，并加入3个按钮，其目的是通过点击按钮来改变div块的颜色。通过前面两节课的学习，我们可以很轻松地写出下面的代码来实现这个功能：
效果如下：
可以看到，为了实现这一功能我们一共写了三个函数，作用分别是让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';
}
在这个小例子中，二者不存在任何区别。在平常的书写中，由于第一种比第二种更为简便，因此大多选用第一种写法。而第二种写法的好处是，[]内放置的是一个字符串（关于字符串的具体内容本课末会讲），而字符串可以通过变量来储存，也可以通过参数传递具体的值。因此，前一个案例里想通过参数改变样式名的目的便可以通过这种方法达成。 实现代码如下：
效果如下：
这样，无论想改变div的什么属性，都可以通过传递参数来实现了。
顺便一提，在JS里，任何使用.字符的地方，都可以用[]代替，例如document.getElementById('div1')可以修改为document['getElementById']('div1')，oDiv.style.[name]可以修改为oDiv['style'][name]，具体如何使用视实际情况而定。
字符串和变量——区别和关系
观察前面的代码，可以看到有很多使用""和''的地方，在JS里使用引号标注的就是字符串。变量和字符串之间有什么关联或者区别呢？
对于变量和参数来说，使用它们是不需要加引号的，而字符串则必须加上引号。 对于下面一个例子：
alert(abc);
【JavaScript从入门到精通】第三课 初探JavaScript魅力-03的更多相关文章
- 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
- 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01
第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...
- 【JavaScript从入门到精通】第一课
第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...
- 【JavaScript从入门到精通】第二课
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
- 【JavaScript从入门到精通】第三课
第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...
- 【JavaScript从入门到精通】第四课初探JavaScript魅力-04
第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...
- JavaScript从入门到精通(转)
JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...
- SaltStack 入门到精通第三篇：Salt-Minion配置文件详解
SaltStack 入门到精通第三篇:Salt-Minion配置文件详解 作者:ArlenJ 发布日期:2014-06-09 17:52:16 ##### 主要配置设置 ##### 配置 默认值 ...
- GPU 编程入门到精通（三）之 第一个 GPU 程序
博主因为工作其中的须要.開始学习 GPU 上面的编程,主要涉及到的是基于 GPU 的深度学习方面的知识,鉴于之前没有接触过 GPU 编程,因此在这里特地学习一下 GPU 上面的编程.有志同道合的小伙伴 ...
随机推荐
- JavaOO面向对象中的注意点（一）
1.JavaOO宗旨思想: ★万物皆对象,对象因关注而产生★ ☆类是对象的抽取,对象是类的实例☆ 2.JavaOO的三大特征: 封装.继承.多态 (第四大特征 抽象 现还有争议) 3.属性与行为: ...
- ZOJ 1610 Count the Colors 【线段树】
<题目链接> 题目大意: 在[0,8000]这个区间内,不断进行一些操作,将其中的一些区间染成特定颜色,如果区间重复的话,后面染的色块会覆盖前面染的色块,问最终[0,8000]这个区间内每 ...
- 基于Ardalis.GuardClauses守卫组件的拓展
在我们写程序的时候,经常会需要判断数据的是空值还是null值,基本上十个方法函数,八个要做这样的判断,因此我们很有必要拓展出来一个类来做监控,在这里我们使用一个简单地,可拓展的第三方组件:Ardali ...
- js的cookie和sesession详解
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- 使用openCV打开USB摄像头（UVC 小米micro接口）
之前在AndroidStudio上就用了别人用写的库成功地打开了USB摄像头. 于是我之后又在PC上尝试了一下,首先去淘宝买了个MICRO母转USB公的转接口,然后在Qt上配置了一下OPENCV后开始 ...
- [vscode] pylint在虚拟环境下错误告警问题
在左下角点击python, 选择对应的虚拟环境即可.
- hihocoder#1513 : 小Hi的烦恼 bitset
目录 题目链接 题解 代码 题目链接 hihocoder#1513 : 小Hi的烦恼 题解 cdq 套cdq 套cdq 套cdq就完了呀 对每一科开n个bitset 表示该科目前i个有谁 每次查询都& ...
- AGC 027D.Modulo Matrix(构造 黑白染色)
题目链接 \(Description\) 给定\(n\),要求构造一个\(n\times n\)的矩阵,矩阵内的元素两两不同,且任意相邻的两个元素\(x,y\),满足\(\max(x,y)\ \mat ...
- sql去除重复列（行）
1.存在两条完全相同的纪录 这是最简单的一种情况,用关键字distinct就可以去掉 例子: select distinct * from table(表名) where (条件) 2.存 ...
- 英语口语练习系列-C31-图书-谈论事物-白雪歌送武判官归京
book your favorite book a story in your childhood a character in film or TV 词汇 含义 备注 trend 趋势 indivi ...