Hvordan bygge en tilfeldig tilbud generator med JavaScript og HTML, for absolutt nybegynnere

Denne opplæringen er ment for nybegynnere som ønsker å lære hvordan du lager en enkel webapplikasjon ved hjelp av JavaScript. Det vil hjelpe deg å forstå samspillet mellom JavaScript og et HTML-dokument, og hvordan de samarbeider om å vise ting i nettleseren slik at folk kan se dem.

Hvis du har absolutt ingen erfaring med HTML og JavaScript, er det ingen bekymringer. Jeg vil lede deg gjennom hver eneste linje med kode, og forklare alt i detalj. Når du kommer til slutten av denne leksjonen, bør du ha en mye bedre forståelse av hvordan JavaScript fungerer med HTML for å gjøre websider interaktive.

I dette prosjektet bygger vi en tilfeldig tilbudgenerator som viser et tilfeldig tilbud for brukeren hver gang de trykker på en knapp. For å komme i gang trenger du tre viktige ting som nesten alltid brukes til hvert webprosjekt:

  • en nettleser
  • en tekstredigerer
  • et ønske om å bygge ting

For denne opplæringen vil jeg bruke Google Chrome-nettleseren, Sublime Text 3 Editor, og selvfølgelig mitt eget ønske om å bygge og undervise. Du kan bruke hvilke verktøy du føler deg komfortabel med.

La oss komme i gang!

Det første vi gjør er å lage mappen som inneholder alle filene våre som utgjør prosjektet. Lag en tom mappe på skrivebordet og gi den navnet "quote generator". Åpne Sublime Text og dra filen til sublime . Nå skal vi ha mappen tilgjengelig gjennom sidefeltet.

De fleste nettprosjekter består av minst en HTML-, JavaScript- og en CSS-fil. La oss lage disse filene i "quote generator" -mappen.

I sublim tekst,høyreklikk på "quote generator" -mappen i sidefeltet og klikk på opprett ny fil . En inndatafelt vil dukke opp nederst for å gi navnet til filen. Skriv inn “index.html” og trykk enter. Nå har du opprettet index.html-filen. Gjenta dette trinnet to ganger til , men lag en fil som heter “javascript.js” og “style.css” (uten anførselstegn) . Det er viktig å sørge for at når du navngir en fil at bokstavene alltid er små bokstaver for å forhindre komplikasjoner.

Nå som vi har alle filoppsettene, la oss lage HTML-filen vår som vil fungere som grunnlaget for webprosjektet vårt. Vi starter med en bare HTML-kode i index.html-filen før vi kan legge til noe.

Nedenfor er vår HTML-fil med ingenting i den. Du kan tenke på dette som vårt HTML-skjelett som inneholder alt kjøttet (innholdet), som vi vil legge til senere.

Nå må vi knytte JavaScript-filen vår til HTML-dokumentet slik at JavaScript-koden vår kan samhandle med HTML-dokumentet. Vi legger også til tekst i tagger, legg til en

element, opprett en element med ID- navnet "quoteDisplay", og også etelement med en onclick- attributt med "newQuote ()" gitt inn i den.

Bryter den ned

Hvis du er forvirret over hvordan hver del av HTML-koden tjener sitt formål, så vil jeg forklare det for deg her. Hvis du vet nøyaktig hva hvert element gjør og hvorfor det er der, kan du hoppe til neste avsnitt for å fortsette.

Først la vi til "Quote Gen" mellom koder. Tittelappen tar teksten mellom den og viser den på fanen i nettleseren din når den åpnes.

I løpet av det første trinnet må vi også sørge for å koble javascript.js-filen nederst i HTML-dokumentet rett før avslutningen stikkord.

For det andre opprettet vi en

element med "Simple Quote Generator" i seg. Dette vil tjene til å vise en tittel på websiden vår.

Så opprettet vi en element med id- attributt satt til "quoteDisplay". EN element fungerer som en skillelinje for HTML-dokumenter. elementer hjelper til med å organisere innhold på en webside. Den id attributt fungerer som en identifikator slik at Javascript enkelt kan hente og manipulere det. I dette tilfellet vil vi bruke JavaScript til å hente elementet med ID-en "quoteDisplay" for å plassere anførselstegn i element.

Etter det lager vi en element med en onclick- attributt med "newQuote ()" sendt inn som parameter. Deelement som du gjettet, er en knapp som vil gjøre noe når du klikker på den. Den onclick attributtet brukes til å angi en funksjon til knappen, slik at hver gang du klikker på knappen, vil den kjøre funksjonen som ble vedtatt i's onclick- attributt.

I dette tilfellet, hver gang du klikker på knappen, vil den kjøre funksjonen newQuote (), selvfølgelig har vi ikke definert newQuote () -funksjonen ennå. Hvis du åpner prosjektet i en nettleser og trykker på knappen, vil det kaste en feil i konsollen siden funksjonen ikke eksisterer for øyeblikket.

Til slutt, her er en oppfriskning for å vise hvordan hele index.html-filen vår ser ut for øyeblikket og hva den produserer i nettleseren. For å åpne prosjektet, bruk en nettleser for å åpne index.html-filen.

Tenker logisk ved hjelp av kode

Det er endelig på tide å begynne å jobbe med JavaScript i filen javascript.js, slik at vi kan utvikle vår egen funksjon for generering av tilbud.

Nå, før vi begynner å kode, la oss tenke logisk på hvordan vi kan lage en tilbudsmaskin med kode. Vi kan ikke bare begynne å kode uten å tenke først.

Vi må finne ut hva vi vil, og når vi vil ha det. For dette prosjektet ønsker vi tilbud! Når vil vi ha det? Vi vil ha det nå! Åh, ærm ... Jeg mener vi vil ha det når brukeren trykker på knappen.

Nå som vi har løst det første spørsmålet, må vi stille det andre. Hva er sitater? Jeg mener egentlig, hva er de?

Takk Jaden! Ja! Sitater består av bokstaver, som utgjør ord. I programmeringsverdenen er ord klassifisert som strenger, derfor må våre sitater være strenger !

Siden vi vet at vi vil ha flere anførselstegn, og hver og en vil bli plukket ut tilfeldig, vil det beste valget være å lagre flere strenger i en matrise .

Hvis du ikke allerede visste det, blir elementer i en matrise hentet ved å ringe matrisenes indeksnummer . De tekniske detaljene er utenfor denne veiledningens omfang, men i enkle termer er hvert element i en matrise representert med et helt tall i kronologisk rekkefølge. Det første elementet i en matrise har et indeksnummer på 0, hvert element etterpå øker med ett.

For å hente et tilfeldig tilbud fra en matrise, vet vi nå at vi må produsere et tilfeldig tall hver gang brukeren klikker på knappen. Deretter vil vi bruke det tilfeldige tallet for å hente et sitat fra matrisen og plassere sitatet på HTML-dokumentet, som igjen vil vise sitatet i nettleseren til brukeren.

Det er det! Vi løste hvordan du lager en Random Quote Generator ved å logisk tenke i kode! Her er en oppsummering av logikken vi har kommet med for prosjektet vårt:

  1. Tilbud er flere strenger som må lagres i en matrise.
  2. Hver gang du trykker på knappen, må det genereres et tilfeldig heltall.
  3. Nummeret vil bli brukt som en representasjon av matriceindeksnummeret for sitatmatrisen.
  4. Når vi har hentet det tilfeldig valgte sitatet fra matrisen ved hjelp av vårt tilfeldig genererte helnummer, vil vi plassere det i HTML-dokumentet.

Kodingstid!

Wow! Vi har kommet så langt og har ikke begynt å programmere ennå! Velkommen til programmeringsverdenen!

Bare tuller.

Ikke egentlig.

Du kommer til å bruke mye tid på koding i denne karrieren (eller hobbyen). Men poenget mitt er at du kommer til å bruke enda mer av den tiden på å tenke på programmeringslogikk og hvordan du kan løse problemer. Programmering handler ikke om å hacke 100 ord per minutt i 20 minutter på tastaturet. Det kommer ikke til å skje.

Nå som vi har all logikken ute av veien. La oss begynne å kode. Vi vil nå jobbe innenfor filen javascript.js .

Vi må enten lage våre egne tilbud eller kopiere dem fra en online kilde.

Jeg googlet “Best Quotes” og kopierte de 10 første fra et nettsted , og plasserte dem deretter i en matrise atskilt med komma. Forsikre deg om at du plasserer anførselstegnene i enkle eller doble anførselstegn. Hvis sitatet ditt består av apostrofer, enkle eller doble anførselstegn, kan det hende du må bruke tilbakeslag for å unnslippe disse tegnene, slik at JavaScript vet at symbolene er en del av strengen, og ikke den kodende syntaksen.

Som du kan se på bildet nedenfor, har jeg definert en variabel kalt "anførselstegn" og satt den lik en matrise full av sitatene jeg har valgt på internett.

Nå må vi lage vår nyeQuote () -funksjon som jeg nevnte tidligere i HTML-delen av denne opplæringen. For vår nyeQuote () -funksjon, må vi generere et tilfeldig heltall som varierer fra 0 til lengden på tilbudet vårt . Jeg vil forklare nærmere nedenfor.

Først kaller vi Math.floor () -funksjonen. Math.floor () -funksjonen tar inn en parameter og runder tallet nedover til nærmeste heltall. Hvis vi for eksempel kaller Math.floor (5.7), vil den returnere 5.

For det andre vil vi passere i Math.random () som en parameter i Math.floor (). Math.random () -funksjonen vil generere et tilfeldig desimaltall mellom 0 og 1.

Så la oss si at vi har dette:

Hvis vi konsoller logger vårt tilfeldige nummer i denne tilstanden, vil den alltid returnere 0. Dette er fordi Math.random () alltid vil være en desimal mellom 0 og 1 slik som 0,4, 0,721, 0,98 og så videre. Fordi vi overfører Math.random () til Math.floor () som en parameter, avrunder Math.floor () alltid ned til nærmeste desimal, og derfor vil hver desimal mellom 0 og 1 alltid gå tilbake til 0.

Så hva er poenget med å gjøre dette? Vel, for å lage våre indeksnummer, trenger vi hele tall, men vi trenger tilfeldige hele tall. For å generere tilfeldige hele tall og bryte vekk fra å bare returnere 0, må vi ta vår tilfeldige desimal og multiplisere den med et helt tall.

La oss nå prøve noe slikt:

Hvis vi konsolerer loggen randomNumber, vil resultatene være hvor som helst mellom 1 og 19. Nå kan jeg bruke denne nåværende tilstanden til randomNumber til å hente ut et tilbud fra sitatarrayen, men det vil bare fungere hvis arrayindeksnummeret finnes i arrayet, Ellers blir det kastet en feil.

For eksempel:

For øyeblikket har jeg bare 10 strenger i anførselstypen, så et hvilket som helst tall over 9 vil returnere udefinert siden det ikke eksisterer i matrisen.

For å løse dette problemet trenger vi bare å multiplisere Math.random () med lengden på anførselstypen. Ved å gjøre dette kan vi legge til eller fjerne så mange strenger fra matrisen som vi vil, og vår randomNumber-variabel vil alltid returnere et gyldig tall siden vi bruker anførselstegn.lengdemetoden for alltid å få den nåværende lengden på matrisen.

Nå trenger vi en måte å bruke verdien av randomNumber til å tilfeldig hente et tilbud fra sitatarrayen og plassere sitatet i HTML-dokumentet vårt og vise det til brukerne våre.

Husk hvordan jeg nevnte at vi bruker HTMLID-er for å la JavaScript enkelt hente og manipulere HTML-elementer? Vel, det er det vi gjør nå med HTML quoteDisplay ID vi opprettet tidligere.

Ved hjelp av document.getElementById () kan vi sende i hvilken som helst streng, og JavaScript vil se gjennom HTML-dokumentet vårt og hente det til bruk for å gjøre hva vi vil med det. Vi vil sende inn "quoteDisplay" som en parameter for å hente HTML-elementet med id "quoteDisplay".

Nå vil vi bruke .innerHTML-metoden til å sende et tilfeldig hentet sitat fra matrisen vår som verdien som vil bli lagt til i vårt HTML quoteDisplay-element.

Vi satte innerHTML lik anførselstilbudet vårt med vår randomNumber-variabel sendt som et matriseindeksnummer. Nå er vår nyeQuote () -funksjon fullført!

Oppdrag utført!

Hvis du har nådd denne delen av opplæringen, har du fullført prosjektet! Gratulerer! Du er praktisk talt ferdig med å bygge Random Quote Generator.

Nå er alt du trenger å gjøre å åpne prosjektet i nettleseren din og se om det fungerer! Gjør dette ved å dra index.html-filen din til nettleservinduet.

Trykk på knappen, og den skal vise et tilfeldig tilbud på skjermen. Trykk på knappen så mange ganger du vil. Hver gang bør et nytt tilbud erstatte det nåværende på skjermen.

Du kan legge til så mange anførselstegn som du vil i sitatarrayen.

Ta en titt på en oversikt over hele prosjektfilene våre side om side som utgjør denne Random Quote Generator.

Hva nå?

Du har opprettet en fullt funksjonell Random Quote Generator, og du lurer sannsynligvis på hvor går du videre herfra.

Du tenker sannsynligvis at denne tilfeldige sitatgeneratoren ser veldig kjedelig ut, og ingen vil sannsynligvis bruke den. Og du har helt rett. Dette prosjektet ser ganske enkelt ut, og det er opp til deg å endre det.

Du kan forbedre dette prosjektet ved å legge til dine egne funksjoner og styling til det.

I begynnelsen av denne opplæringen opprettet vi en style.css-fil som vi ikke brukte. CSS brukes til å gjøre websider vakre og fargerike. Det er opp til deg å legge til i CSS-filen for styling hvis du vil.

Du kan søke etter noen CSS-veiledninger for ytterligere veiledning. La fantasien løpe løs, og gjør dette prosjektet til ditt! Gjør hva du vil! Koding er magi, og du er en trollmann, Harry!

Hvis du er nysgjerrig på å se hvor mye et prosjekt kan endre seg med CSS og noen få linjer med JavaScript-kode, kan du sjekke ut min egen versjon av denne tilfeldige sitatgeneratoren som jeg ga tittelen "Epiphany Clock"her .

Hvis du likte denne veiledningen, kan du klikke på hjerteknappen og dele den! Legg gjerne igjen kommentarer, spørsmål eller tilbakemeldinger. Takk og lykkelig koding!