見出し画像

フロントエンドエンジニアを目指す! JavaScript講座(8) h1要素のテキストの変更

濱口 まさみつ
前回は、指定範囲の値を整数で出す方法を勉強しました。
今回は、h1要素のテキストの変更 を学びます。

前回の復習

まずは前回の復習です。

・グローバル変数はファイル、つまりプログラムのどこからでも参照ができる変数
・ローカル変数は関数内で宣言した変数
・グローバル変数はプログラム内でずっと使用するものに使用する
・ローカル変数は値を毎回変更するなど一時的に使用する場合に使う
・グローバル変数とローカル変数は保存場所が異なる

IDを使用して要素のテキストを変更する

今回は、IDが与えられたh1要素のテキストをボタンのクリックで変更します。

まず、IDとは、「指定のID名の付与されたタグに対し特定のタスクを実行するための識別子」です。ファイル内では「id」と小文字で使用される場合が多いです。

・HTMLのタグに使用する
・1ページの中にidの値は1つ(1か所)
・id値をCSSおよびJavaScriptで使用して、特定のid値を持つ要素に対して特定のタスクを実行できる

実際に見てみましょう。
以下のサンプルHTMLを実行してみます。

idがあるもの、ないものの2つのh1要素があることに注目してください。

<!DOCTYPE html>
<html> 
   <head>
       <meta charset="utf-8">
       <title>JavaScript講座sampleテキスト8</title>
   </head>
   <body>
<style> #idsample  {
 background-color: lightblue;
}
</style>
<h1 id="idsample">id指定</h1>
<h1>id指定なし</h1> 
   </body>
</html>

画像3

このように、同じh1要素でもidを指定することで異なるプロパティ（今回はバックグラウンド）を持たせることができます。

今回は、idのプロパティをボタンをクリックすることで変更できるようにしていきます。

まずボタンを押すとh1要素の文字列を書き換える処理を行うボタンを作成していきます。

h1要素の文字列を書き換えるボタンを作成する

考え方
・h1要素にidを設定する
・ボタンを押すのでonclick
・文字の書き換えは変数を使用する


手順

1.h1要素にIDを設定する
ID名は「title」とします。

2.以下のボタンを作成する
ボタン要素 type:ボタン

3.クリックする
buttonにonclick属性を設定します。

4.変数を設定する
var titleとします。
idのテキストは変更されるため、変数にします。

5.変数を書き換える処理
onclickを実行した場合に指定の値に書き換えます。
関数を使用します。

書き換える文字列は引数で与えます。

上記を踏まえて作成したhtmlが以下の通りです。

<!DOCTYPE html>
<html> 
   <head>
       <meta charset="utf-8">
       <title>JavaScript講座sampleテキスト8</title>
   </head>
   <body>
   <h1 id="title">idが与えられたh1のテキストを変更する</h1>
<button type="button" onclick="changeTitle('このテキストに変更')">テキスト変更</button>
       
   <script>
       var title = document.getElementById('title');
       
       function changeTitle(newTitle) {
           title.textContent = newTitle;
       }
   </script>       
   </body>
</html>

ボタンをクリックしたときに変更されることを確認します。

■実行前

画像2

■ボタン実行後

画像2

説明

<button type="button" onclick="changeTitle('このテキストに変更')">テキスト変更</button>

命令1文しか設定しませんので「;」はあってもなくても大丈夫です。

       var title = document.getElementById('title');

IDのエレメントのプロパティを取得します。

       var title = document.getElementById('title');

ここで、読み込まれた時点の「title」のテキストを取得します。


       function changeTitle(newTitle) {
           title.textContent = newTitle;
       }

次に関数です。
h1のタイトルを変更するため、「changeTitle」としました。

"changeTitle('このテキストに変更')"
ですが、「“」は一組しか使いません。
仮に、「“このテキストに変更"」を書いていると2個めの「"」が
「閉じるダブルクォーテーション」と認識されてしまいます。

そのため、この時は外側で使われていない、「’」を使用します。

           title.textContent = newTitle;

titleのテキストをこの引数(newTitle) の内容に変更します。

この時はプロパティを使います。
プロパティもやはりメソッドと同じようにオブジェクトです。

h1要素はオブジェクトです。
オブジェクトに対して「.」で属性を設定します。

textContentは、title要素の中にあるテキストと言うプロパティです。
そしてプロパティに対して代入を使います。
引数の「newTitle」のプロパティを代入します。

考え方を振り返ります。

titleにIDを設定します。
そのIDを設定した要素(title)のテキストをgetElementByIdで取得します。
titleは書き換えるので変数にします。
新規に代入するテキストのプロパティを.textContentで取得します。
onclickのアクションで文字列を代入しました。


〇まとめ

・要素にidを設定することができる
・要素もオブジェクト
・要素にプロパティが設定できる
・要素のプロパティは変更可能
・命令文1つは「;」不要
・同じクォーテーションを二重に使用することはできない(二つ目のクオーテーションで閉じられてしまう)

**

今日は以上です。

Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san


ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346

note専用コミュニティへの招待について

https://note.mu/hamasan918/n/ne4d98f9db9ec

note専用コミュニティ、作成しました。コミュニティでは質問などを受け付けています。毎月500円となります。


この記事が気に入ったらサポートをしてみませんか？