HTML CSS JavaScript

Posted at 2024-11-17

HTML,CSSにおけるJavaScriptの役割使い方を調べました。

HTML: Webページの構造。見出しや段落、ボタンなどの要素を配置します。

<button>クリック</button> → ボタンを表示。

CSS: Webページの装飾。色、フォント、レイアウトなどを設定します。

button { 
color: red; → ボタンの文字を赤にする。
}

JavaScript: Webページに動きや機能を加えるもの。クリックした時の動作やデータ処理を担当します。
例: ボタンをクリックしたらメッセージを表示する:

const btn = document.querySelector('button');

const message = () => {
    alert('ボタンがクリックされました。')
};

btn.addEventListener('click', message);

まず、HTML要素を取得しJavaScriptと紐付けます。
HTMLの中から任意の要素を取得するのに「querySelector()」を使用します。
基本文法は、「オブジェクト.メソッド('パラメータ')」という形になります。

document.querySelector('button');

定数とは変数と役割はほぼ同じで説明を割愛しますが、1つだけ違うことは値を変更できるかどうかです。
定数は一度設定すると変更できません。
ここで、querySelectorで取得したbutton要素を定数「btn」に格納します。

const btn = document.querySelector('button');

関数は他の言語同様処理をひとまとめにしたもので、後から呼び出せます。
関数名「message」を定義しアロー関数(= () =>) に続く{}の中に実行する内容を記述します。

const message = () => {
    alert ('ボタンがクリックされました。')
}

イベントは特定(クリックなど)の操作に応じて動作を設定します。
つまり、ボタンがクリックされたら関数messageを実行する。という意味になります。

btn.addEventListener('click',message)

どうやらjQueryというライブラリがあるようで、コードを短く書けると知りました。
JavaScriptよりjQuery覚えればいいやんと思いましたが現代ではあまり使われて無いようです。

ES6以降はjQueryの必要性が低下し、最初にjQueryに頼りすぎると遠回りになってしまうと考えた為必要に応じて使用したいと思いました。
新しく使うならReactなどの新しいフレームワークを学習したいなと

最初は純粋なJavaScript、アロー関数などの学習をしてモダンな技術を取り入れるのがお得だと思います。