JAVASCRIPT 활용 (2)

이이태태영영 2024. 3. 26. 15:57

2024. 3. 26. 15:57

JAVASCRIPT 배열

배열 추가(변경) 방법 : 배열명[인덱스명] = "값";

.join() : 배열 사이에 넣을 값 지정 (default = ,) (타입 = String)

<!DOCTYPE html>
<html lang="en">
  <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);
      document.write(`<br>${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>`);
    </script>
  </body>
</html>

실행 결과

JAVASCRIPT 배열 (2)

배열명.push() : 배열 맨 뒤에 값을 추가

배열명.pop() : 배열 맨 뒤 값을 삭제

배열명.unshift() : 배열 맨 앞에 값을 추가

배열명.shift() : 배열 맨 앞에 값을 삭제

배열명.concat() : 해당 배열을 복사한다 (복사 후 추가도 가능)

<!DOCTYPE html>
<html lang="en">
  <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}<hr>`);
      kdata.push("인천", "대구");
      document.write(`push : ${kdata}<br>`);
      kdata.pop();
      document.write(`pop : ${kdata}<hr>`);

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

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

실행 결과

JAVASCRIPT 배열 (3)

배열명.forEach(함수); : 단순출력, 연산 (return값을 가질 수 없다)

배열명.map(함수); : return값을 가질 수 있다

* 함수를 생성해서 넣을수도 있고, 생성된 함수를 넣을수도 있다

<!DOCTYPE html>
<html lang="en">
  <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);
      //   }

      //   const t = (d) => {
      //     console.log(d);
      //   };
      //   data.forEach(t);

      data.forEach((d) => {
        document.write(d + "<br>");
      });
      /*
      function t02(d) {
        return `<b style="color:blue;">${d}</b>`;
      }
      */
      const t02 = (d) => `<b style="color:red;">${d}</b>`;
      const mapData = data.map(t02);
      document.write("<hr>" + mapData + "<hr>");

      const mapData02 = data.map((d) => `<b style="color:yellow;">${d}</b>`);
      document.write("<hr>" + mapData02 + "<hr>");
    </script>
  </body>
</html>

실행 결과

JAVASCRIPT 배열 (4)

dic : 키와 값을 가진다

<!DOCTYPE html>
<html lang="en">
  <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"] = "f3333";
      dic.func = test;

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

실행 결과

JAVASCRIPT 배열 (5)

배열명.filter(함수) : 데이터를 비교해서 해당하는 값만 돌려줌

<!DOCTYPE html>
<html lang="en">
  <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>

실행 결과

JAVASCRIPT 배열 (6)

for (const 타입명 of 배열명) : forEach문

<!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>
      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) {
          msg2 += `아이디 : ${user.id}<br>
            이름 : ${user.name}<br>
            나이 : ${user.age}<br>`;
        }
        div2.innerHTML = msg2;
      }
    </script>
  </head>
  <body onload="init()">
    <div class="test"></div>
    <hr />
    <div class="test2"></div>
  </body>
</html>

실행 결과

Quiz01

풀이 과정

<!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>
      let userInfo = [
        { id: "aaa", name: "홍길동", age: 20 },
        { id: "bbb", name: "김개똥", age: 30 },
        { id: "ccc", name: "고길동", age: 40 },
      ];
      function init() {
        const div1 = document.querySelector(".list");
        let msg1 = `<h3>목록을 보여 줍니다</h3><hr>`;
        div1.innerHTML = msg1;

        // const div2 = document.querySelector(".search");
        // let msg2 = `<hr><input placeholder="input id" id="search">`;
        // div2.innerHTML = msg2;

        // const div3 = document.querySelector(".delete");
        // let msg3 = `<hr><input placeholder="input id">`;
        // div3.innerHTML = msg3;
      }
      function listFunc() {
        const list1 = document.querySelector(".list");
        let msg01 = `<table border="1">`;
        msg01 += `<tr>
                        <td>아이디</td> <td>이름</td> <td>나이</td>
                     </tr>`;
        for (i = 0; i < userInfo.length; i++) {
          console.log(userInfo[i].id);
          msg01 += `<tr>
                        <td>${userInfo[i].id}</td> <td onclick="info('${userInfo[i].name}')">${userInfo[i].name}</td> <td>${userInfo[i].age}</td>
                     </tr>`;
        }
        msg01 += `</table>`;

        list1.innerHTML = msg01;
      }
      function info(name) {
        const list = document.querySelector(".list");
        let msg;
        for (i = 0; i < userInfo.length; i++) {
          if (name == userInfo[i].name) {
            msg = `<h2>아이디 : ${userInfo[i].id}</h2>
                <h2>이름 : ${userInfo[i].name}</h2>
                    <h2>나이 : ${userInfo[i].age}</h2>
                `;
          }
        }
        list.innerHTML = msg;
      }

      function searchFunc() {
        const search = document.querySelector("#search");
        val = search.value;

        const list1 = document.querySelector(".list");
        let msg02 = `<table border="1">`;
        msg02 += `<tr>
                        <td>아이디</td> <td>이름</td> <td>나이</td>
                     </tr>`;
        for (i = 0; i < userInfo.length; i++) {
          if (val == userInfo[i].id) {
            msg02 += `<tr>
                        <td>${userInfo[i].id}</td> <td>${userInfo[i].name}</td> <td>${userInfo[i].age}</td>
                     </tr>`;
          }
        }
        msg02 += `</table>`;
        list1.innerHTML = msg02;
      }
      function deleteFunc() {
        const d = document.querySelector("#delete");
        val2 = d.value;

        const list2 = document.querySelector(".list");
        let msg03 = `<table border="1">`;
        msg03 += `<tr>
                        <td>아이디</td> <td >이름</td> <td>나이</td>
                     </tr>`;

        function rs(value) {
          return value.id != val2;
        }
        const result = userInfo.filter(rs);

        for (i = 0; i < result.length; i++) {
          msg03 += `<tr>
                        <td>${result[i].id}</td> <td >${result[i].name}</td> <td>${result[i].age}</td>
                     </tr>`;
        }
        console.log(result.id);
        msg03 += `</table>`;
        list2.innerHTML = msg03;
      }
      function ad(asdf) {
        console.log(asdf);
      }
    </script>
  </head>
  <body onload="init()">
    <div class="list"></div>
    <button id="btnList" onclick="listFunc()">모든 회원 보기</button>
    <div>
      <hr />
      <input placeholder="input id" id="search" />
    </div>
    <div></div>
    <button id="btnSearch" onclick="searchFunc()">특정 회원 조회</button>
    <div></div>

    <div>
      <hr />
      <input placeholder="input id" id="delete" />
    </div>
    <button id="btnDelete" onclick="deleteFunc()">특정 회원 삭제</button>
  </body>
</html>

실행 결과

JAVASCRIPT 배열

setTimeout(함수, 시간); : 해당하는 함수를 실행하는데 걸리는 시간 지정 (1000 = 1초)

clearTimeout(setTimeout()) : setTimeout()을 취소하는 역할

Date() : 현재 시간을 알려주는 내장 함수

<!DOCTYPE html>
<html lang="en">
  <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);
        //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>

실행 결과

JAVASCRIPT

setInterval(함수, 시간) : 지정한 시간이 지날때마다 함수를 반복 실행

clearInterval() : setInterval()을 취소하는 역할

.toLocalString() : 객체에 맞춰 문자열을 반환

<!DOCTYPE html>
<html lang="en">
  <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>

실행 결과

JAVASCRIPT

.insertAdjacentHTML("afterbegin") : 앞에 내용 추가

.insertAdjacentHTML("beforeend") : 뒤에 내용 추가

<!DOCTYPE html>
<html lang="en">
  <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;
        //txt.insertAdjacentHTML("afterbegin", msg);
        //txt.insertAdjacentHTML("beforeend", msg);
      };
    </script>
    <div id="txt">안녕하세요</div>
    <button onclick="inner()">클릭</button>
  </body>
</html>

실행 결과

JAVASCRIPT

.setAttribute() : 속성값 설정(추가)

document.createElement() : html태그요소를 추가(설정)하는 역할

태그명.appendChild() : 태그의 자식요소에 추가하는 역할

.remove() : 해당 태그 전체 삭제

.removeChild(객체) : 먼저 삭제할 객체를 지정해서 하나씩 삭제

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let img;
      function add() {
        img = document.createElement("img");
        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();
        items.removeChild(items.childNodes[0]);
        //items.removeChild(items.childNodes[items.childNodes.length - 1]);
      }
    </script>
    <p id="test"></p>
    <a href="#" onclick="addTB()">테이블 추가</a>
    <b onclick="add()">add 클릭</b>
    <b onclick="remove()">이미지 삭제 클릭</b>
  </body>
</html>

실행 결과

'javaScript' 카테고리의 다른 글

JAVASCRIPT 활용 (3) (0)	2024.03.27
JAVASCRIPT 활용 (0)	2024.03.25
JAVASCRIPT 기초 (0)	2024.03.22

개발 필기장