Päivitä HTML-tekstisisältö JavaScriptillä¶

Nämä harjoitukset vaativat JavaScriptin, ja sinun tulee tietää sen perusasiat ennen kuin voit suorittaa ne harjoitukset. Varmista siis, että tunnet JavaScriptin perusteet. Ensimmäisen alla olevan viittauksen pitäisi olla helppo ymmärtää ja seurata. Kaksi ensimmäistä lukua ovat luultavasti riittäviä, jotta voit suorittaa nämä harjoituksia, mutta jos ei, tiedät nyt mistä löytää lisää JavaScript-tietoja. Mozilla Developer Network (MDN) opetusohjelma on hieman teknisempi ja edellyttää jonkin verran aiempaa ohjelmoinnin tuntemusta, mutta se on silti erittäin hyvä pikaopas nyt tai myöhemmin, kun tunnet itsesi varmemmaksi taitosi.

Taustatietoja¶

Näiden harjoitusten suorittaminen vaatii taustatietoa siitä, miten JavaScript toimii selaimessa ja kuinka verkkosivun käyttäjä voi olla vuorovaikutuksessa JavaScriptin kanssa. Tarvitset kaksi pääkäsitettä tiedä täällä. Document Object Model (DOM) ja tapahtumat.

Document Object Model (DOM) on JavaScriptin esitys HTML:stä ja kaikista sivun elementeistä. Jokainen elementti ja sen attribuutit sekä jokaisen elementin kaikki tyylit ja tekstisisällöt ovat tallennettu hierarkkiseen puurakenteeseen. JavaScript voi siksi käyttää ja käsitellä kaikkia dokumentoida sisältöä ja tehdä muutoksia elementtien tyyleihin ja teksteihin ja se voi myös luoda ja poista elementtejä.

Tapahtumat puolestaan ovat kaiken interaktiivisuuden perusta millä tahansa verkkosivulla. Selain luo tapahtumia aina kun tapahtuu jotain, jolla voi olla tai tulee olemaan vaikutusta asiakirjaan. Näitä tapahtumia ovat mm hiiren napsautukset, näppäimistötapahtumat, kuten näppäimen painaminen ja näppäimen vapauttaminen, sivun vierittäminen ylös tai alas, lomakkeen lähettäminen, selaimen ikkunan koon (näkymäportin) muuttaminen ja niin edelleen. JavaScript-koodi voi sitten “liitä tapahtumakuuntelija” tai useita kuuntelijoita mihin tahansa ja kaikkiin näihin tapahtumiin tarpeen mukaan. Tapahtuma kuuntelijat ovat toimintoja, jotka vastaanottavat tapahtumaobjektin, joka kuvaa tapahtuneen tapahtuman yksityiskohdat ja tapahtuman kuuntelija voi sitten tehdä luovia asioita, joita olette kaikki nähneet monien sivujen tekevän Internetissä. Näitä asioita ovat lomakkeen syötteen vahvistaminen ja virheilmoituksen näyttäminen, jos lomake on ei täytetty oikein tai näytetään ja piilotetaan elementtejä käyttäjän toimien perusteella, mutta ne voivat myös olla hyvinkin monimutkaisia asioita, kuten grafiikan piirtäminen näytölle ja grafiikan siirtäminen käyttäjän mukaan toimintoja kuten peleissä ja animaatioissa.

Ohjeet¶

Tässä harjoituksessa päivitämme HTML-sivun sisällön JavaScriptillä. Aiot rakentaa lomakekäsittelijän, joka ottaa käyttäjän syötteen ja korvaa kappaleen edellisen sisällön annetulla syötteellä.

Lataa malli¶

update_text_content.zip

Ohjeet¶

Yllä olevassa kuvassa näet odotetun lopputuloksen. Kun olet kirjoittanut joitakin tekstin syöttökenttään ja lähettänyt lomakkeen, syöttö “korvaa” sisällön kappale ja syöttökenttä on “palauta tyhjäksi”, jotta se on valmis seuraavaa syöttöä varten.

HUOMAA: Kaikki alla olevat vaiheet eivät ole pakollisia, ja lopputulos ratkaisee.

Kokeneemmille JavaScript-kooderit jotkin vaiheet saattavat tuntua tarpeettomilta, mutta toisille niiden pitäisi osoittautua hyödyllisiksi kun välissä on muutamia tarkistuspisteitä ja joitain toimintoja rakennetaan asteittain.**

Aloita ensin lataamalla mallitiedostot. HTML-malli huolehtii tiedoston lataamisesta JavaScript-tiedosto ja sinun ei tarvitse muuttaa muuta kuin index.js-tiedostoa.

Kaikki koodisi menee ``index.js``-tiedoston sisällä, ja tämä on ainoa tiedosto, jonka lähetät tässä harjoituksessa.

2. HTML-tiedostossa on kolme tärkeää elementtiä: lomakesyöttö, jonka tunnus on “tyyppi-syöttö”, kohde kappale, jonka tunnus on “receive-input” ja itse lomake, jonka tunnus on “lomake”. Ensimmäinen tehtäväsi on saada käsiinsä kaikki nämä elementit koodissasi. JavaScriptissä pääset tiettyyn elementtiin monissa eri tavoin, mutta tässä se, että kaikilla näillä elementeillä on tunnus, auttaa meitä, koska tunnukset ovat aina yksilöllisiä ja sinä voi löytää tietyn elementin sen tunnuksen perusteella. Voit käyttää document.getElementById() tai document.querySelector() jotka molemmat palauttavat vain yhden elementin edellyttäen, että on olemassa elementti, joka täyttää hakuehdot. Esimerkiksi lomakeelementti voi löytyä joko document.getElementById("form") tai document.querySelector("#form") avulla. Ensimmäinen näistä kahdesta menetelmästä tekee juuri sen, mitä arvaat, se saa elementin tunnuksellaan, mutta toinen on mielenkiintoisempi, koska se hyväksyy argumenttina CSS-valitsimen ja voit löytää myös elementtejä, joilla ei ole ID ja tähän meidän on lisättävä “#” hash-merkki id:n eteen aivan kuten CSS:ssä. Mielenkiintoista tässä tapauksessa toimisi myös yksinkertaisesti document.querySelector("form") kanssa, mutta ero on sama kuin CSS:ssä. viittaamme kaikkiin lomakeelementteihin, ei vain yhteen, vaan koska document.querySelector() palauttaa aina ensimmäisen vastaavan elementti tässä tapauksessa toimisi hyvin. On myös menetelmä document.querySelectorAll(), joka olisi palauttaa kaikki vastaavat elementit, ei vain ensimmäistä. Katso: Haku: getElement*, querySelector*

3. Toteuta seuraavaksi submitHandler(e)-funktio, joka on index.js-tiedoston sisällä. Tämä toiminto lukee “syöttökentän arvo” ja “korvaa” kappaleen sisällön arvolla, mutta vain jos arvo ei ole tyhjä ja sisältää enemmän kuin vain välilyöntejä. Sitten se palauttaa syöttökenttien arvon tyhjäksi merkkijonoksi. Elementin vaihto tekstiä sisältävä sisältö voidaan tehdä helposti asettamalla elementin textContent-ominaisuus halutuksi tekstiksi. Tämä funktio ottaa yhden argumentin nimeltä e, joka on lähetä tapahtuma selaimesta.

4. Liitä seuraavaksi juuri luomasi funktio lomakkeen lähetystapahtumaan. Nyt voit kokeilla ja testata muotoasi. Huomaat heti, että toimintosi ei näytä toimivan ja kappaleen sisällä oleva teksti ei toimi vaihdettu, mutta syöttökenttä on edelleen tyhjä. Tämä johtuu siitä, että selaimella on oma “oletustoiminto”. kun lomake lähetetään ja tässä tapauksessa selain todella lähettää lomakkeen ja sen tiedot takaisin URL-osoitteeseen lomakkeen “action-attribuutilla” määritetty osoite tai jos sitä ei ole, selain olettaa sen olevan sama osoite, josta alkuperäinen asiakirja ladattiin. Joka tapauksessa tämä tarkoittaa, että selain lataa uuden sivun (tai meidän tapauksessamme sama sivu). Tämä lataa sivun uudelleen tekstin korvaamisen sijaan. Tapahtumakäsittelijän pitäisi peruuta oletustoiminto ennen asiakirjan muokkaamista. Tässä on argumentti “e”. Se on esittäminen tapahtuma ja sinun tulee lisätä e.preventDefault() funktiosi ensimmäiseksi riviksi. Katso: Forms: tapahtuma ja menetelmä lähetä (Muuten, vaikka kaikkiin tapahtumiin ei ole liitetty oletustoimintoja, toinen esimerkki oletustoiminnosta on kun napsautat linkkiä ja selain seuraa linkkiä ja lataa uuden sivun. Katso: Selaimen oletustoiminnot)

5. Lataa sivusi uudelleen varmistaaksesi, että JavaScript-tiedostoon tekemäsi muutokset on ladattu, ja testaa sovelluksesi. Yritä syöttää tekstiä ja lähettää lomake ja katso, onko kappaleen teksti “korvattu” oikein ja syöttökenttä on “nollaa tyhjäksi”. Kokeile tätä muutaman kerran. Jos kaikki toimii onnittelut! Muuten sinä pitäisi nähdä joitain virheilmoituksia selainkonsolissa. Viestistä riippuen sinun tulee yrittää paikantaa virheen lähde ja korjaa se. Joka tapauksessa virheilmoituksen tulee sisältää virheen rivinumero. Katso: Debugging in Chrome

A+ esittää tässä kohdassa tehtävän palautuslomakkeen.