Ich habe ein paar Anfragen bekommen, wie man ein zu machen Name Generator . Daher ist diese Anleitung, wie man loslegen. Das Tutorial ist für Anfänger konzipiert.
Ein Name Generator ist gut, mit zu beginnen, wenn Sie mit der Programmierung spielen möchten. Sie erhalten schnell mit diesem Code gibt einen nützlichen und Spaß Leistung, während der Arbeit mit einigen grundlegenden Dingen in der Programmierung gestartet. Name Generator ist sehr einfach, so ist es leicht zu experimentieren und zu arbeiten.
Name Generator in JavaScript geschrieben und kann daher in einem Browser ausgeführt. Zum Beispiel kann eine Live – Ansicht zum Beispiel. mein Geschäft Name Generator .
Name des Generator-Skript
Hier ist der erste Name Generator Skript in seiner Gesamtheit:
Funktionsgenerator () {
// Ihre eigenen Wörter hinzufügen. Seien Sie vorsichtig mit der Syntax einzuhalten.
Adjektive wurde = [ „Cool“, „Masked“, „Blutige“, „Lame“]
war Tiere = [ „Hamster“, „Elch“, „Lama“, „Ente“]// Zufallszahlen generiert
wurden randomNumber1 = parseInt (Math.random () * adjectives.length);
war randomNumber2 = parseInt (Math.random () * animals.length);
Name war = Adjektive [randomNumber1] + „“ + Tiere [randomNumber2];alert (name); // Löschen oder diese Zeile auf Kommentar, wenn die Werke nach.
// Wenn es bereits einen Namen entfernt wird, ist
if (document.getElementById ( „Ergebnis“)) {
document.getElementById ( „Platzhalter“) RemoveChild (document.getElementById ( „Ergebnis“) . );
}
// Ein div – Element wird mit dem generierten Namen zu zeigen.
// Der Name wird zu einem Textknoten hinzugefügt. Tekstnoden hinzugefügt , um den Platzhalter.
das Element = document.createElement ( ‚div‘);
element.setAttribute ( „id“, „Ergebnis“);
element.appendChild (document.createTextNode (Name));
document.getElementById ( „Platzhalter“) appendChild (Element).
}
Aber lassen Sie sich voneinander Pille Code des und separat an jedem Teil aussehen
Namen und Glossare
Das wichtigste Element in einem Namensgenerator ist natürlich Glossare. Es ist aus diesen Listen von Wörtern, generierten Namen. Je mehr Wörter oder Namen zu den Lexika, desto größer ist die Änderung in der endgültigen Namen hinzuzufügen. Die Glossare sind in den Arrays gespeichert. Kurz gesagt, Arrays sind Variablen, die viele Elemente enthalten kann. In unserem Fall sind diese Elemente Worte.
waren Adjektive = [ „cool“, „maskiert“, „blutig“, „lame“];
war Tiere = [ „Hamster“, „Elch“, „Lama“, „Ente“];
Zum Abrufen von Daten aus dem Array wir den Array-Namen mit einem Zähler in einer eckigen Klammern als Parameter verwenden. Bei der Programmierung zählt fast immer bei Null.
So Adjektive [0] gibt kühlen und Tiere [1] bietet Elch.
zufällige Namen
So wählen Sie zufällige Namen und Worte der Glossare wir Java Scripts verwenden Zufallsfunktion aufgebaut. Math.random us Zufallszahl zwischen 0 und ,9999999999999 geben.
In unserem Fall verwenden wir eine Zufallszahl zwischen 0 und 3, wie es 4 Elemente in jedem Array. Daher multiplizieren wir die Zufallsfunktion Anzahl von 4. Das Ergebnis ist eine Zahl zwischen o und 3,9999999999996. Aber anstatt die Anzahl der Elemente in dem Array zu zählen, erhalten wir JavaScript es mit Länge Funktion zu tun.
Schließlich haben wir die JavaScript-Funktion parseInt () verwenden, unsere Zahl gerundet werden bis auf die ganze Zahl (integer), brauchen wir die Namen unserer beiden Arrays abzurufen.
Es kann ein wenig kompliziert klingen, aber Code weise, es ist ziemlich einfach.
randomNumber1 = parseInt (Math.random () * adjectives.length);
randomNumber2 = parseInt (Math.random () * animals.length);
Anzeigename
Die einfachste Methode, die Namen des Generators Ergebnis anzuzeigen ist Alarmfunktion. Ich verwende ausschließlich alert (), um den generierten Namen zu überprüfen, weil ein Warnfeld ist sehr ärgerlich in der Länge zu verwenden.
Stattdessen werden wir die sieben zusätzlichen Leitungen verwenden, um Ihre zufälligen Namen in der Website in eine natürliche Art und Weise zu integrieren.
Bevor wir beginnen, ein leeres div-Tag in der HTML-Seite zu erstellen, wo Sie Ihre zufälligen Namen angezeigt werden soll. Dieses div-Tag dient als Platzhalter für den erzeugten Namen:
<Div id = „Platzhalter“> </ div>
Und hier sind die 7-Linien von zusätzlichen Code, der das Ergebnis auf der Website schreibt:
if (document.getElementById ( „Ergebnis“)) {
document.getElementById ( „Platzhalter“) removeChild (document.getElementById ( „Ergebnis“) . );
}element = document.createElement ( ‚div‘);
element.setAttribute ( „id“, „Ergebnis“);
element.appendChild (document.createTextNode (Name));
document.getElementById ( „Platzhalter“) appendChild (Element).
In diesem Codeblock geschieht Folgendes:
- Es wird geprüft, ob es bereits ein Ergebnis ist (Name). Wenn ja, wird es von der Platzhalter entfernt werden
- So wird es ein neues div-Element mit id Ergebnis geschrieben werden, das neue Ergebnis zu zeigen,
- Der Name wird hinzugefügt div als Textknoten markiert werden.
- Schließlich wird das Element (div-Tag mit Text enthält, Knoten) auf der Platzhalter im HTML genäht.
Wenn dieses System funktioniert, können Sie die Alarm-Funktion aus dem Skript zu entfernen, wie es jetzt der Name direkt in HTML geschrieben werden.
Setzen Sie Name Generator zusammen
Das Skript kann entweder umfassen die oben in Ihrem HTML-Dokument oder in einem externen Skript. Dann Generatorfunktion ist bereit, von der HTML-Seite aufgerufen werden.
Ich nenne Skript immer 2 Plätze. Zum ersten Mal mit einem Onload-Ereignis des Body-Tag. Dann wird der Namen Generator Code ausgeführt, wenn die Seite zum ersten Mal geladen wird.
<Body onload = „Generator ()“>
Ich nenne natürlich Generatorfunktion einer Taste, so können Sie neue Namen mit einem Klick machen.
<Input type = „button“ value = „Gene Namen“ Onclick = „Generator ()“ />
Machen Sie Ihren eigenen Namen Generator
Mit dem Skript, ist es einfach, Ihren eigenen persönlichen Namen Generator zu machen. Die Wortwahl in den Glossaren bestimmt, ob Ihre Namen Generator Babynamen macht, Piratennamen, Code-Namen oder etwas anderes.
Der Generator kann natürlich auch für andere Zwecke eingesetzt werden. Was ist mit einem Slogan Generator, Schlagzeilen oder seltsame Rechnungen von der Dänischen Volkspartei zu machen? Nur Ihre Phantasie.
Werfen Sie schließlich einen Kommentar und einen Link, wenn Sie einen Spaß oder interessante Namen Generator zusammen surften erhalten. 🙂
Name Generator Ressourcen
Alle meine eigenen Namen Generatoren . Zur Zeit habe ich 18 verschiedene Namen Generatoren für Inspiration.
Sie können ein fertiges finden Name Generator Skript auf meinem offiziellen Namen Generator Blog zum Download bereit . Das Skript wird auch in englischer Sprache kommentiert und zusammen mit diesem Tutorial, es ist super einfach mit dem Code selbst zu beginnen.
Schließlich mein Blog Wie ein Name Generator zu machen kann auch helfen.
JavaScript auf w3schools ist ein guter Ort , wenn Sie mit Javascript Hilfe benötigen.