Kuinka rakentaa satunnainen lainausgeneraattori JavaScriptillä ja HTML: llä ehdottomille aloittelijoille

Tämä opetusohjelma on tarkoitettu aloittelijoille, jotka haluavat oppia luomaan yksinkertaisen verkkosovelluksen JavaScriptin avulla. Se auttaa sinua ymmärtämään JavaScriptin ja HTML-asiakirjan välistä vuorovaikutusta ja kuinka ne toimivat yhdessä näyttääkseen asioita verkkoselaimessa ihmisten nähtäväksi.

Jos sinulla ei ole mitään kokemusta HTML: stä ja JavaScriptistä, ei hätää. Käyn läpi kaikki koodirivit ja selitän kaiken yksityiskohtaisesti. Tämän oppitunnin loppuun mennessä sinun pitäisi olla paljon parempi käsitys siitä, miten JavaScript toimii HTML: n kanssa, jotta verkkosivut ovat vuorovaikutteisia.

Tässä projektissa rakennamme satunnaisen lainausgeneraattorin, joka näyttää satunnaisen tarjouksen käyttäjälle aina, kun hän painaa painiketta. Aloittamiseen tarvitaan kolme olennaista asiaa, joita käytetään melkein aina jokaisessa verkkoprojektissa:

  • selain
  • tekstieditori
  • halu rakentaa asioita

Tässä opetusohjelmassa käytän Google Chrome -selainta, Sublime Text 3 Editoria ja tietysti omaa haluanni rakentaa ja opettaa. Voit käyttää mitä tahansa työkaluja, joiden kanssa tunnet olosi mukavaksi.

Aloitetaan!

Ensimmäinen asia, jonka teemme, on luoda kansio, joka sisältää kaikki tiedostomme, jotka muodostavat projektin. Luo tyhjä kansio työpöydällesi ja nimeä se "lainausgeneraattoriksi". Avaa Sublime Text ja vedä tiedosto sublimiin . Nyt kansion pitäisi olla käytettävissä sivupalkin kautta.

Suurin osa verkkoprojekteista koostuu vähintään yhdestä HTML-, JavaScript- ja CSS-tiedostosta. Luodaan nämä tiedostot “lainausgeneraattori” -kansioon.

Sublime-tekstissä,Napsauta hiiren kakkospainikkeella sivupalkissa olevaa tarjousgeneraattoria ja napsauta Luo uusi tiedosto . Syöttöpalkki ponnahtaa alareunaan tiedoston nimeämiseksi. Kirjoita “index.html” ja paina Enter. Nyt olet luonut index.html-tiedoston. Toista tämä vaihe vielä kaksi kertaa , mutta luo tiedosto nimeltä “javascript.js” ja “style.css” (ilman lainausmerkkejä) . On tärkeää varmistaa, että kun nimeät tiedoston, kirjaimet ovat aina pieniä, jotta vältetään komplikaatiot.

Nyt kun kaikki tiedostot on asennettu, luodaan HTML-tiedosto, joka toimii verkkoprojektimme perustana. Aloitamme paljain luut HTML-koodilla index.html-tiedostossamme, ennen kuin voimme lisätä mitään.

Alla on HTML-tiedostomme, jossa ei ole mitään. Voit ajatella tätä HTML-luurankoomme, johon mahtuu kaikki liha (sisältö), jonka lisäämme myöhemmin.

Nyt meidän on linkitettävä JavaScript-tiedostomme HTML-dokumenttiin, jotta JavaScript-koodimme voi olla vuorovaikutuksessa HTML-asiakirjan kanssa. Lisäämme myös tekstiä tunnisteet, lisää

elementti, luo a elementti, jonka id- nimi on “quoteDisplay”, ja myös aelementti, johon onclick- attribuutti, johon on siirretty ”newQuote ()”.

Hajottaa se

Jos olet hämmentynyt siitä, miten kukin HTML-koodin osa palvelee tarkoitustaan, selitän sen sinulle täällä. Jos tiedät tarkalleen, mitä kukin elementti tekee ja miksi se on, voit siirtyä seuraavaan osioon jatkaaksesi.

Ensin lisättiin "Quote Gen" tunnisteet. Otsikkotunniste vie tekstin sen väliin ja näyttää sen verkkoselaimesi välilehdessä, kun se avataan.

Ensimmäisen vaiheen aikana meidän on myös varmistettava, että linkität javascript.js-tiedoston HTML-asiakirjan alareunaan juuri ennen sulkemista tag.

Toiseksi loimme

elementin, jossa on "Simple Quote Generator". Tämä näyttää otsikon verkkosivullamme.

Sitten loimme elementti, jonka id- määritteen arvoksi on asetettu “quoteDisplay”. A elementti toimii HTML-asiakirjojen jakajana. elementit auttavat järjestämään sisältöä verkkosivulle. Id attribuutti toimii tunnisteena, niin että JavaScript voi helposti tarttua ja käsitellä sitä. Tällöin käytämme JavaScriptiä tarttumalla elementtiin, jonka tunnus on “quoteDisplay”, jotta lainausmerkit sijoitettaisiin elementti.

Sen jälkeen luomme elementti onclick- määritteellä, jonka parametrina syötetään ”newQuote ()”. kuten arvasit, on painike, joka tekee jotain, kun napsautat sitä. Onclick määritettä käytetään asettamaan toiminto painikkeen niin, että joka kerta, kun klikkaa painiketta, se toimii toiminnon, joka johdettiin's onclick määrite.

Tässä tapauksessa joka kerta kun napsautat painiketta, se suorittaa funktion newQuote (), emme tietenkään ole vielä määrittäneet newQuote () -funktiota. Jos avaat projektin selaimessa ja painat painiketta, se aiheuttaa virheen konsolissa, koska toimintoa ei ole tällä hetkellä olemassa.

Lopuksi tässä on päivitys, joka näyttää miltä koko index.html -tiedostomme näyttää ja mitä se tuottaa verkkoselaimessa. Voit avata projektin avaamalla index.html-tiedoston verkkoselaimella.

Ajattelu loogisesti koodin avulla

On vihdoin aika alkaa työskennellä javascript.js-tiedostossamme olevan JavaScriptin kanssa, jotta voimme kehittää oman tarjouksemme luontitoiminnon.

Ajatelkaamme nyt, ennen kuin aloitamme koodaamisen, loogisesti, kuinka voimme luoda tarjouksia generoivan koneen koodilla. Emme voi vain aloittaa koodaamista ajattelematta ensin.

Meidän on selvitettävä, mitä haluamme ja milloin haluamme. Tätä projektia varten haluamme lainauksia! Milloin haluamme sen? Haluamme sen nyt! Voi, erm ... tarkoitan, että haluamme sen aina, kun käyttäjä painaa painiketta.

Nyt kun olemme ratkaisseet ensimmäisen kysymyksen, meidän on esitettävä toinen. Mitä ovat lainaukset? Tarkoitan todella, mitä ne ovat?

Kiitos Jaden! Joo! Lainaukset koostuvat kirjaimista, jotka muodostavat sanat. Ohjelmointimaailmassa sanat luokitellaan merkkijonoiksi, joten lainausten on oltava merkkijonoja !

Koska tiedämme, että meillä on useita lainausmerkkejä, ja jokainen niistä valitaan satunnaisesti, paras valinta olisi tallentaa useita merkkijonoja matriisiin .

Jos et vielä tiennyt, taulukon elementit haetaan soittamalla sen taulukon indeksinumeroon . Tekniset yksityiskohdat eivät kuulu tämän opetusohjelman soveltamisalaan, mutta yksinkertaisella tavalla kukin matriisin elementti on esitetty kokonaislukuna aikajärjestyksessä. Matriisin ensimmäisen elementin indeksinumero on 0, jokainen sen jälkeen alkava elementti nousee yhdellä.

Saadaksesi satunnainen lainaus taulukosta tiedämme nyt, että meidän on tuotettava satunnaisluku aina, kun käyttäjä napsauttaa painiketta. Sitten käytämme tätä satunnaislukua hakemaan lainaus taulukosta ja sijoittamalla lainaus HTML-asiakirjaan, mikä puolestaan ​​näyttää lainauksen selaimessa käyttäjälle.

Se siitä! Ratkaisimme kuinka luoda satunnainen lainauslaajennus ajattelemalla loogisesti koodia! Tässä on yhteenveto logiikasta, jonka olemme keksineet projektissamme:

  1. Lainaukset ovat useita merkkijonoja, jotka on tallennettava taulukkoon.
  2. Joka kerta kun painiketta painetaan, on luotava satunnainen kokonaisluku.
  3. Numeroa käytetään lainausryhmän taulukkoindeksinumeron edustajana.
  4. Kun haemme satunnaisesti valitun lainauksen taulukosta käyttämällä satunnaisesti luotua kokonaislukua, sijoitamme sen HTML-dokumenttiin.

Koodausaika!

Vau! Olemme päässeet niin pitkälle emmekä ole vielä aloittaneet ohjelmointia! Tervetuloa ohjelmointimaailmaan!

Kiusoittelen vain.

Ei oikeastaan.

Vietät paljon aikaa koodaamiseen tällä uralla (tai harrastuksella). Mutta ajatukseni on, että aiot viettää vielä enemmän aikaa ajatella ohjelmointilogiikkaa ja ongelmien ratkaisemista. Ohjelmointi ei tarkoita sitä, että hakkeroidaan 100 sanaa minuutissa 20 minuutin ajan näppäimistöllä. Sitä ei tapahdu.

Nyt kun kaikki logiikat ovat poissa tieltä. Aloitetaan koodaus. Työskentelemme nyt javascript.js- tiedostossa.

Meidän on joko luotava omat lainaukset tai kopioitava ne online-lähteestä.

Googlen "parhaat lainaukset" ja kopioin 10 ensimmäistä verkkosivustolta ja sitten sijoitin ne pilkuilla erotettuun ryhmään. Varmista, että lainaat lainausmerkit yksi- tai kaksinkertaisiin lainausmerkeihin. Jos tarjouksesi koostuu heittomerkkeistä, yksittäisistä tai kaksoislainauksista, sinun on ehkä käytettävä taaksepäin viivoja näiden merkkien poistamiseksi, jotta JavaScript tietää, että symbolit ovat osa merkkijonoa eikä koodauksen syntaksia.

Kuten alla olevasta kuvasta näet, olen määrittänyt muuttujan nimeltä ”lainausmerkit” ja asettanut sen yhtä suureksi taulukoksi, joka on täynnä lainauksia, jotka olen valinnut Internetistä.

Nyt meidän on luotava uusi Quote () -funktiomme, jonka mainitsin aiemmin tämän opetusohjelman HTML-osiossa. NewQuote () -funktiollemme meidän on luotava satunnainen kokonaisluku, joka vaihtelee 0: sta lainausmatriisimme pituuteen . Selitän tarkemmin jäljempänä.

Ensin kutsutaan funktio Math.floor (). Math.floor () -funktio vie parametrin ja pyöristää luvun alaspäin lähimpään kokonaislukuun. Esimerkiksi, jos kutsumme Math.floor (5.7), se palauttaa arvon 5.

Toiseksi siirrämme parametrissa Math.random () parametrina Math.floor (): een. Math.random () -funktio luo satunnaisen desimaaliluvun välillä 0 ja 1.

Joten sanotaan, että meillä on tämä:

Jos konsoli kirjaa satunnaislukumme tässä tilassa, se palauttaa aina 0. Tämä johtuu siitä, että Math.random () on aina desimaali välillä 0 ja 1, kuten 0,4, 0,721, 0,98 ja niin edelleen. Koska välitämme Math.random (): n parametriksi Math.floor (), Math.floor () pyöristyy aina alaspäin lähimpään desimaaliin, joten jokainen desimaali välillä 0 ja 1 palaa aina takaisin arvoon 0.

Joten mitä järkeä on tehdä tämä? Taulukkoindeksinumeroiden luominen edellyttää kokonaislukuja, mutta satunnaisia ​​kokonaislukuja. Satunnaislukujen muodostamiseksi ja erottamiseksi vain 0: n palauttamisesta meidän on otettava satunnais desimaali ja kerrottava se kokonaisluvulla.

Kokeillaan nyt jotain tällaista:

Jos konsolimme lokin randomNumber, tulokset ovat välillä 1 ja 19. Nyt voisin käyttää tätä nykyistä randomNumber-tilaa vetääksesi lainauksen lainausmatriisista, mutta se toimii vain, jos taulukossa on taulukon indeksinumero, muuten virhe heitetään.

Esimerkiksi:

Minulla on tällä hetkellä vain 10 merkkijonoa lainausmatriisissani, joten mikä tahansa numero yli 9 palautuu määrittelemätön, koska sitä ei ole taulukossa.

Tämän ongelman ratkaisemiseksi meidän on vain kerrottava Math.random () lainausmatriisimme pituudella. Tällöin voimme lisätä tai poistaa matriisista niin monta merkkijonoa kuin haluamme, ja randomNumber-muuttujamme palauttaa aina kelvollisen luvun, koska käytämme quotes.length-menetelmää saadaksesi aina matriisimme nykyisen pituuden.

Nyt tarvitsemme tapaa käyttää randomNumber-arvoa hakeaksesi satunnaisesti lainauksen lainausryhmästä ja sijoittamalla lainauksen HTML-dokumenttiimme ja näyttämään sen käyttäjillemme.

Muista, kuinka mainitsin, että käytämme HTML: ääTunnukset, jotta JavaScript voi tarttua ja manipuloida HTML-elementtejä helposti? No, me teemme nyt aiemmin luomallemme HTML quoteDisplay -tunnukselle.

Dokumentin.getElementById () avulla voimme välittää minkä tahansa merkkijonon, ja JavaScript etsii HTML-dokumenttimme läpi ja noutaa sen käytettäväksi tekemään mitä haluamme sen kanssa. Lähetämme parametrin 'quoteDisplay' hakemaan HTML-elementin, jonka tunnus on "quoteDisplay".

Nyt käytämme .innerHTML-menetelmää siirtämään satunnaisesti haettu lainaus matriisistamme arvona, joka lisätään HTML quoteDisplay -elementtiin.

Asetamme sisemmän HTML: n yhtä lainausmatriisimme kanssa, kun randomNumber-muuttuja välitettiin taulukon indeksinumerona. Nyt newQuote () -funktiomme on valmis!

Tehtävä suoritettu!

Jos olet päässyt tähän opetusohjelman osaan, olet suorittanut projektin! Onnittelut! Olet käytännössä valmis rakentamaan Random Quote Generatorin.

Nyt sinun tarvitsee vain avata projekti selaimessasi ja nähdä, toimiiko se! Tee tämä vetämällä index.html-tiedosto selainikkunaan.

Paina painiketta, ja sen pitäisi näyttää satunnainen lainaus näytölle. Paina painiketta niin monta kertaa kuin haluat. Joka kerta uuden tarjouksen tulisi korvata nykyinen näytöllä oleva tarjous.

Voit lisätä niin monta lainausta kuin haluat lainausryhmään.

Katso yleiskatsaus koko projektitiedostoistamme vierekkäin, jotka muodostavat tämän satunnaisten tarjousten generaattorin.

Mitä nyt?

Olet luonut täysin toimivan satunnaislainausgeneraattorin ja mietit todennäköisesti mihin jatkat täältä.

Luulet luultavasti, että tämä satunnainen tarjousgeneraattori näyttää erittäin tylsältä, eikä kukaan todennäköisesti käytä sitä. Ja olet täysin oikeassa. Tämä projekti näyttää melko yksinkertaiselta, ja sinun on muutettava sitä.

Voit parantaa tätä projektia lisäämällä siihen omat toiminnallisuutesi ja tyylisi.

Tämän opetusohjelman alussa loimme style.css-tiedoston, jota emme käyttäneet. CSS: ää käytetään tekemään verkkosivuista kauniita ja värikkäitä. Sinun on lisättävä CSS-tiedostoon muotoilua varten, jos haluat.

Voit etsiä joitain CSS-oppaita saadaksesi lisäohjeita. Anna mielikuvituksen villiintyä ja tee tämä projekti sinun! Tehdä mitä haluat! Koodaus on taika ja olet velho, Harry!

Jos olet utelias näkemään, kuinka paljon projekti voi muuttua CSS: n ja muutaman muun JavaScript-koodirivin avulla, tutustu omaan versioon tästä Satunnainen tarjousgeneraattorista, jonka otsikoitan "Epiphany Clock"täällä .

Jos pidit tästä opetusohjelmasta, napsauta sydänpainiketta ja jaa se! Voit vapaasti jättää kommentteja, kysymyksiä tai palautetta. Kiitos ja onnellista koodausta!