09JavaScript函数

2019-01-15 07:02:35来源：博客园阅读 ()

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

实例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例1</title>
<script>
function myFunction()
{
    alert("Hello World!");
}
</script>
</head>
 
<body>
<button onclick="myFunction()">点我</button>
</body>
</html>

效果：通过点击按钮“点我”，会弹出"Hello World!"的提示框！

1.JavaScript 基本函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

注：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

2.调用带参数的函数

在调用函数时，我们可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
//代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

实例：

 1 <!DOCTYPE html>
 2 <html>    
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>Yubaba</title> 
 6 </head>
 7 <body>
 8 
 9 <p>点击这个按钮，来调用带参数的函数。</p>
10 <button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
11 <script>
12 function myFunction(name,job){
13     alert("Welcome " + name + ", the " + job);
14 }
15 </script>
16 
17 </body>
18 </html>

函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息：

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title> 
 6 </head>
 7 <body>
 8 
 9 <p>请点击其中的一个按钮，来调用带参数的函数。</p>
10 <button onclick="myFunction('Harry Potter','Wizard')">点击按钮1</button>
11 <button onclick="myFunction('Bob','Builder')">点击按钮2</button>
12 <script>
13 function myFunction(name,job)
14 {
15     alert("Welcome " + name + ", the " + job);
16 }
17 </script>
18 
19 </body>
20 </html>

上面的函数点击按钮1会弹出Welcome Harry Potter,Wizard。

上面的函数点击按钮2会弹出Welcome Bob，Builder。

3.带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
    var x=5;
    return x;
}

上面的函数会返回值 5。

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>Yubaba</title> 
 6 </head>
 7 <body>
 8 
 9 <p>本例调用的函数会执行一个计算，然后返回结果：</p>
10 <p id="demo"></p>
11 <script>
12 function myFunction(a,b){
13     return a*b;
14 }
15 document.getElementById("demo").innerHTML=myFunction(5,3);
16 </script>
17 
18 </body>
19 </html>

输出的结果是15.

如果仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：

1 //如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和
2 function myFunction(a,b)
3 {
4     if (a>b)
5     {
6         return;
7     }
8     x=a+b
9 }

4.局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

我们可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

5.全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

6.JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

原文链接:https://www.cnblogs.com/lmyupupblogs/p/10266772.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：小程序组件 Component

下一篇：我的第一个上线小程序，三篇其三

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签