JavaScript 基础教程JavaScript 简介JavaScript 用法JavaScript 输出JavaScript 语法JavaScript 语句JavaScript 注释JavaScript 变量JavaScript 数据类型JavaScript 对象JavaScript 函数JavaScript 作用域JavaScript 事件JavaScript 字符串JavaScript 运算符JavaScript 比较和逻辑运算符JavaScript if...else 语句JavaScript switch 语句JavaScript for 循环JavaScript while 循环JavaScript break 和 continue 语句JavaScript typeof, null, undefinedJavaScript 类型转换JavaScript 正则表达式JavaScript 错误throw try catchJavaScript 调试JavaScript 变量提升JavaScript 严格模式 (use strict)JavaScript 使用误区JavaScript 表单JavaScript 表单验证JavaScript 验证 APIJavaScript 保留关键字JavaScript JSONjavascript :void(0) 含义JavaScript 代码规范JavaScript 函数定义JavaScript 函数参数JavaScript 函数调用JavaScript 闭包JavaScript HTML DOMJavaScript DOM- 改变 HTMLJavaScript DOM - 改变 CSSJavaScript HTML DOM 事件JavaScript DOM EventListenerJavaScript DOM 元素(节点)JavaScript 对象类型JavaScript Number 对象JavaScript 字符串(String)对象JavaScript Date 对象JavaScript Array 对象JavaScript Boolean 对象JavaScript Math 对象JavaScript RegExp 对象JavaScript window 对象JavaScript window.screen 对象JavaScript window.location 对象JavaScript window.history 对象JavaScript window.navigator 对象JavaScript 弹窗JavaScript 计时事件JavaScript CookieJS中的if和switch该如何选择?JS优化多分支结构JS中的while和for循环该如何选择?JS优化循环结构JS输出杨辉三角JS定义字符串(3种方式)JS获取字符串长度JS字符串拼接/连接(3种方式)JS字符串查找(6种方法)JS截取字符串JS字符串替换replace()JS字符串大写小写转换JS字符串比较大小JS字符串和数组之间的转换JS给字符串添加HTML标签JS去除字符串前后空格JS Unicode编码和解码JS Base64编码和解码JS在接收表单数据时过滤特殊字符JS自定义编码和解码方案

JavaScript 函数

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

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


JavaScript 函数语法

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

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

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

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

注意

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


调用带参数的函数

调用函数时,可以向其传递值,这些值被称为参数

参数可以在函数中使用

我们可以传递任意多的参数,由逗号 (,) 分隔

myFunction( argument1,argument2 )

声明函数时,请把参数作为变量来声明

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

变量和参数必须以一致的顺序出现

第一个变量就是第一个被传递的参数的给定的值,以此类推

<p>点击这个按钮,来调用带参数的函数</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

上面代码中定义的函数在按钮被点击时会提示 "Welcome Harry Potter, the Wizard"

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

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>

点击的不同的按钮,上面范例会弹出 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"


带有返回值的函数

如果希望函数将值返回调用它的地方,可以使用 return 语句实现

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

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

上面的函数会返回值 5

整个 JavaScript 并不会停止执行,仅仅是函数
JavaScript 将继续执行代码,从调用函数的地方

函数调用将被返回值取代

var myVar=myFunction();

myVar 变量的值是 5,也就是函数 "myFunction()" 所返回的值

即使不把它保存为变量,我们也可以使用返回值

document.getElementById("demo").innerHTML=myFunction();

"demo" 元素的 innerHTML 将成为 5,也就是函数 "myFunction()" 所返回的值

我们也可以使返回值基于传递到函数中的参数

计算两个数字的乘积,并返回结果

function myFunction(a,b)
{
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

"demo" 元素将显示 "12"

如果仅仅希望退出函数时 ,也可使用 return 语句

此时返回值是可选的

function myFunction(a,b)
{
    if (a>b)
    {
        return;
    }
    x=a+b
}

如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和


局部 JavaScript 变量

在 JavaScript 函数内部声明的变量 ( 使用 var ) 是 局部 变量

局部变量只能在函数内部访问它,也就是说变量的作用域是局部的

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

函数运行完毕,本地变量就会被删除


全局 JavaScript 变量

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


JavaScript 变量的生存期

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

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

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


向未声明的 JavaScript 变量分配值

如果把值赋给尚未声明的变量,该变量将被自动作为全局变量声明

这条语句

carname="Volvo";

将声明一个全局变量 carname,即使它在函数内执行

链接: https://fly63.com/course/7_477