JavaScript 函数
JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
function myFunction(p1, p2) { return p1 * p2; // 该函数返回 p1 和 p2 的乘积 }
JavaScript 函数语法
JavaScript 函数通过 function
关键词进行定义,其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
圆括号可包括由逗号分隔的参数:
(参数 1, 参数 2, ...)
由函数执行的代码被放置在花括号中:{}
function name(参数 1, 参数 2, 参数 3) { 要执行的代码 }
函数参数(Function parameters)是在函数定义中所列的名称。
函数参数(Function arguments)是当调用函数时由函数接收的真实的值。
在函数中,参数是局部变量。
在其他编程语言中,函数近似程序(Procedure)或子程序(Subroutine)。
函数调用
函数中的代码将在其他代码调用该函数时执行:
- 当事件发生时(当用户点击按钮时)
- 当 JavaScript 代码调用时
- 自动的(自调用)
函数返回
当 JavaScript 到达 return
语句,函数将停止执行。
如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者:
实例
计算两个数的乘积,并返回结果:
var x = myFunction(7, 8); // 调用函数,返回值被赋值给 x function myFunction(a, b) { return a * b; // 函数返回 a 和 b 的乘积 }
为何使用函数?
您能够对代码进行复用:只要定义一次代码,就可以多次使用它。
您能够多次向同一函数传递不同的参数,以产生不同的结果。
实例
把华氏度转换为摄氏度:
function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32); } document.getElementById("demo").innerHTML = toCelsius(77);
() 运算符调用函数
使用上面的例子,toCelsius
引用的是函数对象,而 toCelsius()
引用的是函数结果。
实例
访问没有 () 的函数将返回函数定义:
function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32); } document.getElementById("demo").innerHTML = toCelsius;
用作变量值的函数
函数的使用方法与变量一致,在所有类型的公式、赋值和计算中。
实例
使用变量来存储函数的值:
var x = toCelsius(77); var text = "The temperature is " + x + " Celsius";
您能够把函数当做变量值直接使用:
var text = "The temperature is " + toCelsius(77) + " Celsius";
局部变量
在 JavaScript 函数中声明的变量,会成为函数的局部变量。
局部变量只能在函数内访问。
实例
// 此处的代码不能使用 carName function myFunction() { var carName = "Volvo"; // 此处的代码可以使用 carName } // 此处的代码不能使用 carName
由于局部变量只能被其函数识别,因此可以在不同函数中使用相同名称的变量。
局部变量在函数开始时创建,在函数完成时被删除。
JavaScript 对象
真实生活中的对象、属性和方法
在真实生活中,汽车是一个对象。
汽车有诸如车重和颜色等属性,也有诸如启动和停止的方法:
所有汽车都拥有同样的属性,但属性值因车而异。
所有汽车都拥有相同的方法,但是方法会在不同时间被执行。
JavaScript 对象
您之前已经学到,JavaScript 变量是数据值的容器。
这段代码把一个单一值(porsche)赋给名为 car 的变量:
var car = "porsche";
对象也是变量。但是对象包含很多值。
这段代码把多个值(porsche, 911, white)赋给名为 car 的变量:
var car = {type:"porsche", model:"911", color:"white"};
值以名称:值对的方式来书写(名称和值由冒号分隔)。
JavaScript 对象是被命名值的容器。
对象属性
(JavaScript 对象中的)名称:值对被称为属性。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
对象方法
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。
方法是作为属性来存储的函数。
实例
var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : function() { return this.firstName + " " + this.lastName; } };
this 关键词
在函数定义中,this
引用该函数的“拥有者”。
在上面的例子中,this
指的是“拥有” fullName 函数的 person 对象。
换言之,this.firstName
的意思是 this 对象的
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
firstName 属性。
请在 JS this 关键词这一章学习更多有关 this 关键词的知识。
对象定义
我们定义(创建)了一个 JavaScript 对象:
实例
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
空格和折行都是允许的。对象定义可横跨多行:
实例
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" };
JavaScript 事件
HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时,JavaScript 能够“应对”这些事件。
HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子:
HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击
通常,当事件发生时,用户会希望做某件事。
JavaScript 允许您在事件被侦测到时执行代码。
通过 JavaScript 代码,HTML 允许您向 HTML 元素添加事件处理程序。
使用单引号:
<element event='一些 JavaScript'>
使用双引号:
<element event="一些 JavaScript">
在下面的例子中,onclick
属性(以及代码)被添加到 <button>
元素:
实例
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是?</button>
在上面的例子中,JavaScript 代码改变了 id="demo" 的元素的内容。
在接下来的例子中,代码(使用 this.innerHTML
)改变了其自身元素的内容:
实例
<button onclick="this.innerHTML=Date()">现在的时间是?</button>