大文字/小文字の変換

Webデリ - Spicy Tools, Delicious Sites.
小文字に変換
大文字に変換

  1. 大文字/小文字の変換です。
    Lower/Upper ボタンをクリックしてみて下さい。
    【Source Code(lower_upper.html)】
    <script>
    function func(str)
    {
        document.getElementById("lower").textContent = str.toLowerCase();
        document.getElementById("upper").textContent = str.toUpperCase();
    }
    </script>
    </head>
    
    <body>
    <div id="str">Webデリ - Spicy Tools, Delicious Sites.</div>
    <div id="lower">小文字に変換</div>
    <div id="upper">大文字に変換</div><br>
    
    <form>
    <input type="button" value="Lower/Upper" onclick=func(document.getElementById("str").textContent) />
    </form>
    
  2. div で元の文字列と、大文字/小文字に変換した文字列を格納する領域を定義します。
    <div id="str">Webデリ - Spicy Tools, Delicious Sites.</div>
    <div id="lower">小文字に変換</div>
    <div id="upper">大文字に変換</div><br>
    
  3. button をクリックすると、元の文字列を引数にして func() 関数が呼ばれます。
    <form>
    <input type="button" value="Lower/Upper" onclick=func(document.getElementById("str").textContent) />
    </form>
    
  4. func() 関数は head 内で定義しています。
    str を小文字に変換して div id="lower" の領域に格納します。
    str を大文字に変換して div id="upper" の領域に格納します。
    function func(str)
    {
        document.getElementById("lower").textContent = str.toLowerCase();
        document.getElementById("upper").textContent = str.toUpperCase();
    }
    
  5. プログラムは Windows10 & Google & MicroSoft Edge の環境で作成しています。
    "Lower/Upper" のボタンをクリックすると大文字/小文字に変換した文字列に置き換わります。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)