56일 차 - jQuery 이벤트, Ajax, JSON (23.03.17)

yvonne·2023년 3월 17일

📂jQuery

목록 보기

2/4

💡 이벤트 태그 활용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#eDiv").click(function () {
          console.log("click event!");
          $("#eDiv").clone().appendTo($("body")); // body에 eDiv를 자식으로 들이면서 복제
        });
   </script>
  </head>
  <style>
    #eDiv {
      width: 100px;
      height: 100px;
      background: #ff0000;
      line-height: 100px;
      text-align: center;
      color: #ffffff;
      font-weight: bolder;
      margin: 20px;
      float: left;
    }
  </style>
  <body>
    <div id="eDiv">jQuery Event</div>
  </body>
</html>

결과

💡 동적 객체 활용하여 이벤트 계속 생성: document.on

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(document).on("click", "#eDiv", function () {
          // eDiv의 요소는 click 이벤트를 계속 on하는 것
          $("#eDiv").clone().appendTo($("body"));
        });
      });
    </script>
  </head>
  <style>
    #eDiv {
      width: 100px;
      height: 100px;
      background: #ff0000;
      line-height: 100px;
      text-align: center;
      color: #ffffff;
      font-weight: bolder;
      margin: 20px;
      float: left;
    }
  </style>
  <body>
    <div id="eDiv">jQuery Event</div>
  </body>
</html>

결과

💡 폼 이벤트

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#sbmBtn").click(function () {
          if ($("#uId").val() == "") {
            alert("user id blank!");
          } else if ($("#uPw").val() == "") {
            alert("user pw blank!");
          } else {
            alert("login ok");
            $("loginForm").submit();
          }
        });

        $("#resBtn").click(function () {
          alert("reset ok");
          $("#loginForm")[0].reset();
        });
      });
    </script>
  </head>
  <style></style>
  <body>
    <form id="loginForm" action="http://www.google.com">
      USER ID : <input id="uId" type="text" name="uId" /><br />
      USER PW : <input id="uPw" type="password" name="upw" /><br />
      <input id="sbmBtn" type="button" value="SUBMIT" />
      <input id="resBtn" type="button" value="RESET" />
    </form>
  </body>
</html>

결과
1.
2.
3.
4.

💡 폼 이벤트 - preventDefault();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#loginForm").submit(function (event) {
          if ($("#uId").val() == "") {
            alert("user id blank!");
            event.preventDefault(); // 기본적인 동작을 막는 로직
          } else if ($("#uPw").val() == "") {
            alert("user pw blank!");
            event.preventDefault();
          } else {
            alert("login ok");
          }
        });

        $("#naver").click(function (event) {
          event.preventDefault();
        });

        $("#resBtn").click(function () {
          alert("reset ok");
          $("#loginForm")[0].reset();
        });
      });
    </script>
  </head>
  <style></style>
  <body>
    <form id="loginForm" action="http://www.google.com">
      USER ID : <input id="uId" type="text" name="uId" /><br />
      USER PW : <input id="uPw" type="password" name="upw" /><br />
      <input id="sbmBtn" type="button" value="SUBMIT" />
      <input id="resBtn" type="button" value="RESET" />
      <a id="naver" href="http://www.naver.com">네이버</a>
    </form>
  </body>
</html>

💡 this: 이벤트가 발생한 객체

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        function eventHandler(event) {
          console.log("click!");
          console.log("this : " + this); // 호출한 놈
          //   for (var key in event) {
          //     console.log(key + " : " + event[key]);
          //   }
        }

        $("#objDiv").click(eventHandler);
        $("#objPar").click(eventHandler);
      });
    </script>
  </head>
  <style></style>
  <body>
    <div id="objDiv">Object Division</div>
    <p id="objPar">Object Paragraph</p>
  </body>
</html>

결과

💡 활용 예제 : 수량에 따른 총합 계산하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#quantity").change(function () {	// change 활용
          var p = $("#price").val();
          var q = $("#quantity").val();
          var result = Number(p) * Number(q);
          $("#result").text(result); // 텍스트만 가지고 와서 result에 출력
        });
      });
    </script>
  </head>
  <style></style>
  <body>
    가격<input id="price" type="number" /> X 수량<select id="quantity">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    = 총합:<span id="result"></span>
  </body>
</html>

결과

💡 체크박스 선택자 총합 구하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#bt").click(function () {
          var result = 0;

          $("input:checked").each(function (index, item) {
            result = result + Number(item.value);
          });

          var values = "";
          $("input:checked").each(function () {
            values = Number(values) + Number($(this).val());
          });

          $("#result").text(result);
        });
      });
    </script>
  </head>
  <style></style>
  <body>
    바나나(1000원)<input
      id="v1"
      type="checkbox"
      name="fruit"
      value="1000"
    /><br />
    사과(500원)<input id="v2" type="checkbox" name="fruit" value="500" /><br />
    배(500원)<input id="v3" type="checkbox" name="fruit" value="500" /><br />
    <button id="bt">총합 구하기</button><br />
    선택한 총 가격<span id="result"></span>
  </body>
</html>

💡 리스트 추가

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#bt").click(function () {
          var content = $("#content").val();

          if (content == "") {
            return;
          } else {
            var list = $("<li></li>");
            list.text(content);
            $("#result").append(list);
          }
        });
      });
    </script>
  </head>
  <style></style>
  <body>
    <input id="content" type="text" />
    <button id="bt">추가</button><br />
    <ul id="result"></ul>
  </body>
</html>

결과

💡 Ajax

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      // "key" => JSON // key(따옴표 없이) => Java
      var person = {
        employees: [
          {
            name: "Surim",
            lastName: "Son",
          },
          {
            name: "Someone",
            lastName: "Huh",
          },
          {
            name: "Someone else",
            lastName: "Kim",
          },
        ],
      };
      console.log(person.employees[0].name);
      console.log(person.employees[1].lastName);
     
    </script>
  </head>

  <body></body>
</html>

💡 JSON 사용하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $.ajax({
          type: "get",
          url: "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
          success: function (data) {
            // 통신 성공
            console.log("통신 성공");
            console.log(data);
            console.log(data.squadName);

            $(data.members).each(function (index, members) {
              console.log(members);
            });
          },
        });
      });
    </script>
  </head>

  <body></body>
</html>

결과

💡 JSON 활용하여 테이블 생성

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $.ajax({
          type: "get",
          url: "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
          success: function (data) {
            var table = "<table border=1>";
            table += "<th>Name</th>";   // 열 한칸씩 생성
            table += "<th>Age</th>";
            table += "<th>SecretIdentity</th>";
            table += "<th>Powers</th>";
            $(data.members).each(function (index, members) {
              table += "<tr>";  // 행 생성
              for (key in members) {
                table += "<td>";
                table += members[key];
                table += "</td>";
              }
              table += "</tr>";
            });
            table += "</table>";
            document.write(table);
          },
        });
      });
    </script>