_lemon2003_'s tech blog lemon2003.qrunch.io

勢い余って作ってみた!!!...けれども、これって使う？的なマイくそアプリを晒す (また更新します。)

JavaScript

公開日：2018-12-30

最終更新：2018-12-30

ブログ： https://lemon2003.qrunch.io/entries/VJ2jtqlWthEZN08W

※この記事は外部サイト（https://qiita.com/_lemon2003_/items/b4ba4b...）からのクロス投稿です

tl;dr

基本的にhtml&css&JavaScriptで作ってるので、アプリかどうか怪しいですが、
とやかく言わないで本題に入ります。

その1: パスワードメーカー

<!DOCTYPE html>  
<html lang="ja">  
    <head>  
        <meta charset="utf-8">  
        <title>password maker</title>  
    </head>  
    <body>  

        桁: <input type="text" id="num0" value=""><br>  
        数: <input type="text" id="num1" value=""><br>  
        <input type="button" onclick="outputText()" value="OK↓"><br>  
        <br>  
        <textarea id="outputArea"></textarea>  

        <script src="js/common.js"></script>  
    </body>  
</html>

function outputText(){  
    let alpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";  

    let output = "";  

    let num0 = Number(document.getElementById("num0").value)  
    let num1 = Number(document.getElementById("num1").value)  
    for(let i = 0; i < num0 * num1; i++){  
        output += alpha[Math.floor(Math.random()*alpha.length)] + (i % num0 == num0 -1 ? "\n" : "");  
    }  
    document.getElementById("outputArea").value = output;  
}

私の犯したミス。

html
- 桁:, 数: のところで、<label> を使っていない。
- id が適当。
- インライン要素とブロック要素を同じ要素の中に入れている。
- スペーシングに <br> を使っている。
JavaScript
- 変数名 が適当。

php バージョン。

<?php  
    //初期化処理  
    $version = "v0.0.0";  
    if(array_key_exists("article_number",$_GET)){$article_number = $_GET["article_number"];}else{$article_number = null;};  
    if(array_key_exists("figure_number",$_GET)){$figure_number = $_GET["figure_number"];}else{$figure_number = null;};  

    $Alphabet = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];  

?>  
<html>  
    <head>  
        <title>make password</title>  
        <meta lang="ja">  
        <meta content="text/html">  
        <meta charset="utf-8">  
    </head>  

    <style>  
        h1{  
            font-family: "Yu Gothic UI Light";  
        }  
        span#version{  
            color: #c77;  
        }  
        textarea#output{  
            display: block;  
            width: 100%;  
            height: 300px;  
        }  
    </style>  

    <body>  

        <h1>Password maker</h1><span id="version"><?php echo $version; ?></span>  

        <form action="index.php" method="get">  
            <label>文字数 = <input type="text" name="figure_number" value="<?php echo $figure_number ?>"></label><br>  
            <label>生成数 = <input type="text" name="article_number" value="<?php echo $article_number ?>"></label><br>  
            <input type="submit" value="OK!">  
        </form>  

        <?php  

            if($article_number != null && $figure_number != null){  
                $Msg = "<span>結果 =</span><br><textarea type='text' id='output'>";  
                for($i = 0; $i < $article_number; $i ++){  
                    for($j = 0; $j < $figure_number; $j++){  
                        $Msg .= $Alphabet[mt_rand(0,61)];  
                    }  
                    $Msg .= "\n";  
                }  
                $Msg .= "</textarea>";  

                echo $Msg;  
            }  
        ?>  
    </body>  
</html>