はじめに

JavaScriptとは、webサイト上で、htmlとcssでは表現できない機能を実装する言語です。
よく、jsって略されます。Javaという言語と名前は似てますが、全然違うので、気をつけてください。また、jQueryとは、JavaScriptをより扱いやすくしたフレームワークのことです。

フォルダー構成

デスクトップ上に、js-pracというフォルダーを作り、その中でindex.htmlとmain.jsを作る。

/Users/(ユーザー名)/Desktop/js-prac
                            |-index.html (表示用)
                            |-main.js (機能面)

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1>Hello World</h1>
  </body>
</html>

JavaScript(jQuery)を使う

html上に直接JavaScriptを書く方法もありますが、今回は別ファイルに分けて読み取る方法を採用します。
また、jQueryを使用する方法は、ダウンロードをする方法とCDNを用いる方法がありますが、今回はCDNを用いる方法を採用します。
**CDN（Content Delivery Network）**とは簡単に言うと負荷を肩代わりしてくれるレンタルサーバのようなものです。下図のように一部の負荷を肩代わりしてもらうおかげで自分のサーバの負荷が下がり、安定してサービスを提供できるようになります。

では、index.htmlを以下のように修正します。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1>Hello World</h1>

    <!-- CDNの読み込み -->
    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <!-- main.jsの読み込み -->
    <script src="./main.js"></script>
  </body>
</html>

これで、jQueryを使う準備は終わりです。では、実際にjQueryを使ってみましょう。

まず、index.htmlのh１にid属性をつけます。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <!-- idを追加する -->
    <h1 id="hello">Hello World</h1>

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

次に、main.jsを編集していきます。

main.js

$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });
});

$("#hello")で、htmlで指定したidを取得し、click()でクリックした時どうするか、function() {$(this).text("こんにちは、世界");}で、id="hello"を指定した要素のテキストを「こんにちは、世界 」に置き換えてるという流れです。

chromeで開いて確認してみましょう。Hello World をクリックすると、こんにちは、世界 が表示されることが確認できます。

大まかに説明すると以下のような形になります。上の例では、idを取得していましたが、class,タグ（a, h2 など）もcssと同様に取得することが可能です。

$("#idの名前").jQueryのイベント(function() {
  // メソッド
});

$(".classの名前").jQueryのイベント(function() {
  // メソッド
});

$("htmlのタグの名前").jQueryのイベント(function() {
  // メソッド
});

それでは、よく使うパターンをまとめておきます。

1. クリックしたら、フェードアウトする

main.js

$(function() {
  $("#hello").click(function() {
    $(this).fadeOut();
  });
});

2. ホバーしたら、色が変わる

main.js

$(function() {
  $("#hello").hover(function() {
    $(this).css("color", "red");
  });
});

3. ホバーしたら、色が変わり、離したら色が元に戻る

main.js

$(function() {
  $("#hello").on({
		'mouseenter' : function(){
			$(this).css("color", "red")
		},
		'mouseleave' : function(){
			$(this).css("color", "#000")
		}
	});
});

4. ボタンを押したら、数字が足されていく

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1 id="hello">Hello World</h1>

    <!-- 以下を追加 -->
    <input id="txt" type="text" value="0" readonly />
    <input id="btn" type="button" value="add!" />

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

main.js

$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });

  $("#btn").click(function() {
    let value = $("#txt").val(); // id="txt"のvalue属性を取得して、変数valueに代入
    value = parseInt(value); // 変数valueの型をstring型->int型にキャスト
    $("#txt").val(value + 1); // id="txt"のvalue属性にvalue+1を入れる
  });
});

5. ドロップダウンメニューの実装

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1 id="hello">Hello World</h1>

    <!-- 以下を追加 -->
    <input id="btn" type="button" value="表示する" />
    <div
      id="menu"
      style="background-color: #ddd; height: 200px; padding-top: 20px; display: none"
    >
      <p>ドロップダウンメニューです。</p>
    </div>

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

main.js

$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });

  $("#btn").click(function() {
    if ($(this).val() == "表示する") {
      $(this).val("非表示にする");
      $("#menu").slideDown(1000); // 引数に秒数指定（単位：ミリ秒）
    } else {
      $(this).val("表示する");
      $("#menu").slideUp(1000);
    }
  });
});