'JavaScript personalizado': funciones, objetos y métodos definidos por el usuario

Como lenguaje de programación moderno, JavaScript respalda la extensibilidad total permitiéndole definir sus propias funciones. Esto le permite crear rutinas que puede usar una y otra vez. Ahorra tiempo al reutilizar "componentes" comunes y, al diseñar sus propias funciones, puede ampliar el lenguaje base de JavaScript para adaptarlo a sus necesidades. Piense en ello como "JavaScript personalizado".

Dado que JavaScript se basa en objetos, una función de JavaScript se puede convertir fácilmente en un objeto y un método para ese objeto. Por lo tanto, no solo puede crear objetos definidos por el usuario para hacer su oferta, puede crear sus propios objetos que se comportan exactamente de la manera que desee. Y puede crear métodos que actúen sobre esos objetos. Si bien esto suena poderoso, y lo es, el proceso de creación de funciones, objetos y métodos es muy fácil en JavaScript.

Introduciendo funciones

Utilice la declaración de función para crear su propia función de JavaScript. La sintaxis básica es:

nombre de la función ( parámetros ) { ... cosas de la función ... }
  • nombre es el nombre exclusivo de la función. Todos los nombres de funciones en un script deben ser únicos.
  • params es una o más variables de parámetro que pasa a la función.
  • cosas de función son las instrucciones llevadas a cabo por la función. Puedes poner casi cualquier cosa aquí.

Observe los caracteres de llave {y}; estos definen el bloque de funciones y son absolutamente necesarios. Las llaves le dicen a JavaScript dónde comienza y termina una función. También se requieren los paréntesis alrededor de los parámetros. Incluya los paréntesis incluso si la función no usa parámetros (y muchos no lo hacen).

Los nombres de las funciones definidas por el usuario dependen de usted, siempre que utilice sólo caracteres alfanuméricos (el carácter de subrayado _ también está permitido). Los nombres de las funciones deben comenzar con un carácter de letra, pero pueden incluir números en otras partes del nombre.

Me quedé con el estilo JavaScript de uso de mayúsculas en el nombre de la función, es decir, en minúsculas iniciales y luego en mayúsculas si el nombre de la función está compuesto por palabras compuestas. Por ejemplo, myFuncName, yourFuncName, o theirFuncName. Los nombres de las funciones distinguen entre mayúsculas y minúsculas; asegúrese de utilizar las mismas mayúsculas cuando se refiera a la función en otra parte del script. JavaScript considera myFuncdiferente de Myfunc.

Para diferenciar entre funciones y variables, prefiero dar a mis variables caracteres iniciales en mayúscula, como MyStuff. Esto lo diferencia inmediatamente de una función, que utilizaría las mayúsculas myStuff. Por supuesto, puede adoptar cualquier esquema de capitalización que desee.

Definiendo y usando una función

La mejor manera de describir el cómo y el por qué de una función es mostrar una simple en acción. Aquí hay una función básica que muestra "¡Hola, JavaScripters!" y es un despegue obvio en el "¡Hola mundo!" ejemplo que ves para nuevos lenguajes de programación.

function basicFunction () {alert ("¡Hola JavaScripters!"); }

Esto simplemente define la función. JavaScript no hará nada con él a menos que se haga referencia a la función en algún otro lugar del script. Tienes que llamar a la función para poder usarla. Llamar a una función definida por el usuario es lo mismo que llamar a una función JavaScript incorporada: simplemente proporcione el nombre de la función en su script. Esto sirve como llamada a la función. Cuando JavaScript encuentra la llamada a la función, se lanza a completar las instrucciones que se encuentran en esa función. Cuando la función finaliza, JavaScript vuelve al punto inmediatamente después de la llamada a la función y procesa el resto del script.

Para llamar a la función anterior, simplemente incluya el texto basicFunction (); observe los paréntesis vacíos, ya que son obligatorios. Aquí hay un ejemplo funcional del programa Hello JavaScripters.

Ejemplo de función básica function basicFunction () {alert ("¡Hola JavaScripters!"); }

Función básica();

La página se ha cargado.

El navegador procesa el contenido de la etiqueta a medida que se carga el documento. Cuando encuentra la basicFunction()llamada a la función, se detiene momentáneamente para procesar la función y aparece un cuadro de alerta. Haga clic en Aceptar y el resto de la página terminará de cargarse.

Llamar a una función con un controlador de eventos

Una forma común de llamar a una función es incluir una referencia a ella en un botón de formulario o enlace de hipertexto. Procesar una función definida por el usuario cuando el usuario hace clic en un botón de formulario es quizás la más fácil de todas. Utiliza el controlador de eventos onClick para decirle a JavaScript que cuando el usuario hace clic en el botón, se debe procesar la función especificada. Aquí hay una versión revisada del ejemplo anterior, que muestra cómo se llama a basicFunction cuando se hace clic en el botón de formulario.

Ejemplo de función básica function basicFunction () {alert ("¡Hola JavaScripters!"); }

Haga clic para llamar a la función.

Observe la sintaxis onClick en la etiqueta. El evento que desea procesar con un clic es una llamada basicFunction. Este evento está rodeado de comillas dobles.

Pasar un valor a una función

Las funciones de JavaScript admiten pasarles valores, o parámetros . Estos valores se pueden utilizar para procesar dentro de la función. Por ejemplo, en lugar de que el cuadro de alerta diga "¡Hola JavaScripters!" siempre que lo llame, puede hacer que diga lo que quiera. El texto a mostrar se puede pasar como parámetro a la función.

Para pasar un parámetro a una función, proporcione un nombre de variable como parámetro en la definición de la función. Luego usa ese nombre de variable en otra parte de la función. Por ejemplo:

function basicExample (Texto) {alerta (Texto); }

El nombre de la variable es Text, y se define como el parámetro de la función. Luego, esa variable se utiliza como texto para mostrar en el cuadro de alerta. Al llamar a la función, proporcione el texto que desea mostrar como parámetro de la llamada a la función:

basicExample ("Esto dice todo lo que quiero"); 

Pasar varios valores a una función

Puede pasar varios parámetros a una función. Al igual que con las funciones y métodos integrados de JavaScript, separe los parámetros con comas:

multipleParams ("uno", "dos"); ... función multipleParams (Param1, Param2) {...

Cuando defina una función con varios parámetros, asegúrese de que los parámetros se enumeran en el mismo orden en la llamada a la función. De lo contrario, su código JavaScript puede aplicar los parámetros a las variables incorrectas y su función no funcionará correctamente.

Here's a working example of a function with multiple parameters. It takes two parameters: an input string and a number value. The number value indicates how many characters on the left of the string you want to display in the alert box. When you run the following script, the alert box displays "This is" -- the first seven characters of the input string.

Global Variable Example lefty ("This is a test", 7);

function lefty (InString, Num) { var OutString=InString.substring (InString, Num); alert (OutString); }

Returning a value from a function

The functions described so far don't return a value; that is, they do whatever magic you want them to do, then end. No "output" value is provided by the function. In some other languages, such return-less functions are called subroutines. However, in JavaScript (like in C and C++), "functions are functions" whether or not they return a value.

It's easy to return a value from a function: use the return statement, along with the value you wish to return. This is handy when you want your function to churn through some data and return the processed result. Take the "lefty" function from above. Instead of displaying the chopped-off string, you can return it to the calling function, and use the return value any way you want.

Global Variable Example var Ret = lefty ("This is a test", 7); alert (Ret);

function lefty (InString, Num) { var OutString=InString.substring (InString, Num); return (OutString); }

This script does essentially the same one as the previous example, but instead of always displaying the chopped-off text, the function merely returns the processed value. The return value is captured in a variable, and you are free to use that variable in any way you wish. The above shows the Ret variable used with an alert box, but you can use it in other ways, too. For example, you can write the contents of the Ret variable using the document.write method:

document.write (Ret); 

Defining local variables within functions

By default all JavaScript variables are declared global for the document that created them. That means when you define a variable in a function, it is also "visible" to any other portion of the script on that document. For example, in the following global variable test, the variable test is visible to the showVar function, even though the variable is defined in the loadVar function.

Global Variable Example

function showVar () { alert (test) }

function loadVar () { test = "6" }

loadVar();

Click to call function.

Global variables aren't always what you want. Instead, you want variables that are local to the function. These variables exist only as long as JavaScript is processing the function. When it exits the function, the variables are lost. In addition, a local variable of a given name is treated as a separate entity from a global variable of the same name. In this way, you don't have to worry about reuse of variable names. The local variable in the function won't have any effect on the global variable used elsewhere in the script.

To declare a local variable, add the var keyword to the beginning of the variable name in the function. This tells JavaScript you want to make the variable local to that function. As a test, change the loadVar function above to the following, and re-load the script. When you click the button, JavaScript tells you the variable doesn't exist. This is because test is only local to the loadVar function, and does not exist outside the function.

function loadVar () { var test = "6" } 

Calling one function from another function

Code inside a function behaves just like code anywhere else. This means you can call one function from inside another function. This allows you to "nest" functions so that you can create separate functions, which each perform a specific task, and then run them together as a complete process, one right after the other. For example, here's a function that calls three other mythical functions, each one returning a string of text that has been altered in some way.

function run () { var Ret = changeText ("Change me"); alert (Ret); document.write (Ret); } function changeText (Text) { Text = makeBold (Text); Text = makeItalics (Text); Text = makeBig (Text); return (Text); } function makeBold (InString) { return (InString.bold()); } function makeItalics (InString) { return (InString.italics()); } function makeBig (InString) { return (InString.big()); } 

Creating objects with user-defined functions

JavaScript is based on objects: the window is an object, links are objects, forms are objects, even Netscape itself (or other browser) is an object. Using objects can help make programming easier and more streamlined. You can extend the use of objects in JavaScript by making your own. The process uses functions in a slightly modified way. In fact, you'll be surprised how easy it is to make your own JavaScript objects.

Making a new object entails two steps:

  • Define the object in a user-defined function.
  • Use the new keyword to create (or instantiate) the object with a call to the object function.

Here's an example of the world's simplest user-defined JavaScript object:

// this part creates a new object ret = new makeSimpleObject();

// this part defines the object function makeSimpleObject() {}

I've called the new object ret; use any valid variable name for the new object (I use lower-case letters for variables that contain objects, so it's easier to tell that the variable contains an object).

You can use the same object function to create any number of new objects. For instance, these lines create four new and separate objects: eenie, meenie, minie, and moe:

eenie = new makeSimpleObject(); meenie = new makeSimpleObject(); minie = new makeSimpleObject(); moe = new makeSimpleObject(); 

De hecho, hay incluso un atajo al "objeto JavaScript más simple del mundo". No es necesario definir una función de objeto para hacer un objeto básico. JavaScript admite un objeto Object () genérico, que puede utilizar para crear nuevos objetos. Lo siguiente hace lo mismo que lo anterior, sin una función de objeto explícita:

eenie = nuevo objeto (); 

Definición de nuevas propiedades para objetos ya hechos