'Personalizirani JavaScript': Korisnički definirane funkcije, objekti i metode

Kao moderni programski jezik, JavaScript odobrava potpunu proširivost dopuštajući vam da definirate vlastite funkcije. To vam omogućuje stvaranje rutina koje možete koristiti uvijek iznova. Uštedite vrijeme ponovnom upotrebom uobičajenih "komponenti", a dizajniranjem vlastitih funkcija možete proširiti osnovni jezik JavaScript-a prema svojim potrebama. Shvatite to kao "personalizirani JavaScript".

Budući da se JavaScript temelji na objektima, JavaScript funkcija lako se može pretvoriti u objekt i metodu za taj objekt. Dakle, ne samo da možete stvoriti korisnički definirane objekte koji će izvršavati vaše ponude, već možete stvoriti vlastite objekte koji se ponašaju točno onako kako želite. Možete stvoriti metode koje djeluju na te objekte. Iako ovo zvuči moćno - i jest - postupak stvaranja funkcija, objekata i metoda vrlo je jednostavan u JavaScript-u.

Upoznavanje funkcija

Koristite izjavu funkcije za stvaranje vlastite JavaScript funkcije. Sintaksa golih kostiju je:

ime funkcije ( params ) { ... function stuff ... }
  • name je jedinstveni naziv funkcije. Sva imena funkcija u skripti moraju biti jedinstvena.
  • params je jedna ili više varijabli parametara koje prosljeđujete funkciji.
  • funkcija stvari su upute koje provodi funkcija. Ovdje možete staviti najviše što god.

Primijetite znakove zagrade {i}; oni definiraju funkcijski blok i prijeko su potrebni. Zagrade govore JavaScriptu gdje funkcija započinje i završava. Potrebne su i zagrade oko parametara. Uključite zagrade, čak i ako funkcija ne koristi parametre (a mnogi i ne).

Imena vaših korisnički definiranih funkcija ovise o vama, samo pod uvjetom da koristite samo alfanumeričke znakove (donji znak _ također je dopušten). Imena funkcija moraju počinjati slovnim znakom, ali mogu sadržavati brojeve i drugdje u nazivu.

Zaglavio sam se u JavaScript stilu pisanja velikih slova u nazivu funkcije - to jest, početnim malim slovima, zatim velikim slovima, ako je ime funkcije sastavljeno od složenih riječi. Na primjer, myFuncName, yourFuncNameili theirFuncName. Imena funkcija razlikuju velika i mala slova; obavezno upotrijebite isto veliko slovo kada se pozivate na funkciju negdje drugdje u skripti. JavaScript smatra myFuncdrugačijim od Myfunc.

Da bih razlikovao funkcije od varijabli, radije dajem mojim varijablama početne velike početne znakove, poput MyStuff. To ga odmah razlikuje od funkcije koja koristi veliko slovo myStuff. Naravno, možete slobodno usvojiti bilo koju shemu pisanja velikih slova koja želite.

Utvrđivanje i korištenje funkcije

Najbolji način da se opiše kako i zašto funkcija je prikazati jednostavnu na djelu. Evo osnovne funkcije koja prikazuje "Zdravo, JavaScripters!" i očiti je uzlet na "Hello World!" primjer koji vidite za nove programske jezike.

funkcija basicFunction () {alert ("Pozdrav JavaScripters!"); }

Ovo samo definira funkciju. JavaScript s tim neće učiniti ništa osim ako se na funkciju ne upućuje negdje drugdje u skripti. Morate pozvati funkciju da biste je koristili. Pozivanje korisnički definirane funkcije isto je što i pozivanje ugrađene JavaScript funkcije - vi samo u svojoj skripti navedete ime funkcije. To služi kao poziv funkcije. Kada JavaScript naiđe na poziv funkcije, on iskače kako bi dovršio sve upute u toj funkciji. Kad je funkcija gotova, JavaScript se vraća na točku odmah nakon poziva funkcije i obrađuje ostatak skripte.

Da biste pozvali gornju funkciju, samo uključite tekst basicFunction () - imajte na umu prazne zagrade, koliko su potrebne. Evo radnog primjera programa Hello JavaScripters.

Osnovna funkcija Primjer funkcije basicFunction () {alert ("Pozdrav JavaScripters!"); }

basicFunction ();

Stranica se učitala.

Preglednik obrađuje sadržaj oznake dok se dokument učitava. Kad naiđe na basicFunction()poziv funkcije, na trenutak zastaje kako bi obradio funkciju i pojavit će se okvir upozorenja. Kliknite U redu i ostatak stranice završava s učitavanjem.

Pozivanje funkcije pomoću voditelja događaja

Uobičajeni način pozivanja funkcije je uključivanje reference na nju u gumb obrasca ili hipertekstualnu vezu. Obrada korisnički definirane funkcije kada korisnik klikne gumb obrasca možda je najlakša od svih. Upotrebljavate rukovatelj događajima onClick da biste JavaScriptu rekli da kada korisnik klikne gumb, navedena funkcija treba biti obrađena. Evo revidirane verzije prethodnog primjera, koja pokazuje kako se poziva basicFunction kada se klikne gumb obrasca.

Osnovna funkcija Primjer funkcije basicFunction () {alert ("Pozdrav JavaScripters!"); }

Pritisnite za poziv funkciju.

Primijetite sintaksu onClick u oznaci. Događaj koji želite obraditi na klik je poziv basicFunction. Ovaj je događaj okružen dvostrukim navodnicima.

Prosljeđivanje vrijednosti funkciji

JavaScript funkcije podržavaju prosljeđivanje vrijednosti - ili parametara - njima. Te se vrijednosti mogu koristiti za obradu unutar funkcije. Na primjer, umjesto da okvir za upozorenje kaže "Pozdrav JavaScripters!" kad god ga nazovete, možete ga pustiti da kaže što god želite. Tekst za prikaz može se proslijediti funkciji kao parametar.

Da biste parametru proslijedili funkciju, navedite ime varijable kao parametar u definiciji funkcije. Tada taj naziv varijable upotrebljavate negdje drugdje u funkciji. Na primjer:

funkcija basicExample (Tekst) {upozorenje (Tekst); }

Naziv varijable je Texti definiran je kao parametar funkcije. Tada se ta varijabla koristi kao tekst za prikaz u okviru upozorenja. Kada pozivate funkciju, navedite tekst koji želite prikazati kao parametar poziva funkcije:

basicExample ("Ovo govori sve što želim"); 

Prosljeđivanje više vrijednosti funkciji

Funkciji možete proslijediti više parametara. Kao i kod ugrađenih JavaScript funkcija i metoda, odvojite parametre zarezima:

multipleParams ("jedan", "dva"); ... funkcija multipleParams (Param1, Param2) {...

Kada definirate funkciju s više parametara, budite sigurni da su parametri navedeni u istom redoslijedu u pozivu funkcije. Inače, vaš JavaScript kôd može primijeniti parametre na pogrešne varijable i vaša funkcija neće raditi ispravno.

Evo radnog primjera funkcije s više parametara. Potrebna su dva parametra: ulazni niz i vrijednost broja. Vrijednost broja označava koliko znakova s ​​lijeve strane niza želite prikazati u okviru upozorenja. Kada pokrenete sljedeću skriptu, okvir upozorenja prikazuje "Ovo je" - prvih sedam znakova ulaznog niza.

Primjer globalne varijable lijevo ("Ovo je test", 7);

funkcija lijevo (InString, Num) {var OutString = InString.substring (InString, Num); upozorenje (OutString); }

Vraćanje vrijednosti iz funkcije

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

Zapravo postoji čak i prečac do gore navedenog "najjednostavnijeg JavaScript objekta na svijetu". Ne trebate definirati funkciju objekta da biste napravili objekt golih kostiju. JavaScript podržava generički objekt Object () koji možete koristiti za izradu novih objekata. Sljedeće radi isto kao gore, bez eksplicitne funkcije objekta:

eenie = novi objekt (); 

Definiranje novih svojstava već izrađenim objektima