👩‍🦳

🔰JavaScript[DOM/タグ/イベント]を理解する🥴☕

2024/12/09に公開

JavaScript

初心者

tech

javaScriptを進めるにあたりまずは復習から🤕

HTML軽く復習＆メモ

htmlファイルの中でhtmlだけ打つと「html:5」というのが出てきてそれを押すとテンプレート出てきてくれる！はぴ😏

実際に出てくる初期コード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

初めて知ったミニメモ

<script src="main.js"></script> // main.jsの中のコードを呼び出し

    <p>aaa</p>
    <p>aaaa</p>
    <p>aaaaa</p> // pタグは縦並び

    <span>eee</span>
    <span>eeee</span>
    <span>eeeee</span> // spanタグは横並び

CSS軽く復習＆メモ

CSS（カスケーティングスタイルシート）

導入方法

1.直接書くインラインスタイル。可読性低下のため推奨しない
<div class="border_1" style="border: 1px solid red;"></div>

2.　<head></head>の中に書く。（内部スタイルシート）
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .border_1 {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    表示
    <p class="border_1">aaa</p>
</body>
</html>
// 👉注意: ページが増えると管理が難しくなるため、外部スタイルシートを推奨します。

出力結果

外部スタイルシートの導入

<head>
 <link rel ="stylesheet" hrel="css/app.css">
</head>

// app.css
.border_1 {
    border: 10px solid blue;
}

出力結果

DOM(ドム)

JavaScriptでのDOM（Document Object Model）は、ウェブページの構造や内容、スタイルをプログラムで操作するための仕組み
もっと簡単にいうとDOMはウェブページの「設計図」のようなもの。
JavaScriptを使うと、この設計図を使ってページの内容を変更したり、スタイルを変更したり、ユーザーの操作に反応する機能を追加できる。

要素を取得する

const title = document.getElementById("title");

内容を変更する

// title名変更
title.textContent = "新しいタイトル";

// 文字色変更
title.style.color = "red";

ページ上のテキストや属性を変更。

イベントを追加する

title.addEventListener("click", () => {
    alert("タイトルがクリックされました！");
});

ユーザーの操作（クリック、入力など）に反応する機能を追加。

新しい要素を追加する

const newElement = document.createElement("p");
newElement.textContent = "新しい段落";
document.body.appendChild(newElement);

まとめ

DOMは、JavaScriptでウェブページを動的に操作するための基盤となる仕組み。これを使えば、静的なページをインタラクティブにすることができます！

CSSクラスを使ってスタイルを管理の例

直接スタイルを指定するのではなく、CSSクラスを使って赤色にする

html

<div id="text">
 <ul>
  <li>このテキストの</li>
  <li>色を赤色に</li>
  <li>変えます。</li>
 </ul>
</div>

css

<head>
 <style>
  .red-text {
     color: red;
  }
 </style>
</head>

JavaScript(htmlファイル)

<script>
 const text = document.getElementById("text");
 text.classList.add("red-text");
</script>

タグは、「要素」の事これが！（普通の＃タグじゃないよ🤓#わかるか）
ウェブページの見た目や構造を決めるために必要な基本的な要素。
ページを作成する上で、どのタグを使うかで、コンテンツがどのように表示され、どのように動作するかが決まります。

手順

タグや要素を動的に作成
必要なタグ（div, button, input, pなど）を作るときは、document.createElement()を使用する

JavaScript

const button = document.createElement('button');  // ボタンを作成
const div = document.createElement('div');  // divを作成
const input = document.createElement('input');  // 入力フィールドを作成

属性を設定
作成した要素にsetAttribute()やプロパティを使って属性を追加します。

JavaScript

button.textContent = 'Click me';  // ボタンのテキスト設定
button.type = 'button';  // ボタンの種類設定
div.classList.add('new-class');  // divにクラスを追加
input.type = 'text';  // 入力フィールドのタイプを指定

イベントハンドラの追加
ボタンなどにクリックイベントやその他のインタラクションを設定することもよくあります。

JavaScript

button.addEventListener('click', () => {
  alert('Button clicked!');
});

親要素に追加
最後に、作成した要素をページに追加するためにappendChild()を使います。

JavaScript

document.body.appendChild(button);  // ボタンをページに追加

イベント

イベントは、ユーザーのアクションやブラウザの状態の変化に反応するための「動き」です。
例）ボタンをクリック、マウスを動かす、キーを押す、でイベントが発生します。
これにより、ウェブページ上の動作を制御したり、動的な反応を作成したりできます。

イベントの設定手順

イベントを設定する要素を選ぶ
例えば、ボタンやテキストフィールドなど。
イベントリスナーを追加
addEventListener()を使って、特定のイベントを待ち受けるようにします。

例)ボタンクリックイベント

// [html]
<button id="myButton">クリックしてね</button>

// [Javascript]
// ボタンを取得
const button = document.getElementById('myButton');

// クリックイベントを設定
button.addEventListener('click', () => {
  alert('ボタンがクリックされました!');
});
// ボタンがクリックされた時にアラートを表示するようにしています。

🌟結果

例) 入力イベント

// [html]
<input type="text" id="myInput" placeholder="テキストを入力してね">

// [Javascript]
const input = document.getElementById('myInput');

// 入力イベントを設定
input.addEventListener('input', () => {
  console.log('入力中...');
});
// テキストボックスに文字が入力されるたびに「入力中...」がコンソールに表示されます。

イベントハンドラー（処理）を記述
イベントが発生したときに実行したい処理を関数として記述します。

🌟[要確認]: ボタン押すと赤文字で「テストだよ」と表記される演習問題

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link rel ="stylesheet" href="css/app.css"><link>
    <style>
        .red {
            color:red;
        }
    </style>
</head>
<body>
    表示
    <script src="main.js"></script>

    <div id = "test"></div>
    <button id = "myButton" onclick="change_color()">押してね</button>

    <script>
       function change_color(){
        const test = document.getElementById("test");
        test.textContent = "テストだよ";
        test.classList.add("red");
       }
    </script>
</body>
</html>

補足

本当は <button id = "myButton" onclick="change_color()">押してね</button>はJSとHTMLが混ざってるのでよくない。ということでより良い書き方👇

<body>
    表示
    <script src="main.js"></script>

    <div id = "test"></div>
    <button id = "myButton">押してね</button>

    <script>
        document.getElementById("myButton").onclick = function(){
            const test = document.getElementById("test");
            test.textContent = "テストだよ";
            test.classList.add("red");
        }
    </script>
</body>

けどこれはイベントを複数指定できない！
（２つ指定すると後者が上書きされてしまう）

補足２

イベントリスナーという複数登録できる書き方を使う！

<body>
    表示
    <script src="main.js"></script>

    <div id = "test"></div>
    <button id = "myButton">押してね</button>

    <script>
        const myButton = document.getElementById("myButton");
            myButton.addEventListener("click",() => {
            const test = document.getElementById("test");
            test.textContent = "テストだよ";
            test.classList.add("red");
            });
    </script>
</body>

結果

下記２点からイベントリスナーの書き方を推奨

複数のイベントを追加可能
→ 1つの要素に複数のaddEventListenerを使えるため、柔軟性が高い。
コードの分離
→ HTMLとJavaScriptの分離で、保守性が向上します。

回答

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <button id="myButton">押してね</button>

    <script>
        // ボタンを取得
        const myButton = document.getElementById("myButton");

        // クリックイベントを追加
        myButton.addEventListener("click", () => {
            const test = document.getElementById("test");
            test.textContent = "テストだよ"; // テキストを変更
            test.classList.add("red"); // 赤文字にする
        });
    </script>
</body>
</html>

ぷちっと復習

すぐすべてを忘れる自分用🤮💦

functionとconstとは？

JavaScriptで頻繁に使われるキーワードで、それぞれ役割が異なります。

function (関数の定義)
[概要]
・役割: 一連の処理をまとめた「手続き（処理のかたまり）」を作るためのもの。
・再利用可能: 同じ処理を何度も使いたい場合に便利です。

function greet(name) {
  console.log(`こんにちは、${name}さん！`);
}

greet("太郎"); // 結果: こんにちは、太郎さん！
greet("花子"); // 結果: こんにちは、花子さん！

const (定数の宣言)
[概要]
・役割: 値を保存しておく「箱」を作るためのキーワード。
・定数: 一度値を代入すると変更できない。
・スコープ: ブロック単位（{} の中だけで有効）。

即時関数

関数を（）で囲んで一番後ろに（）；付けると定義と同時に即時に実行という意味になる

//即時関数 以前はvar 現在はlet const 
- function immediate(){
- console.log('即時関数です');
- }

+ (function immediate(){
+ console.log('即時関数です');
+ })();

HTML軽く復習＆メモ

CSS軽く復習＆メモ

DOM(ドム)

まとめ

タグ

手順

イベント

イベントの設定手順

補足

補足２

結果

ぷちっと復習

functionとconstとは？

Discussion