JavaScript パスワードジェネレーター

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript パスワードジェネレーター
Migel Hewage Nimesha 2024年2月15日
JavaScript JavaScript Password
  1. JavaScript パスワードジェネレーター
  2. まとめ
JavaScript パスワードジェネレーター

JavaScript は、Web 開発用のスクリプト言語として最近非常に人気が高まっています。 JavaScript を使用して実行できることやプロジェクトは数多くあります。

JavaScript を使用して実装できるプロジェクトの 1つは、ランダム パスワード ジェネレーターです。 この記事では、HTML と CSS の助けを借りて、JavaScript を使用してランダム パスワード ジェネレーターを実装する方法を学習します。

JavaScript パスワードジェネレーター

実装しようとしているシステムは、ランダムなパスワードを提供します。 すべての大文字と小文字、数字、および記号から 12 文字が含まれています。

生成ボタンをクリックするたびに、ランダムなパスワードが表示されます。

まず、このチュートリアル用に HTML と CSS を使用して簡単な Web ページをデザインします。 パスワードジェネレーターを作成しているので、ユーザーにとってより魅力的なものにする必要があります。

次に、パスワード ジェネレーターを有効にする JavaScript ファイルを作成します。 以下の手順に従って、ランダムパスワードジェネレーターを簡単に作成できます。

見出しと段落を追加する

最初のステップとして、Web ページを説明する見出しと小さな段落を追加します。

コード：

<div class="headings">
        <h1>Password Generator</h1>
        <p>This is a password generator where you can generate random passwords</p>
</div>

style.css ファイルの見出し (h1) と段落 (p) にいくつかのスタイルを追加できます。

コード：

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;
}

出力は次のようになります。

JavaScript パスワード ジェネレータ - 見出しと段落を追加

入力ボックスを追加してランダム パスワードを表示する

ここまでで、この Web ページが提供する内容を説明する見出しと小さな段落を Web ページに追加しました。 次に、パスワードが表示される入力ボックスを追加します。

まず、input タグを使用して入力ボックスを追加します。

<input id="showPSWD" class="inputbox" type="text" placeholder="A random password" readonly>

ここでは、将来 getElementByID() メソッドで使用するため、入力ボックス ID を宣言しました。 また、入力ボックスの内容 (ランダム パスワード) を変更しないため、この入力ボックスを読み取り専用にしました。

パスワードを生成するボタンを作成する

次に、クリックされたときにパスワードを生成するボタンを作成しましょう。

<button onclick="generatePSWD()">Generate</button>

ここでは、ボタンをクリックして generatePSWD() 関数を呼び出しています。 generatePSWD() は、パスワードを生成して入力ボックスに表示するために使用する関数です。

次に、CSS を使用して入力ボックスとボタンのスタイルを設定しましょう。

.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;
}

これで、HTML と CSS を使用してパスワード ジェネレーターのベースが作成されました。 完全な HTML および CSS コードを以下に示します。

HTML コード:

<!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 コード:

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;
}

これで、Web ページは次のようになります。

JavaScript パスワード ジェネレータ - ボタンの作成

JavaScript を使用してパスワード ジェネレータを有効にする

これを行うには、変数を作成し、getElementByID() メソッドを使用して入力 ID: showPSWD に割り当てます。

let pswd = document.getElementById('showPSWD');

次に、generatePSWD() という JavaScript 関数を作成します。 関数内で、randPSWD、characters、および lenOfPSWD の 3つの変数を宣言します。

randPSWDは、ランダムに選択された文字が格納され、入力ボックスに表示される空の文字列です。

lenOfPSWD には、ランダムなパスワードの長さとして 12 が含まれています。 お好みで長さを変えることもできます。

すべての文字、数字、および記号は characters 変数に格納されます。 それらはパスワードを作成するためにランダムに選択されます。

function generatePSWD() {
  let randPSWD = '';
  let lenOfPSWD = 12;
  let characters =
      'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()';

これで、for ループを使用してランダムなパスワードを生成できます。

for (let i = 0; i < lenOfPSWD; i++) {
  let randChar = Math.floor(Math.random() * characters.length);
  randPSWD += characters.substring(randChar, randChar + 1);
}

ここでは、Math.random を使用して、文字列からランダムな文字を選択しています。 randChar はランダムに選択された文字です。 randPSWD のすべての反復ストア内の randChar 。

最後に、randPSWD 文字列を getElementByID() メソッドの値として割り当てることができるため、入力ボックスに表示されます。

document.getElementById('showPSWD').value = randPSWD;

以下は完全な JavaScript コードです。

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;
 }

ボタンをクリックすると、ランダムなパスワードが入力ボックスに表示されます。 ボタンを何度もクリックして、ランダムなパスワードを作成できます。

出力：

JavaScript パスワード ジェネレータ - パスワード ジェネレータを有効にする

まとめ

JavaScript と HTML および CSS を使用してランダム パスワード ジェネレーターを作成するチュートリアルを説明しました。 これを実現する方法は他にもありますが、この方法は、ランダム パスワード ジェネレーターを作成するもう 1つの簡単な方法です。

著者： Migel Hewage Nimesha
Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

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.