40代高卒者が製造業からIT転職する【jQuery】

programming
学習コースキャンペーンバナー

こんにちは、フローです。

今回はWEBサイトに動きなどをつけるjQueryとJavaScriptの事を書きたいと思います。

ちょっと難しくなるので、私も勉強しながら書いて行きたいと思います。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【カードレイアウト2】

jQueryとJavaScript

Webページに動的な動作を与えることができるプログラミング言語・ライブラリです。

以下では、それぞれについて詳しく説明します。

JavaScript

Webブラウザ上で動作するプログラミング言語であり、

Webページの要素を操作したり、イベント処理を行うことができます。

JavaScriptを使うことで、Webページに動的な動作を与えることができます。

例えば、以下のようなことがJavaScriptで実現できます。

・ボタンがクリックされたら、テキストを変更する。

・フォームが送信されたら、入力内容を検証する。

・スクロール量に応じて、ヘッダーの色を変える。

JavaScriptは、Webページ上で直接コードを記述することができます。

また、外部ファイルにJavaScriptのコードを書いて、<script>タグで読み込むこともできます。

jQuery

JavaScriptのライブラリのひとつであり、

Webページの操作を簡単に行うための便利な機能を提供することができます。

jQueryを使うことで、Webページの要素を簡単に操作することができ、

Webページの動的な動作をより簡単に実現することができます。

jQueryは、以下のようなことが簡単に実現できます。

・HTML要素を簡単に取得する。

・取得したHTML要素のテキストや属性を簡単に変更する。

・イベントリスナーを簡単に登録する。

例えば、以下のようにjQueryを使って、

ボタンがクリックされたらテキストを変更することができます。

$('button').click(function() {
  $('h1').text('Hello, world!');
});

ここでは、

$()という関数を使って、ボタンとヘッダーを取得しています。

そして、

click()メソッドを使って、ボタンがクリックされたときに実行する処理を定義しています。

この処理では、ヘッダーのテキストを変更しています。

jQueryは、Webページ上で直接コードを記述することもできますが、

外部ファイルにjQueryのコードを書いて、

<script>タグで読み込むこともできます。

また、jQueryを使ったWebページの操作は、

JavaScriptと比べて簡単であるという特徴があります。

ん〜、難しい笑

記述例

以下に、JavaScriptとjQueryの簡単な記述例を示します。

JavaScriptの記述例

HTML要素の取得と変更

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScriptの例</title>
  </head>
  <body>
    <h1>JavaScriptの例</h1>
    <button id="change-text-button" onclick="changeText()">テキストを変更する</button>

    <script>
      function changeText() {
        var headerElement = document.querySelector('h1');
        headerElement.textContent = 'こんにちは、JavaScript！';
      }
    </script>
  </body>
</html>

この例は、以下のような内容です。

・HTMLファイルのタイトルをJavaScriptの例として設定します。

・h1要素にJavaScriptの例というテキストを設定します。

・ボタン要素にid属性を付与して、changeText()という関数が呼び出されるように設定します。

・changeText()関数を定義し、querySelector()メソッドを使って最初に見つかったh1要素を取得します。

・textContentプロパティを使って、h1要素のテキストを‘こんにちは、JavaScript！‘に変更します。

つまり、この例では、

JavaScriptを使ってHTMLページ内の要素を取得し、

その要素のテキストを変更する方法を示しています。

関数の定義やHTML要素の取得方法は、

JavaScriptにおける基本的な構文であり、

これらを覚えることで、より高度なJavaScriptアプリケーションを開発することができます。

また、イベント処理についても、この例を通して理解することができます。

jQueryの例

HTML要素の取得と変更

<!DOCTYPE html>
<html>
  <head>
    <title>jQueryの例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <h1>jQueryの例</h1>
    <button id="change-text-button">テキストを変更する</button>

    <script>
      $(function() {
        $('#change-text-button').click(function() {
          $('h1').text('こんにちは、jQuery！');
        });
      });
    </script>
  </body>
</html>

この例は、以下のような内容です。

・HTMLファイルのタイトルをjQueryの例として設定します。

・外部ファイルからjQueryを読み込みます。

・h1要素にjQueryの例というテキストを設定します。

・ボタン要素にid属性を付与します。

・$(function() { … });という構文を使って、ドキュメントが読み込まれた後に実行する関数を定義します。

・click()メソッドを使って、#change-text-buttonボタンがクリックされた時に実行する関数を定義します。

・text()メソッドを使って、h1要素のテキストを‘こんにちは、jQuery！‘に変更します。

つまり、この例では、

jQueryを使ってHTMLページ内の要素を取得し、

その要素のテキストを変更する方法を示しています。

また、jQueryを使うことで、より簡潔なコードで同じ効果を得ることができます。

$(function() { … });という構文や、

click()メソッド、text()メソッドなど、

jQuery独自のメソッドや構文にも触れることができます。

まとめ

今回はjQueryとJavaScriptについて書きました。

めちゃくちゃ難しいです笑

難しいので、もうちょい掘り下げて、次回以降に書いて行きたいと思います。

一緒に勉強していきましょう。

レッツチャレンジ！