JavaScript : Math 객체, Event onscroll, onmousemove, preventDefault

ㆍStudy/JavaScript

2022.12.06.

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



Review


 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

<Math 메소드 알아보기>

 

 

- JavaScript

 

    <script>
    
      document.write("Math.E : " + Math.E + "<br>");
      document.write("Math.PI : " + Math.PI + "<br>");
      document.write("Math.SORT2 : " + Math.SORT2 + "<br>");
      document.write("Math.SORT1_2 : " + Math.SORT1_2 + "<br>");
      document.write("Math.LN2 : " + Math.LN2 + "<br>");
      document.write("Math.LN10 : " + Math.LN10 + "<br>");
      document.write("Math.LOG2E : " + Math.LOG2E + "<br>");
      document.write("Math.LOG10E : " + Math.LOG10E + "<br>" + "<br>");

      let num1 = 2.124567;

      document.write("Math.round(2) : " + Math.round(2) + "<br>");
      document.write("Math.ceil(num1) : " + Math.ceil(num1) + "<br>");
      document.write("Math.floor(num1) : " + Math.floor(num1) + "<br>");
      document.write(
        "Math.trunc(num1) : " + Math.trunc(num1) + "<br>" + "<br>"
      );

      let num2 = -2.124567;

      document.write("Math.ceil(num2) : " + Math.ceil(num2) + "<br>");
      document.write("Math.floor(num2) : " + Math.floor(num2) + "<br>");
      document.write("Math.trunc(num2) : " + Math.trunc(num2) + "<br>");
      document.write("Math.sign(-4) : " + Math.sign(-4) + "<br>");
      document.write("Math.sign(null) : " + Math.sign(null) + "<br>");
      document.write("Math.sign(6) : " + Math.sign(6) + "<br>");
      document.write("Math.pow(6, 2) : " + Math.pow(6, 2) + "<br>");
      document.write("Math.sqrt(36) : " + Math.sqrt(36) + "<br>");
      document.write("Math.abs(-36) : " + Math.abs(-36) + "<br>");
      document.write("Math.abs(36) : " + Math.abs(36) + "<br>");
      document.write(
        "Math.min(36, 10, 0, 1, -2 : " + Math.min(36, 10, 0, 1, -2) + "<br>"
      );
      document.write(
        "Math.max(36, 10, 0, 1, -2 : " + Math.max(36, 10, 0, 1, -2) + "<br>"
      );
      document.write("Math.random() * 2 : " + Math.random() * 2 + "<br>");
      
    </script>

 

 

 

 

<Math 메소드 예제>

 

 

- JavaScript

 

    <script>
    
      let food = ["짜장면", "짬뽕", "탕수육", "잡채"];

      document.write(food[3]); // 0, 1, 2, 3
      console.log(Math.random());
      
    </script>

 

0

새로고침을 하면 random으로 console 창 출력되는 숫자가 달라진다.

 

 

 

 

 

<Math 메소드 예제2>

 

 

- JavaScript

 

    <script>
    
      let food = ["짜장면", "짬뽕", "탕수육", "잡채", "군만두"];
     
     // 첫 번째 방법
     /* let i = Math.ceil(Math.random() * 4);

      document.write(food[i]); // 0, 1, 2, 3, 4 */
      
     // 두 번째 방법
      let num = food.length;
      let i = Math.floor(Math.random() * num);

      document.write(food[i]); //0, 1, 2, 3, 4
      console.log(i);
      
    </script>

 

 

0

이 예제도 역시 새로고침을 하면 random으로 console 창 출력되는 숫자가 달라진다.

 

 

 

<Math 메소드 배경색 바꾸기 예제>

 

 

- HTML

 

<button id="bg" onclick="chcolor()">background change</buttn>

 

 

- CSS

 

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

      * {
        margin: 0;
        padding: 0;

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

      body{
        text-align: center;

        background: #eee;

        margin-top: 50px;
      }

      button {
        padding: 10px 20px;

        border-radius: 5px;

        background: #222222;
        color: #fff;

        cursor: pointer;
      }
    </style>

 

 

 

- JavaScript

 

    <script>
    
      let color = ["rgb(252, 187, 187)",
        "rgb(140, 204, 140)",
        "rgb(145, 205, 237)",
        "rgb(245, 231, 161)"];

      function chcolor() {
        let i = Math.floor(Math.random() * color.length);

        document.querySelector("body").style.backgroundColor = color[i];
        }
      chcolor(i);

    </script>

 

 

0

 

 

 

 

<onscroll event 알아보기>

 

 

- HTML

 

    <div id="div1" onscroll="myfnc()">
      <div id="content">Scroll me !</div>
    </div>
    
    <p id="demo"></p>
    
    <button onclick="fnc()">Scroll 원위치</button>

 

 

- CSS

 

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

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

      body {
        background: #eee;
      }

      #div1 {
        width: 500px;
        height: 500px;

        overflow: auto;
      }

      #content {
        width: 2000px;
        height: 2000px;

        background: #ccc;

        padding: 20px;
      }

      button {
        background: #222222;
        color: #fff;

        border: none;
        border-radius: 5px;

        cursor: pointer;

        padding: 10px 15px;
      }

      button:hover {
        background: #222222ac;

        border: none;
      }

 

 

 

- JavaScript

 

    <script>
    
      function myfnc() {
        let txt = document.getElementById("div1");
        let x = txt.scrollLeft;
        let y = txt.scrollTop;

        document.getElementById("demo").innerHTML =
          "<br> 가로 : " + x + "<br> 세로 : " + y;
      }

      function fnc() {
        let txt = document.getElementById("div1");
        txt.scrollLeft = 0;
        txt.scrollTop = 0;
      }
      
    </script>

 

 

0

 

 

 

<onscroll event 예제>

 

 

- JavaScript

 

    <script>
    
      window.onscroll = function () {
        let ht = document.documentElement.scrollTop;

        console.log(ht);

        if (ht <= 500 && ht < 1000) {
          document.querySelector("body").style.backgroundColor = "black";
        } else if (ht >= 1000) {
          document.querySelector("body").style.backgroundColor = "red";
        } else {
          document.querySelector("body").style.backgroundColor = "green";
        }
      };
      
    </script>

 

 

0

 

 

 

 

<onscroll event Top 버튼 만들어보기>

 

 

- HTML

 

    <div id="nav"></div>
    <div id="content">contents</div>
    <button id="btn" onclick="topfnc()">Top</button>

 

 

- CSS

 

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

      * {
        margin: 0;
        padding: 0;

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

      body {
        height: 3000px;

        background-color: #eee;
      }

      #nav {
        position: fixed;

        width: 100%;
        height: 50px;

        background: #333;

        transition: 0.8s;
      }

      #content {
        position: relative;
        top: 60px;
      }

      #btn {
        position: fixed;
        right: 20px;
        bottom: 20px;

        cursor: pointer;

        padding: 15px;

        background: #333;
        color: #fff;

        border-radius: 50%;
      }

 

 

- JavaScript

 

    <script>
    
      window.onscroll = function () {
        let ht = document.documentElement.scrollTop;

        if (ht < 50) {
          document.getElementById("btn").style.opacity = "0";
        } else {
          document.getElementById("btn").style.opacity = "1";
        }
      };

      //   function topfnc() {
      //     window.scrollTo({ top: 0, behavior: "smooth" });
      //   }

      function topfnc() {
        document.documentElement.scrollTop = 0;
      }
      
    </script>

 

 

0

 

 

 

<onscroll event 응용 예제>

 

 

- HTML

 

    <div class="top">
      <h1>The onscroll Event</h1>
    </div>
    <hr />
    <div class="content">
      <img src="../images/photo1.jpg" id="myImg" alt="photo1" />
    </div>
    <button id="btn" onclick="topfnc()">Top</button>

 

 

- CSS

 

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

      * {
        padding: 0;
        margin: 0;

        font-family: "Montserrat", sans-serif;
      }

      .top {
        height: 500px;
      }

      .top h1 {
        margin: 30px 20px;
      }

      .content {
        height: 1500px;
      }

      .content img {
        width: 300px;

        opacity: 0;

        margin: 30px 20px;
      }

      #btn {
        position: fixed;
        right: 20px;
        bottom: 20px;

        cursor: pointer;

        padding: 15px;

        background: #333;
        color: #fff;

        border-radius: 50%;
      }

      .slideup {
        animation-name: slideup;
        animation-duration: 1s;
        animation-fill-mode: forwards;
      }

      .slidedown {
        animation-name: slidedown;
        animation-duration: 1s;
        animation-fill-mode: forwards;
      }

      @keyframes slideup {
        0% {
          opacity: 0;
          transform: translateY(70%);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes slidedown {
        0% {
          opacity: 1;
          transform: translateY(0);
        }
        100% {
          opacity: 0;
          transform: translateY(70%);
        }
      }

 

 

- JavaScript

 

    <script>
    
      window.onscroll = function () {
        let ht = document.documentElement.scrollTop;

        if (ht > 350) {
          document.getElementById("myImg").className = "slideup";
        } else {
          document.getElementById("myImg").className = "slidedown";
        }

        if (ht < 50) {
          document.getElementById("btn").style.opacity = "0";
        } else {
          document.getElementById("btn").style.opacity = "1";
        }
      };

      function topfnc() {
        document.documentElement.scrollTop = 0;
      }
      
    </script>

 

0

 

 

 

<onmousemove 알아보기>

 

 

- HTML

 

    <form action="" name="form1">
      <p><input type="text" name="client_x" /></p>
      <p><input type="text" name="client_y" /></p>
      <p><input type="text" name="page_x" /></p>
      <p><input type="text" name="page_y" /></p>
      <p><input type="text" name="screen_x" /></p>
      <p><input type="text" name="screen_y" /></p>
    </form>
    <button id="btn" onclick="topfnc()">Top</button>

 

 

- CSS

 

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

      * {
        font-family: "Montserrat", sans-serif;
      }

      body {
        margin-top: 1000px;
        padding-bottom: 1000px;
      }

      input {
        padding: 10px 20px;

        font-weight: 500;
        font-size: 20px;
      }

      #btn {
        position: fixed;
        right: 20px;
        bottom: 20px;

        cursor: pointer;

        padding: 15px;

        background: #333;
        color: #fff;

        border-radius: 50%;
      }

 

 

- JavaScript

 

    <script>
    
      document.onmousemove = function (e) {
        /* 매개변수 변수명을 event 또는 e로 사용할 필요는 없지만, 보통 event 객체의 의미로 event 또는 e를 주로 사용함  */
        let myform = document.form1;

        myform.client_x.value = "clientX : " + event.clientX;
        myform.client_y.value = "clientY : " + event.clientY;
        // 문서를 기준으로 좌표 구함. 스크롤 계산안함
        myform.page_x.value = "pageX : " + event.pageX;
        myform.page_y.value = "pageY : " + event.pageY;
        // 문서를 기준으로 스크롤 높이까지 계산해 좌표를 구함
        myform.screen_x.value = "screenX : " + event.screenX;
        myform.screen_y.value = "screenY : " + event.screenY;
        // 스크린(모니터) 기준으로 좌표를 구함
      };

      function topfnc() {
        document.documentElement.scrollTop = 0;
      }
      
    </script>

 

 

0

 

마우스를 올리면 각각의 기준으로 좌표를 구해 데이터가 변하는 것을 확인할 수 있다.

 

 

 

 

 

<a link 태그 막기 예제>

 

 

- HTML

 

    <a href="http://www.naver.com" id="google" onclick="url_link(a)">구글</a>
    <button id="btn" onclick="topfnc()">Top</button>

 

 

- JavaScript

 

    <!-- 첫 번째 방법 -->
    <script>
      
      function topfnc() {
        document.documentElement.scrollTop = 0;
      }

      let txt = document.getElementById("google");

      function myfnc(e) {
        e.preventDefault();
        location.href = "http://www.google.com";
      }

      txt.onclick = function (a) {
        myfnc(a);
      };

    </script>

    <!-- 두 번째 방법 -->
    <!-- <script>

        function topfnc() {
        document.documentElement.scrollTop = 0;
      }

      let txt = document.getElementById("google");

      txt.onclick = function (e) {
        e.preventDefault();
        location.href = "http://www.google.com";
      };

    </script> -->

    <!-- 세 번째 방법 -->
    <!-- <script>

      function topfnc() {
        document.documentElement.scrollTop = 0;
      }

      let txt = document.getElementById("google");

      txt.onclick = function () {
        location.href = "http://www.google.com";
        return false; // 구문의 제일 끝에 기입해야함
      };

    </script> -->

 

0

 

a 태그에는 네이버의 주소로 작성했음에도 불구하고 구글 링크로 접속할 수 있도록 한다.

 

 

<checkbox 클릭이 되지 않도록 막기 예제>

 

 

- HTML

 

    Try to check this box: <input type="checkbox" id="box" />

 

 

- JavaScript

 

    <script>
    
      let txt = document.getElementById("box");
      //   txt.onclick = function (e) {
      //     e.preventDefault();
      txt.onclick = function () {
        return false;
      };
      
    </script>

 

 

0

 

checkbox에 클릭을 해도 클릭이 되지 않도록 한다.

 

 

 

 

 

 

 

 

 

 

 

* 내용 출처

: 코딩의 시작, TCP School

반응형

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

생활코딩 JavaScript 강의 - 변수, 연산자, 조건문  (0) 2023.02.02
JavaScript : Slide Animation  (0) 2022.12.07
JavaScript : GitHub (깃허브)에 로컬 파일 업로드하기, Figma 응용  (0) 2022.12.05
JavaScript : String 메소드  (0) 2022.12.02
JavaScript : 함수 function 응용하기  (0) 2022.12.01

관련글

댓글 0

티스토리툴바