`
pcajax
  • 浏览: 2157216 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

MooTools教程(4):函数和MooTools

阅读更多

今天开始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);
});
分享到:
评论

相关推荐

    Mootools 1.2教程 函数

    MooTools 1.2教程中的这一部分主要讲解了JavaScript函数的基础知识,包括如何定义函数、如何调用函数以及如何传递参数。 首先,我们了解函数的基本定义。函数在JavaScript中可以这样创建: ```javascript var ...

    mootools详细教程chm

    这个“mootools详细教程chm”包含了丰富的资源,旨在帮助开发者深入理解和熟练运用MooTools。 1. **MooTools 的核心特性** - **模块化设计**:MooTools 采用模块化结构,允许开发者根据项目需求选择性地加载组件,...

    mootools入门教程1

    2. 强大功能:MooTools 1.2 提供了许多强大功能,例如,morph 和 tween 动画效果,数组和函数操作等。 3. 扩展性强:MooTools 1.2 有许多非常好的扩展,可以让开发者轻松地实现各种 Web 交互效果。 如何使用 ...

    Mootools 1.2快速学习教程

    在Mootools 1.2教程中,你将学习到如何使用这些模块和工具来创建交互式网页,如何组织和优化代码,以及如何解决常见的JavaScript问题。通过实践案例和详尽的解释,你将能够迅速掌握Mootools 1.2,并将其应用于实际...

    mootools 教程

    本教程将帮助新手深入理解和掌握MooTools的核心概念和用法。 首先,我们来看"MooTools 1.2.2 Core NC.js"。这个文件是MooTools的核心非压缩版本,"NC"代表"No Conflict",意味着它与其它JavaScript库(如jQuery)...

    一周学会Mootools 1.4中文教程(2)函数

    本次教程聚焦于Mootools的函数部分,将详细介绍一些核心函数的用法,包括但不限于`set`、`setProperty`、`get`、`getProperty`、`hasClass`、`addClass`、`removeClass`、`toggleClass`、`setStyle`、`getStyle`、`...

    mootools教程.pdf

    根据给定的文件内容,这份“Mootools教程.pdf”文档主要介绍了Mootools框架的基础知识点,包括类的创建和继承、对象的扩展、类型判断、实用函数的使用、定时器的管理和DOM操作等。下面是对这些知识点的详细解释: 1...

    mootools 1.2 中文教程

    本教程将深入探讨MooTools 1.2的关键概念和功能。 1. **模块化设计** - MooTools 的核心理念之一是模块化。通过使用类、对象和命名空间,可以有效地组织和隔离代码,避免命名冲突。 - `Core`:基础模块,包括基本...

    mootools

    4. **动画效果**:通过Fx子模块,MooTools提供了强大的动画功能,可以实现平滑的CSS属性变化、过渡和动画序列。 5. **Ajax通信**:MooTools提供了Ajax组件,用于与服务器进行异步数据交换,支持GET、POST等多种HTTP...

    Mootools 1.2教程 类(一)

    本教程将介绍如何创建和使用MooTools中的类。 首先,一个类是一个容器,它存储了变量(也称为属性)和函数(也称为方法),这些组合在一起构成了一个特定功能的单元。在MooTools中,我们使用`new Class`来定义一个...

    mootools入门教程.rar

    4. **类与对象**:详细阐述MooTools的类创建机制,包括构造函数、继承、属性和方法的定义,以及如何实现私有成员和静态成员。 5. **Ajax实战**:介绍如何使用Ajax类进行数据交换,包括错误处理、上传文件、与服务器...

    mootools详细教程

    【MooTools】MooTools 是一个轻量级的JavaScript框架,它提供了丰富的工具和类库,使得开发者能够更加高效地编写和管理JavaScript代码。在本文档中,我们将重点介绍MooTools中的核心组件——Element模块,以及如何...

    MooTools1.4中文PDF手册+MooTools-Core-1.5.1.js

    - **Function增强**:MooTools扩展了JavaScript的函数,增加了如bind、delay、chain等方法,增强了函数的可操作性。 - **Fx模块**:提供了动画效果,如Fade、Slide、Toggle等,可以轻松实现过渡和动画效果。 3. *...

    Mootools v1.11 文档 pdf html Mootools v1.2.1 js

    4. **事件处理**:MooTools支持事件监听和触发,提供了一种优雅的方式来处理用户交互,如点击、滚动等事件。 5. **动画效果**:内置的Fx模块提供了平滑的CSS3动画效果,包括淡入淡出、移动、缩放等多种动画类型,且...

    Mootools 1.2系列教程

    本教程将深入讲解Mootools 1.2的核心概念和技术,帮助开发者充分利用这个库的优势。 **1. DOM操作** Mootools 1.2提供了简洁的DOM操作接口,如`Element`和`Elements`对象,使得选择和操作HTML元素变得异常简单。...

    Mootools1.2.3各版本下载

    - **工具函数**:MooTools包含大量实用的函数,如数组操作、字符串处理、日期格式化等。 2. **MooTools 1.2.3版本的变化** - 在1.2.3版本中,修复了一些已知的bug,提高了代码的稳定性和性能。 - 更新了对某些...

    mootools-中文教程

    ### Mootools中文教程知识点概览 #### 一、起步篇 Mootools是一个轻量级且功能强大的JavaScript库,其设计目标是为了简化浏览器端的编程。与Prototype类似,Mootools同样支持面向对象的编程方式,但在某些方面更加...

    Mootools 1.2.1 API 文档

    1. **核心模块**:这是Mootools的基础,提供了一套基础的工具和方法,包括类系统、对象扩展、数组操作、字符串处理、函数绑定等。例如,`$extend`用于对象合并,`$merge`用于深度合并,`$each`则用于遍历数组或对象...

    mootools开发手册中文版

    4. **动画效果**:MooTools的`Fx`模块提供了丰富的动画功能,包括平滑的过渡效果。`Fx.Tween`可以改变元素的CSS属性,如宽度、高度或透明度;`Fx.Morph`则能改变任意CSS属性。动画可以通过链式调用来组合。 5. **...

Global site tag (gtag.js) - Google Analytics