Sådan opbygges en tilfældig citatgenerator med JavaScript og HTML til absolutte begyndere

Denne vejledning er beregnet til begyndere, der ønsker at lære at oprette en simpel webapplikation ved hjælp af JavaScript. Det hjælper dig med at forstå samspillet mellem JavaScript og et HTML-dokument, og hvordan de arbejder sammen for at vise ting i webbrowseren, som folk kan se.

Hvis du har absolut nul erfaring med HTML og JavaScript, er du ikke bekymret. Jeg vil lede dig gennem hver eneste linje kode og forklare alt i detaljer. Når du når slutningen af ​​denne lektion, skal du have en meget bedre forståelse af, hvordan JavaScript fungerer med HTML for at gøre websider interaktive.

I dette projekt opbygger vi en tilfældig citatgenerator, der viser et tilfældigt tilbud til brugeren hver gang de trykker på en knap. For at komme i gang har du brug for tre vigtige ting, der næsten altid bruges til hvert webprojekt:

  • en webbrowser
  • en teksteditor
  • et ønske om at bygge ting

Til denne tutorial bruger jeg Google Chrome-webbrowseren, Sublime Text 3 Editor og selvfølgelig mit eget ønske om at opbygge og undervise. Du kan bruge de værktøjer, du har det godt med.

Lad os komme igang!

Den første ting, vi gør, er at oprette mappen, der indeholder alle vores filer, der udgør projektet. Opret en tom mappe på dit skrivebord og navngiv den "quote generator". Åbn sublim tekst og træk filen til sublim . Nu skal vi have mappen tilgængelig gennem sidepanelet.

De fleste webprojekter består af mindst en HTML-, JavaScript- og en CSS-fil. Lad os oprette disse filer i mappen "quote generator".

I sublim tekst,højreklik på mappen "quote generator" i sidepanelet, og klik på Opret ny fil . En inputbjælke vises i bunden for at navngive filen. Skriv “index.html” og tryk på enter. Nu har du oprettet index.html-filen. Gentag dette trin to gange mere , men opret en fil med navnet “javascript.js” og “style.css” (uden anførselstegn) . Det er vigtigt at sikre, at når du navngiver en fil, at bogstaverne altid er små bogstaver for at forhindre komplikationer.

Nu hvor vi har alle vores filopsætninger, lad os oprette vores HTML-fil, der fungerer som grundlaget for vores webprojekt. Vi starter med en nøgne HTML-kode inden for vores index.html-fil, før vi kan tilføje noget.

Nedenfor er vores HTML-fil med intet i den. Du kan tænke på dette som vores HTML-skelet, der indeholder alt kødet (indhold), som vi vil tilføje senere.

Nu bliver vi nødt til at linke vores JavaScript-fil til vores HTML-dokument, så vores JavaScript-kode kan interagere med HTML-dokumentet. Vi tilføjer også tekst i tags, tilføj en

element, opret en element med id- navnet "quoteDisplay", og også etelement med en onclick- attribut med "newQuote ()" sendt ind i den.

At nedbryde det

Hvis du er forvirret over, hvordan hver del af HTML-koden tjener sit formål, vil jeg forklare det for dig her. Hvis du ved præcis, hvad hvert element gør, og hvorfor det er der, kan du springe til næste afsnit for at fortsætte.

Først tilføjede vi "Citat Gen" mellem tags. Titelmærket tager teksten mellem den og viser den på fanen i din webbrowser, når den åbnes.

I det første trin skal vi også sørge for at linke javascript.js-filen i bunden af ​​HTML-dokumentet lige inden lukningen tag.

For det andet oprettede vi en

element med "Simple Quote Generator" indeni. Dette tjener til at vise en titel på vores webside.

Derefter oprettede vi en element med en id- attribut indstillet til "quoteDisplay". EN element fungerer som en skillevæg til HTML-dokumenter. elementer hjælper med at organisere indhold på en webside. Den id attribut fungerer som en identifikator, så JavaScript nemt kan få fat i og manipulere den. I dette tilfælde bruger vi JavaScript til at få fat i elementet med id'et "quoteDisplay" for at placere tilbud inden for element.

Derefter opretter vi en element med en onclick- attribut med “newQuote ()” sendt ind som parameter. Detelement, som du gættede, er en knap, der vil gøre noget, når du klikker på det. Den onclick attribut bruges til at indstille en funktion til knappen, så hver gang du klikker på knappen, vil det køre den funktion, der blev vedtaget i's onclick attribut.

I dette tilfælde kører den hver gang du klikker på knappen funktionen newQuote (), selvfølgelig har vi selvfølgelig ikke defineret funktionen newQuote () endnu. Hvis du åbner projektet i en browser og trykker på knappen, kaster det en fejl i konsollen, da funktionen ikke findes i øjeblikket.

Endelig er her en opdatering for at vise, hvordan vores fulde index.html-fil i øjeblikket ser ud, og hvad den producerer i webbrowseren. For at åbne projektet skal du bruge en webbrowser til at åbne filen index.html.

Tænker logisk ved hjælp af kode

Det er endelig tid til at begynde at arbejde på JavaScript i vores javascript.js-fil, så vi kan udvikle vores egen citatgenereringsfunktionalitet.

Lad os nu logisk tænke over, hvordan vi kan oprette en citatgenererende maskine med kode, før vi begynder at kode. Vi kan ikke bare begynde at kode uden at tænke først.

Vi er nødt til at finde ud af, hvad vi vil, og hvornår vi vil have det. Til dette projekt ønsker vi tilbud! Hvornår vil vi have det? Vi vil have det nu! Åh, erm ... Jeg mener, vi vil have det, når brugeren trykker på knappen.

Nu hvor vi løste det første spørgsmål, skal vi stille det andet. Hvad er tilbud? Jeg mener virkelig, hvad er de?

Tak Jaden! Ja! Citater består af bogstaver, der udgør ord. I programmeringsverdenen klassificeres ord som strenge, derfor skal vores citater være strenge !

Da vi ved, at vi vil have flere tilbud, og hver enkelt vil blive valgt tilfældigt, ville det bedste valg være at gemme flere strenge i en matrix .

Hvis du ikke allerede vidste det, hentes elementer i en matrix ved at kalde dens matrixindeksnummer . De tekniske detaljer er uden for denne tutorials omfang, men i enkle vendinger er hvert element i en matrix repræsenteret af et heltal i kronologisk rækkefølge. Det første element i en matrix har et indeksnummer på 0, hvert element derefter går op med et.

For at hente et tilfældigt tilbud fra en matrix ved vi nu, at vi skal fremstille et tilfældigt tal, hver gang brugeren klikker på knappen. Derefter bruger vi det tilfældige tal til at hente et tilbud fra arrayet og placere dette citat på HTML-dokumentet, hvilket igen viser citatet i browseren til brugeren.

Det er det! Vi løste, hvordan man opretter en tilfældig citatgenerator ved logisk at tænke i kode! Her er et resumé af den logik, vi er kommet med til vores projekt:

  1. Citater er flere strenge, der skal gemmes i en matrix.
  2. Hver gang der trykkes på knappen, skal der genereres et tilfældigt heltal.
  3. Nummeret bruges som en repræsentation af array-indeksnummeret for quote-arrayet.
  4. Når vi først har hentet det tilfældigt valgte citat fra arrayet ved hjælp af vores tilfældigt genererede heltal, placerer vi det i HTML-dokumentet.

Kodningstid!

Wow! Vi er nået så langt og er ikke begyndt at programmere endnu! Velkommen til programmeringsverdenen!

Bare for sjov.

Ikke rigtig.

Du kommer til at bruge meget tid på kodning i denne karriere (eller hobby). Men min pointe er, at du vil bruge endnu mere af den tid på at tænke på programmeringslogik og hvordan man løser problemer. Programmering handler ikke om at hacke 100 ord i minuttet i 20 minutter på tastaturet. Det vil ikke ske.

Nu hvor vi har al logikken ude af vejen. Lad os begynde at kode. Vi arbejder nu inden for javascript.js- filen.

Vi skal enten oprette vores egne tilbud eller kopiere dem fra en online kilde.

Jeg googlede “Bedste citater” og kopierede de første 10 fra et websted og placerede dem derefter i et array adskilt af kommaer. Sørg for at placere dine anførselstegn i enkelte eller dobbelte anførselstegn. Hvis dit citat består af apostrofer, enkelt eller dobbelt anførselstegn, skal du muligvis bruge tilbageslag for at undslippe disse tegn, så JavaScript ved, at symbolerne er en del af strengen og ikke den kodende syntaks.

Som du kan se på billedet nedenfor, har jeg defineret en variabel kaldet "citater" og indstillet den til en matrix fuld af de citater, som jeg har valgt på Internettet.

Nu er vi nødt til at oprette vores newQuote () -funktion, som jeg nævnte tidligere i HTML-sektionen i denne vejledning. Til vores newQuote () -funktion er vi nødt til at generere et tilfældigt heltal, der varierer fra 0 til længden af ​​vores tilbudstilbud . Jeg vil forklare nærmere nedenfor.

Først kalder vi funktionen Math.floor (). Math.floor () -funktionen indtager en parameter og afrunder tallet nedad til det nærmeste heltal. Hvis vi f.eks. Kalder Math.floor (5.7), returnerer den 5.

For det andet vil vi videregive Math.random () som en parameter til Math.floor (). Math.random () -funktionen genererer et tilfældigt decimaltal mellem 0 og 1.

Så lad os sige, at vi har dette:

Hvis vi konsolerer vores tilfældige nummer i denne tilstand, returnerer det altid 0. Dette skyldes, at Math.random () altid vil være en decimal mellem 0 og 1, såsom 0,4, 0,721, 0,98 osv. Fordi vi videregiver Math.random () til Math.floor () som en parameter, afrunder Math.floor () altid ned til nærmeste decimal, derfor vil hver decimal mellem 0 og 1 altid vende tilbage til 0.

Så hvad er meningen med at gøre dette? For at oprette vores matrixindeksnumre har vi brug for hele tal, men vi har brug for tilfældige heltal. For at generere tilfældige heltal og bryde væk fra kun at returnere 0 bliver vi nødt til at tage vores tilfældige decimal og gange det med et helt tal.

Lad os nu prøve noget som dette:

Hvis vi konsolerer log randomNumber, vil resultaterne være hvor som helst mellem 1 og 19. Nu kunne jeg bruge denne nuværende tilstand af randomNumber til at trække et tilbud fra citatarrayet, men det fungerer kun, hvis arrayindeksnummeret findes inden for arrayet, Ellers kastes en fejl.

For eksempel:

Jeg har i øjeblikket kun 10 strenge inden for mit citatarray, så ethvert nummer over 9 returnerer udefineret, da det ikke findes i arrayet.

For at løse dette problem skal vi kun multiplicere Math.random () med længden af ​​vores anførselstilbud. Ved at gøre dette kan vi tilføje eller fjerne så mange strenge fra arrayet, som vi vil, og vores randomNumber-variabel returnerer altid et gyldigt tal, da vi bruger citat. Længde-metoden for altid at få den aktuelle længde på vores array.

Nu har vi brug for en måde at bruge værdien af ​​randomNumber til tilfældigt at hente et tilbud fra citatarrayet og placere tilbudet i vores HTML-dokument og vise det for vores brugere.

Husk hvordan jeg nævnte, at vi bruger HTMLID'er, der giver JavaScript mulighed for let at få fat i og manipulere HTML-elementer? Nå, det er det, vi laver nu for HTML quoteDisplay ID, vi oprettede tidligere.

Ved hjælp af document.getElementById () kan vi videregive i en hvilken som helst streng, og JavaScript vil se gennem vores HTML-dokument og hente det til brug for at gøre hvad vi vil med det. Vi sender "quoteDisplay" som en parameter for at hente HTML-elementet med id "quoteDisplay".

Nu bruger vi .innerHTML-metoden til at videregive et tilfældigt hentet citat fra vores array som den værdi, der føjes til vores HTML quoteDisplay-element.

Vi indstiller innerHTML lig med vores anførselstegn med vores randomNumber-variabel, der er sendt som et matrixindeksnummer. Nu er vores nyeQuote () -funktion færdig!

Mission fuldført!

Hvis du har nået denne del af vejledningen, har du afsluttet projektet! Tillykke! Du er næsten færdig med at opbygge Random Quote Generator.

Nu skal du blot åbne projektet i din browser og se om det fungerer! Gør dette ved at trække din index.html-fil til dit browservindue.

Tryk på knappen, og den skal vise et tilfældigt tilbud på din skærm. Tryk på knappen så mange gange, du vil. Hver gang skal et nyt tilbud erstatte det aktuelle på skærmen.

Du kan tilføje så mange anførselstegn, som du vil, i anlægget.

Se på en oversigt over hele vores projektfiler side om side, der udgør denne tilfældige citatgenerator.

Hvad nu?

Du har oprettet en fuldt funktionel Random Quote Generator, og du spekulerer sandsynligvis på, hvor går du videre herfra.

Du tænker sandsynligvis, at denne tilfældige citatgenerator ser meget kedelig ud, og ingen vil sandsynligvis bruge den. Og du har helt ret. Dette projekt ser ret almindeligt ud, og det er op til dig at ændre det.

Du kan forbedre dette projekt ved at tilføje dine egne funktioner og styling til det.

I begyndelsen af ​​denne vejledning oprettede vi en style.css-fil, som vi ikke brugte. CSS bruges til at gøre websider smukke og farverige. Det er op til dig at tilføje til CSS-filen til styling, hvis du vil.

Du kan søge efter nogle CSS-tutorials for at få yderligere vejledning. Lad din fantasi løbe vild, og gør dette projekt til dit! Gør hvad der passer dig! Kodning er magisk, og du er en troldmand, Harry!

Hvis du er nysgerrig efter at se, hvor meget et projekt kan ændre sig med CSS og et par flere linjer med JavaScript-kode, skal du tjekke min egen version af denne tilfældige citatgenerator, som jeg titlen "Epiphany Clock"her .

Hvis du nød denne tutorial, skal du klikke på hjerteknappen og dele den! Du er velkommen til at efterlade kommentarer, spørgsmål eller feedback. Tak og glad kodning!