JavaScript（jQuery）基礎

jQueryとは？
jQueryとJavaScriptの違い
jQueryの読み込み方法
良く使うキーワードの一例とCSSについて
JavaScriptの実務で求められるスキル

jQueryとは？

JavaScriptの略称は、Javaではなく、JS(ジェイエス)。
HTMLやCSSと組み合わせて、Webページに動きを与えるプログラミング言語。

jQueryとJavaScriptの違い

JavaScript
Webページに動きやインタラクティブ性を加えるためのプログラミング言語そのもの。
jQuery
JavaScriptで書かれたライブラリ（よく使う機能をまとめたツール集）であり、
JavaScriptのコードをより簡単に、少ない行数で書けるようにする役割がある。

まとめ

jQueryとJavaScriptの違いは、主に「ライブラリ」か「プログラミング言語」かかという点。
jQueryを使うと、コードが短く、直感的に書けるのが特徴。

項目	JavaScript	jQuery
種類	プログラミング言語	JavaScriptのライブラリ
目的	Webページの動的機能全般を実装	JavaScriptの処理を簡略化・効率化
記述量	比較的多い	少ない（1行で済むことも）
学習のしやすさ	難易度はやや高い（幅広い知識が必要）	初心者でも比較的簡単に扱える
パフォーマンス	速い	やや遅い（ブラウザ互換性のため）
用途	大規模・高性能なWebアプリ向け	小規模・迅速なWeb制作向け

例：クリックイベントの記述

// JavaScript
document.getElementById("btn").addEventListener("click", function() {
  alert("クリックされました！");
});

// jQuery
$("#btn").click(function() {
  alert("クリックされました！");
});

jQueryの読み込み方法

まず覚えておくのはこの３点。

一番上にjQueryの本体を読み込む（記述する）
自作の「コード」を読み込む（記述する）
動きに該当する要素（HTMLのタグ＋IDなど）と連動させる

手順1：一番上にjQueryの本体を読み込む（記述する）

読み込み方法は大体２つ。

1.CDNで読み込む
2.ファイルをダウンロードして読み込む
※CDNとは「Content Delivery Network」の略。インターネット経由でファイルを配信する仕組み。

公式サイトより例えば…下記をHTMLのファイルに記述する。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js""></script>

手順2：自作の「コード」を読み込む（記述する）

パターン１：内部に記述する

<script type="text/JavaScript">
//コード
</script>

パターン２：外部ファイルに記述して読み込ませる。

<script type="text/JavaScript" src="パス/ファイル名">
</script>

手順3：動きに該当する要素（HTMLのタグ＋IDなど）と連動させる

HTMLのタグ（要素）と連動させる。また差別化としてIDと連動もさせたりする。

良く使うキーワードの一例とCSSについて

JavaScriptの実務で求められるスキル

他人の作ったWebページをなおせる能力。
Webサイトの構成は「HTML」「CSS」「Javascript」で出来ている。
ここからやるべきことは、「再現力」や「実装」、「解析」や「改修」。
特に、コーダーとして現場のお仕事で求められることは、作る事よりも他人の作ったWebページをなおせる能力。
必要とされるのは、「間違い探し」修復する為の「HTML」「CSS」「Javascript」の知識と経験。