Wie man einen Zufallszitatgenerator mit JavaScript und HTML für absolute Anfänger erstellt

Dieses Tutorial richtet sich an Anfänger, die lernen möchten, wie eine einfache Webanwendung mit JavaScript erstellt wird. Es wird Ihnen helfen, die Interaktion zwischen JavaScript und einem HTML-Dokument zu verstehen und zu verstehen, wie sie zusammenarbeiten, um Dinge im Webbrowser anzuzeigen, damit die Benutzer sie sehen können.

Wenn Sie absolut keine Erfahrung mit HTML und JavaScript haben, machen Sie sich keine Sorgen. Ich werde Sie durch jede einzelne Codezeile führen und alles im Detail erklären. Wenn Sie das Ende dieser Lektion erreicht haben, sollten Sie ein besseres Verständnis dafür haben, wie JavaScript mit HTML zusammenarbeitet, um Webseiten interaktiv zu gestalten.

In diesem Projekt erstellen wir einen Generator für zufällige Zitate, der dem Benutzer jedes Mal, wenn er eine Taste drückt, ein zufälliges Zitat anzeigt. Um loszulegen, benötigen Sie drei wichtige Dinge, die fast immer für jedes Webprojekt verwendet werden:

  • ein Webbrowser
  • ein Texteditor
  • ein Wunsch, Dinge zu bauen

Für dieses Tutorial verwende ich den Google Chrome-Webbrowser, den Sublime Text 3-Editor und natürlich meinen eigenen Wunsch zu erstellen und zu unterrichten. Sie können alle Werkzeuge verwenden, mit denen Sie sich wohl fühlen.

Lass uns anfangen!

Als erstes erstellen wir den Ordner, der alle unsere Dateien enthält, aus denen das Projekt besteht. Erstellen Sie einen leeren Ordner auf Ihrem Desktop und nennen Sie ihn "Zitatgenerator". Öffnen Sie Sublime Text und ziehen Sie die Datei in Sublime . Jetzt sollte der Ordner über die Seitenleiste zugänglich sein.

Die meisten Webprojekte bestehen aus mindestens einem HTML-, JavaScript- und einer CSS-Datei. Lassen Sie uns diese Dateien im Ordner "Zitatgenerator" erstellen.

In erhabenem Text,Klicken Sie mit der rechten Maustaste auf den Ordner "Zitatgenerator" in der Seitenleiste und klicken Sie auf " Neue Datei erstellen" . Unten wird eine Eingabeleiste angezeigt, in der die Datei benannt wird. Geben Sie "index.html" ein und drücken Sie die Eingabetaste. Jetzt haben Sie die Datei index.html erstellt. Wiederholen Sie diesen Schritt noch zweimal , erstellen Sie jedoch eine Datei mit den Namen "javascript.js" und "style.css" (ohne Anführungszeichen) . Es ist wichtig sicherzustellen, dass beim Benennen einer Datei die Buchstaben immer in Kleinbuchstaben geschrieben sind, um Komplikationen zu vermeiden.

Nachdem wir alle unsere Dateien eingerichtet haben, erstellen wir unsere HTML-Datei, die als Grundlage für unser Webprojekt dient. Wir beginnen mit einem Bare-Bones-HTML-Code in unserer Datei index.html, bevor wir etwas hinzufügen können.

Unten finden Sie unsere HTML-Datei, in der sich nichts befindet. Sie können sich dies als unser HTML-Skelett vorstellen, das das gesamte Fleisch (den Inhalt) enthält, das wir später hinzufügen werden.

Jetzt müssen wir unsere JavaScript-Datei mit unserem HTML-Dokument verknüpfen, damit unser JavaScript-Code mit dem HTML-Dokument interagieren kann. Wir werden auch Text innerhalb der hinzufügen Tags, fügen Sie ein

Element erstellen ein Element mit dem ID- Namen "quoteDisplay" und aElement mit einem onclick- Attribut, an das "newQuote ()" übergeben wurde.

Brechen sie ab

Wenn Sie sich nicht sicher sind, wie jeder Teil des HTML-Codes seinen Zweck erfüllt, erkläre ich es Ihnen hier. Wenn Sie genau wissen, was jedes Element tut und warum es dort vorhanden ist, können Sie mit dem nächsten Abschnitt fortfahren, um fortzufahren.

Zuerst haben wir "Quote Gen" zwischen dem hinzugefügt Stichworte. Das Titel-Tag nimmt den Text dazwischen und zeigt ihn beim Öffnen auf der Registerkarte Ihres Webbrowsers an.

Im ersten Schritt müssen wir außerdem sicherstellen, dass die Datei javascript.js am Ende des HTML-Dokuments unmittelbar vor dem Schließen verknüpft wird Etikett.

Zweitens haben wir eine erstellt

Element mit "Simple Quote Generator". Dies dient dazu, einen Titel auf unserer Webseite anzuzeigen.

Dann haben wir eine erstellt Element mit einem ID- Attribut auf "quoteDisplay". EIN Element fungiert als Teiler für HTML-Dokumente. Elemente helfen beim Organisieren von Inhalten innerhalb einer Webseite. Das id- Attribut fungiert als Bezeichner, sodass JavaScript es leicht erfassen und bearbeiten kann. In diesem Fall verwenden wir JavaScript, um das Element mit der ID "quoteDisplay" abzurufen und Anführungszeichen in das zu setzen Element.

Danach erstellen wir eine Element mit einem onclick- Attribut, bei dem "newQuote ()" als Parameter übergeben wurde. DasElement, wie Sie vermutet haben, ist eine Schaltfläche, die etwas bewirkt, wenn Sie darauf klicken. Das onclick- Attribut wird verwendet, um eine Funktion für die Schaltfläche festzulegen , sodass jedes Mal, wenn Sie auf die Schaltfläche klicken, die Funktion ausgeführt wird, die an die übergeben wurde‚s Onclick - Attribut.

In diesem Fall wird jedes Mal, wenn Sie auf die Schaltfläche klicken, die Funktion newQuote () ausgeführt. Natürlich haben wir die Funktion newQuote () noch nicht definiert. Wenn Sie das Projekt in einem Browser öffnen und die Schaltfläche drücken, wird ein Fehler in der Konsole ausgegeben, da die Funktion derzeit nicht vorhanden ist.

Schließlich finden Sie hier eine Auffrischung, um zu zeigen, wie unsere vollständige index.html-Datei derzeit aussieht und was sie im Webbrowser erzeugt. Verwenden Sie zum Öffnen des Projekts einen Webbrowser, um die Datei index.html zu öffnen.

Mit Code logisch denken

Es ist endlich Zeit, mit der Arbeit an JavaScript in unserer Datei javascript.js zu beginnen, damit wir unsere eigene Funktionalität zur Angebotserstellung entwickeln können.

Bevor wir mit dem Codieren beginnen, überlegen wir uns logisch, wie wir eine Angebotserstellungsmaschine mit Code erstellen können. Wir können nicht einfach mit dem Codieren beginnen, ohne vorher darüber nachzudenken.

Wir müssen herausfinden, was wir wollen und wann wir es wollen. Für dieses Projekt möchten wir Angebote! Wann wollen wir es? Wir wollen es jetzt! Oh, ähm ... ich meine, wir wollen es, wenn der Benutzer den Knopf drückt.

Nachdem wir die erste Frage gelöst haben, müssen wir die zweite stellen. Was sind Zitate? Ich meine wirklich, was sind sie?

Danke Jaden! Ja! Zitate bestehen aus Buchstaben, die Wörter bilden. In der Programmierwelt werden Wörter als Zeichenfolgen klassifiziert, daher müssen unsere Anführungszeichen Zeichenfolgen sein !

Da wir wissen, dass wir mehrere Anführungszeichen haben und jedes zufällig ausgewählt wird, ist es am besten, mehrere Zeichenfolgen in einem Array zu speichern .

Wenn Sie es noch nicht wussten, werden Elemente innerhalb eines Arrays durch Aufrufen der Array-Indexnummer abgerufen . Die technischen Details liegen außerhalb des Bereichs dieses Lernprogramms, aber in einfachen Worten wird jedes Element innerhalb eines Arrays durch eine ganze Zahl in chronologischer Reihenfolge dargestellt. Das erste Element eines Arrays hat eine Indexnummer von 0, jedes Element danach steigt um eins.

Um ein zufälliges Zitat aus einem Array abzurufen, wissen wir jetzt, dass wir jedes Mal, wenn der Benutzer auf die Schaltfläche klickt, eine Zufallszahl erstellen müssen. Dann würden wir diese Zufallszahl verwenden, um ein Zitat aus dem Array abzurufen und dieses Zitat auf dem HTML-Dokument zu platzieren, das wiederum dem Benutzer das Zitat im Browser anzeigt.

Das ist es! Wir haben gelöst, wie man einen Zufallszitatgenerator erstellt, indem wir logisch in Code denken! Hier ist eine Zusammenfassung der Logik, die wir für unser Projekt entwickelt haben:

  1. Anführungszeichen sind mehrere Zeichenfolgen, die in einem Array gespeichert werden müssen.
  2. Jedes Mal, wenn die Taste gedrückt wird, muss eine zufällige ganze Zahl generiert werden.
  3. Die Nummer wird als Darstellung der Array-Indexnummer für das Anführungszeichen-Array verwendet.
  4. Sobald wir das zufällig ausgewählte Zitat mit unserer zufällig generierten ganzen Zahl aus dem Array abgerufen haben, platzieren wir es im HTML-Dokument.

Codierungszeit!

Beeindruckend! Wir sind so weit gekommen und haben noch nicht mit dem Programmieren begonnen! Willkommen in der Welt des Programmierens!

War nur Spaß.

Nicht wirklich.

Sie werden viel Zeit damit verbringen, in dieser Karriere (oder Ihrem Hobby) zu programmieren. Mein Punkt ist jedoch, dass Sie noch mehr Zeit damit verbringen werden, über Programmierlogik und das Lösen von Problemen nachzudenken. Beim Programmieren geht es nicht darum, 20 Minuten lang 100 Wörter pro Minute auf der Tastatur zu hacken. Das wird nicht passieren.

Jetzt, wo wir die ganze Logik aus dem Weg haben. Beginnen wir mit dem Codieren. Wir werden jetzt in der Datei javascript.js arbeiten .

Wir müssen entweder unsere eigenen Angebote erstellen oder sie aus einer Online-Quelle kopieren.

Ich googelte „Beste Zitate“ und kopierte die ersten 10 von einer Website und platzierte sie dann in einem durch Kommas getrennten Array. Stellen Sie sicher, dass Sie Ihre Anführungszeichen in einfache oder doppelte Anführungszeichen setzen. Wenn Ihr Anführungszeichen aus Apostrophen, einfachen oder doppelten Anführungszeichen besteht, müssen Sie möglicherweise Backslashes verwenden, um diese Zeichen zu maskieren, damit JavaScript erkennt, dass die Symbole Teil der Zeichenfolge und nicht der Codierungssyntax sind.

Wie Sie auf dem Bild unten sehen können, habe ich eine Variable namens "Anführungszeichen" definiert und sie einem Array mit den Anführungszeichen gleichgesetzt, die ich aus dem Internet ausgewählt habe.

Jetzt müssen wir unsere newQuote () -Funktion erstellen, die ich zuvor im HTML-Abschnitt dieses Tutorials erwähnt habe. Für unsere Funktion newQuote () müssen wir eine zufällige ganze Zahl generieren , die von 0 bis zur Länge unseres Anführungszeichen-Arrays reicht . Ich werde weiter unten erklären.

Zuerst rufen wir die Funktion Math.floor () auf. Die Funktion Math.floor () nimmt einen Parameter auf und rundet die Zahl auf die nächste Ganzzahl ab. Wenn wir beispielsweise Math.floor (5.7) aufrufen, wird 5 zurückgegeben.

Zweitens übergeben wir Math.random () als Parameter an Math.floor (). Die Funktion Math.random () generiert eine zufällige Dezimalzahl zwischen 0 und 1.

Nehmen wir also an, wir haben Folgendes:

Wenn wir unsere randomNumber in diesem Zustand in der Konsole protokollieren, wird immer 0 zurückgegeben. Dies liegt daran, dass Math.random () immer eine Dezimalstelle zwischen 0 und 1 ist, z. B. 0,4, 0,721, 0,98 usw. Da wir Math.random () als Parameter an Math.floor () übergeben, wird Math.floor () immer auf die nächste Dezimalstelle abgerundet. Daher wird jede Dezimalstelle zwischen 0 und 1 immer auf 0 zurückgesetzt.

Was bringt das? Nun, um unsere Array-Indexnummern zu erstellen, benötigen wir ganze Zahlen, aber wir brauchen zufällige ganze Zahlen. Um zufällige ganze Zahlen zu erzeugen und nicht nur 0 zurückzugeben, müssen wir unsere zufällige Dezimalzahl nehmen und mit einer ganzen Zahl multiplizieren.

Versuchen wir jetzt so etwas:

Wenn wir das Protokoll randomNumber trösten, liegen die Ergebnisse irgendwo zwischen 1 und 19. Jetzt könnte ich diesen aktuellen Status von randomNumber verwenden, um ein Anführungszeichen aus dem Anführungszeichen-Array zu ziehen, aber es funktioniert nur, wenn die Array-Indexnummer innerhalb des Arrays vorhanden ist. Andernfalls wird ein Fehler ausgegeben.

Zum Beispiel:

Ich habe derzeit nur 10 Zeichenfolgen in meinem Anführungszeichen-Array, daher gibt jede Zahl über 9 undefiniert zurück, da sie nicht im Array vorhanden ist.

Um dieses Problem zu lösen, müssen wir nur Math.random () mit der Länge unseres Anführungszeichen-Arrays multiplizieren. Auf diese Weise können wir beliebig viele Zeichenfolgen zum Array hinzufügen oder daraus entfernen, und unsere Variable randomNumber gibt immer eine gültige Zahl zurück, da wir die Methode quote.length verwenden, um immer die aktuelle Länge unseres Arrays abzurufen.

Jetzt brauchen wir eine Möglichkeit, den Wert von randomNumber zu verwenden, um ein Zitat zufällig aus dem Anführungszeichen-Array abzurufen, das Zitat in unser HTML-Dokument einzufügen und es unseren Benutzern anzuzeigen.

Denken Sie daran, wie ich erwähnt habe, dass wir HTML verwendenIDs, mit denen JavaScript HTML-Elemente einfach erfassen und bearbeiten kann? Nun, das ist es, was wir jetzt mit der HTML quoteDisplay ID machen, die wir zuvor erstellt haben.

Mit document.getElementById () können wir eine beliebige Zeichenfolge übergeben, und JavaScript durchsucht unser HTML-Dokument und ruft es ab, damit Sie damit tun können, was wir wollen. Wir werden 'quoteDisplay' als Parameter übergeben, um das HTML-Element mit der ID "quoteDisplay" abzurufen.

Jetzt verwenden wir die .innerHTML-Methode, um ein zufällig abgerufenes Zitat aus unserem Array als Wert zu übergeben, der unserem HTML-Zitat quoteDisplay-Element hinzugefügt wird.

Wir setzen innerHTML gleich unserem Anführungszeichen-Array, wobei unsere randomNumber-Variable als Array-Indexnummer übergeben wird. Jetzt ist unsere Funktion newQuote () abgeschlossen!

Mission erfüllt!

Wenn Sie diesen Teil des Tutorials erreicht haben, haben Sie das Projekt abgeschlossen! Herzliche Glückwünsche! Sie sind praktisch fertig mit dem Erstellen des Zufallsgenerators.

Jetzt müssen Sie nur noch das Projekt in Ihrem Browser öffnen und prüfen, ob es funktioniert! Ziehen Sie dazu Ihre Datei index.html in Ihr Browserfenster.

Drücken Sie die Taste und es sollte ein zufälliges Zitat auf Ihrem Bildschirm angezeigt werden. Drücken Sie die Taste so oft Sie möchten. Jedes Mal sollte ein neues Angebot das aktuelle auf dem Bildschirm ersetzen.

Sie können dem Anführungszeichen-Array beliebig viele Anführungszeichen hinzufügen.

Sehen Sie sich nebeneinander einen Überblick über unsere gesamten Projektdateien an, aus denen dieser Zufallsangebot-Generator besteht.

Was jetzt?

Sie haben einen voll funktionsfähigen Zufallsgenerator erstellt und fragen sich wahrscheinlich, wohin Sie von hier aus gehen.

Sie denken wahrscheinlich, dass dieser Zufallsgenerator sehr langweilig aussieht, und wahrscheinlich würde ihn niemand verwenden. Und du hast absolut recht. Dieses Projekt sieht ganz einfach aus, und es liegt an Ihnen, das zu ändern.

Sie können dieses Projekt verbessern, indem Sie Ihre eigenen Funktionen und Ihr eigenes Design hinzufügen.

Zu Beginn dieses Tutorials haben wir eine style.css-Datei erstellt, die wir nicht verwendet haben. CSS wird verwendet, um Webseiten hübsch und farbenfroh zu gestalten. Es liegt an Ihnen, die CSS-Datei für das Styling hinzuzufügen, wenn Sie möchten.

Sie können nach einigen CSS-Tutorials suchen, um zusätzliche Anleitungen zu erhalten. Lassen Sie Ihrer Fantasie freien Lauf und machen Sie dieses Projekt zu Ihrem! Mach was du willst! Codierung ist Magie und du bist ein Zauberer, Harry!

Wenn Sie neugierig sind, wie viel sich ein Projekt mit CSS und einigen weiteren Zeilen JavaScript-Code ändern kann, lesen Sie meine eigene Version dieses Zufallszitatgenerators mit dem Titel „Epiphany Clock“.hier .

Wenn Ihnen dieses Tutorial gefallen hat, klicken Sie bitte auf den Herzknopf und teilen Sie es! Fühlen Sie sich frei, Kommentare, Fragen oder Feedback zu hinterlassen. Vielen Dank und viel Spaß beim Codieren!