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

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

[JavaScript] 자바스크립트로 비밀번호 유효성 검사  (0) 2024.03.27
[JavaScript] js 파일로 자바스크립트 코드 관리  (0) 2024.03.27
[JavaScript] 배열  (0) 2024.03.26
[JavaScript] 이벤트 ( 마우스 동작, 키보드 동작 시 함수 호출 )  (0) 2024.03.25
[JavaScript] 함수 ( 익명 함수, 즉시 실행 함수 )  (0) 2024.03.25

+ Recent posts

티스토리툴바