[es6] 배열 기초

index.html

0. 배열이 순환 출력됩니다.

value를 출력해봅니다.

---

1. 배열이 순환 출력됩니다.

arr[index]를 출력해봅니다.

---

2. 클릭한 버튼의 숫자가 출력됩니다.

결과

---

3. 버튼을 클릭하면 박스의 색이 빨갛게 변해요

---

4. 아무 박스나 클릭하면 모든 박스의 색이 빨갛게 변해요

---

5. 버튼을 클릭하면 박스가 정해진 색으로 변해요

빨

파

녹

---

6. 버튼을 클릭하면 정답이 출력되요

+ + + + + =

결과

---

돔요소를 찾는 명령어

• getElementById('아이디이름') : 엘리먼트를 반환
• getElementByTagName('태그이름') : 유사배열(HTMLCollection)배열을 반환
• getElementByClassName('클래스이름') : 유사배열(HTMLCollection)배열을 반환
• querySelector('css선택자') : 첫번째 엘리먼트를 반환
• querySelectorAll('css선택자') : 유사배열(NodeList)을 반환

anchor anchor id1 anchor

---

8-1. 취미를 선택하세요.

영화 음악 운동

선택사항

8-2. 기호식품을 선택하세요.

한식 중식 분식

선택사항

---

9. 버튼을 클릭하면 정답이 출력되요

+ + + + + =

결과

+ + + + + =

결과

+ + + + + =

결과

---

10. 클릭한 버튼의 색깔이 빨개져요

---

11. 자릿수에 따라 자동으로 커서가 넘어가요

- -

---

12. 클릭한 버튼의 글자색이 빨간색으로 토글되요

---

 

---

 

script.js

const arr = ['가', '나', '다', '라'];

//ex0번 클릭
document.querySelector('.ex0 button').addEventListener('click', () => {
  // document.querySelector('.ex1 .result').append(arr[0]);
  // document.querySelector('.ex1 .result').append(arr[1]);
  // document.querySelector('.ex1 .result').append(arr[2]);
  // document.querySelector('.ex1 .result').append(arr[3]);

  arr.forEach((value, index) => {
    document.querySelector('.ex0 .result').append(value);
  });
});

//ex1번 클릭
document.querySelector('.ex1 button').addEventListener('click', () => {
  arr.forEach((value, index) => {
    //value 는 arr 자체, index 는 순번
    document.querySelector('.ex1 .result').append(arr[index]);
  });
});
// //ex2번 클릭 <-- querySelector 한놈만 찾아서 1번만 클릭되어 alert된다.
// document.querySelector('.ex2 button').addEventListener('click', (e) => {
//   //e는 이벤트 리스너라는것.
//   alert(e.target.value);
// });

//ex2번 클릭
{
  const btnArr = document.querySelectorAll('.ex2 button');
  //btnArr = [<button>,<button>,<button>]
  btnArr.forEach((btn) => {
    // parameter 하나만 있으니까 btn 감싸고 있는 소괄호 생략 가능
    btn.addEventListener('click', (e) => {
      // parameter 하나만 있으니까 e 감싸고 있는 소괄호 생략 가능
      document.querySelector('.ex2 .result').innerHTML = e.target.value;
    }); //click
  }); //forEach
}

//ex3번 클릭
{
  document.querySelector('.ex3 button').addEventListener('click', (e) => {
    document.querySelectorAll('.ex3 div').forEach((div) => {
      div.style.backgroundColor = 'red';
    });
  }); //click
}

// //ex4번 클릭 <-- 하나만 토글해보기
// {
//   document.querySelectorAll('.ex4 div').forEach((div) => {
//     div.addEventListener('click', (e) => {
//       e.target.classList.toggle('active');
//     }); //click
//   }); //forEach
// }

//ex4번 클릭 <- 전부 토글로 바꾸기
{
  document.querySelectorAll('.ex4 div').forEach((div) => {
    div.addEventListener('click', () => {
      document.querySelectorAll('.ex4 div').forEach((div) => {
        div.classList.toggle('active');
      });
    }); //click
  }); //forEach
}

//ex5번 클릭
{
  document.querySelector('.ex5 button').addEventListener('click', () => {
    document.querySelectorAll('.ex5 div').forEach((div) => {
      div.style.background = div.getAttribute('data-bg');
    });
  }); //click
}

//ex6번 클릭

document.querySelectorAll('.ex6 input').forEach((input) => {
  input.value = Math.floor(Math.random() * 10);
});

{
  document.querySelector('.ex6 button').addEventListener('click', () => {
    let answer = 0;

    document.querySelectorAll('.ex6 input').forEach((p) => {
      answer += parseInt(p.value);
    });
    document.querySelector('.ex6 .result').innerHTML = answer;
  });
}

//ex7번

{
  // document.getElementById('id1') === document.querySelector('#id1');
  document.getElementById('id1').style.background = 'red';
  Array.from(document.getElementsByTagName('a')).forEach((e) => {
    // 짝퉁배열(유사배열(HTMLCollection))을 실제 배열로 바꾸는 명령어 --> Array.from()
    e.style.textDecoration = 'none';
  });

  Array.from(document.getElementsByClassName('a')).forEach((el) => {
    el.style.color = 'red';
  });
}

//ex8번

{
  answer = '';
  document.querySelector('.ex8 button').addEventListener('click', (e) => {
    document.querySelectorAll('.ex8 .category').forEach((category) => {
      answer = '';
      category.querySelectorAll('input:checked').forEach((checkedInput) => {
        answer += checkedInput.value;
      }); //input:checked forEach
      category.querySelector('.ex8 .result').innerHTML = answer;
    }); //category forEach
  }); //click
}

//ex9번

{
  document.querySelectorAll('.ex9 input').forEach((input) => {
    input.readOnly = true;
    input.value = Math.floor(Math.random() * 10);
  });

  document.querySelector('.ex9 button').addEventListener('click', (e) => {
    document.querySelectorAll('.ex9 .numbers').forEach((numbers) => {
      let sum = 0;

      numbers.querySelectorAll('input').forEach((input) => {
        sum += parseInt(input.value);
      });
      numbers.querySelector('p').innerText = sum;
    });
  });
}

//ex10번

{
  document.querySelectorAll('.ex10 button').forEach((button) => {
    button.addEventListener('click', (e) => {
      Array.from(e.target.parentElement.children).forEach((button) => {
        button.style.color = 'black';
      });
      e.target.style.color = 'red';
    });
  });
}

//ex11번

{
  document.querySelectorAll('.ex11 input').forEach((input) => {
    input.addEventListener('input', (e) => {
      let str = e.target.value;
      let digit = parseInt(e.target.getAttribute('data-digit'));
      if (str.length >= digit && e.target.nextElementSibling) {
        e.target.nextElementSibling.focus();
      }
    });
  });
}

//ex12번

// {
//   document.querySelectorAll('.ex12 button').forEach((button) => {
//     button.addEventListener('click', (e) => {
//       document.querySelectorAll('.ex12 button').forEach((button) => {
//         if (button.classList.value === 'active') {
//           button.classList.remove('active'),
//             e.target.classList.toggle('active');
//         } else {
//           e.target.classList.toggle('active');
//         }
//       });
//     });
//   });
// }

{
  document.querySelectorAll('.ex12 button').forEach((button) => {
    button.addEventListener('click', (e) => {
      const isActive = e.target.classList.contains('active');

      document.querySelectorAll('.ex12 button').forEach((btn) => {
        btn.classList.remove('active');
      });

      if (!isActive) {
        e.target.classList.add('active');
      }
    });
  });
}