超シンプルなJavaScriptでWebサイトに「動き」をつける

TOP
完全未経験での「Webサイト制作」と「公開」
超シンプルなJavaScriptでWebサイトに「動き」をつける

2020/08/08

前々回はHTML、前回はCSSについて見てきました

HTMLはサイトの構成
CSSはサイトのデザイン

でしたね。

今回のJavaScriptは動きです。

JavaScriptの動きとはなにか？

今回はWebサイト上でのJavaScriptを使って「動き」をつけるんですが、そもそも動きとはなにか？

例えば、

ボタンをクリックしたら文字が大きくなる
ボタンをクリックしたらポップアップが表示する
一定時間立ったら画像が切り替わる

などJavaScriptはユーザが〇〇したとき、なにかの動きをつけることができます。

ボタンを押したらポップアップを表示してみる

ボタンを押したとき、ポップアップが出るようにJavaScriptを書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>サンプルサイト</title>
 <style>
   body {
     background: lightblue;
   }
   h1 {
     font-size: 20px;
     color: green;
   }
 </style>
</head>
<body>
 <div>
   <h1>こんにちは</h1>
   <button id="popup_button">ポップアップを表示</button>
 </div>
 <script>
   document.getElementById("popup_button").onclick = function() {
     alert('ようこそウェブログラムへ！');
   }
 </script>
</body>
</html>

上が全体コードでJavaScript部分は、下です。

 <script>
   document.getElementById("popup_button").onclick = function() {
     alert('ようこそウェブログラムへ！');
   }
 </script>

scriptタグ内で囲まれた部分がJavaScriptとなります。

このコードで下のようにボタンが追加され、

ボタンを押すと下ののようにポップアップが表示されます

ボタンにidをふる

HTML側にはボタンを追加してpopup_buttonというidを付け加えました

<button id="popup_button">ポップアップを表示</button>

idは目印のようなもので、JavaScript側でこのidを使うことができます。

JavaScriptのプログラム

「document.getElementById("popup_button").onclick」この部分はid=popup_buttonがクリックされたらとい条件なっていて

function() {
  alert('ようこそウェブログラムへ！');
}

そしてこのfunction内のalertがポップアップを表示する処理です。functionは関数と呼ばれて、特定の処理を定義するするものです。

何やら難しい記述ですが、つまりここでやっていることは

idがpopup_buttonのHTMLタグがクリックされたら
クリックされたことをonclickで受け取って
functionで定義されてるポップアップを表示する処理を呼び出す

ということをやっています。

このように何か特定の条件が起こったとき、〇〇の動き（処理）をするのがJavaScriptのすることと言えます。

この他にもJavaScriptはたくさんのことができたり、JavaScriptを拡張したプログラムを使ったり、様々なことができます。
JavaScriptを学んでおくと、Webサイト制作でデザインだけではなく動きをつけるなど多彩なことができますよ。

次回はいよいよドメインを購入して、サーバをレンタルして、インターネットに公開していきます。
お金が少しかかりますが、流行り手を動かして公開設定などすると理解が深まりますよ！

2020/08/08