今回はjavascriptについてお伝えします。
正直、javascriptはプログラミングに近くて人によってはとっつきにくいものがあるかもしれません。
なのでここでは、WEBサイトのコーディング作業でよく利用するものに絞って紹介します。
javascriptとは？
かんたんに言うとWEBブラウザの中（パソコン上の）で動作するプログラミング言語です。
身近なところでの使用例だと、メニューボタンを押したときの開閉動作だったり、自動で切り替わる画像スライドなどが挙げられます。
javascriptの例
例でかんたんに紹介できるのが、このページをスマホで表示させたときのメニューボタンです。
それと▼こんな感じのものがjavasriptで実現できます。
つまり、ユーザーの操作に反応するインタラクティブなコンテンツが実現できます。
|
押してみて！ |
また押してみて！ |
javascriptの書き方
上記の赤いボタンの例だと、以下のようなコードで実現しています。
▼HTML
<div class="testbox">
<table>
<tbody>
<tr>
<td>
<p id="sample1" class="testclick">押してみて！</p>
</td>
<td>
<p id="sample2" class="testclick d-none">また押してみて！</p>
</td>
</tr>
</tbody>
</table>
</div>
▼CSS
<style>
.testbox table td{
width:50%;
}
.testclick{
margin: 5px !important;
padding: 5px 10px;
border-radius: 3px;
background:#f00;
color:#fff;
}
.d-none{
display: none;
}
</style>
▼javascript
<script>
var tgt1 = document.getElementById("sample1");
var tgt2 = document.getElementById("sample2");
// 左側のボタンをクリックしたときにclass名「d-none」をつけたり外したりしてます。
tgt1.onclick = function chgStyle() {
tgt1.classList.toggle("d-none");
tgt2.classList.toggle("d-none");
}
// 右側のボタンをクリックしたときにclass名「d-none」をつけたり外したりしてます。
tgt2.onclick = function chgStyle() {
tgt1.classList.toggle("d-none");
tgt2.classList.toggle("d-none");
}
</script>
感の良い方は気づいたかもしれませんが、スマホページのメニュー表示もこれと同じ原理で動作しています。
- メニューボタンを押す
- メニューリストを実現しているhtmlタグにclassが付与される
- 非表示だったメニュー一覧が表示される
- 閉じるときも同じ
このような動作は多くのWEBサイトで必要になってきますので、最低下記の仕組みは覚えておきましょう。
（具体的な書き方は必要なときにググれば見つかります）
- 要素を選択できること
- クリックされたときに処理を実行できること
- クラス名を取ったりつけたりできること
以上、javascriptについての説明でした。
少し難しく感じた人もいるかもしれませんが、慣れればググりながら色々できるようになると思います。
それでは次回は、WEBサイトを公開する方法について説明します。