Javascript进阶篇——(函数)笔记整理
这节是根据慕课网和JavaScript DOM编程艺术一书加起来做的笔记
什么是函数
如果需要多次使用同一段代码,可以把它们封装成一个函数。函数(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);
......//只需要调用函数就可以
定义函数
定义函数语法
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>
函数调用
函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。
第一种情况:在<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>
有参数的函数
其实,定义函数还可以如下格式:
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>
返回值的函数
函数不仅能够(以参数的形式)接收数据,还能够返回数据。我们完全可以创建一个函数并让它返回一个值、一个字符串、一个数组或是一个布尔值。这是需要用到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>

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进阶篇——(数组)笔记整理
什么是数组数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. <script type="text/javascript"& ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--函数
1.什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; alert(s ...
- 5、JavaScript进阶篇②——函数、事件、内置对象
一.函数 1. 什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; a ...
- #笔记#JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...
- 慕课网JavaScript入门篇课程笔记
1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...
- 4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
- JavaScript进阶知识点——函数和对象详解
JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...
- JavaScript进阶篇 - -第1章 系好安全带
第1章 系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
随机推荐
- hbase权威指南学习笔记--过滤器
1.使用hbase是shell客户端进行过滤查询 scan 'testtable',{COLUMNS=>'colfam1:col-0',FILTER=>RowFilter.new(Comp ...
- 【转载】ADO.NET与ORM的比较(3):Linq to SQL实现CRUD
[转载]ADO.NET与ORM的比较(3):Linq to SQL实现CRUD 说明:个人感觉在Java领域大型开发都离不了ORM的身影,所谓的SSH就是Spring+Struts+Hibernate ...
- MagicalRecord(简化CoreData操作)
1.新建项目不勾选coredata 2.pod 'MagicalRecord' 3.新建模型文件 4.添加实体和属性 5.Create NSManagedObject subclass 6.增 Per ...
- Python3.5入门学习记录-File
在Python中,操作文件对象使用open函数来创建,下表列出了常用的操作file的函数: 序号 方法及描述 1.file.close() 关闭文件.关闭后文件不能再进行读写操作. 2.file.fl ...
- Struts2中有关struts-default.xml,struts.xml,struts.properties文件详解
1) struts-default.xml 这个文件是struts2框架默认加载的配置文件.它定义struts2一些核心的bean和拦截器. <?xml version="1.0&qu ...
- MySQL 常用字段类型,介绍及其建表使用方法经验分享
由于工作的公司没有专业的DBA又经常需要建立各种各种的表来满足自己的业务逻辑,所以经常查看MySQL 手册或者谷歌查看相关资料,所以本人就根据我的工作经验和相关资料来介绍一下MySQL各种字段类型及其 ...
- JSON 传值 textarea中虚拟换行功能
遇到错误的袭击, 错误出现,使用jquery中ajax进行查询数据时执行完以后,需要把数据封装成为JSON类型的数据,并传递到前台去的时候出现Invalid JSON 错误,经查找后发现是在使用tex ...
- ThinkPHP框架一
1.1 框架的概念 框架其实就是可重用代码的集合,框架的代码是框架架构的代码,不是业务逻辑代码,框架代码保护类.方法.函数等等,框架代码按照一定的规则组合起来就形成了框架. 1.2 不使用框架开发的时 ...
- makefile 单独编译一个文件
#!/sh/bin .SUFFIXES:.c.o CDIR = /Users/shelley/c BINDIR = $(CDIR)/bin CC = gcc CFLAGS = -g -O RM = r ...
- Ecstore 2.0 报表显示空白
INSERT INTO `sdb_ectools_analysis` (`id`, `service`, `interval`, `modify`) VALUES (, ), (, ), (, ); ...