Ohjelmointi

'Henkilökohtainen JavaScript': Käyttäjän määrittämät toiminnot, objektit ja menetelmät

Nykyaikaisena ohjelmointikielenä JavaScript tukee täydellistä laajennettavuutta antamalla sinun määrittää omat toiminnot. Tämän avulla voit luoda rutiineja, joita voit käyttää yhä uudelleen. Säästät aikaa yleisten "komponenttien" uudelleenkäytössä, ja suunnittelemalla omia toimintojasi voit laajentaa JavaScriptin peruskieliä tarpeidesi mukaan. Ajattele sitä "räätälöityä JavaScriptiä".

Koska JavaScript perustuu objekteihin, JavaScript-funktio voidaan helposti muuttaa objektiksi ja menetelmäksi tälle objektille. Joten voit paitsi luoda käyttäjän määrittelemiä objekteja tekemään hintatarjouksiasi, myös luoda omia objekteja, jotka käyttäytyvät juuri haluamallasi tavalla. Ja voit luoda menetelmiä, jotka vaikuttavat noihin kohteisiin. Vaikka tämä kuulostaa voimakkaalta - ja se onkin - toimintojen, objektien ja menetelmien luominen on erittäin helppoa JavaScriptissä.

Esittelyssä toiminnot

Luo oma JavaScript-toiminto funktion lauseella. Paljaiden luiden syntakse on:

toiminto nimi (parametrit) { ... toiminto juttuja ... } 
  • nimi on funktion yksilöllinen nimi. Kaikkien komentosarjassa olevien toimintojen nimien on oltava yksilöllisiä.
  • parametrit on yksi tai useampi parametrimuuttuja, jonka välität funktiolle.
  • toiminto juttuja on toiminnon suorittamat ohjeet. Voit laittaa eniten mitä tahansa tähän.

Huomaa {ja} aaltosulkumerkit; nämä määrittelevät toimintalohko, ja ovat ehdottoman välttämättömiä. Aaltosulkeet kertovat JavaScriptille, mistä funktio alkaa ja päättyy. Parametrien ympärillä olevat sulut vaaditaan myös. Sisällytä sulkeet, vaikka toiminto ei käytä parametreja (ja monet eivät käytä).

Käyttäjän määrittämien toimintojen nimet ovat sinun tehtäväsi, kunhan käytät vain aakkosnumeerisia merkkejä (myös alaviiva _ on sallittu). Funktioiden nimien on aloitettava kirjaimella, mutta ne voivat sisältää numeroita muualla nimessä.

Olen juuttunut funktion nimen isojen kirjainten JavaScript-tyyliin - ts. Ensimmäiset pienet kirjaimet ja sitten isot kirjaimet, jos funktion nimi koostuu yhdistetyistä sanoista. Esimerkiksi, myFuncName, yourFuncNametai theirFuncName. Funktioiden nimet ovat isot ja pienet kirjaimet; muista käyttää samaa isoa kirjainta, kun viitat funktioon muualla komentosarjassa. JavaScript ottaa huomioon myFunc erilainen Myfunc.

Funktioiden ja muuttujien erottamiseksi mieluummin annan muuttujilleni alkukirjaimet, kuten Tavarani. Tämä erottaa sen välittömästi funktiosta, joka käyttää isoja kirjaimia tavarani. Tietysti voit vapaasti käyttää mitä tahansa haluamaasi pääomitusjärjestelmää.

Funktion määrittely ja käyttö

Paras tapa kuvata toiminnon miten ja miksi on näyttää yksinkertainen toiminto. Tässä on perustoiminto, joka näyttää "Hei, JavaScript-käyttäjät!" ja on ilmeinen lentoonlähtö "Hello World!" esimerkki uusista ohjelmointikielistä.

function basicFunction () {alert ("Hei JavaScript-käyttäjät!"); } 

Tämä vain määrittelee toiminto. JavaScript ei tee mitään sen kanssa, ellei funktiota viitata jonnekin muuhun komentosarjassa. Sinun täytyy puhelu toiminnon käyttämiseksi. Käyttäjän määrittelemän toiminnon kutsuminen on sama kuin sisäänrakennetun JavaScript-toiminnon kutsuminen - annat vain funktion nimen komentosarjassa. Tämä toimii toimintokutsuna. Kun JavaScript kohtaa toimintokutsun, se katkeaa ja suorittaa kaikki toiminnossa olevat ohjeet. Kun toiminto on ohi, JavaScript palaa pisteeseen heti funktion kutsun jälkeen ja käsittelee jäljellä olevan komentosarjan.

Jos haluat kutsua yllä olevan toiminnon, lisää vain teksti basicFunction () - huomioi tyhjät sulut, koska ne vaaditaan. Tässä on toimiva esimerkki Hello JavaScripters -ohjelmasta.

Perustoiminto Esimerkki toiminnosta basicFunction () {alert ("Hei JavaScript-käyttäjät!"); }

basicFunction ();

Sivu on ladattu.

Selain käsittelee tunnisteen sisällön asiakirjan latautuessa. Kun se kohtaa basicFunction () toimintokutsu, se keskeytyy hetkellisesti toiminnon käsittelemiseksi, ja hälytysruutu tulee näkyviin. Napsauta OK ja loput sivusta latautuvat loppuun.

Funktion kutsuminen tapahtumakäsittelijällä

Yleinen tapa kutsua funktio on sisällyttää viittaus siihen lomakepainikkeeseen tai hypertekstilinkkiin. Käyttäjän määrittelemän toiminnon käsittely, kun käyttäjä napsauttaa lomakepainiketta, on ehkä helpoin. Käytät onClick-tapahtumakäsittelijää kertoaksesi JavaScriptille, että kun käyttäjä napsauttaa painiketta, määritetty toiminto on käsiteltävä. Tässä on edellisen esimerkin tarkistettu versio, joka näyttää, kuinka basicFunction kutsutaan, kun lomakepainiketta napsautetaan.

Perustoiminto Esimerkki toiminnosta basicFunction () {alert ("Hei JavaScript-käyttäjät!"); }

Soita napsauttamalla -toiminto.

Huomaa tagin onClick-syntaksit. Tapahtuma, jonka haluat käsitellä napsautuksella, on kutsu basicFunction. Tätä tapahtumaa ympäröivät lainausmerkit.

Arvon välittäminen funktiolle

JavaScript-toiminnot tukevat arvojen välittämistä - tai parametrit -- heille. Näitä arvoja voidaan käyttää prosessointiin toiminnossa. Esimerkiksi sen sijaan, että hälytysruutu olisi sanonut "Hei JavaScript-käyttäjät!" aina kun soitat, voit antaa sen sanoa mitä haluat. Näytettävä teksti voidaan välittää parametrina funktiolle.

Jos haluat välittää parametrin funktiolle, anna muuttujan nimi parametriksi funktion määrittelyssä. Sitten käytät kyseistä muuttujan nimeä muualla toiminnossa. Esimerkiksi:

funktio basicExample (teksti) {alert (teksti); } 

Muuttujan nimi on Teksti, ja se määritellään funktion parametriksi. Tätä muuttujaa käytetään sitten tekstinä, joka näytetään hälytysruudussa. Kun soitat funktiota, anna funktion kutsun parametrina näytettävä teksti:

basicExample ("Tämä kertoo mitä haluan"); 

Useiden arvojen välittäminen funktiolle

Voit välittää useita parametreja funktiolle. Kuten sisäänrakennetuissa JavaScript-toiminnoissa ja -menetelmissä, erota parametrit pilkuilla:

multipleParams ("yksi", "kaksi"); ... funktio multipleParams (Param1, Param2) {... 

Kun määrität funktion, jolla on useita parametreja, varmista, että parametrit on lueteltu samassa järjestyksessä funktiokutsussa. Muussa tapauksessa JavaScript-koodisi saattaa soveltaa parametreja vääriin muuttujiin, eikä toiminto toimi oikein.

Tässä on toimiva esimerkki toiminnosta, jolla on useita parametreja. Siihen tarvitaan kaksi parametria: syöttömerkkijono ja numeroarvo. Numeroarvo osoittaa, kuinka monta merkkiä merkkijonon vasemmalla puolella haluat näyttää hälytysruudussa. Kun suoritat seuraavan komentosarjan, hälytysruudussa näkyy "Tämä on" - syötemerkkijonon seitsemän ensimmäistä merkkiä.

Globaalimuuttujaesimerkki vasen ("Tämä on testi", 7);

function lefty (InString, Num) {var OutString = InString.substring (InString, Num); hälytys (OutString); }

Palautetaan arvo funktiosta

Tähän mennessä kuvatut toiminnot eivät palauta arvoa; eli he tekevät mitä tahansa taikaa, jonka haluat heidän tekevän, sitten lopetetaan. Funktio ei anna "lähtö" -arvoa. Joillakin muilla kielillä tällaisia ​​paluuvapaita toimintoja kutsutaan aliohjelmiksi. JavaScriptissä (kuten C: ssä ja C ++: ssa) "funktiot ovat funktioita" riippumatta siitä, palauttavatko ne arvon.

Funktion arvon palauttaminen on helppoa: käytä palata lauseke sekä arvo, jonka haluat palauttaa. Tämä on kätevää, kun haluat toiminnosi selata tietoja ja palauttaa käsitellyn tuloksen. Ota vasen toiminto ylhäältä. Katkaistun merkkijonon näyttämisen sijaan voit palauttaa sen kutsutoimintoon ja käyttää palautusarvoa haluamallasi tavalla.

Globaalimuuttujaesimerkki var Ret = vasenkätinen ("Tämä on testi", 7); hälytys (Ret);

toiminto vasen (InString, Num) {var OutString = InString.substring (InString, Num); paluu (OutString); }

Tämä komentosarja tekee olennaisesti saman kuin edellinen esimerkki, mutta sen sijaan, että aina näytetään katkaistua tekstiä, funktio vain palauttaa käsitellyn arvon. Palautusarvo kaapataan muuttujaan, ja voit vapaasti käyttää muuttujaa haluamallasi tavalla. Edellä on esitetty Ret muuttuja, jota käytetään hälytyslaatikossa, mutta voit käyttää sitä myös muilla tavoilla. Voit esimerkiksi kirjoittaa Ret-muuttujan sisällön käyttämällä document.write menetelmä:

document.write (Ret); 

Paikallisten muuttujien määritteleminen funktioiden sisällä

Oletuksena kaikki JavaScript-muuttujat ilmoitetaan globaaleiksi niitä luoneelle asiakirjalle. Tämä tarkoittaa, että kun määrität muuttujan funktiossa, se on myös "näkyvä" kyseisen asiakirjan muille skriptin osille. Esimerkiksi seuraavassa globaalissa muuttujatestissä muuttujatesti näkyy showVar funktio, vaikka muuttuja on määritelty loadVar toiminto.

Esimerkki globaalista muuttujasta

function showVar () {hälytys (testi)}

funktio loadVar () {test = "6"}

loadVar ();

Soita napsauttamalla -toiminto.

Globaalit muuttujat eivät aina ole mitä haluat. Sen sijaan haluat muuttujia, jotka ovat paikallisia funktiolle. Nämä muuttujat ovat olemassa vain niin kauan kuin JavaScript käsittelee toimintoa. Kun se poistuu toiminnosta, muuttujat menetetään. Lisäksi tietyn nimen paikallista muuttujaa käsitellään erillisenä kokonaisuutena samannimisestä globaalista muuttujasta. Tällä tavoin sinun ei tarvitse huolehtia muuttujien nimien uudelleenkäytöstä. Funktion paikallisella muuttujalla ei ole vaikutusta komentosarjan muualla käytettyyn globaaliin muuttujaan.

Paikallisen muuttujan julistamiseksi lisää var-avainsana funktion muuttujan nimen alkuun. Tämä kertoo JavaScriptille, että haluat muuttaa muuttujan paikalliseksi kyseiselle toiminnolle. Muuta testinä testinä loadVar toiminto seuraavaan ja lataa komentosarja uudelleen. Kun napsautat painiketta, JavaScript kertoo, että muuttujaa ei ole olemassa. Tämä johtuu siitä, että testi on vain paikallinen loadVar toimintoa, eikä sitä ole toiminnon ulkopuolella.

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

Kutsu yhtä toimintoa toisesta toiminnosta

Funktion sisällä oleva koodi käyttäytyy aivan kuten muualla. Tämä tarkoittaa, että voit kutsua yhtä toimintoa toisen toiminnon sisältä. Tämän avulla voit "pesiä" toimintoja, jotta voit luoda erillisiä toimintoja, jotka kukin suorittavat tietyn tehtävän, ja suorittaa ne sitten yhtenä kokonaisuutena yhtenä peräkkäisenä. Esimerkiksi tässä on funktio, joka kutsuu kolme muuta myyttistä toimintoa, joista kukin palauttaa tekstijonon, jota on muutettu jollakin tavalla.

funktio run () {var Ret = changeText ("Vaihda minua"); hälytys (Ret); document.write (Ret); } function changeText (Teksti) {Teksti = makeBold (Teksti); Teksti = makeItalics (Teksti); Teksti = makeBig (Teksti); paluu (teksti); } function makeBold (InString) {return (InString.bold ()); } function makeItalics (InString) {return (InString.italics ()); } function makeBig (InString) {return (InString.big ()); } 

Objektien luominen käyttäjän määrittelemillä toiminnoilla

JavaScript perustuu esineisiin: ikkuna on objekti, linkit ovat objekteja, lomakkeet ovat objekteja, jopa Netscape itse (tai muu selain) on objekti. Objektien käyttö voi helpottaa ja virtaviivaistaa ohjelmointia. Voit laajentaa JavaScript-objektien käyttöä tekemällä oman. Prosessi käyttää toimintoja hieman muokatulla tavalla. Itse asiassa olet yllättynyt siitä, kuinka helppoa on luoda omia JavaScript-esineitä.

Uuden objektin tekeminen edellyttää kahta vaihetta:

  • Määritä objekti käyttäjän määrittämässä toiminnossa.
  • Käytä uutta avainsanaa luodaksesi (tai suorittaaksesi) objektin kutsumalla objektitoimintoa.

Tässä on esimerkki maailman yksinkertaisimmasta käyttäjän määrittämästä JavaScript-objektista:

// tämä osa luo uuden objektin ret = new makeSimpleObject ();

// tämä osa määrittelee objektitoiminnon makeSimpleObject () {}

Olen soittanut uudelle objektille ret; käytä mitä tahansa kelvollista muuttujanimeä uudelle objektille (käytän pieniä kirjaimia muuttujille, jotka sisältävät objekteja, joten on helpompaa sanoa, että muuttuja sisältää objektin).

Voit käyttää samaa objektifunktiota luomaan minkä tahansa määrän uusia objekteja. Esimerkiksi nämä rivit luovat neljä uutta ja erillistä kohdetta: eenie, meenie, minie ja moe:

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

Itse asiassa yllä olevaan "maailman yksinkertaisimpaan JavaScript-objektiin" on jopa pikakuvake. Sinun ei tarvitse määrittää objektitoimintoa paljain luun objektin tekemiseksi. JavaScript tukee yleistä Object () -objektia, jonka avulla voit luoda uusia objekteja. Seuraava tekee saman kuin yllä, ilman nimenomaista objektitoimintoa:

eenie = uusi objekti (); 

Uusien ominaisuuksien määrittely jo tehdyille esineille