プログラミング学習　７日目

2020年6月9日 19:00

1,jQuery（ジェイクリー）について

Jabascriptのライブラリ。Javascriptをより簡潔にできるようにしたプログラミング。railsでいうgemみたいなものだと思われる。

$(document).ready(function () {
  $('body').html('<h1>Hello jQuery!!</h1>');
});

$(document).ready(function () {
     // jQueryプログラムの内容
});

// 上記の省略形が下記
$(function(){
  　　// jQueryプログラムの内容
});

jQueryの内容は
$( セレクタ ).メソッド ( パラメータ );
で記述されていて、上記の例を言語化すると、

『body セレクタのHTML に <h1>Hello jQuery!!</h1>を記述して』的な内容だと思う。

2,return false

jQueryでreturn falseを使用すると、その関数（子要素）で処理が終了し親要素の処理が行われない。とのこと。

＃　HTML
<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>タブメニューを作ってみよう！</h1>
  <div class="wrap">
      <ul id="tab-menu" >
          <li><a href="#tab1" class="">ばすけ</a></li>
          <li><a href="#tab2" class="">さっかー</a></li>
          <li><a href="#tab3" class="">やきゅう</a></li>
          <li><a href="#tab4" class="">てにす</a></li>
      </ul>
      <div id="tab-contents">
          <div id="tab1" class="tab">
              <p>ばすけは、10人です。</p>
              <p>好きな選手は、トレイヤングです。</p>
          </div>
          <div id="tab2" class="tab">
              <p>さっかーは、22人です。</p>
              <p>好きな選手は、ジョアンフェリクスです。</p>
          </div>
          <div id="tab3" class="tab">
              <p>やきゅうは、18人です。</p>
              <p>好きな選手は、柳田です。</p>
          </div>
          <div id="tab4" class="tab">
              <p>てにすは、2人です。</p>
              <p>好きな選手は、いません。</p>
          </div>
      </div>
  </div>
  <script src="js/jquery-3.5.1.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

# javascript
$(function(){

  $('.tab').hide();
  $(".wrap").on("click", function () {
      alert("親要素のクリックイベントだよ")
  });
  
  $('#tab-menu a').on('click', function() {
      $("#tab-contents .tab").hide();
      $("#tab-menu .active").removeClass("active");
      $(this).addClass("active");
      $($(this).attr("href")).show();
      return false;　# ここがあるかないか
  });
});

上記のコードで、return false があると通常通りのタブメニューなのだが、return false を消すと、id = "tab-menu" の親要素である class = "wrap" のクリックイベントが発生し、アラートが出現する。

3,APIについて

アプリケーション、プログラミング、インターフェースの略。

開発したアプリケーションに別のプログラミングを追加するためのもの。
ソフトウェアのとある機能を利用するための窓口がAPI

という認識。そのなかでも、Web APIは今かなり熱いらしい。

WebのAPIなのでそのままインターネット回線を利用した遠隔で使用できるAPIのことだと思う。
APIだとサーバーとクライアントの利用している言語を同じにしないとだめだが、Web APIだとHTTP/HTTPSを利用しているので別言語でも連携がとれるみたい。