web入門（３）

# はじめに

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

# フォルダー構成

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

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

```html: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）**とは簡単に言うと負荷を肩代わりしてくれるレンタルサーバのようなものです。下図のように一部の負荷を肩代わりしてもらうおかげで自分のサーバの負荷が下がり、安定してサービスを提供できるようになります。
<img width="1275" alt="スクリーンショット 2019-10-27 14.30.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/653d34ed-bb16-365d-d7e0-3ac59ec9d07d.png">


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

```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属性をつけます。

```html: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を編集していきます。

```javascript: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. クリックしたら、フェードアウトする

```javascript:main.js
$(function() {
  $("#hello").click(function() {
    $(this).fadeOut();
  });
});
```

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

```javascript:main.js
$(function() {
  $("#hello").hover(function() {
    $(this).css("color", "red");
  });
});
```

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

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

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

```html: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>
```

```javascript: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. ドロップダウンメニューの実装

```html: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>
```

```javascript: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);
    }
  });
});
```