WEB2 - JavaScript - 배열과 반복문의 활용

배열과 반복문의 활용 - https://opentutorials.org/course/3085/18850

---

<h1><a href="index.html">WEB</a></h1>

  <input id="night_day" 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'); //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="1.html">HTML</a></li>

    <li><a href="2.html">CSS</a></li>

    <li><a href="3.html">JavaScript</a></li>

  </ol>

  <h2>JavaScript</h2>

  <p>

    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.

  </p>

---

[결과화면]

디폴트는 주간모드이며 night버튼 클릭시 아래 야간모드로 변경됨