[Intermediate] 반복문 For

1. 반복문(For statement)

1) for (시작조건; 종료조건; 변화조건) {}

for (let i = 0; i < 3; i += 1) {
  console.log(i)
  // 3번 반복
}

2) 활용 예제1

-HTML-
<h1>Hello world!</h1>
<ul></ul>

-JavaScript-
const ulEl = document.querySelector('.ul')

for (let i = 0; i < 3; i += 1) {
  const li = document.createElement('li')
  // li 태그 3개 생성
  li.textContent = `list-${i + 1}`
  // list-1, list-2, list-3 총 3개의 각각의 텍스트 내용 설정
  ulEl.appendChild(li)
  // ul의 자식 태그로 li 태그 설정
}

3) 활용 예제2

-HTML-
<h1>Hello world!</h1>
<ul></ul>

-JavaScript-
const ulEl = document.querySelector('.ul')

for (let i = 0; i < 10; i += 1) {
  const li = document.createElement('li')
  // li 태그 10개 생성
  li.textContent = `list-${i + 1}`
  // list-1... list-10 총 10개의 각각의 텍스트 내용 설정
  if ((i + 1) % 2 === 0) {
    // list 번호가 짝수인 경우만 하기 메소드 실행
    li.addEventListener('click', function () {
    console.log(li.textContent)
    // li 태그를 클릭할 시, 해당 텍스트 값 콘솔창에 보임 설정
    })
  }
  ulEl.appendChild(li)
  // ul의 자식 태그로 li 태그 설정
}