JavaScript

JavaScriptでパスワード生成プログラム

JavaScriptで、パスワードを生成するWebアプリを作りました。

ランダムな文字列をWebサイト上に表示するものです。

 

「JavaScriptでパスワード生成アプリを作りたい」という初心者さんの参考になれば幸いです。

 

 

パスワード生成アプリの仕様

まずは、このパスワード生成アプリの仕様をご紹介します。

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

 

 

こちらが作ったアプリです。

GitHubで公開しております。

 

 

 

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

ランダムな文字を表示させるアプリを作るには、2つのファイルを作ります。

 

  1. ランダムな文字を生成するプログラム(JavaScript)
  2. 生成した文字を画面に表示する(HTML)

 

まずは、①ランダムな文字を生成するJavaScriptのプログラムをご紹介します。

 

①ランダムな文字を作るためのJavaScriptプログラム

ランダムな文字を表示させるためのプログラムを分解すると、4つの工程になっています。

  1. パスワードに使用する文字を決める。
  2. パスワードの桁数を決める。
  3. ランダムな文字列を作る。
  4. 作った文字を表示する。

 

下記サンプルコードのコメントに、番号がふってあるので、工程を見比べてみてください。

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

 

これで「ランダムな8桁の文字列」を作り出すことができました。

 

私が作ったアプリは、パスワードの桁数を任意に変更できるようになっていますが、この記事では、プログラム初心者にわかりやすくするため、この部分の説明は控えておきます。

知りたい方は「javascript input 値取得」などで調べてみてください。

 

 

あとは、②生成した文字を画面に表示する(HTML)を作っていきます。

 

②作ったパスワードを画面に表示する(HTML)

<p id="result"></p>
<button onclick="random()">生成する</button>

 

HTMLはシンプルです。

 

  1. パスワードを表示する段落を(pタグ)で作ります。
  2. ボタン(buttonタグ)を設置します。
  3. ボタンが押されたら、さきほど作っておいた、JavaScriptのプログラムが動くように、onclick を設定します。

 

 

これで完成です!!

 

 

まとめ

  • プログラム部分(JavaScript)と表示部分(HTML)を分けて考える。
  • ランダムな文字列を作るプログラムを関数(function)で設定する。
  • ボタンを押した時に関数を実行させるには、button onclick=”関数名()”
  • 変数の中身を表示するには、要素をidで指定して、要素.textContent = 変数名;

 

 

 

参考サイト

こちらの記事も参考になるので、読んでみてください。

 

 

JavaScript初心者におすすめの本はこちら

JavaScriptの本を10冊読んだ中からおすすめを3つJavaScriptの本を10冊読んだ中からおすすめを3つ紹介します。...