5. JavaScript - 최댓값, 최솟값, 평균값, 랜덤메뉴, 순차적 색상변환 예제

46851 단어 Javascript 기초JavaScriptJavaScript
  • 혼자서 JavaScript를 공부하고 실습하면서 작성한 글입니다.
  • 처음 공부하고 있어서 부족하거나 잘못된 정보가 있을 수 있습니다. (2021.06.11 금)
  • 조금 더 자세히 알게 되거나 수정할 부분이 있으면 바로바로 수정하겠습니다.

최솟값, 최댓값, 배열의 총합, 평균값을 구하는 함수

<!DOCTYPE html>
<html>
  <head>
    <title>함수 만들기 연습</title>
  </head>
  <body>
    <script>
      var arr = [20,77,50,40,10,55];

      function min(a){
        let min = 100;
        for (var i =0; i < a.length;i++){
          if(min>a[i]){
            min=a[i];
          }
        }
        document.write("배열의 최솟값은 <b>" + min + "</b>입니다. <br>");
        return(min);
      }
      
      function max(a){
        let max = 0;
        for (var i =0; i < a.length;i++){
          if(max<a[i]){
            max=a[i];
          }
        }
        document.write("배열의 최댓값은 <b>" + max + "</b>입니다. <br>");
        return(max);
      }
      
      function sum(a){
        let sum=0;
        for(var i=0; i<a.length;i++){
          sum +=a[i];
        }
        document.write("배열의 총합은 <b>" + sum + "</b>입니다. <br>");
        return(sum);
      }
      
      function avg(a){
      	let avg = 0;
        let sum = 0;
        for(var i=0; i<a.length;i++){
          sum +=a[i];
        }
        avg = sum/a.length;
        document.write("배열의 평균값은 <b>" + avg + "</b>입니다. <br>");
        return(avg);
      }
      
      
      min(arr);
      max(arr);
      sum(arr);
      avg(arr);
    </script>

  </body>
</html>

->

<!DOCTYPE html>
<html>
  <head>
    <title>함수 만들기 연습</title>
  </head>
  <body>
    <script>
      var arr = [20,77,50,40,10,55];

      function min(a){
        let min = 10000;
        for (var i = 0; i < a.length; i++){
          if(min > a[i]){
            min = a[i];
          }
        }
        return(min);
      }

      function max(a){
        let max = 0;
        for (var i = 0; i < a.length; i++){
          if(max < a[i]){
            max = a[i];
          }
        }
        return(max);
      }

      function sum(a){
        let sum = 0;
        for(var i = 0; i < a.length; i++){
          sum += a[i];
        }
        return(sum);
      }

      function avg(a){
        let avg = 0;
        let sum = 0;
        for(var i = 0; i < a.length; i++){
          sum += a[i];
        }
        avg = sum/a.length;
        return(avg);
      }


      function scores(a){
        var min_value = min(a);
        var max_value = max(a);
        var sum_value = sum(a);
        var avg_value = avg(a);

        document.write("배열의 값은 <b>" + a + "</b> 입니다<br>" + "배열의 최솟값은 <b>" + min_value + "</b>입니다. <br>" + "배열의 최댓값은 <b>" + max_value + "</b>입니다. <br>" + "배열의 총합은 <b>" + sum_value + "</b>입니다. <br>" + "배열의 평균값은 <b>" + avg_value + "</b>입니다. <br><br>");
        return;
      }


      scores(arr);

      var arr1 = [11,2,3,4,5,6,77,111,1,10];
      scores(arr1);
      
      var arr2 = [11, 19, 15, 25, 97, 110, 5, 3, 1, 4];
      scores(arr2);
      
    </script>

  </body>
</html>

랜덤 메뉴 고르기

Math.floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.

출처 : MDN Math.floor()

Math.random() 함수는 0 이상 1 미만의 구간에서 근사적으로 균일한 부동 소숫점 의사난수를 반환합니다.

출처 : MDN Math.random()

  • 번외

Math.round() 함수는 입력값을 반올림한 수와 가장 가까운 정수 값을 반환합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>랜덤 메뉴 고르기</title>
    <style>
      div {width:200px; height:200px; border:1px solid #000; display:flex; justify-content:center; align-items:center; margin:30px;}
      button {cursor:pointer; border:none; background-color:tomato; padding:10px 20px; color:#fff;}
      button:hover {background-color:yellowgreen;}
    </style>
  </head>
  <body>

    <h1>랜덤 메뉴 고르기</h1>
    <button>오늘의 메뉴는?</button>
    <div>결과창</div>

    <script>
      document.getElementsByTagName('button')[0].onclick = function(){
        var menu = ["짜장면", "돈가스", "된장국", "김치찌개", "회덮밥", "까르보나라", "치킨", "피자", "햄버거", "냉면"];
        // 여기에서 randomNum 은 0에서 9사이의 숫자를 가짐
        var randomNum = Math.floor(Math.random() * menu.length);
        var result = menu[randomNum];
        document.getElementsByTagName('div')[0].innerHTML = result;
      }
    </script>
  </body>
</html>

버튼 클릭 시 순차적으로 색 바꾸기

<!DOCTYPE html>
<html>
  <head>
    <title>버튼 클릭 시 순차적으로 색 바꾸기</title>

    <style>	
      #btn {cursor:pointer; border:none; padding:10px 20px; background-color:yellowgreen; color:#fff;}
    </style>

  </head>
  <body>
    <h1 id="text">Text Color 바꾸기</h1>
    <button id="btn">클릭</button>

    <script>
      var textcolor=["tomato", "gold", "red", "yellow", "yellowgreen", "cyan", "magenta", "blue"];
      var i = 0;

      btn.onclick=function(){
        text.style.color = textcolor[i];
        i++;
        if(i >= textcolor.length){
          i = 0;
        }
      }

    </script>
  </body>
</html>

또는

<!DOCTYPE html>
<html>
  <head>
    <title>버튼 클릭 시 순차적으로 색 바꾸기</title>

    <style>	
      button {cursor:pointer; border:none; padding:10px 20px; background-color:yellowgreen; color:#fff;}
    </style>

  </head>
  <body>
    <h1>Text Color 바꾸기</h1>
    <button>클릭</button>

    <script>
      var textcolor=["tomato", "gold", "red", "yellow", "yellowgreen", "cyan", "magenta", 'blue'];
      var i = 0;

      document.getElementsByTagName('button')[0].onclick=function(){
        document.getElementsByTagName('h1')[0].style.color = textcolor[i];
        i++;
        if(i >= textcolor.length){
          i = 0;
        }
      }

    </script>
  </body>
</html>
SEO와 관련 태그들
TIL 8 | array methods 정리, forIn/forOf, var/let/const

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage