Kako izraditi generator slučajnih citata s JavaScriptom i HTML-om, za apsolutne početnike

Ovaj je vodič namijenjen početnicima koji žele naučiti kako stvoriti jednostavnu web aplikaciju pomoću JavaScript-a. Pomoći će vam da razumijete interakciju između JavaScript-a i HTML dokumenta i kako oni zajedno rade kako bi prikazali stvari na web-pregledniku kako bi ih ljudi mogli vidjeti.

Ako imate apsolutno nula iskustva u HTML-u i JavaScript-u, bez brige. Provest ću vas kroz svaki pojedini redak koda i sve detaljno objasniti. Kad dođete do kraja ove lekcije, trebali biste puno bolje razumjeti kako JavaScript radi s HTML-om kako bi web stranice postale interaktivne.

U ovom ćemo projektu izraditi generator slučajnih citata koji prikazuje slučajni citat korisniku svaki put kad pritisne gumb. Za početak će vam trebati tri bitne stvari koje se gotovo uvijek koriste za svaki web projekt:

  • web preglednik
  • uređivač teksta
  • želja za izgradnjom stvari

Za ovaj tutorial koristit ću web preglednik Google Chrome, Sublime Text 3 Editor i, naravno, vlastitu želju za gradnjom i podučavanjem. Možete koristiti sve alate s kojima se osjećate ugodno.

Započnimo!

Prvo što ćemo napraviti je stvoriti mapu koja će sadržavati sve naše datoteke koje čine projekt. Stvorite praznu mapu na radnoj površini i nazovite je „generator citata“. Otvorite uzvišeni tekst i povucite datoteku u uzvišeno . Sada bismo mapu trebali imati putem bočne trake.

Većina web projekata sastoji se od najmanje jednog HTML-a, JavaScript-a i CSS datoteke. Stvorimo ove datoteke u mapi "quote generator".

U uzvišenom tekstu,desnom tipkom miša kliknite mapu “quote generator” na bočnoj traci i kliknite na create new file . Na dnu će se pojaviti traka za unos za imenovanje datoteke. Upišite "index.html" i pritisnite enter. Sada ste stvorili datoteku index.html. Ponovite ovaj korak još dva puta , ali izradite datoteku pod nazivom "javascript.js" i "style.css" (bez navodnika) . Važno je osigurati da prilikom imenovanja datoteke slova budu uvijek mala kako bi se spriječile bilo kakve komplikacije.

Sad kad smo postavili sve datoteke, stvorimo našu HTML datoteku koja će raditi kao temelj za naš web projekt. Počet ćemo s HTML kodom bez kostiju u našoj datoteci index.html prije nego što možemo bilo što dodati.

Ispod je naša HTML datoteka u kojoj nema ničega. Možete to zamisliti kao naš HTML kostur koji će sadržavati sve meso (sadržaj), a koji ćemo dodati kasnije.

Sada ćemo morati povezati našu JavaScript datoteku s našim HTML dokumentom kako bi naš JavaScript kôd mogao komunicirati s HTML dokumentom. Također ćemo dodati tekst u oznake, dodajte znak

element, stvorite a element s ID imenom "quoteDisplay", a također ielement s atributom onclick u koji je prebačen “newQuote ()”.

Slomivši ga

Ako ste zbunjeni kako svaki dio HTML koda služi svojoj svrsi, objasnit ću vam ga ovdje. Ako točno znate što svaki element radi i zašto se tamo nalazi, možete prijeći na sljedeći odjeljak da biste nastavili.

Prvo smo dodali "Quote Gen" između oznake. Naslovna oznaka uzima tekst između sebe i prikazuje ga na kartici vašeg web preglednika kada se otvori.

Tijekom prvog koraka također moramo paziti da povežemo datoteku javascript.js na dnu HTML dokumenta neposredno prije zatvaranja označiti.

Drugo, stvorili smo

element s "Generatorom jednostavnih citata" unutar njega. Ovo će poslužiti za prikaz naslova na našoj web stranici.

Zatim smo stvorili element s atributom id postavljenim na “quoteDisplay”. A element djeluje kao razdjelnik za HTML dokumente. elementi pomažu u organizaciji sadržaja na web stranici. Id atribut radi kao identifikator tako da JavaScript lako može zgrabiti i manipulirati. U ovom ćemo slučaju koristiti JavaScript da dohvatimo element s id-om "quoteDisplay" za postavljanje citata unutar element.

Nakon toga kreiramo element s atributom onclick s parametrom "newQuote ()". Theelement kao što pretpostavljate, gumb je koji će učiniti nešto kad kliknete na njega. Onclick atribut se koristi za postavljanje funkcije gumba, tako da svaki put kad kliknete na gumb, to će pokrenuti funkciju koja je prošao u„s onclick atribut.

U ovom će slučaju svaki put kad kliknete gumb pokrenuti funkciju newQuote (), naravno, još nismo definirali funkciju newQuote (). Ako otvorite projekt u pregledniku i pritisnete gumb, pojavit će se pogreška u konzoli jer funkcija trenutno ne postoji.

Na kraju, evo osvježivača koji pokazuje kako naša puna datoteka index.html trenutno izgleda i što proizvodi u web pregledniku. Da biste otvorili projekt, pomoću web preglednika otvorite datoteku index.html.

Logično razmišljanje pomoću koda

Napokon je vrijeme da počnemo raditi na JavaScript-u u našoj datoteci javascript.js kako bismo mogli razviti vlastitu funkcionalnost generiranja citata.

Sada, prije nego započnemo s kodiranjem, razmislimo logično o tome kako možemo stvoriti stroj za generiranje citata s kodom. Ne možemo tek tako započeti s kodiranjem, a da prethodno ne razmišljamo.

Moramo shvatiti što želimo i kada to želimo. Za ovaj projekt želimo citate! Kada to želimo? Želimo to odmah! Oh, ovaj ... mislim, želimo je kad god korisnik pritisne gumb.

Sad kad smo riješili prvo pitanje, trebamo postaviti drugo. Što su citati? Mislim stvarno, što su oni?

Hvala Jaden! Da! Citati se sastoje od slova koja čine riječi. U svijetu programiranja riječi su klasificirane kao nizovi, stoga će naši citati morati biti nizovi !

Budući da znamo da ćemo imati više navodnika, a svaki će biti izdvojen slučajno, najbolji izbor bi bio pohraniti više nizova unutar niza .

Ako već niste znali, elementi unutar polja dohvaćaju se pozivanjem njegovog indeksnog broja niza . Tehnički detalji izvan su opsega ovog vodiča, ali jednostavnim riječima, svaki element u nizu kronološkim je redoslijedom predstavljen cijelim brojem. Prvi element niza ima indeksni broj 0, a svaki element nakon toga raste za jedan.

Da bismo iz niza dohvatili slučajni citat, sada znamo da moramo proizvesti slučajni broj svaki put kada korisnik klikne na gumb. Zatim bismo koristili taj slučajni broj za dohvaćanje citata iz niza i postavljanje tog citata na HTML dokument, koji bi zauzvrat korisniku prikazao citat u pregledniku.

To je to! Riješili smo kako stvoriti Generator slučajnih citata logičnim razmišljanjem u kodu! Evo sažetka logike koju smo smislili za naš projekt:

  1. Citati su višestruki nizovi koje treba pohraniti u niz.
  2. Svaki put kad se tipka pritisne, treba generirati slučajni cijeli broj.
  3. Broj će se koristiti kao prikaz broja indeksa polja za niz citata.
  4. Jednom kada dohvatimo slučajno odabrani citat iz niza pomoću našeg slučajno generiranog cijelog broja, smjestit ćemo ga u HTML dokument.

Vrijeme kodiranja!

Vau! Došli smo toliko daleko i još nismo započeli programiranje! Dobrodošli u svijet programiranja!

Samo se šalim.

Ne baš.

U ovoj ćete karijeri (ili hobiju) potrošiti puno vremena na kodiranje. Ali moja je poanta da ćete još više vremena provesti razmišljajući o programskoj logici i kako riješiti probleme. Programiranje ne znači hakiranje 100 riječi u minuti tijekom 20 minuta na tipkovnici. To se neće dogoditi.

Sad kad nam je sva logika skrenula s puta. Počnimo s kodiranjem. Sada ćemo raditi u datoteci javascript.js .

Moramo ili stvoriti vlastite citate ili ih kopirati iz internetskog izvora.

Izguglao sam "Najbolje citate" i kopirao prvih 10 s web mjesta , a zatim sam ih smjestio u niz odvojen zarezima. Svakako stavite svoje navodnike u jednostruke ili dvostruke navodnike. Ako se vaš navod sastoji od apostrofa, jednostrukih ili dvostrukih navodnika, možda ćete trebati upotrijebiti obrnute kose crte kako biste izbjegli ove znakove kako bi JavaScript znao da su simboli dio niza, a ne sintaksa kodiranja.

Kao što možete vidjeti na donjoj slici, definirao sam varijablu nazvanu "citati" i postavio je jednaku nizu punom citata koje sam odabrao s interneta.

Sada moramo stvoriti našu funkciju newQuote () koju sam spomenuo ranije u HTML odjeljku ovog vodiča. Za našu funkciju newQuote () moramo generirati slučajni cijeli broj koji se kreće od 0 do duljine niza citata . Dalje ću objasniti u nastavku.

Prvo pozivamo funkciju Math.floor (). Funkcija Math.floor () uzima parametar i zaokružuje broj prema dolje na najbliži cijeli broj. Na primjer, ako pozovemo Math.floor (5.7), vratit će se 5.

Drugo, preći ćemo u Math.random () kao parametar u Math.floor (). Funkcija Math.random () generirat će slučajni decimalni broj između 0 i 1.

Pa recimo da imamo ovo:

Ako prijavimo svoj randomNumber u ovo stanje, on će uvijek vratiti 0. To je zato što će Math.random () uvijek biti decimalni broj između 0 i 1, kao što su 0,4, 0,721, 0,98 i tako dalje. Budući da kao parametar prosljeđujemo Math.random () u Math.floor (), Math.floor () se uvijek zaokružuje na najbližu decimalu, stoga će se svaka decimala između 0 i 1 uvijek vratiti na 0.

Pa koja je svrha ovoga? Pa, za stvaranje indeksnih brojeva niza trebaju nam cijeli brojevi, ali trebaju nam slučajni cijeli brojevi. Da bismo generirali slučajne cijele brojeve i odvojili se od samo vraćanja 0, trebat ćemo uzeti našu slučajnu decimalu i pomnožiti je s cijelim brojem.

Pokušajmo sada ovako:

Ako konsoliramo zapisnik randomNumber, rezultati će biti negdje između 1 i 19. Sada bih mogao koristiti ovo trenutno stanje randomNumber za izvlačenje citata iz niza citata, ali to će raditi samo ako broj indeksa niza postoji u polju, u suprotnom će se pojaviti pogreška.

Na primjer:

Trenutno imam samo 10 nizova unutar polja s navodnicima, tako da će se svaki broj iznad 9 vratiti nedefiniran, jer ne postoji u polju.

Da bismo riješili taj problem, moramo množiti Math.random () samo s duljinom niza citata. Na taj način možemo dodati ili ukloniti onoliko žica iz niza koliko želimo, a naša će varijabla randomNumber uvijek vratiti valjani broj jer koristimo metodu quotes.length da bismo uvijek dobili trenutnu duljinu našeg polja.

Sada nam je potreban način da koristimo vrijednost randomNumber za slučajno dohvaćanje citata iz niza citata i stavljanje citata u naš HTML dokument i prikazivanje korisnicima.

Sjetite se kako sam spomenuo da koristimo HTMLID-ovi koji omogućuju JavaScript-u da lako grabi i manipulira HTML elementima? E, to je ono što sada radimo na HTML quoteDisplay ID-u koji smo stvorili ranije.

Korištenjem document.getElementById () možemo proslijediti bilo koji niz, a JavaScript će pregledati naš HTML dokument i dohvatiti ga za upotrebu kako bismo s njim učinili što god želimo. Ući ćemo u 'quoteDisplay' kao parametar za dohvaćanje HTML elementa s id-om "quoteDisplay".

Sada ćemo koristiti .innerHTML metodu za prosljeđivanje nasumično dohvaćenog citata iz našeg polja kao vrijednosti koja će se dodati u naš HTML quoteDisplay element.

Postavljamo innerHTML jednak našem polju navodnika s našom varijablom randomNumber prosljeđenom kao indeksni broj polja. Sada je naša funkcija newQuote () dovršena!

Misija izvršena!

Ako ste došli do ovog dijela vodiča, dovršili ste projekt! Čestitamo! Gotovo ste gotovi s izradom generatora slučajnih ponuda.

Sada sve što trebate je otvoriti projekt u pregledniku i provjeriti radi li! Učinite to povlačenjem datoteke index.html u prozor preglednika.

Pritisnite gumb i on će na vašem zaslonu prikazati slučajni citat. Pritisnite gumb koliko god puta želite. Svaki put bi nova ponuda trebala zamijeniti trenutnu na ekranu.

U niz navodnika možete dodati koliko želite citata.

Pogledajte pregled cijelih naših projektnih datoteka jednu do druge koje čine ovaj generator slučajnih ponuda.

Što sada?

Stvorili ste potpuno funkcionalan generator slučajnih citata i vjerojatno se pitate kamo dalje.

Vjerojatno mislite da ovaj Generator slučajnih citata izgleda vrlo dosadno i vjerojatno ga nitko ne bi koristio. I potpuno ste u pravu. Ovaj projekt izgleda sasvim jednostavno, a na vama je da to promijenite.

Ovaj projekt možete poboljšati dodavanjem vlastitih funkcionalnosti i stila.

Na početku ovog vodiča stvorili smo datoteku style.css koju nismo koristili. CSS se koristi kako bi web stranice učinile lijepima i živopisnima. Na vama je da dodate CSS datoteku za oblikovanje ako želite.

Možete potražiti neke CSS upute za neke dodatne smjernice. Pustite mašti na volju i učinite ovaj projekt svojim! Radi što god želiš! Kodiranje je magija, a ti si čarobnjak, Harry!

Ako vas zanima koliko se projekt može promijeniti s CSS-om i još nekoliko redaka JavaScript koda, pogledajte moju vlastitu verziju ovog Generatora slučajnih citata koji sam nazvao „Epiphany Clock“ovdje .

Ako ste uživali u ovom vodiču, kliknite gumb srca i podijelite ga! Slobodno ostavljajte komentare, pitanja ili povratne informacije. Hvala i sretno kodiranje!