JavaScript : 함수 function 응용하기

2022.12.01.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 55

---

Review

 

 

 

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 55

 

 

<함수 function : for 구문을 이용해서 onclick 메뉴 만들어보기>

 

 

- HTML

 

    <div class="tabcontent">
      <h1>London</h1>
      <p>London is the capital city of England.</p>
    </div>
    
    <div class="tabcontent">
      <h1>Paris</h1>
      <p>Paris is the capital city of France.</p>
    </div>
    
    <div class="tabcontent">
      <h1>Tokyo</h1>
      <p>Tokyo is the capital city of Japan.</p>
    </div>
    
    <div class="tabcontent">
      <h1>Oslo</h1>
      <p>Oslo is the capital city of Norway.</p>
    </div>
    
    <p class="tablink" onclick="tab(0)">London</p>
    <p class="tablink" onclick="tab(1)">Paris</p>
    <p class="tablink" onclick="tab(2)">Tokyo</p>
    <p class="tablink" onclick="tab(3)">Norway</p>

 

 

 

- CSS

 

      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");

      * {
        margin: 0;
        padding: 0;
      }

      body {
        text-align: center;

        background: #eee;

        font: 18px "Montserrat", sans-serif;
        font-weight: 500;
      }

      .tabcontent {
        color: #222222;
        padding: 50px;
        text-align: center;
        background: #ccc;
      }
      .tablink {
        float: left;
        width: 25%;
        background: #555;
        text-align: center;
        padding: 10px 0;
        cursor: pointer;
      }
      .tablink:hover {
        background: #777;
      }

 

 

 

- JavaScript

 

  <script>
  
    let chcolor = [
      "rgb(252, 187, 187)",
      "rgb(140, 204, 140)",
      "rgb(145, 205, 237)",
      "rgb(245, 231, 161)",
    ];
    let content = document.getElementsByClassName("tabcontent");
    let btn = document.getElementsByClassName("tablink");

    function tab(j) {
      for (let i = 0; i <= 3; i++) {
        content[i].style.backgroundColor = chcolor[i];
        btn[i].style.backgroundColor = chcolor[i];
        content[i].style.display = "none";
        content[j].style.display = "block";
      }
    }
    tab(0);
    
  </script>

 

 

0

 

 

---

 

 

<함수 function : while 반복문을 이용해서 onclick 메뉴 만들어보기>

 

 

- HTML

 

    <div class="tabcontent">
      <h1>London</h1>
      <p>London is the capital city of England.</p>
    </div>
    
    <div class="tabcontent">
      <h1>Paris</h1>
      <p>Paris is the capital city of France.</p>
    </div>
    
    <div class="tabcontent">
      <h1>Tokyo</h1>
      <p>Tokyo is the capital city of Japan.</p>
    </div>
    
    <div class="tabcontent">
      <h1>Oslo</h1>
      <p>Oslo is the capital city of Norway.</p>
    </div>
    
    <p class="tablink" onclick="tab(0)">London</p>
    <p class="tablink" onclick="tab(1)">Paris</p>
    <p class="tablink" onclick="tab(2)">Tokyo</p>
    <p class="tablink" onclick="tab(3)">Norway</p>

 

 

 

- CSS

 

      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");

      * {
        margin: 0;
        padding: 0;
      }

      body {
        text-align: center;

        background: #eee;

        font: 18px "Montserrat", sans-serif;
        font-weight: 500;
      }

      .tabcontent {
        color: #222222;
        
        padding: 50px;
        
        text-align: center;
        
        background: #ccc;
      }
      
      .tablink {
        float: left;
        width: 25%;
        
        background: #555;
        
        text-align: center;
        
        padding: 10px 0;
        
        cursor: pointer;
      }
      
      .tablink:hover {
        background: #777;
      }

 

 

 

- JavaScript

 

    <script>
    
      let chcolor = [
        "rgb(252, 187, 187)",
        "rgb(140, 204, 140)",
        "rgb(145, 205, 237)",
        "rgb(245, 231, 161)",
      ];
      let content = document.getElementsByClassName("tabcontent");
      let btn = document.getElementsByClassName("tablink");

      function tab(j) {
        let i = 0;
        while (i <= 3) {
          content[i].style.backgroundColor = chcolor[i];
          btn[i].style.backgroundColor = chcolor[i];

          content[i].style.display = "none";
          content[j].style.display = "block";
          i++;
        }
      }
      tab(0);
      
    </script>

 

 

결과는 위의 예제와 동일하다 !

 

 

 

---

 

 

<함수 function : do while 반복문을 이용해서 onclick 메뉴 만들어보기>

 

 

- HTML

 

    <div class="tabcontent">
      <h1>London</h1>
      <p>London is the capital city of England.</p>
    </div>
    
    <div class="tabcontent">
      <h1>Paris</h1>
      <p>Paris is the capital city of France.</p>
    </div>
    
    <div class="tabcontent">
      <h1>Tokyo</h1>
      <p>Tokyo is the capital city of Japan.</p>
    </div>
    
    <div class="tabcontent">
      <h1>Oslo</h1>
      <p>Oslo is the capital city of Norway.</p>
    </div>
    
    <p class="tablink" onclick="tab(0)">London</p>
    <p class="tablink" onclick="tab(1)">Paris</p>
    <p class="tablink" onclick="tab(2)">Tokyo</p>
    <p class="tablink" onclick="tab(3)">Norway</p>

 

 

 

- CSS

 

      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");

      * {
        margin: 0;
        padding: 0;
      }

      body {
        text-align: center;

        background: #eee;

        font: 18px "Montserrat", sans-serif;
        font-weight: 500;
      }

      .tabcontent {
        color: #222222;
        padding: 50px;
        text-align: center;
        background: #ccc;
      }
      .tablink {
        float: left;
        width: 25%;
        background: #555;
        text-align: center;
        padding: 10px 0;
        cursor: pointer;
      }
      .tablink:hover {
        background: #777;
      }

 

 

 

- JavaScript

 

    <script>
    
      let chcolor = [
        "rgb(252, 187, 187)",
        "rgb(140, 204, 140)",
        "rgb(145, 205, 237)",
        "rgb(245, 231, 161)",
      ];
      let content = document.getElementsByClassName("tabcontent");
      let btn = document.getElementsByClassName("tablink");

      function tab(j) {
        let i = 0;
        do {
          content[i].style.backgroundColor = chcolor[i];
          btn[i].style.backgroundColor = chcolor[i];
          content[i].style.display = "none";
          content[j].style.display = "block";
          i++;
        } while (i <= 3);
      }
      tab(0);
      
    </script>

 

 

결과는 처음과 동일하다.

for 구문, while 반복문, do while 반복문 3가지의 방식으로 작성해 결과를 동일하게 만들어냈다.

 

 

 

---

 

 

<함수 function : onmouseover 메뉴 만들어보기>

 

 

- HTML

 

    <div class="tab_left">
      <p class="tablink" onmouseover="tab(0)">content1</p>
      <p class="tablink" onmouseover="tab(1)">content2</p>
      <p class="tablink" onmouseover="tab(2)">content3</p>
      <p class="tablink" onmouseover="tab(3)">content4</p>
      <p class="tablink" onmouseover="tab(4)">content5</p>
    </div>
    
    <div class="tab_right">
      <div class="tabcontent">
        <h1>content1</h1>
      </div>
      <div class="tabcontent">
        <h1>content2</h1>
      </div>
      <div class="tabcontent">
        <h1>content3</h1>
      </div>
      <div class="tabcontent">
        <h1>content4</h1>
      </div>
      <div class="tabcontent">
        <h1>content5</h1>
      </div>
    </div>

 

 

 

- CSS

 

      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");

      * {
        margin: 0;
        padding: 0;
      }

      body {
        text-align: center;

        background: #eee;

        font: 18px "Montserrat", sans-serif;
        font-weight: 500;
      }

      .tab_left {
        float: left;
        width: 30%;
        height: 300px;
        background: #f1f1f1;
        border: 1px solid #ccc;
        box-sizing: border-box;
      }

      .tablink {
        width: 100%;
        padding: 10px 0;
        text-align: center;
        cursor: pointer;
      }

      .tablink:hover {
        background: #ddd;
      }

      .tab_right {
        position: relative;
        float: left;
        width: 70%;
        height: 300px;

        background: #ddd;

        border: 1px solid #ccc;
        box-sizing: border-box;
      }

      .tabcontent {
        position: absolute;
        top: 40%;

        width: 100%;
        height: 100%;
      }

 

 

 

- JavaScript

 

<script>

      window.open(
        "../1201/1201_05_fnc.html",
        "함수연습",
        "width=500,height=500"
      );

      let content = document.getElementsByClassName("tabcontent");

      let btn = document.getElementsByClassName("tablink");

      function tab(j) {
        for (let i = 0; i < btn.length; i++) {
          content[i].style.display = "none";
          content[j].style.display = "block";
        }
      }
      tab(0);
      
    </script>

 

 

0

 

 

---

 

 

 

<함수 function : 시계 start & stop onclick 예제>

 

 

- HTML

 

    <div id="div"></div>
    <button id="start">start</button>
    <button id="stop">stop</button>

 

 

- JavaScript

 

    <script>
    
      function showtime() {
        let a = new Date();
        let time = a.toLocaleTimeString();
        document.getElementById("div").innerText = time;
      }

      let interval = setInterval(showtime, 1000);
      showtime();

      document.getElementById("stop").onclick = function () {
        clearInterval(interval);
      };

      document.getElementById("start").onclick = function () {
        interval = setInterval(showtime, 1000);
      };
      
    </script>

 

 

0

 

 

---

 

 

<함수 function : 시계 start & stop onmouseover / onmouseout 예제>

 

 

- HTML

 

    <div id="div"></div>
    <button id="stop">stop</button>

 

 

- JavaScript

 

    <script>
    
      function showtime() {
        let a = new Date();
        let time = a.toLocaleTimeString();
        document.getElementById("div").innerText = time;
      }

      let interval = setInterval(showtime, 1000);
      showtime();

      document.getElementById("stop").onmouseover = function () {
        clearInterval(interval);
      };

      document.getElementById("stop").onmouseout = function () {
        interval = setInterval(showtime, 1000);
      };
      
    </script>

 

 

0

 

마우스를 올리면 시계가 멈추고, 마우스를 다시 떼면 시계가 다시 작동된다.

 

 

 

---

 

 

<함수 function : 아날로그 시계 만들어보기>

 

 

- HTML

 

    <div id="content">
    
      <ul class="clock">
        <li class="base"></li>
        <li class="hour"></li>
        <li class="minute"></li>
        <li class="second"></li>
        <li class="center"></li>
      </ul>
      
    </div>

 

 

 

- CSS

 

      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");

      * {
        margin: 0;
        padding: 0;
      }

      body {
        text-align: center;

        background: #eee;

        font: 18px "Montserrat", sans-serif;
        font-weight: 500;

        padding: 10px 20px;
        margin-top: 30px;
        margin-left: 10px;
      }

      #content {
        width: 630px;
        height: 630px;
        margin: 100px auto;
      }

      .clock {
        position: relative;
        list-style: none;
        width: 100%;
        height: 100%;
      }

      .clock li {
        position: absolute;
        width: 630px;
        height: 630px;
      }

      .base {
        background: url(../images/clock_bg.png);
      }

      .hour {
        background: url(../images/hour.png);
      }

      .minute {
        background: url(../images/minute.png);
      }

      .second {
        background: url(../images/second.png);
        background-size: 630px 630px;
      }

      .center {
        background: url(../images/center_bg.png);
      }

 

 

 

- JavaScript

 

    <script>
    
      function clock() {
        let today = new Date();
        let hour = today.getHours();
        let minute = today.getMinutes();
        let second = today.getSeconds();
        time(hour, minute, second);
      }

      function time(h, m, s) {
        h = (360 / 12) * h + 0.5 * m;
        m = (360 / 60) * m;
        s = (360 / 60) * s;

        let hour = document.querySelector(".hour");
        let minute = document.querySelector(".minute");
        let second = document.querySelector(".second");

        hour.style.transform = "rotate(" + h + "deg)";
        minute.style.transform = "rotate(" + m + "deg)";
        second.style.transform = "rotate(" + s + "deg)";
      }

      setInterval(clock, 1000);
      
    </script>

 

 

 

0

 

결과를 보면 현재 시간을 반영해서 변수에 대입한 각도대로 움직인다.

 

너무 신기하다 !!! 자바스크립트가 제일 논리적이라서 어렵지만 재밌다.

 

이 예제는 이때까지 한 예제 중 가장 복잡했다.

이론은 다 배운 것이지만 응용해야해서 머리를 굴려야 하는 예제였다.

 

완성 - !