javascriptでランダムなパスワードを自動生成

プログラム動作

ソースコード

<script>
      //パスワード初期設定。letで変数に文字を入れる。
      let password_numeric = "1234567890";
      let password_uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      let password_lowercase = "abcdefghijklmnopqrstuvwxyz";
      let password_symbol = "!\"#$%&()=~|@[];:+-*<>?_>.,'";

      function genPassword(length = 12) {
        let password = "";
        let password_base = "";

        //チェックボックスにチェックが入っていたら変数に文字情報を追加
        if (document.getElementById("rule_numeric").checked)
          password_base += password_numeric;
        if (document.getElementById("rule_uppercase").checked)
          password_base += password_uppercase;
        if (document.getElementById("rule_lowercase").checked)
          password_base += password_lowercase;
        if (document.getElementById("rule_symbol").checked)
          password_base += password_symbol;

          //lengthで全体の文字数を出してfloorとrandomでその中からランダムで数字を１つ選ぶ
          //charAtでpassword_baseから文字を１つ抽出してpasswordに追加する
          for (let i = 0; i < length; i++) {
          password += password_base.charAt(
            Math.floor(Math.random() * password_base.length)
          );
        }
        return password;
      }

      function setPassword(id) {
        let rule_length = document.getElementById("rule_length").value;
        document.getElementById(id).value = genPassword(rule_length);
      }
    </script>

    <form>
        <input type="checkbox" id="rule_numeric" checked="">数字<br>
        <input type="checkbox" id="rule_uppercase" checked="">英大文字<br>
        <input type="checkbox" id="rule_lowercase" checked="">英小文字<br>
        <input type="checkbox" id="rule_symbol">記号<br>
        長さ：<input type="number" id="rule_length" style="width:100px;"><br>
        <input type="button" onclick="setPassword('passwd');" value="生成" style="padding:5px;">
        <input type="text" id="passwd" style="width:220px;"><br>
    </form>

0から9までの数字をランダムで表示

var length = 10;
let password = "";
let password_base = "";

let password_numeric = "1234567890";
password_base = password_numeric;

for (let i = 0; i < length; i++) {
          password += password_base.charAt(
            Math.floor(Math.random() * password_base.length)
          );
        }

console.log(password);

varとletの違い

varもletも変数宣言は同じ。
varもletも再代入可能。
varは関数スコープ、letはブロックスコープ。
ブロックとは、{}で括られた処理のこと。
letを使うと、同じ関数内であってもブロックの外側からは変数を呼び出せない。

メモ

str.charAt(index)
index⇒0 から str.length – 1 までの間の整数を入れる
返値：文字列strの index の位置にある文字列

ベースとなるパスワード文字列の中からランダムで１つ抽出

Math.floor(Math.random() * password_base.length)

Math.random()
0 以上 1 未満のランダムな値を生成

Math.floor()
小数点を切り捨てて整数を返す

生成ボタンを押すと「onclick=”setPassword(‘passwd’);”」を発動。

function setPassword(id) {
    let rule_length = document.getElementById("rule_length").value;
    document.getElementById(id).value = genPassword(rule_length);
}

テキストフォームのid=rule_lengthに入っている数値を取得。
テキストフォームのid=passwdにgenPassword()で生成したパスワードを代入。