Mootools 1.2教程 函数

今天开始MooTools系列教程的第4讲。如果你还没有看过上一讲,请先查看上一篇教程《Mootools 1.2教程(3)——数组使用简介》。今天我们先不讲MooTools,而是讲一讲JavaScript中的函数(function)的基本知识。
但是,为了符合MooTools这个主题,你需要知道在哪里该使用MooTools的函数。此前,我们已经在我们的所有示例代码中,把代码都放在domready方法中。当我们需要把它放在domready的外面时,我们使用了函数(function)。在你在domready里面调用函数之前,函数并不会被执行。
一般来说,一种比较好的方式是尽可能地把你的函数代码都放在页面之外的某一个地方,然后通过JavaScript应用来调用它们。当你只是写代码玩玩,可能把所有的东西写在一个页面上更容易一些。在这个教程中,我们使用下面的约定:


代码如下:

<script type="text/javascript">
/*
* 函数定义写在这里
*/
window.addEvent('domready', function() {
/*
* 函数调用写在这里
*/
});
</script>

所有的例子都遵循这个格式,当页面载入的时候(load)执行函数代码。在每个函数的下面,都有一个相应的按钮,你可以点击它们,然后看到结果。这是通过使用MooTools的事件处理来完成的,明天我们将会讲到这个。
函数基础
在JavaScript中,有几种方式来定义函数,由于我们的主题是讲解MooTools,因此我们将选择MooTools的首选方式。下面的示例是一个函数定义的开始。我们什么了一个变量,并命名为simple_function,并吧这个变量定义为一个函数:
参考代码:
var simple_function = function(){
然后我们给这个函数增加了一个alert语句,当函数被调用的时候就会执行:
参考代码:
alert('This is a simple function');
最后,我们以一个花括号结束这个函数的定义:
参考代码:
}
这个关闭花括号看起来是一件非常简单的事情,但是很多时候要追踪这个问题却是一件很痛苦的事情。因此,适度地强迫对函数定义的关闭符号进行检查是个不错的主意。
在下面的例子中,我们把它们组合起来了。在声明这个函数之后,我们在页面加载后的domready事件里面添加了对这个函数的调用。可以点击例子下面的按钮查看调用函数simple_function();后的结果。
参考代码:


代码如下:

// 定义simple_function为一个函数
var simple_function = function(){
alert('This is a simple function');
}
window.addEvent('domready', function() {
// 当页面加载后调用simple_function
simple_function();
});

单个参数
虽然你有很多代码可以轻松地随时调用,这已经很有用了,但是如果你可以给它传递参数(信息)进行处理,这将会更有用。要在函数中使用参数,你需要在function后面的括号中添加一个变量,就像这样:
参考代码:


代码如下:

var name_of_function = function(name_of_the_parameter){
/* 函数代码写在这里 */
}

一旦你这样做了,在这个函数内部就可以使用这个变量了。尽管你可以给参数取任何你想要的名字,但是让参数名更有意义是个不错的选择。举个例子来说,如果你要传递一个小镇的名字,可能你把参数命名为town_name比其他更模糊的名字要好一些(比如user_input)。
在下面的例子中,我们定义了一个只带有一个参数的函数,并在弹出对话框中显示这个变量。请注意,信息的第一部分被单引号包含起来了,而参数没有。当你要把参数和硬编码的字符串连接在一起,你需要用加号(+)运算符把他们连接起来,就像下面一样:
参考代码:


代码如下:

var single_parameter_function = function(parameter){
alert('the parameter is : ' + parameter);
}
window.addEvent('domready', function(){
single_parameter_function('this is a parameter');
});

多个参数
JavaScript没有限制在一个函数中可以定义的参数的个数。一般来说,要让传给函数的参数个数尽可能地少,这会使代码更具可读性。函数中定义的多个参数使用逗号分割,其它行为这和单个参数函数一样。下面的示例中的函数带有两个数字,并把它们的和赋值给第三个数字,就像这样:
参考代码:
var third_number = first_number + second_number;
这里加号(+)运算符的使用和把这些结果连接成字符串略有一些不同:
参考代码:
alert(first_number + " plus " + second_number + " equals " + third_number);
虽然这个初一看起来可能有些混乱,但是实际上却非常简单。如果你在两个数字之间使用加号(+),你就是把它们加在一起。如果你在任意组合的数字和字符串之间使用加号(+),那么就是把所有的东西作为字符串连接起来。
参考代码:


代码如下:

var two_parameter_function = function(first_number, second_number){
// 取得first_number和second_number相加的和
var third_number = first_number + second_number;
// 显示结果
alert(first_number + " plus " + second_number + " equals " + third_number);
}
window.addEvent('domready', function(){
two_parameter_function(10, 5);
});

返回值
在一个弹出对话框中显示一个函数的执行结果可能很有用,但是有些时候你可能需要在其他地方用到这个结果。要完成这个任务,你需要使用函数中的return功能。下面的示例代码中,函数和上面的示例一样,不过这里不是弹出一个对话框,而是返回两个数字相加后的结果:
参考代码:
return third_number;
你会发现,我们也在domready中做了更多的事情。为了显示这个结果,我们把这个函数的返回值赋值给了一个名称为return_value的参数,然后把它显示在弹出对话框中。
参考代码:


代码如下:

var two_parameter_returning_function = function(first_number, second_number){
var third_number = first_number + second_number;
return third_number;
}
window.addEvent('domready', function(){
var return_value = two_parameter_returning_function(10, 5);
alert("return value is : " + return_value);
});

把函数作为参数
如果你看看MooTools的domready里面我们包装的东西,你会注意到我们把一个函数作为参数传递进去了:
参考代码:
window.addEvent('domready', function(){
/* 函数代码 */
});
一个像这样把函数作为一个参数传递进去的函数称为匿名函数:
参考代码:
function(){
/* 函数代码 */
}
在第一篇教程的评论中,Boomstix指出了在domready中不使用匿名函数的一种替代方式。这种方式就是这样的:
参考代码:
// 建立一个要在domready时调用的函数
var domready_function(){
/* 函数代码 */
}
// 把函数指定到domready事件
window.addEvent('domready', domready_function);
我不知道这两种方式在性能和功能性上的任何明显差别,因此我认为这基本上只是一个风格习惯而已。我们会继续坚持我们的方式,如果有任何人知道这些差别请告诉我们。
代码示例
为了刺激你明天的食欲(和弥补今天对MooTools的缺少),我写了一个没有什么意义的函数,可以让你随意改变这个页面的背景:
参考代码:


代码如下:

var changeColor = function(){
// 用来从输入框中获得颜色值
// (请参考:
// http://docs.mootools.net/Element/Element#Element:get)
var red = $('red').get('value');
var green = $('green').get('value');
var blue = $('blue').get('value');
// 确保每一个东西都是整数
// (请参考:
// http://docs.mootools.net/Native/Number#Number:toInt)
red = red.toInt();
green = green.toInt();
blue = blue.toInt();
// 确保每一个数字都在1到255之间
// 如果有需要则取整
// (请参考:
// http://docs.mootools.net/Native/Number#Number:limit)
red = red.limit(1, 255);
green = green.limit(1, 255);
blue = blue.limit(1, 255);
// 取得十六进制代码
// (请参考:
// http://docs.mootools.net/Native/Array/#Array:rgbToHex)
var color = [red, green, blue].rgbToHex();
// 设置为该页面的背景色
// (请参考:
// http://docs.mootools.net/Element/Element.Style#Element:setStyle)
$('body_wrap').setStyle('background', color);
}
var resetColor = function(){
// 重新设置页面的背景色为白色
// (请参考:
// http://docs.mootools.net/Element/Element.Style#Element:setStyle)
$('body_wrap').setStyle('background', '#fff');
}
window.addEvent('domready', function(){
// 为按钮添加点击事件(明天我们会讲这个)
// (请参考:
// http://docs.mootools.net/Element/Element.Event#Element:addEvent)
$('change').addEvent('click', changeColor);
$('reset').addEvent('click', resetColor);
});

延伸学习...

下载包含你学习所需要的所有东西的zip包

包含MooTools 1.2核心库、一个外部JavaScript文件、一个简单的html页面和一个css文件。

更多关于JavaScript函数的内容

JavaScript函数上的Quirksmode(怪异模式)

我没有很好的关于JavaScript函数的资源,如果有人知道的话请告诉我。

有关示例的文档

(0)

相关推荐

  • Mootools 1.2教程 函数

    今天开始MooTools系列教程的第4讲.如果你还没有看过上一讲,请先查看上一篇教程<Mootools 1.2教程(3)--数组使用简介>.今天我们先不讲MooTools,而是讲一讲JavaScript中的函数(function)的基本知识. 但是,为了符合MooTools这个主题,你需要知道在哪里该使用MooTools的函数.此前,我们已经在我们的所有示例代码中,把代码都放在domready方法中.当我们需要把它放在domready的外面时,我们使用了函数(function).在你在domr

  • Mootools 1.2教程 正则表达式

    如果你还不熟悉怎么使用正则表达式(regular expression(regex)),我强烈建议你花一定量的时间好好看一下这篇文章中的一些链接,尤其是文章结尾"更多学习"部分的链接.我们今天只是讲一讲正则表达式最基本的用法,正则表达式能做的远远超过我们今天所讲的内容. 基本用法 test()方法 它的简单在于,一个正则表达式可以是一个你想要匹配的简单字符串.尽管JavaScript本身已经为RegExp对象提供了它自己的test()方法,MooTools的test()方法更好用一些,

  • Mootools 1.2教程 事件处理

    今天我们开始第五讲,在上一讲(<Mootools 1.2教程(4)--函数>)中,我们学习了在MooTools 1.2中建立和使用函数的几种不同方式.下一步就是理解事件了.和选择器类似,事件也是建立互动界面的一个重要部分.一旦你掌握了一个元素,你需要去决定什么行为来触发什么效果.先把效果留着以后在讲,我们首先看一看中间步骤和一些常见的事件. 左键单击事件 左键单击事件是web开发中最常见的事件.超链接识别点击事件,然后把你带到另外一个URL地址.MooTools能够识别其他DOM元素上的点击事

  • Mootools 1.2教程(2) DOM选择器

    如果你还没有准备好,请先阅读上一篇<Mootools 1.2教程(1)--MooTools介绍>.我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本. 今天开始本系列教程的第2讲.在这一讲中,我们会学习几种选择HTML元素的方法.在许多方面,这是MooTools用得最多最基本的.毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中. 基本的方法 $(); $函数是MooTools中基本的选择器.你可以通过它来根据一个ID选择DOM元素.

  • Mootools 1.2教程 输入过滤第二部分(字符串)

    我们会在以后另外用一讲来将一下正则表达式的基本知识和在MooTools下的使用. 在开始之前,我想先花一点时间来看一下字符串函数是怎么调用的.在我的例子中,我是在字符串变量上面直接调用这个方法的,就像下面的这样: 参考代码: 复制代码 代码如下: var my_text_variable = "Heres some text"; // 结果 字符串变量 方法名 var result_of_function = my_text_variable.someStringFunction();

  • Mootools 1.2教程(21)——类(二)

    Fdream注:原文好像少了一部分,因此我自作主张地补充了下面这一段及BaseClass的代码. 在今天的教程中,我们将主要学习一下MooTools中类的实现和继承(扩展).通过实现和继承,我们可以在子类中使用父类的方法,而不需要再重新声明和实现相同的方法.MooTools中的Class类可以帮助我们轻松地做到这一点.首先,我们定一个基类(base class). 参考代码: 复制代码 代码如下: var BaseClass = new Class({ // 定义一个方法testFunction

  • Mootools 1.2教程 选项卡效果(Tabs)

    简单的"额外信息"标签(TAB) 鼠标移上去显示内容的TAB 在这第一个项目中,我们要创建一个简单的菜单,当鼠标移动到这些菜单上时显示相应的内容.首先,我们来完成HTML代码--我们就用包含四个列表项的ul好了,然后再创建四个div(每一个div对应一个列表项): 参考代码: 复制代码 代码如下: // 这里是我们的菜单 <ul id="tabs"> <li id="one">One</li> <li i

  • Mootools 1.2教程 类(一)

    简单地讲,一个类就是一个容器,这个容器包含了一些变量集合和操作这些变量的函数,以便实现特定的功能.在一个内容牵涉较多的项目中,类会显得难以置信的有用. 变量 在前面一系列的课程中,我们已经学习过了Hash对象中键值对(key/value pair)的使用方式,因此,下面的这个例子中创建了一个类,它只包含了一些变量,你看起来可能会觉得非常的熟悉: 参考代码: 复制代码 代码如下: // 创建一个名为class_one的类 // 包含两个内部变量 var Class_one = new Class(

  • Mootools 1.2教程 排序类和方法简介

    Sortables类还提供了包括一个名叫"serialize"的优秀方法,通过这个方法你额可以把这些元素的id作为数组输出--对于服务器端的开发非常有用.接下来,我们看看如何创建一个新的排序项集合,还有一定要看一下最后的演示实例. 基本知识 创建一个新的Sortable对象 首先,我们要把我们要排序的元素赋值给变量.对于Sortables来说,如果你想要多个列表之间的元素能够在相互之间拖拽,你需要把这些元素全部都放在一个数组中,就像这样: 参考代码: 复制代码 代码如下: var so

  • Mootools 1.2教程 定时器和哈希简介

    定时器能比它表面看起来做更多的事情--定时能定期地触发一个函数.另一方面,hash则是键值对(key/value)的集合.如果你对hash还不熟悉现在也不要着急--我们今天就会做一个快速简要的介绍,并且会提供一些延伸阅读的相关链接.就像MooTools中的所有东西一样,一旦你看到它的正确用法,它使用起来就非常的简单,并且不可思议的有用. .periodical()函数 基本用法 使用这个方法你唯一要做的就是在一个函数的结尾添加.periodical();,那样你的函数就会定时地触发.和以前的一样

随机推荐