---

제어문

---

if

• Java의 if문 사용법과 동일하다.

활용 예제

  <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);   // Number(태그 내부 숫자를 문자열 '80'으로 가지고 옴) : 문자열을 숫자로 변환
    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>

---

for

• Java의 for문 사용법과 동일하다.

단일 for문 예제

  <div id="box1"></div>
  <script>
   
    //var str = '1<br>2<br>3<br>4<br>5<br>';  반복문의 형태로 해당 구조 만들기

    var str = '';

    for(let n = 1; n <= 5; n++) {
      str += (n + '<br>');
    }

    document.getElementById('box1').innerHTML = str;  // HTML요소(<br>태그)가 포함되어 있기 때문에 innerHTML 사용

  </script>

  <hr>

  <style>
    #box2 > img {
      margin-right: 10px;   /* 모든 사진의 바깥 오른쪽에 10만큼의 공간 띄우기 */
    }
  </style>
  <div id="box2"></div>
  <script>
        // animal1.jpg ~ animal10.jpg 한 줄로 출력하기

    var str = '';
    for(let n = 1; n <= 10; n++) {
      str += '<img src="../../assets/image/animal' + n + '.jpg" width="100px">';
    }
    document.getElementById('box2').innerHTML = str;
  </script>

  <hr>

  <div id="box3"></div>
  <!-- 아래 셀렉트의 내용을 script 이용해서 만들기 -->
  <!--
  <select name="month">
    <option value="">월 선택</option>
    <option value="1">1월</option>
    <option value="2">2월</option>
    ...
  </select>
  -->
  <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>

이중 for문 예제

  <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 += '</table></tbody>';
    document.getElementById('box4').innerHTML = str;
  </script>

---

배열 Array

• 대괄호 []를 이용해서 각 배열 요소를 묶는다.
• 서로 다른 타입(숫자, 문자열, 논리값 등)을 하나의 배열에 저장할 수 었다.
• 인덱스는 0부터 시작한다.
• 배열의 길이는 length 속성으로 확인할 수 있다.

---

‣ 배열의 선언 및 초기화 예제

var array = [100, 1.5, 'Hello World', true];  
// DOM 객체도 포함 가능

‣ for-in 문

• 배열에서 인덱스를 가져오는 방식의 반복문
  (자바스크립트에서 지원)

일반 for문 예제

for(let i = 0; i < array.length; i++){
	document.getElementById('box1').innerHTML += (array[i] + '&nbsp;&nbsp;');  // 각 요소 사이에 공백 2번 포함
}

for-in 문 예제

for(let i in array){
	document.getElementById('box1').innerHTML += (array[i] + '  ');
}    

---

‣ 배열 요소 추가

• push(요소) : 마지막 요소로 추가하기
• unshift(요소) : 첫번째 요소로 추가하기

활용 예제

// box3 문서 객체
var box3 = document.getElementById('box3');
// 배열 선언(비어 있는 배열)
var array = [];    

추가

array.push('제육볶음');
array.push('짬뽕');
array.unshift('짜장');
array.unshift('된장찌개');

확인 출력

for(let i = 0; i <array.length; i++){
	box3.innerHTML += array[i] + '<br>';
}    

---

‣ 배열 요소 삭제

• pop() : 마지막 요소 삭제하기
• shift() : 첫번째 요소 삭제하기

활용 예제

array.pop();
array.shift();

확인 출력

for(let i = 0; i <array.length; i++){
	box3.innerHTML += array[i] + '<br>';
}

---

‣ 배열 요소 수정

• splice(수정을 시작할 인덱스, 삭제할 요소의 개수, [추가할 요소1, 추가할 요소2, ...])
• 추가할 요소는 생략 가능
• 사실상 삽입, 수정, 삭제 모두 가능

활용 예제

마지막 요소로 '계란찜' 추가

array.splice(array.length, 0, '계란찜');

두번째 요소를 '순대국' 수정

// 인덱스 1부터 1개 요소를 지우고, '순대국' 넣기
array.splice(1, 1, '순대국');   

첫번째 요소를 삭제

// 인덱스 0부터 1개 요소 지우기
array.splice(0, 1);   

확인 출력

for(let i = 0; i <array.length; i++){
	box3.innerHTML += array[i] + '<br>';
}

---

뾰로롱~

---