Kaip sukurti atsitiktinių citatų generatorių su „JavaScript“ ir HTML, absoliučiai pradedantiesiems

Ši pamoka skirta pradedantiesiems, norintiems sužinoti, kaip sukurti paprastą žiniatinklio programą naudojant „JavaScript“. Tai padės jums suprasti „JavaScript“ ir HTML dokumento sąveiką ir tai, kaip jie veikia kartu rodydami dalykus žiniatinklio naršyklėje, kad žmonės galėtų juos pamatyti.

Jei neturite visiškai jokių HTML ir „JavaScript“ patirties, nesijaudinkite. Apžvelgsiu kiekvieną kodo eilutę ir išsamiai viską paaiškinsiu. Kai baigsite šią pamoką, turėtumėte daug geriau suprasti, kaip „JavaScript“ veikia su HTML, kad tinklalapiai būtų interaktyvūs.

Šiame projekte sukursime atsitiktinių citatų generatorių, kuris kiekvieną kartą, kai jis paspaus mygtuką, vartotojui parodys atsitiktinę citatą. Norėdami pradėti, jums reikės trijų pagrindinių dalykų, kurie beveik visada naudojami kiekvienam interneto projektui:

  • interneto naršyklę
  • teksto redaktorius
  • noras kurti daiktus

Šioje pamokoje naudosiu „Google Chrome“ interneto naršyklę, „Sublime Text 3“ redaktorių ir, žinoma, savo norą kurti ir mokyti. Galite naudoti bet kokius įrankius, kuriuos jaučiatės patogiai.

Pradėkime!

Pirmas dalykas, kurį atliksime, yra sukurti aplanką, kuriame bus visi mūsų failai, sudarantys projektą. Darbalaukyje sukurkite tuščią aplanką ir pavadinkite jį „citatų generatoriumi“. Atidarykite „Sublime Text“ ir vilkite failą į didingą . Dabar aplanką turėtume pasiekti per šoninę juostą.

Daugumą žiniatinklio projektų sudaro bent vienas HTML, „JavaScript“ ir CSS failas. Sukurkime šiuos failus aplanke „citatų generatorius“.

Didingu tekstu,dešiniuoju pelės mygtuku spustelėkite aplanką „citatų generatorius“ šoninėje juostoje ir spustelėkite sukurti naują failą . Norėdami įvardyti failą, apačioje pasirodys įvesties juosta. Įveskite „index.html“ ir paspauskite „Enter“. Dabar sukūrėte failą index.html. Pakartokite šį veiksmą dar du kartus , bet sukurkite failą pavadinimu „javascript.js“ ir „style.css“ (be kabučių) . Svarbu įsitikinti, kad pavadinus failą raidės visada yra mažosios, kad išvengtumėte jokių komplikacijų.

Dabar, kai visi failai bus sukonfigūruoti, sukurkime HTML failą, kuris veiks kaip pagrindas mūsų žiniatinklio projektui. Pradėsime nuo plikų kaulų HTML kodo faile index.html, kol galėsime ką nors pridėti.

Žemiau yra mūsų HTML failas, kuriame nieko nėra. Galite tai galvoti kaip apie mūsų HTML skeletą, kuriame tilps visa mėsa (turinys), kurią pridėsime vėliau.

Dabar turėsime susieti „JavaScript“ failą su HTML dokumentu, kad „JavaScript“ kodas galėtų sąveikauti su HTML dokumentu. Taip pat pridėsime tekstą žymas, pridėkite

elementas, sukurkite a elementas, kurio ID vardas yra „quoteDisplay“, taip pat aelementas su atributu „ onclick “, į kurį perduota „newQuote ()“.

Jį suskaidęs

Jei nesuprantate, kaip kiekviena HTML kodo dalis atitinka savo paskirtį, aš jums tai paaiškinsiu čia. Jei tiksliai žinote, ką daro kiekvienas elementas ir kodėl jis yra, galite pereiti į kitą skyrių ir tęsti.

Pirmiausia tarp „Quote Gen“ pridėjome žymos. Pavadinimo žyma paima tekstą tarp jo ir atidaro jį naršyklės skirtuke.

Pirmojo veiksmo metu taip pat turime įsitikinti, kad HTML dokumento apačioje prieš pat uždarymą susiejote failą javascript.js. žyma.

Antra, mes sukūrėme

elementas su „Paprastų citatų generatoriumi“. Tai padės parodyti pavadinimą mūsų tinklalapyje.

Tada mes sukūrėme a elementas su id atributų nustatytas į "quoteDisplay". A elementas veikia kaip HTML dokumentų daliklis. elementai padeda tvarkyti turinį tinklalapyje. Atributas „ id“ veikia kaip identifikatorius, kad „JavaScript“ galėtų lengvai jį patraukti ir juo manipuliuoti. Šiuo atveju mes naudosime „JavaScript“, norėdami patraukti elementą, kurio ID yra „quoteDisplay“, kad įdėtumėte kabutes į elementas.

Po to mes sukuriame a elementas su atributu „ onclick“ su parametru „newQuote ()“. elementas, kaip jūs atspėjote, yra mygtukas, kuris kažką padarys, kai jį spustelėsite. Atributas „ onclick“ naudojamas mygtuko funkcijai nustatyti, kad kiekvieną kartą spustelėjus mygtuką, ji vykdytų funkciją, kuri buvo perkelta į' onclick atributas.

Tokiu atveju kiekvieną kartą spustelėjus mygtuką, ji veiks funkcija newQuote (), žinoma, mes dar neapibrėžėme funkcijos newQuote (). Jei atidarote projektą naršyklėje ir paspausite mygtuką, konsolėje bus klaida, nes funkcija šiuo metu neegzistuoja.

Galiausiai, čia yra atnaujinimas, parodantis, kaip šiuo metu atrodo visas mūsų index.html failas ir ką jis sukuria žiniatinklio naršyklėje. Norėdami atidaryti projektą, naudokite žiniatinklio naršyklę, kad atidarytumėte failą index.html.

Mąstyti logiškai naudojant kodą

Pagaliau atėjo laikas pradėti dirbti su „JavaScript“ faile „javascript.js“, kad galėtume sukurti savo citatų generavimo funkciją.

Dabar, prieš pradėdami koduoti, pagalvokime logiškai, kaip galime sukurti kodų generavimo mašiną su kodu. Negalime tiesiog pradėti koduoti negalvodami iš pradžių.

Turime išsiaiškinti, ko norime ir kada to norime. Šiam projektui norime citatų! Kada mes to norime? Mes to norime dabar! Oi, erm ... turiu omeny, kad mes to norime, kai tik vartotojas paspaudžia mygtuką.

Dabar, kai išsprendėme pirmąjį klausimą, turime užduoti antrąjį. Kas yra citatos? Turiu omenyje tikrai, kokie jie?

Aciu Jadenai! Taip! Citatos sudaromos iš raidžių, sudarančių žodžius. Programavimo pasaulyje žodžiai klasifikuojami kaip eilutės, todėl mūsų citatos turės būti eilutės !

Kadangi žinome, kad turėsime kelias kabutes ir kiekvienas bus išrinktas atsitiktinai, geriausias pasirinkimas būtų saugoti kelias eilutes masyve .

Jei dar nežinojote, masyvo elementai gaunami paskambinus jo masyvo indekso numeriu . Techninė informacija nepatenka į šios mokymo programos taikymo sritį, tačiau paprastai sakant, kiekvienas masyvo elementas chronologine tvarka pateikiamas sveiku skaičiumi. Pirmojo masyvo elemento indekso numeris yra 0, po jo kiekvienas elementas pakyla po vieną.

Norėdami gauti atsitiktinę citatą iš masyvo, mes dabar žinome, kad turime sukurti atsitiktinį skaičių kiekvieną kartą, kai vartotojas paspaudžia mygtuką. Tada mes naudosime tą atsitiktinį skaičių, kad gautume citatą iš masyvo ir įdėtume tą citatą į HTML dokumentą, kuris savo ruožtu vartotojui rodytų citatą naršyklėje.

Viskas! Mes išsprendėme, kaip sukurti atsitiktinių citatų generatorių logiškai mąstant kodu! Pateikiame savo projekto logikos santrauką:

  1. Citatos yra kelios eilutės, kurias reikia saugoti masyve.
  2. Kiekvieną kartą, kai paspaudžiamas mygtukas, reikia sugeneruoti atsitiktinį sveiką skaičių.
  3. Skaičius bus naudojamas kaip masyvo indekso masyvo simbolis.
  4. Kai mes gausime atsitiktinai pasirinktą citatą iš masyvo, naudodami atsitiktinai sugeneruotą sveiką skaičių, mes jį įdėsime į HTML dokumentą.

Kodavimo laikas!

Oho! Mes taip toli pasiekėme ir dar nepradėjome programuoti! Sveiki atvykę į programavimo pasaulį!

Juokauju.

Ne visai.

Šioje karjeroje (ar hobyje) praleisite daug laiko. Bet aš noriu pasakyti, kad jūs dar daugiau laiko praleisite galvodami apie programavimo logiką ir kaip išspręsti problemas. Programavimas nėra susijęs su 100 žodžių per minutę nulaužimu 20 minučių klaviatūroje. Taip nenutiks.

Dabar, kai mes turime logiką iš kelio. Pradėkime koduoti. Dabar dirbsime faile javascript.js .

Turime susikurti savo citatas arba nukopijuoti jas iš internetinio šaltinio.

„Google“ ieškojau „Geriausių citatų“ ir nukopijavau pirmuosius 10 iš svetainės , tada įdėjau juos į masyvą, atskirtą kableliais. Įsitikinkite, kad kabutes dedate viengubose arba dvigubose kabutėse. Jei jūsų citata susideda iš apostrofų, pavienių ar dvigubų kabučių, gali tekti naudoti atbulinius brūkšnius, kad išvengtumėte šių simbolių , kad „JavaScript“ žinotų, kad simboliai yra eilutės dalis, o ne kodavimo sintaksė.

Kaip matote paveikslėlyje žemiau, aš apibrėžiau kintamąjį, vadinamą „citatos“, ir nustatiau jį lygų masyvui, kuriame pilna citatų, kurias pasirinkau ne internete.

Dabar turime sukurti savo funkciją newQuote (), kurią jau minėjau anksčiau šios pamokos HTML skyriuje. Mūsų funkcijai „newQuote ()“ turime sugeneruoti atsitiktinį sveiką skaičių, kuris svyruoja nuo 0 iki mūsų citatų masyvo ilgio . Toliau paaiškinsiu toliau.

Pirmiausia iškviečiame funkciją Math.floor (). Funkcija „Math.floor“ () ima parametrą ir apvalina skaičių žemyn iki artimiausio sveikojo skaičiaus. Pvz., Jei paskambinsime Math.floor (5.7), tai bus 5.

Antra, Math.random () kaip parametrą perduosime Math.floor (). Funkcija Math.random () sukurs atsitiktinį dešimtainį skaičių nuo 0 iki 1.

Tarkime, kad turime tai:

Jei mes konsolėje registruosime savo randomNumber šioje būsenoje, jis visada grąžins 0. Taip yra todėl, kad Math.random () visada bus dešimtainis skaičius nuo 0 iki 1, pvz., 0,4, 0,721, 0,98 ir pan. Kadangi Math.random () perduodame į Math.floor () kaip parametrą, Math.floor () visada apvalinamas žemyn iki artimiausio dešimtainio skaičiaus, todėl kiekvienas dešimtainis skaičius nuo 0 iki 1 visada grįš į 0.

Taigi, kokia prasmė tai daryti? Na, norint sukurti savo masyvo indekso numerius, mums reikia sveikų skaičių, bet mums reikia atsitiktinių sveikųjų skaičių. Norėdami sugeneruoti atsitiktinius sveikus skaičius ir atsiskirti nuo tik grąžinamo 0, turėsime imti atsitiktinį dešimtainį skaičių ir padauginti iš sveiko skaičiaus.

Dabar pabandykime kažką panašaus:

Jei konsoliduosime žurnalą randomNumber, rezultatai bus tarp 1 ir 19. Dabar galėčiau naudoti šią dabartinę randomNumber būseną, norėdamas ištraukti citatą iš citatų masyvo, tačiau tai veiks tik tuo atveju, jei masyvo masyvo indekso numeris yra, priešingu atveju bus padaryta klaida.

Pavyzdžiui:

Šiuo metu mano kabučių masyve yra tik 10 eilučių, todėl bet koks skaičius virš 9 sugrįš neapibrėžtas, nes jo nėra masyve.

Norėdami išspręsti šią problemą, turime tik padauginti Math.random () su mūsų citatų masyvo ilgiu. Tai darydami, mes galime pridėti arba pašalinti iš masyvo tiek eilučių, kiek mums patinka, o mūsų randomNumber kintamasis visada pateiks galiojantį skaičių, nes mes naudojame quotes.length metodą, kad visada gautume dabartinį masyvo ilgį.

Dabar mums reikia būdo, kaip naudoti „randomNumber“ vertę, kad atsitiktinai gautumėte citatą iš citatų masyvo ir įdėtumėte citatą į savo HTML dokumentą ir parodytumėte jį savo vartotojams.

Prisimink, kaip minėjau, kad mes naudojame HTMLAr ID leidžia „JavaScript“ lengvai patraukti ir valdyti HTML elementus? Na, tai mes darome dabar su anksčiau sukurtu HTML quoteDisplay ID.

Naudodami document.getElementById (), mes galime perduoti bet kokią eilutę, o „JavaScript“ peržiūrės mūsų HTML dokumentą ir nuskaitys jį naudoti, kad su juo atliktume viską, ko norime. Mes pateiksime „quoteDisplay“ kaip parametrą, kad gautume HTML elementą su „quoteDisplay“ ID.

Dabar mes naudosime .innerHTML metodą, norėdami perduoti atsitiktinai gautą citatą iš savo masyvo kaip vertę, kuri bus įtraukta į mūsų HTML quoteDisplay elementą.

Mes nustatėme vidinį HTML, lygų mūsų citatų masyvui, o mūsų randomNumber kintamasis buvo perduotas kaip masyvo indekso numeris. Dabar funkcija „newQuote ()“ baigta!

Misija įvykdyta!

Jei pasiekėte šią mokymo programos dalį, baigėte projektą! Sveikiname! Jūs praktiškai baigėte kurti atsitiktinių citatų generatorių.

Dabar viskas, ką jums reikia padaryti, tai atidaryti projektą naršyklėje ir pamatyti, ar jis veikia! Atlikite tai vilkdami index.html failą į savo naršyklės langą.

Paspauskite mygtuką ir ekrane turėtų būti rodoma atsitiktinė citata. Paspauskite mygtuką tiek kartų, kiek norite. Kiekvieną kartą nauja citata turėtų pakeisti esamą ekrane.

Į citatų masyvą galite pridėti tiek citatų, kiek norite.

Pažvelkite į visų mūsų projekto failų, sudarančių šį atsitiktinių citatų generatorių, apžvalgą.

Kas dabar?

Jūs sukūrėte visiškai veikiantį atsitiktinių citatų generatorių ir tikriausiai įdomu, iš kur toliau.

Jūs tikriausiai galvojate, kad šis atsitiktinių citatų generatorius atrodo labai nuobodus, ir tikriausiai niekas jo nenaudotų. Ir tu visiškai teisus. Šis projektas atrodo gana paprastas, ir jūs turite tai pakeisti.

Galite patobulinti šį projektą, pridėdami savo funkcijų ir stiliaus.

Šios pamokos pradžioje sukūrėme failą style.css, kurio nenaudojome. CSS naudojamas norint, kad tinklalapiai būtų gražūs ir spalvingi. Jei norite, galite pridėti prie CSS failo, kad galėtumėte kurti stilių.

Norėdami ieškoti papildomų patarimų, galite ieškoti kai kurių CSS mokymo programų. Leiskite fantazijai suktis ir paverskite šį projektą savo! Daryti ką nori! Kodavimas yra magija ir tu vedlys, Hari!

Jei smalsu sužinoti, kiek projektas gali pasikeisti naudojant CSS ir dar kelias „JavaScript“ kodo eilutes, patikrinkite mano paties „Random Quote Generator“ versiją, kurią pavadinau „Epiphany Clock“čia .

Jei jums patiko ši pamoka, spustelėkite širdies mygtuką ir pasidalykite ja! Nedvejodami palikite komentarus, klausimus ar atsiliepimus. Ačiū ir laimingo kodavimo!