'JavaScript personnalisé': fonctions, objets et méthodes définis par l'utilisateur

En tant que langage de programmation moderne, JavaScript approuve l'extensibilité totale en vous permettant de définir vos propres fonctions. Cela vous permet de créer des routines que vous pouvez utiliser encore et encore. Vous gagnez du temps en réutilisant des «composants» communs et en concevant vos propres fonctions, vous pouvez étendre le langage de base de JavaScript en fonction de vos besoins. Considérez-le comme un «JavaScript personnalisé».

Puisque JavaScript est basé sur des objets, une fonction JavaScript peut facilement être transformée en un objet et en une méthode pour cet objet. Ainsi, non seulement vous pouvez créer des objets définis par l'utilisateur pour faire vos enchères, mais vous pouvez également créer vos propres objets qui se comportent exactement comme vous le souhaitez. Et vous pouvez créer des méthodes qui agissent sur ces objets. Bien que cela semble puissant - et c'est le cas - le processus de création de fonctions, d'objets et de méthodes est très simple en JavaScript.

Présentation des fonctions

Utilisez l'instruction de fonction pour créer votre propre fonction JavaScript. La syntaxe simple est:

nom de la fonction ( paramètres ) { ... trucs de fonction ... }
  • nom est le nom unique de la fonction. Tous les noms de fonction d'un script doivent être uniques.
  • params est une ou plusieurs variables de paramètre que vous passez à la fonction.
  • Les éléments de fonction sont les instructions exécutées par la fonction. Vous pouvez mettre presque tout ici.

Notez les caractères d'accolade {et}; ceux-ci définissent le bloc fonctionnel et sont absolument nécessaires. Les accolades indiquent à JavaScript le début et la fin d'une fonction. Les parenthèses autour des paramètres sont également obligatoires. Incluez les parenthèses même si la fonction n'utilise pas de paramètres (et beaucoup n'en utilisent pas).

Les noms de vos fonctions définies par l'utilisateur dépendent de vous, du moment que vous n'utilisez que des caractères alphanumériques (le caractère de soulignement _ est également autorisé). Les noms de fonction doivent commencer par une lettre, mais peuvent inclure des chiffres ailleurs dans le nom.

Je suis resté fidèle au style JavaScript de la capitalisation des noms de fonction - c'est-à-dire des minuscules initiales, puis des majuscules si le nom de la fonction est composé de mots composites. Par exemple, myFuncName, yourFuncNameou theirFuncName. Les noms de fonction sont sensibles à la casse; assurez-vous d'utiliser la même majuscule lorsque vous vous référez à la fonction ailleurs dans le script. JavaScript considère myFuncdifférent de Myfunc.

Pour différencier les fonctions et les variables, je préfère donner à mes variables des caractères majuscules initiaux, tels que MyStuff. Cela le différencie immédiatement d'une fonction, qui utiliserait une capitalisation myStuff. Bien entendu, vous êtes libre d'adopter le schéma de capitalisation que vous souhaitez.

Définition et utilisation d'une fonction

La meilleure façon de décrire le comment et le pourquoi d'une fonction est d'en montrer une simple en action. Voici une fonction de base qui affiche "Hello, JavaScripters!" et c'est un décollage évident sur le "Hello World!" exemple que vous voyez pour les nouveaux langages de programmation.

function basicFunction () {alert ("Bonjour les JavaScript!"); }

Cela définit simplement la fonction. JavaScript ne fera rien avec cela à moins que la fonction ne soit référencée ailleurs dans le script. Vous devez appeler la fonction pour pouvoir l'utiliser. L'appel d'une fonction définie par l'utilisateur équivaut à appeler une fonction JavaScript intégrée - vous fournissez simplement le nom de la fonction dans votre script. Cela sert d'appel de fonction. Lorsque JavaScript rencontre l'appel de fonction, il s'arrête pour terminer les instructions contenues dans cette fonction. Lorsque la fonction est terminée, JavaScript revient au point immédiatement après l'appel de la fonction et traite le reste du script.

Pour appeler la fonction ci-dessus, incluez simplement le texte basicFunction () - notez les parenthèses vides, car elles sont nécessaires. Voici un exemple fonctionnel du programme Hello JavaScripters.

Fonction de base Exemple function basicFunction () {alert ("Hello JavaScripters!"); }

fonction basique();

La page est chargée.

Le navigateur traite le contenu de la balise lors du chargement du document. Lorsqu'il rencontre l' basicFunction()appel de fonction, il s'arrête momentanément pour traiter la fonction et une boîte d'alerte apparaît. Cliquez sur OK et le reste de la page termine le chargement.

Appel d'une fonction avec un gestionnaire d'événements

Une manière courante d'appeler une fonction consiste à y inclure une référence dans un bouton de formulaire ou un lien hypertexte. Le traitement d'une fonction définie par l'utilisateur lorsque l'utilisateur clique sur un bouton de formulaire est peut-être le plus simple de tous. Vous utilisez le gestionnaire d'événements onClick pour indiquer à JavaScript que lorsque l'utilisateur clique sur le bouton, la fonction spécifiée doit être traitée. Voici une version révisée de l'exemple précédent, montrant comment basicFunction est appelé lorsque l'utilisateur clique sur le bouton du formulaire.

Fonction de base Exemple function basicFunction () {alert ("Hello JavaScripters!"); }

Cliquez pour appeler la fonction.

Notez la syntaxe onClick dans la balise. L'événement que vous souhaitez traiter en un clic est un appel à basicFunction. Cet événement est entouré de guillemets doubles.

Passer une valeur à une fonction

Les fonctions JavaScript prennent en charge la transmission de valeurs ou de paramètres . Ces valeurs peuvent être utilisées pour le traitement au sein de la fonction. Par exemple, plutôt que de laisser la boîte d'alerte dire "Bonjour les JavaScript!" chaque fois que vous l'appelez, vous pouvez lui faire dire ce que vous voulez. Le texte à afficher peut être passé en paramètre à la fonction.

Pour transmettre un paramètre à une fonction, indiquez un nom de variable comme paramètre dans la définition de fonction. Vous utilisez ensuite ce nom de variable ailleurs dans la fonction. Par exemple:

function basicExample (texte) {alerte (texte); }

Le nom de la variable est Text, et est défini comme le paramètre de la fonction. Cette variable est ensuite utilisée comme texte à afficher dans la boîte d'alerte. Lors de l'appel de la fonction, indiquez le texte que vous souhaitez afficher en tant que paramètre de l'appel de fonction:

basicExample ("Cela dit tout ce que je veux"); 

Passer plusieurs valeurs à une fonction

Vous pouvez transmettre plusieurs paramètres à une fonction. Comme pour les fonctions et méthodes JavaScript intégrées, séparez les paramètres par des virgules:

multipleParams ("un", "deux"); ... fonction multipleParams (Param1, Param2) {...

Lorsque vous définissez une fonction avec plusieurs paramètres, assurez-vous que les paramètres sont répertoriés dans le même ordre dans l'appel de fonction. Sinon, votre code JavaScript peut appliquer les paramètres aux mauvaises variables et votre fonction ne fonctionnera pas correctement.

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(); 

En fait, il existe même un raccourci vers «l'objet JavaScript le plus simple au monde» ci-dessus. Vous n'avez pas besoin de définir une fonction d'objet pour créer un objet simple. JavaScript prend en charge un objet Object () générique, que vous pouvez utiliser pour créer de nouveaux objets. Ce qui suit fait la même chose que ci-dessus, sans fonction d'objet explicite:

eenie = nouvel objet (); 

Définition de nouvelles propriétés sur des objets déjà créés