Javascript 函数

简介: Javascript 函数

函数的作用,可以写一次代码,然后反复地重用这个代码。

如:我们要完成多组数和的功能。


var sum;   
sum = 3+2;
alert(sum);
sum=7+8 ;
alert(sum); 
....  //不停重复两行代码


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

使用函数完成:


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


定义函数



如何定义一个函数呢?看看下面的格式:

function  函数名( )

{

函数体;

}


function定义函数的关键字,“函数名”你为函数取的名字,“函数体”替换为完成特定功能的代码。


我们完成对两个数求和并显示结果的功能。并给函数起个有意义的名字:“add2”,代码如下:


<script type="text/javascript">
  function add2(){
    sum = 3 + 2;
    alert(sum);
  }
 add2(); 
</script>


结果:

2466108-159ae32b18e67401.webp.jpg

函数调用



函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。

第一种情况:在<script>标签内调用。

<script type="text/javascript">
  function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//调用函数,直接写函数名。
</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>


注意:鼠标事件会在后面讲解。


有参数的函数



上节中add2()函数不能实现任意指定两数相加。其实,定义函数还可以如下格式:

function 函数名(参数1,参数2)

{

函数代码

}

注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开。


按照这个格式,函数实现任意两个数的和应该写成:

function add2(x,y)
{
   sum = x + y;
   document.write(sum);
}


x和y则是函数的两个参数,调用函数的时候,我们可通过这两个参数把两个实际的加数传递给函数了。


例如,add2(3,4)会求3+4的和,add2(60,20)则会求出60和20的和。


返回值的函数



思考:上一节函数中,通过"document.write"把结果输出来,如果想对函数的结果进行处理怎么办呢?


我们只要把"document.write(sum)"这行改成如下代码:

function add2(x,y)
{
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
}


还可以通过变量存储调用函数的返回值,代码如下:

result = add2(3,4);//语句执行后,result变量中的值为7。


注意:函数中参数和返回值不只是数字,还可以是字符串等其它类型。


目录
相关文章
|
22天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
36 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
21天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
3月前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
40 4
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
19 2
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
25 5
|
2月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
24 3
|
2月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
19 3