JavaScript - branch/loop

branch 예제

  <ul>
    <li>국어 <span id="kor">80</span>점</li>
    <li>영어 <span id="eng">85</span>점</li>
    <li>수학 <span id="math">95</span>점</li>
    <li>평균 <span id="ave"></span>점</li>
    <li>학점 <span id="grade"></span>학점</li>
  </ul>
  
  <script>

    // 국어, 영어, 수학 점수 변수로 저장하기
    var kor = Number(document.getElementById('kor').textContent);
    var eng = Number(document.getElementById('eng').textContent);
    var math = Number(document.getElementById('math').textContent);

    // 평균 구하기
    var ave = (kor + eng + math) / 3;

    // 학점 구하기
    var grade;
    if(ave >= 90){
      grade = 'A';
    } else if(ave >= 80){
      grade = 'B';
    } else if(ave >= 70){
      grade = 'C';
    } else if(ave >= 60){
      grade = 'D';
    } else {
      grade = 'F';
    }

    // 결과 표시하기
    document.getElementById('ave').textContent = ave;
    document.getElementById('grade').textContent = grade;

  </script>

loop예제

  
  <div id="box1"></div>
  <script>
    
    var str = '';
    for(let n = 1; n <= 5; n++){
      str += (n + '<br>');
    }

    document.getElementById('box1').innerHTML = str;

  </script>


  <hr>


  <style>
    #box2 > img {
      margin-right: 10px;
    }
  </style>
  <div id="box2"></div>
  <script>
    var str = '';
    for(let n = 1; n <= 10; n++){
      str += '<img src="../../assets/images/animal' + n + '.jpg" width="100px">';
    }
    document.getElementById('box2').innerHTML = str;
  </script>


  <hr>


  <div id="box3"></div>
  <script>
    var str = '<select name="month"><option value="">월 선택</option>';
    for(let m = 1; m <= 12; m++){
      str += '<option value="' + m + '">' + m + '월</option>';
    }
    str += '</select>';
    document.getElementById('box3').innerHTML = str;
  </script>


  <hr>
  

  <div id="box4"></div>
  <script>
    /*
              col=1  col=2  col=3
      row=1   1      2      3
      row=2   4      5      6
      row=3   7      8      9
      ----------------------------
      (1~9) = (row - 1) * 3 + col
    */
    var str = '<table border="1"><tbody>';
    for(let row = 1; row <= 3; row++){
      str += '<tr>';
      for(let col = 1; col <= 3; col++){
        str += '<td>' + ((row - 1) * 3 + col) + '</td>';
      }
      str += '</tr>';
    }
    str += '</tbody></table>';
    document.getElementById('box4').innerHTML = str;
  </script>