现在说说什么是函数。
函数的作用可以写一次代码，然后反复的重用这个代码。如：我们要完成多组数和
的功能。
var sum;
sum=3+2;
alert(sum);

sum=7+8;
alert(sum);
...//不停重复两行代码

如果要实现8组数的和，就需要16行代码，实现的越多，代码行也就越多。所以我们
可以把完成特定功能的代码块放到一个函数里面去，直接调用这个函数，就省去重
复输入大量代码的麻烦。
使用函数完成：
function add2(a,b){
sum=a+b;
alert(sum);
}//只需要调用函数就可以
如何定义一个函数呢？看看下面的格式：
function 函数名()
{
函数体；
}
function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完
成特定功能的代码。
我们完成对两个数求和并显示结果的功能，并给函数起一个有意义的名字:"add2"
代码如下：
<script type="text/javascript">
function add2(){
sum=3+2;
alert(sum);
}
add2();
</script>
函数定义好后，是不能自动执行的，需要调用它，直接在需要的位置写函数名。
第一种情况在<script>标签内调用。
<script type="text/javascript">
function add2()
{
sum=1+1;
alert(sum);
}
add2();//调用函数，直接写函数名。
</script>
第二种情况：在html文件中调用，如通过点击按钮后调用定义好的函数。
<html>
<head>
<script type="text/javascript">
function add2()
{
sum=5+6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">
//按钮，onclick点击事件，直接写函数名
</form>
</body>
</html>
注意：鼠标事件后面会说的。
上面说的add2()函数不能实现任意指定两数相加。其实，定义函数还可以如下格式：
function 函数名(参数1，参数2)
{
函数代码
}
注意：参数可以多个，根据需要增减参数个数，参数之间用（逗号，）隔开
按照这个格式，函数实现任意两个数的和应该写成：
function add2(x,y)
{
sum=x+y;
document.write(sum);
}
x和y则是函数的两个参数，调用函数的时候，我们可以通过这两个参数把两个实际
的加数传递给函数了。例如，add2(3,4)会求3+4的和，add2(60,20)则会求60和20的
和。
写了很久了，发现要输出结果总是用documen.write，如果想对函数的结果进行处理
怎么办呢？
我们只要把document.write(sum)改成如下代码：
function add2(x,y)
{
sum=x+y;
return sum;//返回函数值，return后面的值叫做返回值。
}
还可以通过变量存储调用函数的返回值，代码如下：
result=add2(3,4);//语句执行后，result变量中的值为7.
注意：函数中参数和返回值不只是数字，还可以是字符串等其他类型。
下面是一个编程练习：
使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。
代码如下：
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数</title>
<script type="text/javascript">
function thant(x,y){
if(x>y){
return x;
}
else if(x<y){
return y;
}
}
var biger=thant(5,4);
//函数体，判断两个整数比较的三种情况
//调用函数，实现下面两组数中，返回较大值。
document.write(" 5 和 4 的较大值是:"+biger+"<br>");
var biger=thant(6,3);
document.write(" 6 和 3 的较大值是:" +biger);
</script>
</head>
<body>
</body>
</html>
接着我们来说说JavaScript创建动态页面。事件是可以被JavaScript侦测到的行为。
网页中的每个元素都可以产生某些可以出发JavaScript函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击(onclick)事件
需要浏览器做出处理，返回给用户一个结果。
主要事件表：
事件 说明
onclick 鼠标单击事件
onmouseover 鼠标经过事件
onmouseout 鼠标移开事件
onchange 文本框内容改变事件
onselect 文本框内容被选中事件
onfocus 光标聚集
onblur 光标离开
onload 网页导入
onunload 关闭网页
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick
事件调用的程序块就会被执行，通常与按钮一起使用。
比如我们单击按钮时，出发onclick事件，并调用两个数和的函数add2()。代码如下：
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为："+sum);
}
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()"/>
</form>
</body>
</html>
注意：在网页中，如使用事件，就在该元素中设置事件属性。
鼠标经过事件(onmouseover)
鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行
onmouseover事件调用的程序。
现实鼠标经过"确定"按钮时，触发onmouseover事件，调用函数info()，弹出消息框
代码如下：
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onmouseout</title>
<script type="text/javascript">
function info(){
confirm("请输入姓名后，再单击确定！");}
</script>
</head>
<body>
<form>
密码:<input name="password" type="text">
<input name="button" type="button" value="确定" onmouseover="info()">
<!-- 当鼠标经过确定按钮式触发onmouseover="info()" -->
</form>
</body>
</html>
既然有鼠标经过事件，肯定也有鼠标移开事件(onmouseout)
鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
当鼠标移动到"登录"按钮上，然后再移开时，触发onmouseout事件，调用函数message()
代码如下：
<!DOCTYPE HTML>
<head>
<mate http-equiv="Content-Type" content="text/html";charset="utf-8">
<title>onmouseout</title>
<script type="text/javascript">
function message(){
confirm("不要离开，只要输入密码，再单击登录就OK了！")
}
</script>
</head>
<body>
<form>
密码：<input name="password" type="text">
<input name="button" type="button" value="登录" onmouseout="message()">
<!-- 当移开"登录"按钮，触发onmouseout="message()" -->
</form>
</body>
</html>
当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
如下代码，当将光标移到文本框内时，即焦点在文本框内，触发onfocus事件，并调
用函数message()。
<!DOCUTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onfocus</title>
<script type="text/javascript">
function message(){
alert("请在此输入姓名！");
}
</script>
</head>
<body>
<form>
姓名：<input name="username" type="text" value="请输入姓名" onfocus="message()">
<!-- 当光标在文本框内时(即文本框得到焦点)，调用message()函数 -->
</form>
</body>
</html>

JavaScript进阶（四）的更多相关文章

  1. JavaScript进阶(四)js字符串转换成数字的三种方法

    js字符串转换成数字的三种方法 在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b. ...

  2. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  3. 网站开发进阶(四十四)input type="submit" 和"button"的区别

    网站开发进阶(四十四)input type="submit" 和"button"的区别   在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...

  4. mxgraph进阶(四)mxGraph再启程

    mxgraph进阶(四)mxGraph再启程 前言   小论文Constructing User Interaction Behaviors Net from System Log. (AICE 20 ...

  5. AngularJS进阶(四十)创建模块、服务

    AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...

  6. javascript进阶笔记(2)

    js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函 ...

  7. JavaScript进阶--慕课网学习笔记

                         JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...

  8. JavaScript进阶 - 第1章 系好安全带,准备启航

    第1章 系好安全带,准备启航 1-1让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂 ...

  9. JavaScript进阶之高阶函数篇

    JavaScript进阶之高阶函数篇 简介:欢迎大家来到woo爷说前端:今天给你们带来的是JavaScript进阶的知识,接下来的系列都是围绕着JavaScript进阶进行阐述:首先我们第一篇讲的是高 ...

  10. ＃笔记＃JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

随机推荐

  1. SQL Server 数据库定时自动备份

    原文:SQL Server 数据库定时自动备份 SQL Server 数据库定时自动备份——每天定时备份,保留前8天的备份 利用SQL Server代理新建作业来定期备份 1)在数据库库的[SQL S ...

  2. 如何在局域网安装Redmine（转贴）

    如何在局域网安装Redmine(转贴) 分类: Redmine2009-06-01 10:31 1740人阅读 评论(0) 收藏 举报 phpmyadmin项目管理railssubversion数据库 ...

  3. 自己动手实现Expression翻译器 – Part I

    伴随.Net3.5到来的Expression,围绕着它产生了各种各样有趣的技术与应用,Linq to object.Linq to sql.Linq to sqllite.Linq to Anythi ...

  4. Effective C++(12) 复制对象时要复制每一个成员

    问题聚焦: 负责拷贝的两个操作:拷贝构造函数和重载赋值操作符. 一句话总结,确保被拷贝对象的所有成员变量都做一份拷贝. Demo   void logCall(const std::string&am ...

  5. Web Api 图片上传，在使用 Task.ContinueWith 变量无法赋值问题

    细谈 Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题的解决办法!   在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找 ...

  6. hadoop集群的搭建与配置（2）

    对解压过后的文件进行从命名 把"/usr/hadoop"读权限分配给hadoop用户(非常重要) 配置完之后我们要创建一个tmp文件供以后的使用 然后对我们的hadoop进行配置文 ...

  7. 职责链模式实例（C#）

    下面是使用指责链模式的一个具体的实例,可以方便的理解指责链模式. 其实指责链简单的来说,就是把一个指责的流程定义出来,像一条链路一样,每一个结点有自己的处理范围,若不能处理,则传到自己的引用的下一个结 ...

  8. 初探performance.timing API

    初探performance.timing API   浏览器新提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端 ...

  9. memcached内存分配及回收初探

    对memcached(后面简称mc) 的内存分配及回收机制进行了深度分析和测试,以下是一些学习的心得,和大家共同探讨一下,期望能抛砖引玉 mc简介: mc是由LiveJournal技术团队开发的一套分 ...

  10. IIS配置PHP环境

    IIS配置PHP环境(快速最新版)(转载+自创) (参考转载的) 我们知道php配置有几种: 1.CGI方式加载PHP环境,通常就是IIS里面配置解释器为php.exe,早期比较常见,目前使用较少.  ...