Javascript函数和事件

一、默认函数

JavaScript提供了一些默认的函数

编码函数escape()：将非字母、数字字符转换成ASCII码

译码函数unescape()：将ASCII码转换成字母、数字字符

求值函数eval()

数值判断函数isNaN()：判断一个值是否为非数值类型

整数转换函数parseInt()：将不同进制（二、八、十六进制）的数值转换成十进制整数

浮点数转换函数parseFloat()：将数值字串转换成浮点数

1、eval()函数

求值函数eval()的格式为：eval(<表达式>)

下面的例子将用eval函数得到一个文本框的值，

然后通过点击按钮弹出一个对话框将其输出。

function show(obj)

{

var str=eval("document.Form."+obj+".value");

alert(“你输入的姓名是:”+str);

}

</script>

姓名：

</form>

2、isNaN()函数

数值判断函数isNaN()的格式：isNaN(<量>)

下例中isNaN函数将判断变量是否不是数值，并输出判断结果。

var x=15;

var y="黄雅玲";

document.write("<LI>x不是数值吗？",isNaN(x));

document.write("<LI>y不是数值吗？",isNaN(y));

</script>

3、parseInt()函数

整数转换函数parseInt()的功能是将不同进制（二、八、十六）的数值转换成十进制整数。

格式：parseInt(数值字串[，底数])

下面演示了将一个二进制数和一个十六进制数转换成十进制数。

document.write("1101<sub>2</sub>=",parseInt("1101",2),"<sub>10</sub><br>");

document.write("BFFF<sub>16</sub>=",parseInt("BFFF",16),"<sub>10</sub><br>");

</script>

4、parseFloat()函数

parseFloat()是浮点数转换函数，它将数值字串转换成浮点数。

格式：parseFloat(数值字串)

document.write(parseInt("3.1234A56"),"<br>");

document.write(parseFloat("3.1234A56"),"<br>");

</script>

5、自定义函数

函数是独立于主程序的、具有特定功能的一段程序代码块。

JavaScript函数定义

function 函数名（参数表，变元）

{

函数体;

return 表达式;

}

说明：

·当调用函数时，所用变量或字面量均可作为变元传递。

·函数由关键字function定义。

·函数名：定义自己函数的名字。

·参数表，是传递给函数使用或操作的值，其值可以是常量、变量或其它表达式。

·通过指定函数名（实参）来调用一个函数。

·函数的返回值是可选项，如果需要返回值，就必须使用return语句将值返回。

·函数名对大小写是敏感的。

约定：

·函数名：易于识别（同变量命名规则）。

·程序代码：模块化设计。

·函数位置：按逻辑顺序，集中置顶。

6、函数中的形式参数

在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments.length来检查参数的个数。

function function_Name(exp1,exp2,exp3,exp4)

Number =function_Name.arguments.length;

if(Number>1)

document.wrile(exp2);

if(Number>2)

document.write(exp3);

if(Number>3)

document.write(exp4);

</script>

函数的调用

格式：函数名([参数[，参数...]])

下面的例子演示了没有返回值的函数的定义及调用。

function showName(name)

{

document.write("我是"+name);

}

showName("玲玲"); //函数调用

</script>

上例中的function showName(name)为函数定义，其中括号内的name是函数的形式参数，这一点与C语言是完全相同的，而showName(“玲玲”)则是对函数的调用，用于实现需要的功能。

下面的例子演示了带返回值的函数的定义及调用。

function showName(name)

{

str="我是" +name;

return str;

}

document.write(showName("周伯通"));

</script>

二、函数与事件

事件驱动及事件处理的基本概念

JavaScript是基于对象（Object-Based）的语言，这与Java不同，Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动（Event Driven）。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理的程序或函数，我们称之为事件处理程序（Event Handler）。

事件处理程序

浏览器响应某个事件，实现用户的交互操作而进行的处理（过程）。

事件处理程序的调用：浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理程序（函数），完成事件处理过程。

HTML标签属性：

格式：<tag on事件=“<语句组>|<函数名>”>

由于在JavaScript中对象事件的处理通常由函数（function）来完成，且其基本格式与函数一样，所以可以将前面所介绍的所有函数作为事件处理程序。

格式如下：

function 事件处理名（参数表）

{

事件处理语句集；

……

}

三、事件驱动

JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：

单击事件onClick

改变事件onChange

选中事件onSelect

获得焦点事件onFocus

失去焦点onBlur

载入文件onLoad

鼠标指示事件onMouseOver

提交事件onSubmit

1、单击事件onClick

当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生单击事件：

button（按钮对象）

checkbox（复选框）或（检查列表框）

radio（单选钮）

reset buttons（重要按钮）

submit buttons（提交按钮）

比如，可以通过下面的按钮激活change()函数，当然change()函数是需要另外提供的：

<form>

</form>

　　在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript的内部函数，还可以直接使用JavaScript的代码等。

<body>

<form>

请输入基本资料：<br>

姓名：

</form>

</body>点击“请单击”按钮后将引发onClick事件，即弹出“谢谢你的填写...”的对话框。

2、改变事件onChange

当一个text或textarea域失去焦点并更改值时触发onChange事件，当select下拉选项中的一个选项状态改变后也会引发该事件。

事件适用对象fileUpload、select、text、textarea。

下面的例子在文本框的内容改变后，将弹出一个显示“内容即将改变！”的对话框：

<form>

</form>

页面运行后在文本框中输入内容，即内容发生改变，然后将鼠标拖走，就会引发.

3、onChange事件

选中事件onSelect

当text或textarea对象中的文字被选中后（文字高亮显示），引发该事件。

下面的例子中，当文本框的内容被选中后，将弹出一个显示“内容已被选中!”的对话框：

<form>

</form>

4、获得焦点事件onFocus

当用户单击text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。

该事件适用对象：button，checkbox，fileUpload，layer，password，radio，reset，select，submit，text，textarea，window。

下面的例子中，当鼠标移到文本域的地方即获得焦点时，立刻弹出一个提示“已经获得焦点!”的对话框：

5、失去焦点onBlur

当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该事件，onBlur事件与onFocus事件是一个对应的关系。

该事件适用对象：button，checkbox，fileUpload，layer，password，radio，reset，select，submit，text，textarea，window。

下面的例子中，浏览器的起始背景色为“lightgrey”，当鼠标移到文本域的地方即获得焦点时，浏览器的背景色变为“red”，当鼠标焦点移动到浏览器的其他地方时，浏览器的背景色变为“white”。

<form>

</form>

</body>

6、载入文件onLoad

当文件载入时，产生该事件。onLoad的作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。

下面的代码在文档打开时，将弹出提示“建议浏览器的分辨率：800x600”的对话框。

function show()

{

var str="建议浏览器的分辨率：800x600";

alert(str);

}

</script>

7、鼠标指示事件onMouseOver

当鼠标指到相应的位置时引发的事件。

事件适用对象：layer，link。

下面的例子中，用href给“Click me”加上一个超链接，当鼠标指到超链接“Click me”时，将在状态栏提示“Click this if you dare!”。

<a href="http://www.myhome.com/"

onMouseOver="window.status='Click this if you dare!'; return true">

Click me

</a>

当鼠标指到文字“Click me”上时，将在状态栏显示提示文字“Click this if you dare!”

8、提交事件onSubmit

它是在点击提交按钮时引发的事件。

事件适用的对象：form

语法：onSubmit="handlerText"

下面的例子中，在点击“提交”按钮时，就会弹出一个“你确认提交吗?”的提示对话框。

</form>

补充：定时器

定时器是用以指定在一段特定的时间后执行某段程序。常用的定时器函数有以下几个：

setTimeout()：定时器

clearTimeout()：终止定时器

setInterval()：设置定时器

clearInterval()：取消使用setInterval()设置的定时器

Javascript函数和事件相关推荐

javascript函数与事件
Javascript函数创建与使用什么是函数对于我们学过java的同学,我们可以将函数理解成就是我们在java中的方法. 创建函数在ECMAScript中函数有以下几种创建方式第一种 func ...
JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】
全部章节 >>>> 本章目录 2.1 JavaScript 自定义函数 2.1.1 函数的定义 2.1.2 函数的调用 2.1.3 函数的参数 2.1.4 函数的返回值 2 ...
JavaScript函数调用方式：简单调用+在超链接中调用JavaScript函数+在事件中调用JavaScript函数
简单的调用 <html> <head> <meta http-equiv="Content-Type" content="text/html ...
5、JavaScript进阶篇②——函数、事件、内置对象
一.函数 1. 什么是函数函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum);sum=7+8 ; al ...
Web前端基础---JavaScript函数事件及其绑定DOM模型BOM模型
Day03 JavaScript JavaScript是一种属于网络的高级脚本语言,被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScri ...
javascript打飞机程序8x8x飞机大战js打飞机程序，飞机大战知识点包含了JavaScript面向过程的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...
js打飞机程序,飞机大战知识点包含了JavaScript面向过程的全部知识点,包括变量.运算符.判断.循环.数组.自定义函数.系统函数.事件等. 讲解了JavaScript编程语言制作游戏界面,添加游 ...
JavaScript交互式网页设计——函数与事件
<1>.函数的定义函数:为完成特定的功能而定义的一段程序代码函数的定义: function 函数名(参数列表){ 程序代码 } 1.JavaScript函数不必说明返回值类型,列表参数 ...
js onscroll android,JavaScript触发onScroll事件的函数节流详解
问题描述常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A.B.C.D,我们点击A,锚点跳转至A栏目,同时顶部的A按钮高亮:点击B,锚点跳转至B栏目,同时顶部的B按钮高亮:我们在M ...
Angular input控件的click事件表达式如何被转换成JavaScript函数
源代码: <button (click)="toggle($event)">隐藏/显示</button> 这个表达式toggle($event),如何被An ...

Javascript函数和事件

Javascript函数和事件相关推荐

最新文章

热门文章