JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】

2.1 JavaScript 自定义函数

2.1.1 函数的定义

• 函数就是为了完成程序中的某些特定功能而进行专门定义的一段程序代码

function 函数名 ( 形式参数 1, 形式参数 2,…, 形式参数 n){
  语句
}

使用 function 关键字。function 后是函数名，JavaScript 中的函数不必说明返回值的类型。

函数的命名规则与变量名的命名规则相同。

函数名后的 () 可以包含若干参数，也可以选择不带任何参数。

最后是一对 {}，包含具体实现程序中的某些特定功能的若干语句或脚本代码

2.1.2 函数的调用

实例：

//getArea(width,height) 函数定义语法略
   <h1> 宽度是：3，高度是：4 的长方形
    <script type="text/javascript">getArea(3,4);</script>
   </h1>

2.1.3 函数的参数

函数参数作用：调用函数时将数据传递给被调函数的方式

在函数被调用时，一个 arguments 对象就会被创建，它只能使用在函数体中，以数组的形式来管理函数的实际参数

2.1.4 函数的返回值

实现函数返回值的语句是 return
语法：

return 返回值 ;

2.1.5 匿名函数

匿名函数就是没有名字的函数，也被称为拉姆达函数，是一种使用 JavaScript 函数的强大方式
语法一：

（function （形式参数列表）{
   语句
 }）（实际参数列表）;

语法二：

var  变量 =（function （形式参数列表）{
   语句
} ）;
变量（实际参数列表）;

2.1.6 变量的作用域

如果全局变量和局部变量出现重名的情况，局部变量优先，即无论局部变量的值怎么改变，全局变量的值不会受到影响

2.2 JavaScript 系统函数

2.2.1 parseInt()函数

字符串	结果
“150cats”	150
“cats”	NaN
“6”	6
“-6”	-6
“6.56”	6

2.2.3 isNaN()函数

isNaN() 函数用于判断参数是否是NaN（不是数字）。如果是 NaN， 那么 isNaN 函数返回 true ，否则返回 false

字符串	结果
’134’	false
‘2a34’	true
‘2.34’	6
’ ’ (空格)	false
‘wh’	true

2.2.4 eval()函数

eval() 函数运行是以字符串形式表示的 JavaScript 代码串，并返回执行代码串后的结果

2.3 JavaScript事件

2.3.1 事件

JavaScript 是基于对象、采用事件驱动的脚本语言

• 事件：用户使用鼠标或键盘在浏览器窗口或页面元素上执行的操作
• 事件源：产生事件的元素
• 事件处理程序：对事件进行处理的程序或函数
• 事件驱动：将一段程序代码与某个事件源上发生的事件进行绑定，当触发此事件，浏览器就会自动执行与之绑定的程序代码

2.3.2 事件与处理程序的绑定

在JavaScript 中，有两种方式将对象事件与处理程序代码进行绑定

• 在事件源对象所对应的 HTML 页面标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码

可以使用匿名函数来简化，即事件名=function(){…}

2.4 JavaScript的常用事件

2.4.1 鼠标事件

onclick 事件：鼠标单击页面元素时触发的事件

onmouseover 事件和 onmouseout 事件：鼠标移入、移出页面元素时触发的事件

onmousemove 事件：鼠标指针移动时发生的事件

2.4.2 其他事件

onload 事件：页面加载完成后立即发生

onblur 事件：光标或者焦点离开元素后触发的事件

onchange事件：输入框的值发生了变化或者改变下拉列表框的选项时会触发的事件

2.4.3 表单事件

单击表单元素的“提交按钮”会触发form标签的 onsubmit 事件，浏览器对这个事件的默认处理方式是提交数据给 action 属性指定的页面进行处理