Kā izveidot nejaušu cenu piedāvājumu ģeneratoru ar JavaScript un HTML absolūtiem iesācējiem

Šī apmācība ir paredzēta iesācējiem, kuri vēlas iemācīties izveidot vienkāršu tīmekļa lietojumprogrammu, izmantojot JavaScript. Tas palīdzēs jums izprast JavaScript un HTML dokumenta mijiedarbību un to, kā viņi sadarbojas, lai tīmekļa pārlūkprogrammā parādītu lietas, kuras cilvēki varētu redzēt.

Ja jums nav pilnīgi nekādas HTML un JavaScript pieredzes, neuztraucieties. Es iepazīstināšu jūs ar katru koda rindiņu un visu sīkāk izskaidrošu. Līdz šīs nodarbības beigām jums vajadzētu būt daudz labākai izpratnei par to, kā JavaScript darbojas ar HTML, lai padarītu tīmekļa lapas interaktīvas.

Šajā projektā mēs izveidosim nejaušu citātu ģeneratoru, kas katru reizi, kad viņš nospiež pogu, parāda nejaušu citātu lietotājam. Lai sāktu, jums būs nepieciešamas trīs būtiskas lietas, kuras gandrīz vienmēr tiek izmantotas katram tīmekļa projektam:

  • tīmekļa pārlūks
  • teksta redaktors
  • vēlme būvēt lietas

Šajā apmācībā es izmantošu Google Chrome tīmekļa pārlūkprogrammu, Sublime Text 3 Editor un, protams, savu vēlmi veidot un mācīt. Jūs varat izmantot jebkurus rīkus, ar kuriem jūtaties ērti.

Sāksim!

Vispirms mēs izveidosim mapi, kurā būs visi mūsu faili, kas veido projektu. Darbvirsmā izveidojiet tukšu mapi un nosauciet to par “citātu ģeneratoru”. Atveriet Sublime Text un velciet failu cildens . Tagad mums vajadzētu būt mapei pieejamai caur sānjoslu.

Lielāko daļu tīmekļa projekta veido vismaz viens HTML, JavaScript un CSS fails. Izveidosim šos failus mapē “quote generator”.

Sublime Text,ar peles labo pogu noklikšķiniet uz sānu joslas mapes “citātu ģenerators” un noklikšķiniet uz Izveidot jaunu failu . Apakšā parādīsies ievades josla, lai nosauktu failu. Ierakstiet “index.html” un nospiediet taustiņu Enter. Tagad esat izveidojis failu index.html. Atkārtojiet šo darbību vēl divas reizes , bet izveidojiet failu ar nosaukumu “javascript.js” un “style.css” (bez pēdiņām) . Ir svarīgi pārliecināties, ka, nosaucot failu, burti vienmēr ir mazie, lai novērstu jebkādas komplikācijas.

Tagad, kad mums ir iestatīti visi faili, izveidosim HTML failu, kas darbosies kā pamats mūsu tīmekļa projektam. Pirms kaut ko pievienot, mēs vispirms sāksim ar HTML kodu ar kailiem kauliem index.html failā.

Zemāk ir mūsu HTML fails, kurā nav nekā. Jūs varat domāt par to kā par mūsu HTML skeletu, kurā būs visa gaļa (saturs), ko mēs pievienosim vēlāk.

Tagad mums būs jāsaista mūsu JavaScript fails ar mūsu HTML dokumentu, lai mūsu JavaScript kods varētu mijiedarboties ar HTML dokumentu. Mēs arī pievienosim tekstu tagus, pievienojiet

elements, izveidojiet a elements ar id nosaukumu “quoteDisplay”, kā arī aelements ar atribūtu onclick ar “newQuote ()”.

Sadalot to

Ja jums ir neizpratne par to, kā katra HTML koda daļa kalpo savam mērķim, es jums to šeit izskaidrošu. Ja jūs precīzi zināt, ko katrs elements dara un kāpēc tas tur atrodas, tad, lai turpinātu, varat pāriet uz nākamo sadaļu.

Vispirms mēs pievienojām “Quote Gen” starp tagus. Nosaukuma atzīme paņem tekstu starp to un parāda to tīmekļa pārlūkprogrammas cilnē, kad tā tiek atvērta.

Pirmās darbības laikā mums ir arī jāpārliecinās, vai HTML dokumenta apakšdaļā ir jāsaista fails javascript.js tieši pirms aizvēršanas tagu.

Otrkārt, mēs izveidojām

elements ar “Vienkāršo citātu ģeneratoru”. Tas kalpos, lai parādītu virsrakstu mūsu tīmekļa lapā.

Tad mēs izveidojām elements ar id atribūtu, kas iestatīts uz “quoteDisplay”. A elements darbojas kā HTML dokumentu dalītājs. elementi palīdz sakārtot saturu tīmekļa lapā. Id atribūts darbojas kā identifikatoru, lai JavaScript var viegli satvert un manipulēt ar to. Šajā gadījumā mēs izmantosim JavaScript, lai greifers elementu ar id “quoteDisplay”, lai ievietotu pēdiņas elements.

Pēc tam mēs izveidojam a elements ar atribūtu onclick ar parametru “newQuote ()”. Theelements, kā jūs uzminējāt, ir poga, kas kaut ko darīs, noklikšķinot uz tā. Onclick atribūts tiek izmantots, lai iestatītu funkciju pogas, lai katru reizi, kad jūs noklikšķiniet uz pogas, tas darbosies funkciju, kas bija pārgājušas's onclick atribūtu.

Šajā gadījumā katru reizi, kad noklikšķināt uz pogas, tā palaidīs funkciju newQuote (), protams, mēs vēl neesam definējuši funkciju newQuote (). Ja atverat projektu pārlūkprogrammā un nospiežat pogu, konsolē radīsies kļūda, jo funkcija pašlaik nepastāv.

Visbeidzot, šeit ir atsvaidzinājums, lai parādītu, kā šobrīd izskatās un kā tas tiek izveidots tīmekļa pārlūkprogrammā, mūsu pilnais index.html fails. Lai atvērtu projektu, izmantojiet tīmekļa pārlūkprogrammu, lai atvērtu failu index.html.

Domāšana loģiski, izmantojot kodu

Beidzot ir pienācis laiks sākt strādāt ar JavaScript mūsu failā javascript.js, lai mēs varētu izstrādāt savu citātu ģenerēšanas funkcionalitāti.

Tagad, pirms mēs sākam kodēšanu, domāsim loģiski, kā mēs varam izveidot cenu piedāvājumu ģenerējošu mašīnu ar kodu. Mēs nevaram vienkārši sākt kodēt, vispirms nedomājot.

Mums ir jāizdomā, ko mēs vēlamies, un kad mēs to vēlamies. Šim projektam mēs vēlamies citātus! Kad mēs to vēlamies? Mēs to vēlamies tūlīt! Ak, erm ... es domāju, ka mēs to vēlamies ikreiz, kad lietotājs nospiež pogu.

Tagad, kad mēs atrisinājām pirmo jautājumu, mums jāuzdod otrais. Kas ir pēdiņas? Es domāju tiešām, kādi tie ir?

Paldies Jaden! Jā! Citātus veido burti, kas veido vārdus. Programmēšanas pasaulē vārdi tiek klasificēti kā virknes, tāpēc mūsu pēdiņām būs jābūt virknēm !

Tā kā mēs zinām, ka mums būs vairākas pēdiņas, un katra no tām tiks izvēlēta nejauši, labākā izvēle būtu masīvā saglabāt vairākas virknes .

Ja jūs vēl nezināt, masīva elementi tiek izgūti, izsaucot tā masīva indeksa numuru . Tehniskā informācija neietilpst šīs apmācības darbības jomā, taču vienkāršā izteiksmē katru masīva elementu hronoloģiskā secībā attēlo vesels skaitlis. Masīva pirmā elementa indeksa numurs ir 0, un katrs elements pēc tam iet uz augšu pa vienam.

Lai izgūtu nejaušu citātu no masīva, tagad mēs zinām, ka mums ir jāsagatavo nejaušs skaitlis katru reizi, kad lietotājs noklikšķina uz pogas. Tad mēs izmantosim šo nejaušo skaitli, lai izgūtu citātu no masīva un ievietotu šo citātu HTML dokumentā, kas savukārt parādītu citātu pārlūkprogrammā lietotājam.

Tieši tā! Mēs loģiski domājot kodā, mēs atrisinājām, kā izveidot nejaušu citātu ģeneratoru! Šis ir loģikas kopsavilkums, ko esam izstrādājuši savam projektam:

  1. Citāti ir vairākas virknes, kas jāuzglabā masīvā.
  2. Katru reizi, kad tiek nospiesta poga, ir jāveido nejaušs vesels skaitlis.
  3. Numurs tiks izmantots kā masīva indeksa numura attēlojums citātu masīvā.
  4. Kad mēs izgūsim nejauši izvēlēto citātu no masīva, izmantojot mūsu nejauši ģenerēto veselu skaitli, mēs to ievietosim HTML dokumentā.

Kodēšanas laiks!

Oho! Mēs esam tikuši tik tālu un vēl neesam sākuši programmēt! Laipni lūdzam programmēšanas pasaulē!

Tikai jokoju.

Ne īsti.

Šajā karjerā (vai hobijā) jūs pavadīsit daudz laika kodēšanai. Bet es domāju, ka jūs vēl vairāk laika pavadīsit domājot par programmēšanas loģiku un problēmu risināšanu. Programmēšana nenozīmē 100 vārdu minūtē uzlaušanu 20 minūtes uz tastatūras. Tas nenotiks.

Tagad, kad mums ir loģika no ceļa. Sāksim kodēt. Tagad mēs strādāsim failā javascript.js .

Mums ir vai nu jāizveido pašiem savas cenas, vai arī jākopē tie no tiešsaistes avota.

Es meklēju Googlē “Labākie citāti” un nokopēju pirmos 10 no vietnes , pēc tam ievietoju tos masīvā, atdalot tos ar komatiem. Pārliecinieties, ka pēdiņas ievietojat vienā vai divās pēdiņās. Ja jūsu citāts sastāv no apostrofiem, atsevišķām vai dubultām pēdiņām, jums, iespējams, būs jāizmanto atpakaļ slīpsvītras, lai izvairītos no šīm rakstzīmēm, lai JavaScript zinātu, ka simboli ir virknes daļa, nevis kodēšanas sintakse.

Kā redzat zemāk redzamajā attēlā, esmu definējis mainīgo ar nosaukumu “pēdiņas” un iestatījis to vienādu ar masīvu, kas pilns ar pēdiņām, kuras esmu izvēlējies ārpus interneta.

Tagad mums ir jāizveido mūsu newQuote () funkcija, kuru es minēju iepriekš šīs apmācības HTML sadaļā. Mūsu newQuote () funkcijai mums ir jāveido nejaušs vesels skaitlis, kas svārstās no 0 līdz mūsu pēdiņu masīva garumam . Tālāk es paskaidrošu tālāk.

Pirmkārt, mēs izsaucam funkciju Math.floor (). Funkcija Math.floor () uzņem parametru un noapaļo skaitli uz leju līdz tuvākajam skaitlim. Piemēram, ja mēs izsauksim Math.floor (5.7), tas atgriezīs 5.

Otrkārt, mēs Math.random () kā parametru nodosim Math.floor (). Funkcija Math.random () ģenerēs nejaušu decimāldaļu no 0 līdz 1.

Pieņemsim, ka mums tas ir:

Ja mēs konsolēs reģistrēsim mūsu randomNumber šajā stāvoklī, tas vienmēr atgriezīsies 0. Tas ir tāpēc, ka Math.random () vienmēr būs decimāldaļa starp 0 un 1, piemēram, 0,4, 0,721, 0,98 un tā tālāk. Tā kā mēs Math.random () ievadām Math.floor () kā parametru, Math.floor () vienmēr tiek noapaļots uz leju līdz tuvākajai decimāldaļai, tāpēc katrs decimāldaļskaitlis starp 0 un 1 vienmēr atgriezīsies uz 0.

Kāda jēga to darīt? Nu, lai izveidotu mūsu masīvu indeksa numurus, mums ir vajadzīgi veseli skaitļi, bet mums ir vajadzīgi nejauši veseli skaitļi. Lai ģenerētu nejaušus veselus skaitļus un atdalītos tikai no 0 atgriešanas, mums būs jāņem mūsu izlases decimālskaitlis un jāreizina ar veselu skaitli.

Tagad izmēģināsim kaut ko līdzīgu šim:

Ja mēs konsolēsim žurnālu randomNumber, rezultāti būs starp 1 un 19. Tagad es varētu izmantot šo pašreizējo randomNumber stāvokli, lai izvilktu citātu no citātu masīva, taču tas darbosies tikai tad, ja masīvā ir masīva indeksa numurs, pretējā gadījumā tiks izmesta kļūda.

Piemēram:

Pašlaik manā pēdiņu masīvā ir tikai 10 virknes, tāpēc jebkurš skaitlis virs 9 atgriezīsies nedefinēts, jo tā masīvā nepastāv.

Lai atrisinātu šo problēmu, mums tikai jāreizina Math.random () ar mūsu pēdiņu masīva garumu. To darot, mēs varam pievienot vai noņemt no masīva tik daudz virkņu, cik vēlaties, un mūsu randomNumber mainīgais vienmēr atgriezīs derīgu skaitli, jo mēs izmantojam metodi quotes.length, lai vienmēr iegūtu pašreizējo masīva garumu.

Tagad mums ir nepieciešams veids, kā izmantot randomNumber vērtību, lai nejauši izvēlētos citātu no pēdiņu masīva un ievietotu citātu mūsu HTML dokumentā un parādītu to mūsu lietotājiem.

Atcerieties, kā es minēju, ka mēs izmantojam HTMLVai ID ļauj JavaScript viegli paķert un manipulēt ar HTML elementiem? Nu, to mēs darām tagad ar HTML quoteDisplay ID, kuru izveidojām iepriekš.

Izmantojot document.getElementById (), mēs varam ievadīt jebkuru virkni, un JavaScript izskatīs mūsu HTML dokumentu un izgūs to lietošanai, lai ar to darītu visu, ko vēlamies. Mēs nodosim parametru “quoteDisplay” kā parametru, lai izgūtu HTML elementu ar “quoteDisplay” id.

Tagad mēs izmantosim .innerHTML metodi, lai nejauši izgūtu citātu no mūsu masīva nodotu kā vērtību, kas tiks pievienota mūsu HTML quoteDisplay elementam.

Mēs iestatījām iekšējo HTML, kas ir vienāds ar mūsu pēdiņu masīvu, ar mūsu randomNumber mainīgo, kas tiek nodots kā masīva indeksa numurs. Tagad mūsu newQuote () funkcija ir pabeigta!

Misija pabeigta!

Ja esat sasniedzis šo apmācības daļu, esat pabeidzis projektu! Apsveicam! Jūs esat praktiski pabeidzis nejaušo cenu piedāvājumu ģeneratora izveidi.

Tagad viss, kas jums jādara, ir atvērt pārlūkprogrammā projektu un pārbaudīt, vai tas darbojas! Dariet to, velkot index.html failu pārlūkprogrammas logā.

Nospiediet pogu, un uz tā ekrānā jāparāda nejaušs citāts. Nospiediet pogu tik reižu, cik vēlaties. Katru reizi ekrānā esošo pašreizējo citātu vajadzētu aizstāt ar jaunu.

Piedāvājumu masīvā varat pievienot tik daudz pēdiņu, cik vēlaties.

Apskatiet visu mūsu projekta failu kopsavilkumu, kas veido šo nejaušo cenu piedāvājumu ģeneratoru.

Ko tagad?

Jūs esat izveidojis pilnībā funkcionējošu nejaušo cenu piedāvājumu ģeneratoru, un jūs, iespējams, domājat, kurp doties tālāk.

Jūs droši vien domājat, ka šis nejaušo cenu piedāvājumu ģenerators izskatās ļoti garlaicīgs, un, iespējams, neviens to neizmantotu. Un tev ir pilnīga taisnība. Šis projekts izskatās diezgan vienkāršs, un tas ir atkarīgs no jums.

Jūs varat uzlabot šo projektu, pievienojot tam savas funkcijas un stilu.

Šīs apmācības sākumā mēs izveidojām failu style.css, kuru neizmantojām. CSS izmanto, lai padarītu tīmekļa lapas glītas un krāsainas. Jums ir jāpievieno CSS failam, lai veidotu, ja vēlaties.

Lai iegūtu papildu norādījumus, varat meklēt dažas CSS apmācības. Ļaujiet fantāzijai vaļu un padariet šo projektu par savu! Dariet visu, ko vēlaties! Kodēšana ir maģija, un tu esi burvis, Harij!

Ja vēlaties uzzināt, cik daudz projekts var mainīties, izmantojot CSS un vēl dažas JavaScript koda rindiņas, apskatiet manu šī nejaušo cenu piedāvājumu ģeneratora versiju, kuras nosaukums ir “Epifānijas pulkstenis”.šeit .

Ja jums patika šī apmācība, lūdzu, noklikšķiniet uz sirds pogas un dalieties tajā! Jūtieties brīvi atstāt komentārus, jautājumus vai atsauksmes. Paldies un laimīgu kodēšanu!