大文字／小文字の変換

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)