本記事は、「htmlとcssのイメージはなんとなくできるけど、JavaScriptでどんなことができるのかイマイチ分からない」といった方向けに、とりあえずJavaScriptを用いてどんなことができるのか紹介いたします！
JavaScriptはなんといっても動的に動かせるという醍醐味があります。
なので今回は、htmlの見出しの背景色を変えることを例に紹介させていただきます。
完成後のイメージ
まずは、本記事で紹介する手順の完成形をご覧ください。
こんな感じで、「Push!!!!」というボタンを押したら「色をかえておくれ」という文字の背景色が変わるようになります。
手順
コードを書く前に、作業の流れをまず確認してみます！
- 「Push!!!!」というボタンを押す.
- JavaScript（以下JS）内の関数を呼び出す.
- htmlの要素をJSで取得する.
- 取得した要素の背景色を、JSで操作する.
ざっくりこのような流れでございます。現時点では理解もざっくりで大丈夫です。
html自体には、要素の背景色や文字サイズなどの詳細（プロパティ）を設定する役割はありません。
なので、それらの役割をJavaScriptに担ってもらう感じですね。
ただしJavaScript側に「ある要素の背景色を変える」という役割を持った関数を設置したとしても、いつその関数を起動させるかはこちらで設定しなければなりません。
今回は、「ボタンを設置し、クリックされたらJavaScriptの関数を起動」という流れにしたいと思います！
流れを図にするとこのようになります。理解が深まるはずです。きっと。
※htmlファイルにJavaScriptを適用させる方法については下記の記事をご覧ください。
では実際に作成していきましょう！
ボタンを作成する
まずはhtml側に見出しとボタンを作成します。
<body>
<h1>色をかえておくれ</h1>
<input type="button" value="Push!!!!">
<body>
できました。現段階では押したところで何も起こらない無用の長物です。
※inputタグについての詳細は本記事では割愛いたします。
ではこのボタンに、クリックしたらJavaScriptのchange()という関数を起動するという役割を与えます。
<body>
<h1>色をかえておくれ</h1>
<!-- クリックしたらJSの関数を呼び出すよう設定 -->
<input type="button" value="Push!!!!" onclick="changeColor()">
<body>inputタグに onclick=”changeColor(‘red’)” という内容を追記しました。
これにより、このhtmlファイルが読み込んでいるJSファイルに存在するchangeColor()という関数を呼び出すことができます！
これで無事html側の準備は終わりました。
もちろん、現段階ではJavaScript側になんの関数も書いていないので、ボタンをクリックしても何も呼び出されません。相も変わらず無用の長物です。
このボタンが可哀想ですので、JavaScript側に関数を書いていきましょう。
関数を書く
いよいよJavaScript側の記述です。
要素を取得する
JavaScript側である要素に対して操作を行たい場合、まずは操作を行う要素を取得しなければなりません。
ただし、今回背景色を変えたい要素がh1タグなので「h1タグの要素を取得してから背景変えたろ！」とした場合どうなるでしょうか。
そのような場合、もしh1タグが増えたりしてしまうと、思ってたのと違うh1タグがとばっちりを受けたりh1タグ全部の背景が変わってしまった、などという結果になりかねません。
したがって、同じh1タグの中でも識別できるようにidを設定してあげます。
<body>
<!-- h1タグにidを追加 -->
<h1 id="unique-1">色をかえておくれ</h1>
<input type="button" value="Push!!!!" onclick="changeColor()">
<body>※もちろんclass=”unique-1″でも構いません。同じidはhtmlファイルの中で１つのタグにしか付与できないので今回はidを設定しています。
「いよいよJavaScript側の記述です。」とほざいておきながら再びhtml側の編集が発生して申し訳ございません。
これにてタグを識別できるようになりましたので、JavaScript側で要素を取得する関数を作成してみましょう。
function changeColor(newColor) {
document.getElementById('unique-1');
}ただただid名が unique-1 という要素を取得するという関数ができました。
今回はid名で取得しましたが、要素の取得方法にはさまざまな方法が存在しますので一部ご紹介いたします。
- document.getElementById([id名])
- document.getElementByClassName([クラス名])
- document.getElementByName([name属性])
- document.getElementByTagName([タグ名])
- document.querySelector([cssセレクタ])
ここでは、「要素の取得の方法にはいろいろあるのね」という認識で十分です。
詳しくはこちらに記載しておりますので併せてご覧ください。
なにはともあれ要素の取得ができました。
ただし、これではただ要素の取得をしただけですので、背景色を変えるという処理も追加してあげましょう。
要素の色を変える
先ほどのJavaScriptを次のように編集しましょう。
function changeColor() {
// 要素の背景を変える処理を追加
document.getElementById('unique-1').style.backgroundColor = 'red';
}こちらで追加した .style.backgroundColor = ‘red’ によって、要素の背景色の色を変えています。
具体的には、要素のCSSプロパティである backgroundColor の値を’red’にしたということになります。
[要素].style.[CSSプロパティ] = [CSSプロパティの値];
このように書くことで、要素のCSSプロパティをいじることができます。
なのでこの処理というのは、次のようにCSS側で設定したのと同じ意味になります。
#unique-1 {
background-color: red;
}JavaScriptによって直接要素の背景色を変えたのではなく、要素のCSSプロパティをいじって背景色を変えた、の方が適切かもしれません。
これにてついに背景色を変える処理を設定したので、ボタンを押すと冒頭のように見出しの背景が赤になるはずです。
まとめ
JavaScriptを用いて動的に動かしてみるイメージをを掴んでいただけたでしょうか。
処理が複雑になろうが、要素を取得→処理という大枠の流れは変わりません。取得の方法や処理の流れがたくさんあるだけです。
少しでもhtml要素を動的に動かす楽しさを感じてもらえたら幸いです！
ご覧いただきありがとうございました！
コメント