JavaScript-Passwortgenerator
JavaScript ist in letzter Zeit als Skriptsprache für die Webentwicklung sehr beliebt geworden. Es gibt zahlreiche Dinge oder Projekte, die wir mit JavaScript machen können.
Eines der Projekte, die wir mit JavaScript implementieren können, ist ein zufälliger Passwortgenerator. In diesem Artikel erfahren Sie, wie Sie mit Hilfe von HTML und CSS einen Zufallskennwortgenerator mit JavaScript implementieren.
JavaScript-Passwortgenerator
Das System, das wir implementieren werden, gibt uns ein zufälliges Passwort. Es enthält 12 Zeichen aus allen Groß- und Kleinbuchstaben, Zahlen und Symbolen.
Jedes Mal, wenn wir auf die Schaltfläche Generieren klicken, werden zufällige Passwörter angezeigt.
Zunächst entwerfen wir für dieses Tutorial eine einfache Webseite mit HTML und CSS. Da wir einen Passwortgenerator erstellen, muss er benutzerfreundlicher sein.
Dann erstellen wir eine JavaScript-Datei, um den Passwortgenerator zu aktivieren. Sie können ganz einfach einen zufälligen Passwortgenerator erstellen, indem Sie die folgenden Schritte ausführen.
Fügen Sie eine Überschrift und einen Absatz hinzu
Als ersten Schritt fügen wir eine Überschrift und einen kleinen Absatz hinzu, der die Webseite beschreibt.
Code:
<div class="headings">
<h1>Password Generator</h1>
<p>This is a password generator where you can generate random passwords</p>
</div>
Jetzt können wir der Überschrift (h1) und dem Absatz (p) in der style.css-Datei einige Stile hinzufügen.
Code:
body{
background-color: beige;
align-content: center;
justify-content: center;
display: block;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.headings{
text-align: center;
}
.headings p{
margin-bottom: 40px;
font-size: 20px;
}
Die Ausgabe sollte wie folgt aussehen:
Fügen Sie ein Eingabefeld hinzu, um das zufällige Passwort anzuzeigen
Bisher haben wir unserer Webseite eine Überschrift und einen kleinen Absatz hinzugefügt, die beschreiben, was diese Webseite bietet. Jetzt fügen wir ein Eingabefeld hinzu, in dem das Passwort angezeigt wird.
Fügen Sie zuerst ein Eingabefeld mit dem input-Tag hinzu.
<input id="showPSWD" class="inputbox" type="text" placeholder="A random password" readonly>
Hier haben wir die Eingabefeld-ID deklariert, wie wir sie zukünftig für die Methode getElementByID() verwenden. Außerdem haben wir dieses Eingabefeld schreibgeschützt gemacht, da wir den Inhalt (das zufällige Passwort) im Eingabefeld nicht ändern.
Erstellen Sie eine Schaltfläche zum Generieren des Passworts
Lassen Sie uns nun die Schaltfläche erstellen, um das Passwort zu generieren, wenn darauf geklickt wird.
<button onclick="generatePSWD()">Generate</button>
Hier rufen wir beim Klicken auf die Schaltfläche die Funktion generatePSWD() auf. generatePSWD() ist die Funktion, die wir verwenden, um das Passwort zu aktivieren und es im Eingabefeld anzuzeigen.
Lassen Sie uns nun unser Eingabefeld und die Schaltfläche mit CSS gestalten.
.boxShape{
width: 25%;
margin: auto;
text-align: center;
}
.inputbox{
font-size: 15px;
padding: 5px;
margin-right: 5px;
}
button{
background-color: blue;
color: white;
border-radius: 6px;
border-width: 0px;
padding: 5px 20px;
margin-top: 10px;
font-size: 15px;
}
button:hover{
cursor: pointer;
}
Nun ist die Basis für den Passwortgenerator mittels HTML und CSS geschaffen. Die vollständigen HTML- und CSS-Codes sind unten aufgeführt.
HTML Quelltext:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/style.css">
<title>Password Generator</title>
</head>
<body>
<div class="headings">
<h1>Password Generator</h1>
<p>This is a password generator where you can generate random passwords</p>
</div>
<div class="boxShape">
<input id="showPSWD" class="inputbox" type="text" placeholder="A random password" readonly>
<button onclick="generatePSWD()">Generate</button>
</div>
<script src="/activation.js"></script>
</body>
</html>
CSS-Code:
body{
background-color: beige;
align-content: center;
justify-content: center;
display: block;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.headings{
text-align: center;
}
.headings p{
margin-bottom: 40px;
font-size: 20px;
}
.boxShape{
width: 25%;
margin: auto;
text-align: center;
}
.inputbox{
font-size: 15px;
padding: 5px;
margin-right: 5px;
}
button{
background-color: blue;
color: white;
border-radius: 6px;
border-width: 0px;
padding: 5px 20px;
margin-top: 10px;
font-size: 15px;
}
button:hover{
cursor: pointer;
}
Nun sollte unsere Webseite so aussehen:
Aktivieren Sie den Passwortgenerator mit JavaScript
Lassen Sie uns dazu eine Variable erstellen und diese mit der Methode getElementByID() der Eingangs-ID showPSWD zuweisen.
let pswd = document.getElementById('showPSWD');
Dann erstellen wir eine JavaScript-Funktion namens generatePSWD(). Innerhalb der Funktion deklarieren wir drei Variablen: randPSWD, characters und lenOfPSWD.
randPSWD ist eine leere Zeichenfolge, in der die zufällig ausgewählten Zeichen gespeichert und im Eingabefeld angezeigt werden.
lenOfPSWD enthält 12 als Länge eines zufälligen Passworts. Sie können auch die Länge zu Ihren Gunsten ändern.
Alle Zeichen, Zahlen und Symbole werden in der Variablen Zeichen gespeichert. Sie werden zufällig ausgewählt, um die Passwörter zu erstellen.
function generatePSWD() {
let randPSWD = '';
let lenOfPSWD = 12;
let characters =
'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()';
Jetzt können wir eine for-Schleife verwenden, um ein zufälliges Passwort zu generieren.
for (let i = 0; i < lenOfPSWD; i++) {
let randChar = Math.floor(Math.random() * characters.length);
randPSWD += characters.substring(randChar, randChar + 1);
}
Hier haben wir mit Math.random ein zufälliges Zeichen aus der Zeichenkette ausgewählt. randChar ist das zufällig ausgewählte Zeichen. randChar wird in jeder Iteration in randPSWD gespeichert.
Schließlich kann der String randPSWD als Wert der Methode getElementByID() zugewiesen werden, damit er im Eingabefeld angezeigt wird.
document.getElementById('showPSWD').value = randPSWD;
Unten ist der vollständige JavaScript-Code:
let pswd = document.getElementById('showPSWD');
function generatePSWD() {
let randPSWD = "";
let lenOfPSWD = 12;
let characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()";
for (let i = 0; i < lenOfPSWD; i++) {
let randChar = Math.floor(Math.random() * characters.length);
randPSWD += characters.substring(randChar, randChar + 1);
}
document.getElementById("showPSWD").value = randPSWD;
}
Ein zufälliges Passwort wird im Eingabefeld angezeigt, wenn wir auf die Schaltfläche klicken. Sie können immer wieder auf die Schaltfläche klicken, um zufällige Passwörter zu erstellen.
Ausgang:
Abschluss
Wir sind gerade durch ein Tutorial gegangen, in dem wir einen zufälligen Passwortgenerator mit JavaScript mit HTML und CSS erstellt haben. Es gibt mehr verschiedene Methoden, um dies zu erreichen, aber diese Methode ist eine weitere einfache Möglichkeit, einen Zufallskennwortgenerator zu erstellen.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.