'Personalisiertes JavaScript': Benutzerdefinierte Funktionen, Objekte und Methoden

Als moderne Programmiersprache unterstützt JavaScript die vollständige Erweiterbarkeit, indem Sie Ihre eigenen Funktionen definieren können. Auf diese Weise können Sie Routinen erstellen, die Sie immer wieder verwenden können. Sie sparen Zeit bei der Wiederverwendung gängiger "Komponenten" und können durch Entwerfen eigener Funktionen die Basissprache von JavaScript an Ihre Anforderungen anpassen. Betrachten Sie es als "personalisiertes JavaScript".

Da JavaScript auf Objekten basiert, kann eine JavaScript-Funktion leicht in ein Objekt und eine Methode für dieses Objekt umgewandelt werden. Sie können also nicht nur benutzerdefinierte Objekte erstellen, um Ihre Gebote abzugeben, sondern auch Ihre eigenen Objekte erstellen, die sich genau so verhalten, wie Sie es möchten. Und Sie können Methoden erstellen, die auf diese Objekte einwirken. Während dies mächtig klingt - und es ist -, ist das Erstellen von Funktionen, Objekten und Methoden in JavaScript sehr einfach.

Funktionen einführen

Verwenden Sie die Funktionsanweisung, um Ihre eigene JavaScript-Funktion zu erstellen. Die Bare-Bones-Syntax lautet:

Funktionsname ( params ) { ... Funktion stuff ... }
  • name ist der eindeutige Name der Funktion. Alle Funktionsnamen in einem Skript müssen eindeutig sein.
  • params ist eine oder mehrere Parametervariablen, die Sie an die Funktion übergeben.
  • Funktionsmaterial sind die Anweisungen, die von der Funktion ausgeführt werden. Sie können hier fast alles setzen.

Beachten Sie die Klammern {und}. Diese definieren den Funktionsbaustein und sind unbedingt erforderlich. Die geschweiften Klammern teilen JavaScript mit, wo eine Funktion beginnt und endet. Die Klammern um die Parameter sind ebenfalls erforderlich. Fügen Sie die Klammern ein, auch wenn die Funktion keine Parameter verwendet (und viele nicht).

Die Namen Ihrer benutzerdefinierten Funktionen liegen bei Ihnen, solange Sie nur alphanumerische Zeichen verwenden (der Unterstrich _ ist ebenfalls zulässig). Funktionsnamen müssen mit einem Buchstaben beginnen, können jedoch an anderer Stelle im Namen Zahlen enthalten.

Ich habe mich an den JavaScript-Stil der Großschreibung von Funktionsnamen gehalten, dh anfängliche Kleinbuchstaben und dann Großbuchstaben, wenn der Funktionsname aus zusammengesetzten Wörtern besteht. Zum Beispiel myFuncName, yourFuncNameoder theirFuncName. Funktionsnamen unterscheiden zwischen Groß- und Kleinschreibung. Stellen Sie sicher, dass Sie dieselbe Groß- und Kleinschreibung verwenden, wenn Sie auf die Funktion an anderer Stelle im Skript verweisen. JavaScript myFuncunterscheidet sich von Myfunc.

Um zwischen Funktionen und Variablen zu unterscheiden, bevorzuge ich es, meinen Variablen anfängliche Großbuchstaben zu geben, wie z MyStuff. Dies unterscheidet es sofort von einer Funktion, die die Großschreibung verwenden würde myStuff. Natürlich können Sie jedes gewünschte Kapitalisierungsschema anwenden.

Funktion definieren und verwenden

Der beste Weg, um das Wie und Warum einer Funktion zu beschreiben, besteht darin, eine einfache Funktion in Aktion zu zeigen. Hier ist eine Grundfunktion, die "Hallo, JavaScripters!" und ist ein offensichtlicher Start auf der "Hallo Welt!" Beispiel sehen Sie für neue Programmiersprachen.

Funktion basicFunction () {alert ("Hallo JavaScripters!"); }}

Dies definiert lediglich die Funktion. JavaScript macht nichts damit, es sei denn, die Funktion wird an einer anderen Stelle im Skript referenziert. Sie müssen die Funktion aufrufen, um sie verwenden zu können. Das Aufrufen einer benutzerdefinierten Funktion entspricht dem Aufrufen einer integrierten JavaScript-Funktion. Sie geben lediglich den Namen der Funktion in Ihrem Skript an. Dies dient als Funktionsaufruf. Wenn JavaScript auf den Funktionsaufruf stößt, wird es abgesprungen, um alle Anweisungen in dieser Funktion auszuführen. Wenn die Funktion beendet ist, kehrt JavaScript unmittelbar nach dem Funktionsaufruf zum Punkt zurück und verarbeitet den Rest des Skripts.

Um die obige Funktion aufzurufen, geben Sie einfach den Text basicFunction () ein. Beachten Sie die leeren Klammern, falls erforderlich. Hier ist ein funktionierendes Beispiel für das Programm Hello JavaScripters.

Grundfunktion Beispielfunktion basicFunction () {alert ("Hallo JavaScripters!"); }}

Grundfunktion();

Seite wurde geladen.

Der Browser verarbeitet den Inhalt des Tags beim Laden des Dokuments. Wenn es auf den basicFunction()Funktionsaufruf stößt , wird es kurz angehalten, um die Funktion zu verarbeiten, und ein Warnfeld wird angezeigt. Klicken Sie auf OK und der Rest der Seite wird vollständig geladen.

Aufrufen einer Funktion mit einem Ereignishandler

Eine übliche Methode zum Aufrufen einer Funktion besteht darin, einen Verweis darauf in eine Formularschaltfläche oder einen Hypertext-Link aufzunehmen. Die Verarbeitung einer benutzerdefinierten Funktion, wenn der Benutzer auf eine Formularschaltfläche klickt, ist möglicherweise die einfachste von allen. Mit der Ereignisbehandlungsroutine onClick teilen Sie JavaScript mit, dass die angegebene Funktion verarbeitet werden soll, wenn der Benutzer auf die Schaltfläche klickt. Hier ist eine überarbeitete Version des vorherigen Beispiels, die zeigt, wie basicFunction aufgerufen wird, wenn auf die Formularschaltfläche geklickt wird.

Grundfunktion Beispielfunktion basicFunction () {alert ("Hallo JavaScripters!"); }}

Klicken Sie hier, um die Funktion aufzurufen.

Beachten Sie die onClick-Syntax im Tag. Das Ereignis, das Sie mit einem Klick verarbeiten möchten, ist ein Aufruf an basicFunction. Diese Veranstaltung ist von doppelten Anführungszeichen umgeben.

Übergeben eines Werts an eine Funktion

JavaScript-Funktionen unterstützen die Übergabe von Werten - oder Parametern - an diese. Diese Werte können zur Verarbeitung innerhalb der Funktion verwendet werden. Zum Beispiel, anstatt das Warnfeld "Hallo JavaScripters!" Zu sagen. Wann immer Sie es anrufen, können Sie es sagen lassen, was Sie wollen. Der anzuzeigende Text kann als Parameter an die Funktion übergeben werden.

Geben Sie zum Übergeben eines Parameters an eine Funktion einen Variablennamen als Parameter in der Funktionsdefinition an. Sie verwenden diesen Variablennamen dann an einer anderen Stelle in der Funktion. Zum Beispiel:

Funktion basicExample (Text) {alert (Text); }}

Der Variablenname ist Textund wird als Parameter für die Funktion definiert. Diese Variable wird dann als Text verwendet, der im Warnfeld angezeigt wird. Geben Sie beim Aufrufen der Funktion den Text an, den Sie als Parameter des Funktionsaufrufs anzeigen möchten:

basicExample ("Dies sagt alles, was ich will"); 

Übergabe mehrerer Werte an eine Funktion

Sie können mehrere Parameter an eine Funktion übergeben. Trennen Sie die Parameter wie bei integrierten JavaScript-Funktionen und -Methoden durch Kommas:

multipleParams ("eins", "zwei"); ... Funktion multipleParams (Param1, Param2) {...

Wenn Sie eine Funktion mit mehreren Parametern definieren, stellen Sie sicher, dass die Parameter im Funktionsaufruf in derselben Reihenfolge aufgeführt sind. Andernfalls wendet Ihr JavaScript-Code die Parameter möglicherweise auf die falschen Variablen an, und Ihre Funktion funktioniert nicht richtig.

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

Tatsächlich gibt es sogar eine Verknüpfung zu dem oben genannten "einfachsten JavaScript-Objekt der Welt". Sie müssen keine Objektfunktion definieren, um ein Bare-Bones-Objekt zu erstellen. JavaScript unterstützt ein generisches Object () -Objekt, mit dem Sie neue Objekte erstellen können. Das Folgende macht dasselbe wie oben, ohne eine explizite Objektfunktion:

eenie = neues Objekt (); 

Definieren neuer Eigenschaften für bereits erstellte Objekte