一、默认函数

JavaScript提供了一些默认的函数

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

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

求值函数eval()

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

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

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

1eval()函数

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

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

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

<script>

function show(obj)

{

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

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

}

</script>

<form name="Form" id="Form">

姓名:

<input name="name" type="text" value="韦小宝">

<input name="button" type="button" value="提交" onClick=show("name")>

</form>

2isNaN()函数

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

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

<script>

var x=15;

var y="黄雅玲";

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

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

</script>

3parseInt()函数

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

格式:parseInt(数值字串[,底数])

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

<script>

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>

4parseFloat()函数

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

格式:parseFloat(数值字串)

<script>

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

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

</script>

5、自定义函数

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

JavaScript函数定义

function 函数名(参数表,变元)

{

函数体;

return 表达式;

}

说明:

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

·函数由关键字function定义。

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

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

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

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

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

约定:

·函数名:易于识别(同变量命名规则)。

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

·函数位置:按逻辑顺序,集中置顶。

6、函数中的形式参数

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

<script>

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>

函数的调用

格式:函数名([参数[,参数...]])

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

<script>

function showName(name)

{

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

}

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

</script>

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

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

<script>

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>

<input type="button" value=“” onClick="change()">

</form>

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

<body>

<form>

请输入基本资料:<br>

姓名:

<input type="text" name="usr" size="8">

<input type="button" value="请单击"               onClick="alert('谢谢你的填写...')">

</form>

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

2、改变事件onChange

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

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

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

<form>

<input type="text" name="Test" value="Test"                 onChange="alert('内容即将改变!')">

</form>

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

3onChange事件

选中事件onSelect

当text或textarea对象中的文字被选中后(文字高亮显示),引发该事件。

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

<form>

<input type="text" name="Test" value="Test"             onSelect="alert('内容已被选中!')">

</form>

4、获得焦点事件onFocus

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

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

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

<input type="textarea" value="" name="valueField" onFocus="alert('已经获得焦点!')">

5、失去焦点onBlur

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

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

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

<body bgColor="lightgrey">

<form>

<input type="text"                        onFocus="document.bgColor='red'"           onBlur="document.bgColor='white'" >

</form>

</body>

6、载入文件onLoad

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

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

<script>

function show()

{

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

alert(str);

}

</script>

<body onload="show();">

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 onSubmit="alert('你确认提交吗?')">

<input type="text" name="txt" value="测试文本">

<input type="submit" value="提交">

</form>

补充:定时器

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

setTimeout():定时器

clearTimeout():终止定时器

setInterval():设置定时器

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

JavaScript的函数和事件(转)的更多相关文章

  1. javascript的函数、事件

    本文内容: 函数 函数的定义方式 函数的调用方式 函数的参数 匿名函数 函数中的this 事件 常见事件 绑定事件 首发日期:2018-05-11 函数: 函数的定义方式: 函数可以有参数,参数为局部 ...

  2. JavaScript 函数和事件

    上面例子中的 JavaScript 语句,会在页面加载时执行. 通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时. 如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用 ...

  3. JavaScript 频繁发射事件处理的优化 --- 函数节流/事件稀释

    引子:昨天面试时面试官问了如何实现一个固定导航栏,在我答完后面试官问我可能存在哪些问题,如何优化? 这个问题我答得不太好,但现在回想起来应该有两个问题: 1. 把 fixbar元素 position: ...

  4. JavaScript function函数种类

    本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通函数:介绍普通函数的特性:同名覆盖.arguments对象.默认返回值等. 2. 匿名函数:介绍匿名函数的特性:变量匿名函数.无名称匿名函数. ...

  5. 理解 JavaScript 回调函数并使用

    JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...

  6. javascript中函数的3个高级技巧

    × 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...

  7. Javascript并发模型和事件循环

    Javascript并发模型和事件循环 JavaScript的"并发模型"是基于事件循环的,这个并发模型有别于Java的多线程, javascript的并发是单线程的. Javas ...

  8. javascript工具函数

    第一部分 JavaScript工具函数 转义特殊字符为html实体   HtmlEncode: function(str){ return str.replace(/&/g, '&') ...

  9. javascript篇-----函数作用域,函数作用域链和声明提前

    在一些类似C语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的(也就是我们不能在代码段外直接访问代码段内声明的变量),我们称之为块级作用域,然而,不同于 ...

随机推荐

  1. ASP.NET Web API 控制器创建过程(二)

    ASP.NET Web API 控制器创建过程(二) 前言 本来这篇随笔应该是在上周就该写出来发布的,由于身体跟不上节奏感冒发烧有心无力,这种天气感冒发烧生不如死,也真正的体会到了什么叫病来如山倒,病 ...

  2. tabhost 下 setOnItemClickListener失效的问题

    分析了一下代码,应该是tabhost 的ontabchangedListener接管了下面应该由setOnItemClickListener接管的部分,导致不能相应setOnItemClickList ...

  3. Linux防火墙iptables简明教程

    前几天微魔部落再次遭受到个别别有用心的攻击者的攻击,顺便给自己充个电,复习了一下linux下常见的防火墙iptables的一些内容,但是无奈网上的很多教程都较为繁琐,本着简明化学习的目的,微魔为大家剔 ...

  4. 鼠标到哪tl到哪

    $(".navcon a").mouseover(function(){ var that = $(this), index = that.index(); that.addCla ...

  5. ORACLE 数据库总结

    1.表和数据恢复 1.从回收站里查询被删除的表 select object_name,original_name,partition_name,type,ts_name,createtime,drop ...

  6. GitHub NetFlow

    https://github.com/search?l=Java&p=1&q=netflow&ref=searchresults&type=Repositories&a ...

  7. JavaScript系统学习小结——变量、作用域和内存问题

    趁着写完小论文还未彻底消散的学习氛围,开始着重巩固自己JavaScript的基础知识,为秋招做最基本的准备. 变量:Js的变量可能保存两种不同数据类型的值:基本类型值和引用类型值. 基本类型包括:Un ...

  8. golang interface类型转string等其他类型

    inter 是interface类型,转化为string类型是: str := inter .(string) 转为其他类型也类似

  9. sql server 性能调优之 死锁排查

    一.概述 记得以前客户在使用软件时,有偶发出现死锁问题,因为发生的时间不确定,不好做问题的重现,当时解决问题有点棘手了.现总结下查看死锁的常用二种方式. 1.1 第一种是图形化监听: sqlserve ...

  10. 忘记时间戳的存在——Yii2超实用的自动更新时间戳的Behavior(改进版)

    本文改进了Yii2中内置行为类TimestampBehavior,使得时间戳字段(如created_at,updated_at) 完全自己更新,方便得让你忘记它们的存在. Yii2的内置行为类Time ...