클래스 추가, css 추가

id 값으로 요소를 불러와 addClass, removeClass, css 를 사용하여 클래스를 추가, 제거, css 추가

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
      .c {
        color: blue;
        font-size: xx-large;
      }
    </style>
    <script>
      function addClass() {
        $("div").addClass("c");
      }
      function rmClass() {
        $("div").removeClass("c");
      }
      function addCss() {
        $("div").css({ background: "yellow", color: "blue" });
      }
    </script>
  </head>
  <body>
    <div>연습</div>
    <button onclick="addClass()">추가</button>
    <button onclick="rmClass()">삭제</button>
    <hr />
    <button onclick="addCss()">css추가</button>
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] append, html  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] JQuery 사용법  (0) 2024.03.27
[JavaScript] button 태그와 submit 태그의 차이  (0) 2024.03.27
[JavaScript] confirm, open  (0) 2024.03.27

 

 

 

 

 

JQuery 사용법

JQuery

 

- jQuery CDN 사이트 -

 

jQuery CDN

jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac

releases.jquery.com

구글에 jquery CDN - minified 클릭
스크립트 코드가 나오는데 위 코드를 html 파일에 붙여넣으면 jQuery 적용 끝
위 : CDN 으로 적용, 아래 : jQuery 파일을 다운로드 받아 프로젝트 내에 저장하여 사용
jquery 다운로드 받은 모습

 

 

 

 

 

 

 

 

 

사용 예시 1

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
      // JQuery 구문은 $ 로 시작한다
      $(document).ready(function () {
        $(".hide").click(function () {
          // hide 라는 클래스를 가진 태그가 클릭되면 함수를 시작
          $("p").hide();
        });
        $(".show").click(function () {
          // show 라는 클래스를 가진 태그가 클릭되면 함수를 시작
          $("p").show();
        });
      });
    </script>
  </head>
  <body>
    <p>이벤트 처리</p>
    <button class="hide">메세지 삭제</button>
    <button class="show">메세지 보기</button>
  </body>
</html>
코드 실행

 

 

 

 

 

 

 

 

 

사용 예시 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      var n = 0;
      $().ready(function () {
        $("div.out").mouseenter(() => {
          $("p").first().html("<b>마우스 포인트 들어옴</b>");
          $("p").last().text(++n);
        });

        $("div.out").mouseleave(() => {
          $("p").first().html("<b>마우스 포인트 나감</b>");
          $("p")
            .last()
            .text("최종 횟수 : " + n);
        });
      });
    </script>
    <style>
      .out {
        width: 200px;
        height: 100px;
        border: 1px solid black;
        text-align: center;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="out">
      <p>마우스 이벤트</p>
      <p>0</p>
    </div>
  </body>
</html>
코드 실행

 

 

 

 

 

 

 

 

 

 

사용 예시 3

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      var cnt = 1;
      var myVar;
      $(() => {
        $("img").mousedown(() => {
          myVar = setInterval(imgFunc, 100);
          console.log("txt : " + cnt);
        });
        $("img").mouseup(() => {
          clearInterval(myVar);
        });
      });
      const imgFunc = () => {
        if (cnt == 10) cnt = 1;
        $("#img").attr("src", "resources/images/p" + cnt + ".png");
        cnt++;
      };
    </script>
  </head>
  <body>
    <div align="center">
      <img
        id="img"
        src="resources/images/p1.png"
        width="100px"
        height="100px"
      />
    </div>
  </body>
</html>

사용한 이미지 파일

코드 실행 ( 마우스 클릭 유지시 달림, 마우스 클릭하지 않으면 멈춤 )
728x90

 

 

 

 

 

button 태그와 submit 태그의 차이

button : 버튼 코드만 실행되며 form 태그 안에 있더라도 action 은 실행되지 않는다

submit : form 태그의 action 이 실행된다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      test = () => {
        let txt = document.getElementById("txt");
        if (txt.value == "") {
          alert("값을 입력하세요.");
          return;
        }
        let f = document.getElementById("fo");
        fo.submit();
        // 위 fo.submit(); 코드는 button 이 작동했을때
        // 유효성 검사를 마치고 바로 action 으로 이동시키기 위한 코드이다.
      };
    </script>
  </head>
  <body>
    <form id="fo" action="ex32.html">
      <input type="text" id="txt" /><br />
      <input type="submit" onclick="test()" value="submit전송" />
      <!-- submit 을 사용하면 코드를 실행하면 무조건 -->
      <!-- form 태그의 action 을 실행함... 그러므로 검증되지 않아도 -->
      <!-- ex32.html 페이지로 넘어가버림 -->
      <input type="button" onclick="test()" value="btn전송" />
      <!-- button 을 사용하면 코드를 실행하고 form 의 action 을 -->
      <!-- 실행하지 않음.... 그러므로 유효성 검사를 마친 뒤 -->
      <!-- 위의 스크립트 코드처럼 submit() 을 따로 실행시켜줘야 함 -->
    </form>
  </body>
</html>
코드 실행
728x90

 

 

 

 

 

confirm, open

confirm : 확인, 취소 버튼을 누를 수 있는 창을 띄움

open : 창을 띄움

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = () => {
        let myC = document.getElementById("myC");
        myC.addEventListener("click", myConfirm);
        let myO = document.getElementById("myO");
        myO.addEventListener("click", myOpen);
      };
      function myOpen() {
        // open("https://www.naver.com");
        // 새 창에서 열림
        
        // window.open("https://www.naver.com", "_self");
        // 자기 자신 창에서 열림

        // window.open("ex31.html", "", "width=500, height=500");
        // 새창에 크기를 조절하여 ex31.html 파일 열기

        window.open("popup.html", "", "width=500, height=500");
      }
      const myConfirm = () => {
        let result = confirm("처음 방문???");
        console.log(result);
        let msg = "";
        if (result) {
          msg = "처음 방문 감사합니다!!!";
        } else {
          msg = "재방문 감사합니다!!!";
        }
        document.getElementById("myP").innerHTML = msg;
      };
    </script>
  </head>
  <body>
    <button type="button" id="myC">클릭</button>
    <p id="myP"></p>
    <input type="button" id="myO" value="창열기" />
  </body>
</html>

ex32.html

<script>
  myClose = () => {
    window.close();
  };
</script>

<h1>- 공 지 사 항 -</h1>
<h3>행복한 하루</h3>
<p></p>

<!-- 아래 두 코드는 동일한 코드 -->
<!-- <input id="cl" type="checkbox" onclick="myClose()" /> -->
<input id="cl" type="checkbox" onclick="window.close()" />
<label for="cl">하루동안 열지 않음</label>

popup.html

코드 실행
728x90

 

 

 

 

 

자바스크립트로 유효성 검사하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      function myFocus() {
        let pwd = document.getElementById("pwd");
        console.log(pwd.value);
        if (pwd.value == "") {
          alert("password 는 필수 항목입니다");
          pwd.focus();
        } else {
          document.getElementById("copy").value = pwd.value;
          pwd.value = "";
        }
      }
      const pwdChk = () => {
        let pwd = document.getElementById("pwd");
        let pwdC = document.getElementById("pwdCheck");
        if (pwd.value !== pwdC.value) {
          alert("비밀번호가 일치하지 않습니다.");
          pwd.value = "";
          pwdC.value = "";
          pwd.focus();
        }
      };
    </script>
  </head>
  <body>
    <!-- <form action="ex30.html" method="get">
      <input type="text" id="txt" required /><br />
      <input type="text" id="pwd" /><br />
      <input type="text" id="copy" /><br />
      <input type="submit" value="클릭" onclick="myFocus()" /><br />
    </form> -->

    <input type="text" id="txt" placeholder="id" /><br />
    <input type="password" id="pwd" placeholder="pwd" /><br />
    <input
      type="text"
      id="pwdCheck"
      placeholder="pwdCheck"
      onchange="pwdChk()"
    /><br />
    <input type="text" id="copy" placeholder="copy" /><br />
    <input type="button" value="클릭" onclick="myFocus()" /><br />
  </body>
</html>
pwd 입력 : 111, 코드 실행

 

728x90

 

 

 

 

 

js 파일로 자바스크립트 코드 관리하기

- 비슷한 기능들을 파일로 따로 분리해서 사용

- 함수와 변수들을 Object ( 키 : 값 ) 형태로 넣어서 사용

코드 분리

코드 실행
728x90

 

 

 

 

 

setTimeout

setTimeout(함수, 시간) : 지정한 시간이 흐른 뒤 함수를 1회 실행 ( 1000 => 1초 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const test = () => {
        // alert("test 호출");
      };
      /*
      window.onload = () => {
        document.write("처음 실행<br>");
        setTimeout(test, 2000);
        // test 함수를 2초 후에 실행
        document.write("2초 대기중....<br>");
      };
      */

      let e;
      const digClock = () => {
        let today = new Date();
        let time = today.getMonth() + 1 + "월";
        time += today.getDate() + "일";
        time += today.getHours() + "시";
        time += today.getMinutes() + "분";
        time += today.getSeconds() + "초";
        document.getElementById("clock").innerHTML = time;
        e = setTimeout(digClock, 1000);
      };
      const end = () => {
        clearTimeout(e);
      };
    </script>
    <div id="clock"></div>
    <button onclick="digClock()">시작</button>
    <button onclick="end()">종료</button>
  </body>
</html>
코드 실행 ( setTimeout 은 일회성 이지만 코드내에 자신 코드를 실행시키는 코드를 넣어서 무한으로 반복시킴 )

 

 

 

 

 

 

 

 

 

 

setInterval

setInterval(함수, 시간) : 지정한 시간이 흐를때마다 함수 실행을 반복 ( 1000 => 1초 )

clearInterval(Interval로 설정한 변수명) : 반복중인 Interval 을 종료

toLocaleString() : 기본 내장함수인 Date() 함수의 기본 메소드로 , (년.월.일 오후/오전 시간.분.초) 포멧으로 시간을 나타낸다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let myVar;
      const start = () => {
        myVar = setInterval(myTimer, 1000);
      };
      const myTimer = () => {
        let d = new Date();
        document.getElementById("time").innerHTML = d.toLocaleString();
      };
      const stop = () => {
        clearInterval(myVar);
      };
    </script>
    <p id="time"></p>
    <button onclick="start()">start</button>
    <button onclick="stop()">stop</button>
  </body>
</html>
코드 실행

 

 

 

 

 

 

 

 

 

 

innerHTML : 내부의 모든 HTML 코드를 변경 ( 기존에 자식으로 존재하던 요소를 삭제 후 대체 )

insertAdjacentHTML("afterbegin", msg) : 자식 코드의 가장 앞에 자식 HTML 코드를 추가

insertAdjacentHTML("beforeend", msg) : 자식 코드의 가장 뒤에 자식 HTML 코드를 추가

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var cnt = 0;
      const inner = () => {
        cnt++;
        let msg = `내용 : ${cnt}<br>`;
        let txt = document.getElementById("txt");
        txt.innerHTML = msg;
        // innerHTML : 해당 내부의 모든 코드를 변경

        // txt.insertAdjacentHTML("afterbegin", msg);
        // afterbegin : 앞에 내용 추가

        // txt.insertAdjacentHTML("beforeend", msg);
        // beforeend : 뒤에 내용 추가
      };
    </script>
    <div id="txt">안녕하세요</div>
    <button onclick="inner()">클릭</button>
  </body>
</html>
코드 실행

 

 

 

 

 

 

 

 

 

 

createElement() : 요소를 생성하는 메소드, 아래 코드에선 HTML 의 table 요소를 생성

remove() : 해당하는 요소 자체를 삭제, 아래 코드에선 HTML 요소를 삭제하는데 사용

appendChild() : 자식 요소를 생성, 아래 코드에선 table 요소의 자식 요소로 tr, td 를 생성하는데 사용

removeChild(삭제할 요소의 index) : 자식 요소 중 해당 index 의 자식 요소를 삭제

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border: 1px solid black;
      }
      table tr {
        border: 1px solid black;
      }
      table tr td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <script>
      let img;
      function add() {
        img = document.createElement("img");
        // createElement : 태그를 만들어줌
        console.log(img);
        img.src = "image.png";
        img.setAttribute("width", "100");
        img.setAttribute("style", "height:100px; border:1px solid");

        document.getElementById("test").appendChild(img);
      }

      function addTB() {
        let data = [
          { id: "aaa", name: "홍길동" },
          { id: "bbb", name: "김개똥" },
        ];
        let table = document.createElement("table");
        data.forEach((value) => {
          var tr = document.createElement("tr");
          var td1 = document.createElement("td");
          td1.innerHTML = value.id;
          tr.appendChild(td1);

          var td2 = document.createElement("td");
          td2.innerHTML = value.name;
          tr.appendChild(td2);

          table.appendChild(tr);
        });
        document.getElementById("test").appendChild(table);
      }

      function remove() {
        let items = document.getElementById("test");
        // document.getElementById("test").remove();
        // items.remove();
        // remove는 test를 id로 가지고 있는 p태그 자체를 삭제

        // items.removeChild(items.childNodes[0]);
        // items 의 자식을 삭제 ( 첫번째 추가된 순으로 )

        items.removeChild(items.childNodes[items.childNodes.length - 1]);
        // items 의 자식을 삭제 ( 제일 늦게 추가된 순으로 )
      }
    </script>
    <p id="test"></p>
    <a href="#" onclick="addTB()">테이블 추가</a>
    <b onclick="add()">add 클릭</b>
    <b onclick="remove()">이미지 삭제</b>
  </body>
</html>
코드 실행
728x90

 

 

 

 

 

배열

 

join ( 배열 값의 사이사이에 값을 추가, join 을 사용하면 배열이 string 자료형으로 변환 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const city = ["서울", "부산", "인천"];
      const printArr = () => {
        for (let i = 0; i < city.length; i++) {
          document.write(`배열 데이터[${i}] : ${city[i]}<br>`);
        }
      };
      printArr();
      city[3] = "대구";
      document.write("<hr>" + city + "<br>");
      document.write(typeof city + "<br>");
      const join01 = city.join();
      const join02 = city.join("-");
      document.write(`조인 결과 1 : ${join01}, type : ${typeof join01}<br>`);
      document.write(`조인 결과 2 : ${join02}, type : ${typeof join02}<br>`);
      // 조인은 배열 사이사이에 값을 어떤걸로 변경할지 선택
      // 아무것도 설정하지 않으면 , 으로 적용되며 join 을 사용하면
      // 배열이 아닌 string 자료형으로 변경된다
    </script>
  </body>
</html>

코드 실행

 

 

 

 

 

 

 

 

 

 

push, pop ( 배열의 마지막 값을 추가, 배열의 마지막 값을 제거 )

unshift, shift ( 배열의 맨 앞의 값을 추가, 배열의 맨 앞의 값을 제거 )

concat ( 배열의 마지막 값을 추가하지만 원본 배열은 건드리지 않고 복사본을 만든다 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let kdata = ["서울", "부산"];
      document.write(`기본 배열 : ${kdata}<br>`);
      kdata.push(`인천`, `대구`);
      document.write(`push : ${kdata}<br>`);
      kdata.pop();
      document.write(`pop : ${kdata}<br>`);

      kdata.unshift(`111`, `222`);
      document.write(`unshift : ${kdata}<br>`);
      kdata.shift();
      document.write(`shift : ${kdata}<br>`);

      let data = kdata.concat(`안녕`, `하세요`);
      document.write(`concat : ${data}, type : ${typeof data}<br>`);
      document.write(`kdata : ${kdata}<br>`);
    </script>
  </body>
</html>

코드 실행

 

 

 

 

 

 

 

 

 

 

forEach ( 단순 배열 출력 및 연산에 사용, 리턴 값을 가질 수 없음 )

map ( 리턴 값을 가지므로 원하는대로 저장하여 사용할 수 있음 )

★ 둘 다 괄호 안에 함수를 가진다 ★

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const data = [`1111`, `2222`, `3333`];
      for (let i = 0; i < data.length; i++) {
        document.write(data[i] + "<br>");
      }
      document.write("<hr>");

      //   function t(d) {
      //     console.log(d);
      //     document.write(d);
      //   }
      const t = (d) => console.log(d);
      data.forEach(t);
      // forEach 는 단순 출력, return 값을 가질 수 없다.
      // 고로 단순히 연산, 출력하는데만 사용할 수 있다
      // forEach() 괄호 안에는 함수가 들어가야하며
      // 각 값들을 매개변수로 받아 처리한다
      data.forEach((d) => {
        document.write(d);
      });







      //   function t02(d) {
      //     return `<b style="color:blue;">${d}</b>`;
      //   }
      const t02 = (d) => `<b style="color:blue;">${d}</b>`;
      const mapData = data.map(t02);
      // map 은 리턴값을 가진다
      document.write("<hr>" + mapData + "<hr>");
      const mapData02 = data.map((d) => `<b style="color:yellow;">${d}</b>`);
      document.write("<hr>" + mapData02 + "<hr>");
    </script>
  </body>
</html>

코드 실행

 

 

 

 

 

 

 

 

 

 

Dictionary ( 키와 값을 가진다, 함수도 값으로 가질 수 있다 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let dic = { f0: 100, f1: 200 };
      document.write(`기본 값 : ${dic}<br>`);

      function test() {
        document.write("test실행<br>");
      }

      dic.f2 = "값 추가";
      dic["f3"] = "f33333";
      dic.func = test;

      document.write(dic + "<br>");
      document.write(dic["f1"] + "<br>");
      document.write(dic.f2 + "<br>");
      document.write(dic.f3 + "<br>");
      document.write(dic.func + "<br>");
      dic.func();
    </script>
  </body>
</html>

코드 실행

 

 

 

 

 

 

 

 

 

 

filter ( 데이터 중 해당하는 값만 걸러서 가져온다 )

★ () 에 함수를 가짐 ★

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
      const filter01 = (value, index) => {
        console.log(`index : ${index}, value : ${value}`);
        return value >= 50;
      };
      const result01 = data.filter(filter01);
      document.write(result01 + "<br>");
      const result02 = data.filter((value) => value <= 50);
      document.write(result02 + "<br>");
    </script>
  </body>
</html>

코드 실행

 

 

 

 

 

 

 

 

 

 

배열의 값을 받아와서 회원의 정보 확인하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      let userDB = [
        { id: `aaa`, name: `홍길동`, age: 20 },
        { id: `bbb`, name: `김개똥`, age: 30 },
        { id: `ccc`, name: `고길동`, age: 40 },
      ];

      function init() {
        // alert("실행");
        const div = document.querySelector(".test");
        let msg = `아이디 : ${userDB[0].id}<br>
        이름 : ${userDB[0].name}<br>
        나이 : ${userDB[0].age}<br>`;
        div.innerHTML = msg;

        const div2 = document.querySelector(".test2");
        let msg2 = ``;
        for (const user of userDB) {
          // userDB 가 가지고 있는 값을 user 라는 변수로 하나씩
          // 가지고 옴
          msg2 += `아이디 : ${user.id}<br>
            이름 : ${user.name}<br>
            나이 : ${user.age}<br>`;
        }
        div2.innerHTML = msg2;
      }
    </script>
  </head>
  <body onload="init()">
    <!-- 웹이 구동되면 init() 함수를 실행시켜라... -->
    <!-- 자바스크립트의 window.load 와 같은 역할 -->
    <div class="test"></div>
    <hr />
    <div class="test2"></div>
  </body>
</html>

코드 실행

 

 

 

 

 

 

 

 

 

 

실습 예제

let userInfo = [ 
{ 'id' : 'aaa', 'name' : '홍길동', 'age' : 20 }, 
{ 'id' : 'bbb','name' : '김개똥', 'age' : 30 }, 
{ 'id' : 'ccc', 'name' : '고길동', 'age' : 40 } 
]

유저 데이터

실습 예제

 

예제 풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border: 1px solid black;
      }
      th {
        border: 1px solid black;
      }
      td {
        border: 1px solid black;
      }
    </style>
    <script>
      let userInfo = [
        { id: "aaa", name: "홍길동", age: 20 },
        { id: "bbb", name: "김개똥", age: 30 },
        { id: "ccc", name: "고길동", age: 40 },
      ];

      function lookInf(username) {
        const lookInf = document.querySelector(".allUserList");
        msg = "";
        for (const user of userInfo) {
          if (user.name == username) {
            msg += `<b>아이디</b> : ${user.id}<br>
                    <b>이름</b> : ${user.name}<br>
                    <b>나이</b> : ${user.age}`;
          }
        }
        lookInf.innerHTML = msg;
      }

      function lookAllUser() {
        const lookAllUser = document.querySelector(".allUserList");
        let msg = "";
        for (const user of userInfo) {
          msg += `<tr><td>${user.id}</td><td onclick="lookInf('${user.name}')">${user.name}</td><td>${user.age}</td></tr>`;
        }
        let allUserTable =
          "<table> <thead> <th>아이디</th> <th>이름</th> <th>나이</th> </thead>" +
          msg +
          "</table>";
        lookAllUser.innerHTML = allUserTable;
      }

      function lookUser() {
        const lookUser = document.querySelector(".allUserList");
        const inputId = document.getElementById("inputId").value;
        let msg = "";
        for (const user of userInfo) {
          if (user.name == inputId) {
            msg += `<tr> <td>${user.id}</td> <td onclick="lookInf('${user.name}')">${user.name}</td> <td>${user.age}</td> </tr>`;
          }
        }
        let allUserTable =
          "<table> <thead> <th>아이디</th> <th>이름</th> <th>나이</th> </thead>" +
          msg +
          "</table>";
        lookUser.innerHTML = allUserTable;
      }

      function deleteUser() {
        const deleteUser = document.querySelector(".allUserList");
        const deleteId = document.getElementById("inputDeleteId").value;

        const deleteFilter = (value) => {
          return value.name != deleteId;
        };
        const deleteResult = userInfo.filter(deleteFilter);

        let msg = "";
        for (const user of deleteResult) {
          msg += `<tr> <td>${user.id}</td> <td onclick="lookInf('${user.name}')">${user.name}</td> <td>${user.age}</td> </tr>`;
        }
        let deleteUserTable =
          "<table> <thead> <th>아이디</th> <th>이름</th> <th>나이</th> </thead>" +
          msg +
          "</table>";

        deleteUser.innerHTML = deleteUserTable;
      }
    </script>
  </head>
  <body>
    <div class="allUserList">목록을 보여 줍니다</div>
    <hr />
    <input type="button" value="모든 회원 보기" onclick="lookAllUser()" />
    <hr />
    <input type="text" placeholder="input id" id="inputId" />
    <br />
    <input type="button" value="특정 회원 조회" onclick="lookUser()" />
    <hr />
    <input type="text" placeholder="input id" id="inputDeleteId" />
    <br />
    <input type="button" value="특정 회원 삭제" onclick="deleteUser()" />
  </body>
</html>
예제 풀이
728x90

+ Recent posts