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

スポンサーリンク

プログラム動作

動作ページはこちら
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でその中からランダムで数字を1つ選ぶ
          //charAtでpassword_baseから文字を1つ抽出して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 の位置にある文字列

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

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()で生成したパスワードを代入。

参考サイト

JavaScriptでパスワードを自動生成するサンプル

javascript
スポンサーリンク
のんびりブログ

コメント

タイトルとURLをコピーしました