JavaScript函数、对象及事件

JavaScript函数、对象及事件

---

• JavaScript函数是被设置为执行特定任务的代码块。
• JavaScript函数会在某代码调用它时被执行。

function myFunction(p1,p2){
	return p1 * p2;		//该函数返回p1和p2的乘积
}

JavaScript函数语法

• JavaScript函数通过function关键词进行定义，其后是函数名和括号（）。
• 函数名可以包含字母、下划线和美元符号（规则与变量名相同）。
• 圆括号可包括由逗号分隔的参数：

（参数1，参数2，……）

• 由函数执行代码被放置在花括号中{}

function name(参数1，参数2，……){
	要执行的代码
}

• 形参——是在函数定义中所列的名称。
• 实参——是当调用函数时由函数接受的真实的值。
• 在函数中，参数是局部变量。

函数调用

• 函数中的代码将在其他代码调用该函数时执行：
  • 当事件发生时（当用户点击按钮时）
  • 当JavaScript代码调用时
  • 自动的（自调用）

函数返回

• 当JavaScript到达return语句时，函数将停止执行。
• 如果函数被某条件语句调用，JavaScript将在调用语句之后“返回”执行代码。
• 函数通常会计算出返回值。这个返回值会返回给调用者：

var x = myFunction(4,3);	//调用函数，返回值被赋给x

function myFunction(a,b){
	return a * b;			//函数返回a和b的乘积
}

x的结果将是：56

为何使用函数

• 我们可以对代码进行重复使用：只要定义一次代码，就可以多次使用它。
• 我们能够多次向同一函数传递不同的参数，以产生不同的结果。

例子：把华氏度转换为摄氏度：

function toCelsius(fahrenheit){
	return (5/9) * (fahrenheit - 32);
}

document.getElementById("demo").innerHTML = toCelsius(77);		//toCelsius()引用的是函数的结果。
document.getElementById("demo1").innerHTML = toCelsius;		//toCelsius引用的是函数对象。
var text = "The temperauture is " + toCelsius(77) + "Celsius";

局部变量

• 在JavaScript函数中声明的变量，会称为函数的局部变量。
• 局部变量只能在函数内访问。
• 由于局部变量只能被函数识别，因此可以在不同函数中使用相同名称的变量。
• 局部变量在函数开始时创建，在函数完成时被删除。

---

JavaScript对象

• 对象也是变量，但对象包含很多值。
• 对象中的值以名称:值对来书写（名称和值由冒号分隔）。
• JavaScript对象是被命名值的容器。

对象属性

• 名称:值被称为属性。

对象方法

• 方法是在对象上执行的动作。
• 方法以函数定义被存储在属性中。

访问对象属性

• 我们有两种方式访问对象属性：
  • 对象名.属性名
  • 属性名["对象名"]

访问对象方法

• 对象名.方法名()
• 如果不使用（）访问方法，则将返回函数定义。

请不要把字符串、数值和布尔值声明为对象！

• 如果通过关键词“new”来声明JavaScript变量，则该变量会被创建为对象：

var x = new String();		//把x声明为String对象
var y = new Number();		//把y声明为Number对象
var z = new Boolean();		//把z声明为Boolean对象

• 请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

---

JavaScript事件

• HTML事件是发生在HTML元素上的“事情”。
• 当在HTML页面中使用JavaScript时，JavaScript能够“应对”这些事情。

HTML事件

• HTML事件可以是浏览器或用户做过的某些事情。
• 下面是HTML事件的一些例子：
  • HTML网页完成加载
  • HTML输入字段被修改
  • HTML按钮被点击
• 通常，当事件发生时，用户会希望做某些事情。
• JavaScript允许您在事件被侦测到时执行代码。

常见的HTML事件

事件	描述
onchange	HTML元素已被改变
onclick	用户点击了HTML元素
onmouseover	用户把鼠标移动到HTML元素上
onmouseout	用户把鼠标移开HTML元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

JavaScript能够做什么？

• 事件处理程序可用于处理，验证用户输入，用户动作和浏览器动作：
  • 每当页面加载时应该做的事情
  • 当页面被关闭时应该做的事情
  • 当用户点击按钮时应该被执行的动作
  • 当用户输入数据时应该被验证的内容
  • 等等
• 让JavaScript处理事件的不同方法有很多：
  • HTML事件属性可执行JavaScript代码
  • HTML事件属性能够调用JavaScript函数
  • 我们能够向HTML元素分配自己的事件处理函数
  • 我们能够阻止事件被发送或被处理
  • 等等