基礎

<script>タグの説明

<script>タグ内にJavascriptに記述します。下記の内容は記述例になるので形だけ覚えておいてください。

<!DOCTYPE html>
<html>
  <head>
  <script>
    function subtest() {
      var test = document.getElementById('test');
 　 }
　</script>
  </head>
  <body>
  </body>
</html>

注意点

記述内容が違ったりするとJavascriptが起動しなくなるため注意しましょう。ここではやってしまいがちなミスを記述するのでJavascriptが起動しなくなったら見て確認してみて下さい。

  • 1行のコード最後に「;」を付ける
  • 記述するコードが間違っている
  • 処理の開始を「｛」処理の終わりを「｝」で閉じていない

処理の順番の考え方

Javascriptでは1度Webサイト上で表示されているものに対してデザインを変更したりすることができます。下記の順番通りにプログラミングすると自分が求める機能が作れるようになります。

  1. 何をする機能なのかを明確にする
  2. 処理が始まるきっかけを決める
  3. 要素を取得する
  4. 取得した値に対して処理を行う

この考え方で作業を進めていきます。では「実践」を進めていきましょう。

実践

まずは何をする機能なのかを明確にします。今回は2種類の機能を作っていきたいと思います。

機能①：「テキストボックス」に文字を入力し、「送信ボタン」を押したら入力した文字を表示する
機能②：「リセットボタン」を押したら、テキストボックスに入力されている文字と表示されている文字を消すようにする

では2つの機能を作成していきます。

機能①

機能①：「テキストボックス」に文字を入力し、「送信ボタン」を押したら入力した文字を表示する

HTMLファイルに記述内容は下記の通りです。

<!DOCTYPE html>
<html>
  <head>
    <script>
    </script>
  </head>
  <body>
    <div id="test1">
      <p>
        入力欄：<input type="text" id="text1">
        <input type="submit" value="送信">
      </p>
      <h1 id="input1"></h1>
    </div>
  </body>
</html>

処理が始まるきっかけを決める

機能①の処理が始まるきっかけが「「送信ボタン」を押した」になります。これをコードで記述すると「 onclick=””」というコードを記述したタグがクリックされた時の処理をすることが出来ます。ではコードを追加します。

<input type="submit" value="送信" onclick=”submitinput()”>

onclickの”submitinput”は名前は何でもいいです。この機能では「submitinput」という名前を付けます。

Javascriptの処理は<script>タグ内に記述します。

 <script>
  function submitinput() {
 　　この中に処理を記述する
　}
 </script>

「submitinput()」は「onclick=””」で記述した名前を使用しましょう。名前が違うと処理を実行することが出来ません。

要素を取得する

取得する要素は2つあります。「テキストボックスに入力されている文字」と「文字を表示する領域」です。初めに「テキストボックスに入力されている文字」の要素を取得します。

<script>
　function submitinput() {
　　var text = document.getElementById("text1").value;
   alert(text);
　}
</script></span>

「document.getElementById」でタグに「id」で指定している要素を取得することが出来ます。今の場合だと「テキストボックス」にid指定している値は「text1」です。

<input type="text" id="text1">

要素を取得したら「document.getElementById（””）」の後に「.value」を付けることで「テキストボックスに入力した文字」を取得することが出来ます。

「var text =」の意味が「テキストボックスに入力した文字」を「text」と名前を付けた変数に代入している状態です。「text」は同じ名前を記述すると中に入った文字列を使用することが出来ます。

「alert(text1)」の意味がWebサイト上にアラートとして表示することが出来ます。今の場合だと「テキストボックス」に入力された文字を表示します。実行結果を確認するためにアラートを表示させたため文字が表示されたら、コードを消してください。

次に「文字を表示する領域」をするコードを追加します。

<script>
　function submitinput() {
　　var text = document.getElementById("text1").value;
　　var input = document.getElementById("input1");
  }
</script>

「文字を表示する領域」を「document.getElementById（””）」で取得します。

 <h1 id="input1"></h1>

取得した値に対して処理を行う

では「テキストボックスに入力した文字」を「文字を表示する領域」に入力した文字を表示します。

<script>
　function submitinput() {
　　var text = document.getElementById("text1").value;
　　var input = document.getElementById("input1");
　　input.innerHTML = text;
  }
</scrip>

「input.innerHTML = text」を解説すると「input」に「文字を表示する領域」のデータが入っています。そのあとに「.innerHTML 」を記述することで、すでに表示されている文字を削除して、新たに文字を表示することが出来ます。

「＝text」は「テキストボックスに入力した文字」が入っています。その文字を表示します。機能①の機能が完成になります。まとめると下記のようになります。

<!DOCTYPE html>
<html>
  <head>
  <script>
    function submitinput() {
      var text = document.getElementById("text1").value;
      var input = document.getElementById("input1");
      input.innerHTML = text;
    }
  </script>
  </head>
  <body>
    <div id="test1">
      <p>
        入力欄：<input type="text" id="text1">
        <input type="submit" value="送信" onclick=”submitinput()”>
      </p>
      <h1 id="input1"></h1>
    </div>
  </body>
</html>

 

機能②

機能②：「リセットボタン」を押したら、テキストボックスに入力されている文字と表示されている文字を消すようにする

【機能①】にコードを追加します。

処理が始まるきっかけを決める

機能②の処理が始まるきっかけが「「リセットボタン」を押した」になります。機能①と同様に「 onclick=””」を使用します。ではコードを追加します。

<input type="submit" value="リセット" onclick="submitreset()">

 

処理を行う「function」を記述します。

<script>
　function submitreset() {
　}
</script>

要素を取得する

取得する要素は2つあります。取得する要素は「テキストボックスの文字」と「文字を表示されている領域」です。初めに「テキストボックスの文字」の要素を取得します。

document.getElementById("text1")

次に「文字を表示されている領域」の要素を取得します。

document.getElementById("input1")

取得した値に対して処理を行う

では「テキストボックスの文字」と「文字を表示されている領域」の文字を消していきます。

function submitreset() {
  document.getElementById("text1").value = "";
  document.getElementById("input1").innerHTML = "";
}

 

「document.getElementById(“text1”)」で「テキストボックスの文字」の要素を取得。「.value」でテキストボックスの中身を取得。「＝””」でテキストボックスの中に空白を代入します。

「document.getElementById(“input1”)」でも同じ処理を行っています。

まとめると下記のようになります。

<!DOCTYPE html>
<html>
　<head>
　<script>
　function submitinput() {
　　var text = document.getElementById("text1").value;
　　var input = document.getElementById("input1");
　　input.innerHTML = text;
　}
　function submitreset() {
　　document.getElementById("text1").value = "";
　　document.getElementById("input1").innerHTML = "";
　}
　</script>
　</head>
　<body>
　　<div id="test1">
　　　<p>
　　　　入力欄：<input type="text" id="text1">
　　　　<input type="submit" value="送信" onclick=”submitinput()”>
　　　　<input type="submit" value="リセット" onclick="submitreset()">
　　　</p>
　　　<h1 id="input1"></h1>
　　</div>
　</body>
</html>