HTML＆javascriptでencoderを作ってみた

html&javascriptでencode&decodeツールを作ってみた

今回作ったのは、HTMLの入力欄に入力した情報をencodeさせるというものです。 　　前書きは短く！ 早速実践に移ります

早速作る！

javascript

main.js

    var x;
    function code(){
        x = document.getElementById("encode").value;
        console.log(x);
    }
    function encode(){
        code();
        y=window.btoa(unescape(encodeURIComponent(x)))
        a()
    }
    function decode(){
        code();
        y=decodeURIComponent(escape(window.atob(x)))
        a()
    }
    function a(){
        let text = document.getElementById('id').textContent; //宣言
        document.getElementById('id').textContent = y;
    }

説明

1,[var x;]は、関数内で変数を宣言すると、範囲が限られてしまうので、最初に宣言します。
2,[ function code(){
      x = document.getElementById("encode").value;
      console.log(x);
  };]
は、inputタグに入力した情報を取得するといった関数です。
3,[function encode(){
       code();
       y=window.btoa(unescape(encodeURIComponent(x)))
       a()
   };]
は、情報をencodeする関数です
4,[function decode(){
       code();
       y=decodeURIComponent(escape(window.atob(x)))
       a()
   }]
は、decodeする関数です。
5,[function a(){
       let text = document.getElementById('id').textContent; //宣言
       document.getElementById('id').textContent = y;
　 }]
は、encodeかdecodeした情報を、表示させる関数です。

ちなみに、関数の宣言は[function 関数名(){処理}]で、できます。

html

index.html

<script type="text/javascript" scr="/main.js">
<input type="text" id="encode">
<input type="button" onclick="encode()" value="エンコード">
<input type="button" onclick="decode()" value="デコード">
<textarea id="id"></textarea>

です

説明

<script type="text/javascript" scr="/main.js">
は、先ほど作ったjavascriptファイルを読み込みます。
<input type="text" id="encode">
は、入力欄を生成します。
<input type="button" onclick="encode()" value="エンコード">
これは、クリックすると、入力欄に入力した情報をencodeするボタンを生成します。
<input type="button" onclick="decode()" value="デコード">
これは、クリックすると、入力欄に入力した情報をdecodeするボタンを生成します。
<textarea id="id"></textarea>
encode&decodeした情報を表示させる欄です。

あとがき

この筆者は、まだ初心者なので時々間違った情報や、回りくどくて、短縮できる情報を発信することがあります。 なので、そういうことがあるとコメントで教えてくれると幸いです。

ご視聴有難うございました。
完成品↓
https://tanahiro2010.zatunen.com/encode.html