ポートフォリオ

    JavaScriptでパスワード生成アプリを作った

    Webサイトやアプリなどの会員登録に「パスワード」は必須です。セキュリティの観点から、パスワードはサイトごとに変えたほうがいいとされています。しかし、毎回パスワードを考えるのは大変なので、自動的にパスワードを生成するアプリを作ってみました。

    仕様

    • ボタンを押すと、ランダムな英数字が表示される。
    • パスワードの桁数は、任意で決めることができる。

     

    こちらが作ったアプリです。試してみてください。
    パスワード生成アプリ

     

    パスワード生成アプリの作り方

     

    HTML

    • ボタンを押すと関数が動くように、オンクリックをつけておく。
    • 結果(パスワード)を表示させたい領域に、空のpタグ(段落)を作り、idを付けておく。
    <p>ボタンをクリックするとランダムなパスワードを生成します!</p>
    <button onclick="random()">生成する</button>
    <p id="result"></p>

     

    JavaScript

    • パスワードに使用する文字を変数に入れておく。
    • パスワードの文字数を変数に入れておく。
    • 「ランダムな文字を変数に入れる」を8回繰り返す。
    • 完成したランダムな文字を表示する。

     

    function random(){
      //使用文字の定義
      var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        
      //桁数の定義
      var len = 8;
        
      //ランダムな文字列の生成
      var password = "";
      for(var i=0; i<len; i++){
        password += str.charAt(Math.floor(Math.random() * str.length));
          }
    
      //変数passwordの値を、resultというidを持った要素に代入
      document.getElementById('result').textContent = password;
    }

     

     

    参考リンク

    変数の値をHTMLで表示する方法

    ランダムな文字を選ぶアルゴリズムの作り方

     

    まとめ

    • ボタンを押した時に関数を動作させるには、button onclick=”関数名()”
    • 変数の中身を表示するには、要素をidで指定して、.textContent = 変数名;