JS- 배열과 반복문의 활용

Jeongwon·2022년 1월 14일

Java Script

목록 보기

14/14

🦝콘솔창 활용

1) querySelectorAll: 선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환

document.querySelectorAll('a')

👉결과: NodeList(4) [a, a, a, a]

2) a태그들을 'alist'에 담음

var alist = document.querySelectorAll('a');
console.log(alist[0]);

👉결과: <a href="index.html">WEB</a> ->첫 번째 a태그

3) a태그들의 개수 반환

var alist = document.querySelectorAll('a');
console.log(alist.length);

👉결과: 4

🦝반복문을 이용하여 a태그로 묶인 글자를 powderblue색상으로 바꾸기

var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length) {
    alist[i].style.color = 'powderblue';
    i = i + 1;
}

🦝밤모드에는 a태그 글자가 powderblue로, 낮모드에는 글자가 blue로 바뀌게 하기

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>WEB1- JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>

    <input type="button" value="night" onclick = "
    var target = document.querySelector('body');
    if(this.value=== 'night') {
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = 'day'

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length) {
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = 'night'

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length) {
        alist[i].style.color = 'blue';
        i = i + 1;
      }
    }">
    <ol>
      <li><a href="html.html">HTML</a></li>
      <li><a href="css.html">CSS</a></li>
      <li><a href="javascript.html">JavaScript</a></li>
    </ol>
    <h2>JavaScript</h2>
    <p>
      JavaScript (/ˈdʒɑːvəˌskrɪpt/),[10] often abbreviated JS, is a
      programming language that is one of the core technologies of the
      World Wide Web, alongside HTML and CSS.[11] Over 97% of websites
      use JavaScript on the client side for web page behavior,[12] often
      incorporating third-party libraries.[13] All major web browsers have
      a dedicated JavaScript engine to execute the code on users' devices.
      JavaScript is a high-level, often just-in-time compiled language that conforms
      to the ECMAScript standard.[14] It has dynamic typing, prototype-based
      object-orientation, and first-class functions. It is multi-paradigm,
      supporting event-driven, functional, and imperative programming styles.
      It has application programming interfaces (APIs) for working with text,
      dates, regular expressions, standard data structures, and the Document
      Object Model (DOM).
    </p>
  </body>
</html>