Kuinka erottaa JavaScript verkkosivustollasi

Kun kirjoitat ensimmäisen JavaScriptin, helpoin tapa asettaa se on upottaa JavaScript-koodi suoraan verkkosivulle, niin että kaikki on yhdessä paikassa, kun testaat sitä saadaksesi toimimaan oikeassa. Samoin, jos lisäät valmiiksi kirjoitettua skriptiä verkkosivustollesi, ohjeissa saatetaan kehottaa upottamaan kaikki skriptin osat tai kaikki itse verkkosivulle.

Tämä on oikein sivun asettamiseen ja sen toimimiseen oikein, mutta kun sivu toimii haluamallasi tavalla, pystyt paranna sivua purkamalla JavaScripti ulkoiseen tiedostoon, jotta HTML-sivusi sisältö ei olisi niin täynnä muita kuin sisältötuotteita, kuten JavaScript.

Jos kopioit ja käytät vain muiden kirjoittamia JavaScripts-kirjoituksia, heidän ohjeet heidän komentosarjansa lisäämiseksi sivullesi ovat saattaneet johtaa siihen, että sinulla on yksi tai useampi suuri osa JavaScripti todella upotettu verkkosivullesi itse, ja heidän ohjeissaan ei kerrota kuinka voit siirtää tämän koodin sivulta erilliseen tiedostoon ja silti JavaScript työ. Älä kuitenkaan huolestu, koska riippumatta siitä, mitä koodia JavaScript käytät sivullasi, voit helposti siirtää JavaScriptiä poistu sivulta ja aseta se erilliseksi tiedostoksi (tai tiedostoiksi, jos sivulle on upotettu useampi kuin yksi JavaScriptin kappale). Prosessi tämän tekemiseksi on aina sama ja se kuvataan parhaiten esimerkillä.

Tarkastellaan kuinka JavaScriptin osa voi näyttää sivulle upotettuna. Todellinen JavaScript-koodi on erilainen kuin seuraavissa esimerkeissä, mutta prosessi on sama kaikissa tapauksissa.

Upotetun JavaScriptin pitäisi näyttää siltä, ​​että se on yksi kolmesta edellä mainitusta esimerkistä. Todellinen JavaScript-koodi on tietysti erilainen kuin näkyvä, mutta JavaScripti upotetaan todennäköisesti sivulle jollain edellä mainituista kolmesta menetelmästä. Joissain tapauksissa koodisi voi käyttää vanhentunutta language = "javascript" sijasta type = "text / javascript" jolloin voit halutessasi päivittää koodisi päivitetymmäksi korvaamalla kielimääritteen tyypillä.

Ennen kuin voit purkaa JavaScriptin omaan tiedostoon, sinun on ensin tunnistettava purettava koodi. Kaikissa kolmessa yllä olevassa esimerkissä on kaksi riviä todellista JavaScript-koodia, jotka on purettava. Skriptissasi on todennäköisesti paljon enemmän rivejä, mutta se voidaan helposti tunnistaa, koska se vie sivullesi saman paikan kuin kaksi JavaScriptin riviä, jotka ovat korostaneet kolmessa edellä mainitussa esimerkissä (kaikki kolme esimerkkiä sisältävät samat kaksi riviä JavaScriptiä, vain niiden ympärillä oleva säilö on hieman eri).

1. Ensimmäinen asia, joka sinun on tehtävä JavaScriptin tosiasialliseksi purkamiseksi erilliseen tiedostoon, on avata selkeä tekstieditori ja käyttää verkkosivusi sisältöä. Tämän jälkeen sinun on löydettävä sulautettu JavaScript, jota ympäröi jokin yllä olevissa esimerkeissä esitetyistä koodimuunnelmista.
2. Kun JavaScript-koodi on löydetty, sinun täytyy valita se ja kopioida leikepöydälle. Yllä olevassa esimerkissä valittava koodi on korostettu, sinun ei tarvitse valita komentosarjojen tunnisteita tai valinnaisia ​​kommentteja, jotka saattavat näkyä JavaScript-koodisi ympärillä.
3. Avaa toinen kopio tavallisesta tekstieditorista (tai toisesta välilehdestä, jos editori tukee useamman kuin yhden tiedoston avaamista kerrallaan) ja ohita JavaScript-sisältö siellä.
4. Valitse kuvaava tiedostonimi, jota haluat käyttää uudessa tiedostossa, ja tallenna uusi sisältö kyseisellä tiedostonimellä. Esimerkkikoodilla komentosarjan tarkoitus on irtautua kehyksistä, jotta sopiva nimi voisi olla framebreak.js.
5. Joten nyt JavaScript on erillisessä tiedostossa, palaamme editoriin, jossa meillä on alkuperäinen sivun sisältö, tehdäksesi muutokset linkittääksesi skriptin ulkoiseen kopioon.
6. Koska skripti on nyt erillisessä tiedostossa, voimme poistaa kaiken alkuperäisessä sisällössä olevien komentosarjojen välillä, jotta tag.
7. Viimeinen vaihe on lisätä ylimääräinen määrite skriptitunnisteeseen yksilöimään, mistä se löytää ulkoisen JavaScriptin. Teemme tämän käyttämällä src = "tiedostonimi" määrite. Esimerkkikomentosarjamme määrittäisimme src = "framebreak.js".
8. Ainoa komplikaatio tähän on, jos olemme päättäneet tallentaa ulkoiset JavaScriptit erilliseen kansioon niitä käyttävistä verkkosivuista. Jos teet tämän, sinun on lisättävä polku verkkosivun kansiosta JavaScript-kansioon tiedostonimen edessä. Esimerkiksi, jos JavaScriptit tallennetaan js -kansio kansiossa, joka sisältää tarvittavat verkkosivumme src = "js / framebreak.js"

Joten miltä koodi näyttää kun olemme erottaneet JavaScriptin erilliseen tiedostoon? Esimerkissä JavaScript (olettaen, että JavaScripti ja HTML ovat samassa kansiossa) verkkosivumme HTML on nyt seuraava:

Meillä on myös erillinen tiedosto nimeltä framebreak.js, joka sisältää:

if (top.sijainti! = oma.sijainti) top.lokaatio = oma.sijainti;

Tiedostonimesi ja tiedostosi sisältö eroavat paljon siitä, koska olet purkanut mitä tahansa JavaScriptiä upotettiin verkkosivullesi ja annettiin tiedostolle kuvaava nimi sen perusteella se tekee. Todellinen sen purkamisprosessi on sama, tosin riippumatta siitä, mitä rivejä se sisältää.

Entä ne muut kaksi riviä kussakin esimerkissä kaksi ja kolme? No, esimerkissä 2 olevien rivien tarkoituksena on piilottaa JavaScript Netscape 1: ltä ja Internetiltä Explorer 2, jota kumpikaan ei enää käytä, joten niitä ei todellakaan tarvita ensimmäisessä paikka. Koodin sijoittaminen ulkoiseen tiedostoon piilottaa koodin selaimilta, jotka eivät ymmärrä komentotunnistetta tehokkaammin kuin ympäröivät sitä HTML-kommentissa. Kolmatta esimerkkiä käytetään XHTML-sivuilla kertoa validoijille, että JavaScriptiä on kohdeltava sivun sisällönä eikä sen validointia. HTML-muodossa (jos käytät HTML-asemityyppiä XHTML-tiedoston sijasta), validoija tietää jo tämän, joten nuo tunnisteet eivät ole tarvittu). Kun JavaScript on erillisessä tiedostossa, sivulla ei enää ole JavaScriptiä, jonka validoijat voivat ohittaa, joten näitä rivejä ei enää tarvita.

Yksi hyödyllisimmistä tavoista, joilla JavaScriptiä voidaan käyttää toimintojen lisäämiseen verkkosivulle, on suorittaa jonkinlainen käsittely vastauksena vierailijan toimiin. Yleisin toimenpide, johon haluat vastata, on se, kun kävijä napsauttaa jotain. Kutsutaan tapahtumakäsittelijää, jonka avulla voit vastata kävijöille jotain napsauttamalla klikkaamalla.

Kun suurin osa ihmisistä ajattelee ensin onclick-tapahtumakäsittelijän lisäämistä verkkosivulleen, he ajattelevat heti lisäävän sen tag. Tämä antaa koodin, joka näyttää usein seuraavalta:

Tämä on väärä tapa käyttää onclickiä, ellei href-määritteessä ole todellista merkityksellistä osoitetta, jotta ne, joilla ei ole JavaScriptiä, siirretään jonnekin, kun he napsauttavat linkkiä. Monet ihmiset jättävät myös "palata väärin" tästä koodista ja ihmettelevät, miksi nykyisen sivun yläosa latautuu aina komentosarjan suorittamisen jälkeen (mitä href = "#" käskee sivun tekemään, ellei väärää palauteta kaikilta tapahtumakäsittelijöiltä. Tietysti, jos sinulla on jotain merkityksellistä linkin määränpäänä, kannattaa ehkä mennä sinne onclick-koodin suorittamisen jälkeen, etkä siis tarvitse "palata vääriä".

Se mitä monet ihmiset eivät ymmärrä, onclick-tapahtumakäsittelijä voidaan lisätä minkä tahansa Verkkosivun HTML-tunniste vuorovaikutukseen, kun kävijä napsauttaa kyseistä sisältöä. Joten jos haluat jotain juostavan, kun ihmiset napsauttavat kuvaa, voit käyttää:

Jos haluat suorittaa jotain, kun ihmiset napsauttavat jotain tekstiä, jota voit käyttää:

tekstiä

Tietenkään nämä eivät anna automaattista visuaalista johtolankaa, että vastaus saadaan, jos vierailija napsauttaa niitä linkin tapaan, mutta voit lisätä kyseisen visuaalisen vihjeen tarpeeksi helposti itse muotoilemalla kuvaa tai span asianmukaisesti.

Toinen huomioitava näistä onclick-tapahtumakäsittelijän kiinnittämistavoista on, että ne eivät vaadi "return false", koska mitään oletustoimintoa ei tapahdu, kun elementtiä napsautetaan, minkä täytyy olla liikuntarajoitteinen.

Nämä onclick-kiinnitystavat ovat suuri parannus monien käyttämään huonoon menetelmään, mutta se on vielä kaukana parhaasta tavasta koodata sitä. Yksi ongelma onclickin lisäämisessä jollain yllä olevista menetelmistä on, että se sekoittaa JavaScriptiä edelleen HTML-koodiin. klikkaamalla On ei HTML-määrite, se on JavaScriptin tapahtumakäsittelijä. Sellaisenaan, että JavaScriptin erottaminen HTML: stä sivun ylläpidon helpottamiseksi on tehtävä, on saatava tämä napsautusviittaus HTML-tiedostosta erilliseen JavaScript-tiedostoon, johon se kuuluu.

Helpoin tapa tehdä tämä on korvata HTML-osoitteen napsautus napsautuksella id jonka avulla on helppo liittää tapahtumakäsittelijä HTML-koodin oikeaan kohtaan. Joten HTML-koodi voi nyt sisältää yhden seuraavista lauseista:

 tekstiä

Sitten voimme koodata JavaScriptin erillisessä JavaScript-tiedostossa, joka joko linkitetään sivun rungon alaosaan tai joka on sivun päässä ja jossa koodimme on toiminnassa, jota itse kutsutaan sivun lataamisen päätyttyä. JavaScript-tapahtumakäsittelijöiden liittäminen näyttää nyt seuraavalta:

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

Yksi huomionarvoinen asia. Huomaat, että olemme aina kirjoittaneet napsautuksella kokonaan pienillä kirjaimilla. Kun koodaat lausetta HTML-koodiinsa, näet joidenkin kirjoittavan sen onClick-muodossa. Tämä on väärin, koska kaikki JavaScriptin tapahtumakäsittelijöiden nimet ovat pieniä ja ei ole sellaista käsittelijää kuin onClick. Voit päästä eroon siitä, kun sisällytät JavaScriptin HTML-tunnisteeseesi suoraan, koska HTML ei ole kirjainkoolla ja selain kartoittaa sen oikealle nimellesi. Et voi päästä eroon vääristä isoista isoista JavaScripteistä, koska JavaScript on kirjainkoolla ja JavaScript ei sisällä sellaista asiaa kuin onClick.

Tämä koodi on valtava parannus aikaisempiin versioihin verrattuna, koska me molemmat liitämme tapahtuman oikeaan elementtiin HTML-koodissamme ja JavaScript on täysin erillinen HTML: stä. Voimme kuitenkin parantaa tätä entisestään.

Yksi jäljellä oleva ongelma on, että voimme liittää vain yhden onclick-tapahtumakäsittelijän tiettyyn elementtiin. Jos joudumme milloin tahansa liittämään toisen onclick-tapahtumakäsittelijän samaan elementtiin, aikaisemmin liitettyä prosessointia ei enää liitetä siihen elementtiin. Kun lisäät useita erilaisia ​​skriptejä verkkosivullesi eri tarkoituksia varten, ainakin a mahdollisuus, että kaksi tai useampi heistä haluaa tarjota jonkin prosessoinnin suoritettaviksi, kun sama elementti on napsautti. Sotkuinen ratkaisu tähän ongelmaan on tunnistaa tilanne, jossa tämä tilanne syntyy, ja yhdistää kutsuttavat prosessoinnit toimintoon, joka suorittaa kaiken käsittelyn.

Vaikka tällaiset törmäykset ovat vähemmän yleisiä onclickillä kuin onloadilla, törmäysten tunnistaminen etukäteen ja yhdistäminen yhteen eivät ole ihanteellinen ratkaisu. Se ei ole ollenkaan ratkaisu, kun elementtiin liitettävä todellinen käsittely muuttuu ajan myötä siten, että joskus on yksi tehtävä, joskus toinen, ja joskus molemmat.

Paras ratkaisu on lopettaa tapahtumakäsittelijän käyttö kokonaan ja käyttää sen sijaan JavaScriptin tapahtumankäyttäjää (pitkin ja vastaava JScript AttaEvent -tapahtuma - koska tämä on yksi niistä tilanteista, joissa JavaScript ja JScript eroavat). Voimme tehdä tämän helpoimmin luomalla ensin addEvent-toiminnon, joka lisää joko tapahtuman kuuntelijan tai liitetiedoston sen mukaan, kumpaa näistä kahdesta ohjattava kieli tukee;

funktio addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); palata totta; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Voimme nyt liittää prosessoinnin, jonka haluamme tapahtuvan, kun elementtiämme napsautetaan käyttämällä:

addEvent (document.getElementById ('spn1'), 'napsauta', dosomething, false);

Tämän prosessoitavan koodin liittämismenetelmän käyttäminen, kun elementtiä napsautetaan, tarkoittaa sitä, että uuden addEvent-puhelun soittaminen toisen toiminnon lisäämiseksi suorittaminen, kun tiettyä elementtiä napsautetaan, ei korvaa aiempaa käsittelyä uudella käsittelyllä, vaan sallii sen sijaan molemmat toiminnot olla juosta. Meillä ei ole tarvetta tietää soitettaessa addEvent-tapahtumaan, onko meillä jo toiminto liitettynä elementti, joka suoritetaan, kun sitä napsautetaan, uusi toiminto ajetaan yhdessä aikaisemmin käytettyjen toimintojen kanssa liitteenä.

Jos tarvitsemme kyvyn poistaa toimintoja siitä, mikä käynnistyy, kun elementtiä napsautetaan, voisimme luoda vastaava deleteEvent -toiminto, joka kutsuu asianmukaisen toiminnon tapahtuman kuuntelijan tai liitteen poistamiseksi tapahtuma?

Tämän prosessoinnin liittämisen viimeisen tavan yhtenä haittapuolena on, että todella vanhat selaimet eivät tue näitä suhteellisen uusia tapoja liittää tapahtumien prosessointi verkkosivulle. Tällaisia ​​vanhentuneita selaimia käyttävien ihmisten pitäisi olla jo vähän tarpeeksi, jotta he jättäisivät huomioimatta mitä J (ava) Käsikirjoitus, jonka kirjoitamme lukuun ottamatta koodin kirjoittamista siten, että se ei aiheuta valtavia määriä virheitä viestejä. Yllä oleva toiminto on kirjoitettu siten, että se ei tee mitään, jos kumpaakaan sen käyttämistä tavoista ei tueta. Suurin osa näistä todella vanhoista selaimista ei tue getElementById-tapaa viitata HTML: ään myöskään niin yksinkertaista if (! document.getElementById) palauttaa vääriä; minkä tahansa toimintosi yläosassa, joka soittaa tällaisia ​​puheluita, olisi myös asianmukaista. Tietenkin, monet JavaScriptin kirjoittajat eivät ole niin huomaavaisia ​​niissä, jotka edelleen käyttävät antiikkiselaimia ja joten käyttäjien on tottuttava näkemään JavaScript-virheitä melkein jokaisella verkkosivulla, jota he nyt käyvät.

Millä näistä eri tavoista liität prosessoinnin sivullesi suoritettavaksi, kun kävijät napsauttavat jotain? Jos tekemäsi tapa on lähempänä sivun yläosassa olevia esimerkkejä kuin sivun alaosassa olevia esimerkkejä, niin ehkä kun ajattelit parantamasi tapaa kirjoittaa onclick-prosessointisi käyttää jotakin parempista menetelmistä, jotka esitetään alhaalla sivu.

Kun tarkastelet selainten rajat ylittävän tapahtuman kuuntelijan koodia, huomaat, että on olemassa neljäs parametri, jota kutsumme UC, jonka käyttö ei ole ilmeinen aiemmasta kuvauksesta.

Selaimilla on kaksi erilaista järjestystä, joissa he voivat käsitellä tapahtumia tapahtuman käynnistyessä. Ne voivat toimia ulkopuolelta sisäänpäin

• uC = totta prosessoida kaappausvaiheen aikana
• uC = vääriä prosessoida kuplavaiheen aikana.

Joten jos siellä on useita muita tunnisteita, jotka on kääritty sen ympärille, tapahtuma laukaistaan ​​sieppausvaiheessa, se alkaa ensin uloimmalla tunnisteella ja liikkuu sisään kohti sitä, joka laukaisi tapahtuman, ja sitten kun tunniste, johon tapahtuma on kiinnitetty, on käsitelty, kuplavaihe kääntää prosessin ja sammuu uudelleen.

Internet Explorer ja perinteiset tapahtumakäsittelijät käsittelevät aina kuplavaihetta, eivät koskaan sieppausvaihetta, joten aloita aina tarkeimmalla tunnisteella ja työskentelevät ulospäin.

Joten tapahtumakäsittelijöiden kanssa:

xx