Kuidas ehitada juhusliku hinnapakkumiste genereerimine JavaScripti ja HTML-iga absoluutselt algajatele

See õpetus on mõeldud algajatele, kes soovivad õppida lihtsa veebirakenduse loomist JavaScripti abil. See aitab teil mõista JavaScripti ja HTML-dokumendi koostoimet ning nende koostööd veebibrauseris asjade kuvamiseks.

Kui teil on HTML-i ja JavaScripti kogemus täiesti null, siis pole muret. Tutvustan teid igast koodireast ja selgitan kõike üksikasjalikult. Selle õppetunni lõppu jõudmiseks peaksite veebilehtede interaktiivseks muutmiseks olema palju paremini aru saanud, kuidas JavaScript HTML-iga töötab.

Selles projektis ehitame juhusliku hinnapakkumise generaatori, mis kuvab juhusliku pakkumise kasutajale iga kord, kui ta nuppu vajutab. Alustamiseks vajate kolme olulist asja, mida kasutatakse peaaegu alati iga veebiprojekti jaoks:

  • veebibrauser
  • tekstiredaktor
  • soov asju ehitada

Selle õpetuse jaoks kasutan Google Chrome'i veebibrauserit, Sublime Text 3 Editori ja loomulikult enda soovi ehitada ja õpetada. Võite kasutada mis tahes tööriistu, millega tunnete end mugavalt.

Alustame!

Esimese asjana loome kausta, mis sisaldab kõiki meie faile, millest projekt koosneb. Looge töölaual tühi kaust ja nimetage see “hinnapakkumiste genereerijaks”. Avage ülev tekst ja lohistage fail ülevasse . Nüüd peaks meil olema kaust külgriba kaudu juurdepääsetav.

Enamik veebiprojekte koosneb vähemalt ühest HTML-ist, JavaScripti ja CSS-failist. Loome need failid kausta „hinnapakkumiste genereerija“.

Ülevas tekstisparemklõpsake külgribal kausta „tsitaatide genereerija“ ja klõpsake käsku Loo uus fail . Faili nimetamiseks ilmub alt üles sisendriba. Tippige “index.html” ja vajutage sisestusklahvi. Nüüd olete loonud faili index.html. Korrake seda sammu veel kaks korda , kuid looge fail nimega „javascript.js” ja „style.css” (ilma jutumärkideta) . Tüsistuste vältimiseks on oluline veenduda, et faili nimetamisel on tähed alati väikeste tähtedega.

Nüüd, kui meil on kõik meie failid seadistatud, loome oma HTML-faili, mis töötab meie veebiprojekti alusena. Alustame faili index.html paljaste luudega HTML-koodiga, enne kui midagi lisada saame.

Allpool on meie HTML-fail, milles pole midagi. Võite mõelda sellest kui meie HTML-skeletist, kuhu mahub kogu liha (sisu) ja mille lisame hiljem.

Nüüd peame oma JavaScripti faili linkima meie HTML-dokumendiga, et meie JavaScripti kood saaks HTML-dokumendiga suhelda. Lisame teksti ka sildid, lisage

element, looge a element id- nimega “quoteDisplay” ja ka aelement, millel on onclick atribuut, kuhu on edastatud “newQuote ()”.

Selle purustamine

Kui olete segaduses, kuidas HTML-koodi iga osa oma eesmärki täidab, siis selgitan teile seda siin. Kui teate täpselt, mida iga element teeb ja miks see seal on, võite jätkamiseks jätkata järgmise jaotisega.

Kõigepealt lisasime "Quote Gen" sildid. Pealkirja silt võtab selle vahele teksti ja kuvab selle avamisel teie veebibrauseri vahekaardil.

Esimeses etapis peame kindlasti linkima faili javascript.js HTML-dokumendi allosas vahetult enne sulgemist silt.

Teiseks lõime

element, mille sees on „Simple Quote Generator”. Selle abil kuvatakse pealkiri meie veebisaidil.

Seejärel lõime a elemendi atribuudiga id seatud „quoteDisplay”. A element töötab HTML-dokumentide eraldajana. elemendid aitavad veebisaidil sisu korrastada. Id atribuut toimib tunnus, et JavaScript on lihtne haarata ja manipuleerida seda. Sellisel juhul haarame JavaScripti abil elemendi id-ga “quoteDisplay”, et paigutada hinnapakkumisi element.

Pärast seda loome a element atribuudiga onclick , mille parameetriks on edastatud “newQuote ()”. Thenagu arvasite, on nupp, mis teeb sellel klõpsamisel midagi. Onclick omadust kasutatakse, et määrata funktsiooni nuppu, nii et iga kord, kui klõpsad nupule, siis käivitage funktsioon, mis oli läks"s onclick atribuut.

Sellisel juhul käivitab see iga kord, kui nuppu klõpsate, funktsiooni newQuote (), muidugi pole me funktsiooni newQuote () veel määratlenud. Kui avate projekti brauseris ja vajutate nuppu, viskab see konsoolis vea, kuna funktsiooni pole praegu olemas.

Lõpuks on siin värskendus, et näidata, kuidas meie täielik index.html fail praegu välja näeb ja mida see veebibrauseris toodab. Projekti avamiseks kasutage faili index.html avamiseks veebibrauserit.

Koodiga loogiliselt mõeldes

Lõpuks on aeg hakata JavaScripti kallal töötama meie failis javascript.js, et saaksime välja töötada oma pakkumiste genereerimise funktsionaalsuse.

Mõelgem nüüd enne kodeerimise alustamist loogiliselt, kuidas saaksime koodiga pakkumisi genereeriva masina luua. Me ei saa kodeerimist lihtsalt enne mõtlemata alustada.

Peame välja mõtlema, mida me tahame ja millal me seda tahame. Selle projekti jaoks soovime hinnapakkumisi! Millal me seda tahame? Me tahame seda kohe! Oh, erm ... ma mõtlen, et me tahame seda alati, kui kasutaja nuppu vajutab.

Nüüd, kui esimese küsimuse lahendasime, peame küsima ka teise. Mis on tsitaadid? Ma mõtlen tõesti, mis need on?

Aitäh Jaden! Jah! Tsitaadid koosnevad tähtedest, mis moodustavad sõnad. Programmeerimismaailmas liigitatakse sõnad stringideks, seetõttu peavad meie jutumärgid olema stringid !

Kuna teame, et meil on mitu jutumärki ja igaüks valitakse juhuslikult, oleks parim valik salvestada mitu stringi massiivi .

Kui te seda veel ei teadnud, leitakse massiivi elemendid selle massiiviindeksinumbrilt . Tehnilised üksikasjad jäävad selle õpetuse reguleerimisalast välja, kuid lihtsustatult on massiivi iga element kronoloogilises järjekorras esindatud täisarvuga. Massiivi esimese elemendi indeksnumber on 0, iga element pärast seda tõuseb ühe võrra.

Massiivist juhusliku tsitaadi leidmiseks teame nüüd, et peame tootma juhusliku arvu iga kord, kui kasutaja nuppu klõpsab. Seejärel kasutaksime seda juhuslikku numbrit massiivist tsitaadi leidmiseks ja selle pakkumise HTML-dokumendile paigutamiseks, mis omakorda kuvaks pakkumise brauseris kasutajale.

See selleks! Lahendasime juhusliku pakkumise generaatori loomise, loogiliselt mõeldes koodis! Siin on kokkuvõte loogikast, mille oleme oma projekti jaoks välja mõelnud:

  1. Tsitaadid on mitu stringi, mis tuleb massiivi salvestada.
  2. Iga kord, kui nuppu vajutatakse, tuleb genereerida juhuslik täisarv.
  3. Numbrit kasutatakse tsitaatmassiivi massiivi indeksi numbri esitamiseks.
  4. Kui oleme juhuslikult genereeritud täisarvu abil massiivist juhuslikult valitud tsitaadi leidnud, paigutame selle HTML-dokumenti.

Kodeerimise aeg!

Vau! Oleme jõudnud nii kaugele ja pole veel programmeerimisega alustanud! Tere tulemast programmeerimismaailma!

Tegin nalja.

Mitte päris.

Selles karjääris (või hobis) kulutate palju aega kodeerimisele. Kuid minu mõte on see, et kavatsete veelgi rohkem aega mõelda programmeerimisloogikale ja probleemide lahendamisele. Programmeerimine ei tähenda klaviatuuril 20 minuti jooksul 100 sõna häkkimist. Seda ei juhtu.

Nüüd, kui meil on kogu loogika eemal. Alustame kodeerimist. Töötame nüüd failis javascript.js .

Peame kas looma oma hinnapakkumised või kopeerima need veebiallikast.

Googeldasin lehte „Parimad hinnapakkumised” ja kopeerisin esimesed 10 veebisaidilt , seejärel paigutasin need komadega eraldatud massiivi. Asetage jutumärgid kindlasti ühe- või topeltjutumärkidesse. Kui teie pakkumine koosneb apostroofidest, üksikutest või kahekordsetest jutumärkidest, peate võib-olla nende märkide vältimiseks kasutama tagasilööke , et JavaScript teaks, et sümbolid on stringi osa, mitte kodeerimissüntaks.

Nagu näete alloleval pildil, olen määranud muutuja nimega "jutumärgid" ja määranud selle võrdseks massiiviga täis pakkumisi, mille olen Internetist välja valinud.

Nüüd peame looma oma funktsiooni newQuote (), mida mainisin varem selle õpetuse HTML-i osas. Funktsiooni newQuote () jaoks peame genereerima juhusliku täisarvu, mis jääb vahemikku 0 kuni meie hinnapakkumiste massiivi pikkuseni . Ma selgitan allpool.

Kõigepealt kutsume funktsiooni Math.floor (). Funktsioon Math.floor () võtab sisse parameetri ja ümardab arvu allapoole lähima täisarvuni. Näiteks kui kutsume Math.floor (5.7), tagastatakse see 5.

Teiseks edastame Math.random () parameetrina Math.floor () -i. Funktsioon Math.random () genereerib juhusliku kümnendarvu vahemikus 0 kuni 1.

Oletame, et meil on see:

Kui me konsoolil logime oma randomNumber selles olekus, tagastab see alati 0. Seda seetõttu, et Math.random () on alati kümnendkoht vahemikus 0 kuni 1, näiteks 0,4, 0,721, 0,98 ja nii edasi. Kuna me edastame Math.random () parameetriks Math.floor () -i, ümardab Math.floor () alati allapoole lähima kümnendkohani, seega naaseb iga koma vahemikus 0 kuni 1 alati 0-ni.

Mis mõte on seda siis teha? Noh, massiiviindeksinumbrite loomiseks vajame täisarvusid, kuid juhuslikke täisarvusid. Juhuslike täisarvude genereerimiseks ja eraldumiseks ainult 0 tagastamisest peame võtma juhusliku kümnendkoha ja korrutama selle täisarvuga.

Proovime nüüd midagi sellist:

Kui me konsooli logime randomNumber, siis on tulemused vahemikus 1 kuni 19. Nüüd saaksin selle randomNumber praeguse oleku abil tsitaatide massiivist pakkumise välja tõmmata, kuid see töötab ainult siis, kui massiivi sees on massiivi indeksi number, muidu visatakse viga.

Näiteks:

Praegu on mu hinnapakkumiste massiivis ainult 10 stringi, nii et mis tahes arv üle 9 naaseb määratlemata, kuna seda massiivis pole.

Selle probleemi lahendamiseks peame korrutama Math.random () ainult meie hinnapakkumiste massiivi pikkusega. Seda tehes võime massiivi lisada või eemaldada nii palju stringi kui meile meeldib ja meie muutuja randomNumber tagastab alati kehtiva arvu, kuna me kasutame meetodit quotes.length, et alati saada massiivi praegune pikkus.

Nüüd vajame viisi, kuidas randomNumber väärtust kasutada tsitaatide massiivist pakkumise juhuslikuks hankimiseks ja tsitaadi lisamiseks meie HTML-dokumenti ning selle kuvamiseks meie kasutajatele.

Pidage meeles, kuidas mainisin, et kasutame HTML-iKas ID-d võimaldavad JavaScripti HTML-elementidega hõlpsasti haarata ja manipuleerida? Noh, seda me teeme nüüd varem loodud HTML quoteDisplay ID-ga.

Kasutades document.getElementById (), saame edastada mis tahes stringi ja JavaScript vaatab meie HTML-dokumendi läbi ja otsib selle kasutamiseks, et teha sellega mida iganes soovime. HTML-elemendi toomiseks parameetrina edastame 'quoteDisplay' parameetriga, mille ID on "quoteDisplay".

Nüüd kasutame meetodit .innerHTML, et edastada meie massiivilt juhuslikult leitud tsitaat väärtusena, mis lisatakse meie HTML quoteDisplay elemendile.

Sisestasime HTML-i võrdseks pakkumiste massiiviga, muutuja randomNumber edastades massiivi indeksnumbrina. Nüüd on meie funktsioon newQuote () valmis!

Missioon täidetud!

Kui olete jõudnud õpetuse sellesse ossa, olete projekti lõpule viinud! Palju õnne! Olete praktiliselt valmis koostanud juhusliku pakkumise generaatori.

Nüüd on vaja vaid projekt oma brauseris avada ja vaadata, kas see töötab! Selleks lohistage fail index.html oma brauseriaknasse.

Vajutage nuppu ja see peaks kuvama teie ekraanile juhusliku hinnapakkumise. Vajutage nuppu nii mitu korda kui soovite. Iga kord peaks ekraanil praeguse pakkumise asendama uus.

Pakkumiste massiivi saate lisada nii palju pakkumisi kui soovite.

Vaadake ülevaadet kogu meie projektifailidest kõrvuti, mis moodustavad selle juhusliku pakkumise generaatori.

Mis nüüd?

Olete loonud täiesti funktsionaalse juhusliku pakkumise generaatori ja arvatavasti mõtlete, kuhu siit edasi minna.

Ilmselt mõtlete, et see juhusliku hinnapakkumise generaator näeb välja väga igav ja ilmselt keegi seda ei kasutaks. Ja sul on täiesti õigus. See projekt näeb üsna tavaline välja ja teie asi on seda muuta.

Saate seda projekti paremaks muuta, lisades sellele oma funktsioonid ja stiili.

Selle õpetuse alguses lõime faili style.css, mida me ei kasutanud. CSS-i kasutatakse veebilehtede ilusaks ja värviliseks muutmiseks. Soovi korral on teie ülesanne lisada CSS-faili kujundamiseks.

Lisajuhiste saamiseks võite otsida mõnda CSS-i õpetust. Laske oma fantaasial lennata ja tehke see projekt endale! Tee mida tahad! Kodeerimine on võluvägi ja sa oled võlur, Harry!

Kui soovite teada, kui palju projekti CSS-i ja veel mõne JavaScripti koodi rida võib muuta, vaadake minu juhusliku hinnapakkumise generaatori enda versiooni, mille pealkirjaks sain "kolmekuningapäevsiin .

Kui teile see õpetus meeldis, klõpsake südamenuppu ja jagage seda! Jätke julgelt kommentaare, küsimusi või tagasisidet. Aitäh ja head kodeerimist!