[JavaScript-생활코딩] 20. 배열과 반복문의 활용

https://opentutorials.org/module/3180/18850

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

콘솔창은 계산기처럼 사용이 가능하다.

*콘솔창 줄바꿈 : shift + enter

​

document.querySelector : CSS셀렉터

document.querySelector('a');

 

↑ a를 첫번째로 나오는 1개만 가져온다.

​

​

(여러개를 가져와야 하니까) JavaScript get element by css selector multiple 로 검색!

document.querySelectorALL('a');

↑ 배열을 가져온다

​

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

console.log() 를 하면 괄호 안에 결과가 콘솔 창에 뜬다.

그 괄호 안에 ( alist.length)로 넣으면 갯수가 나온다.

​

​

* shift+enter : 줄바꿈

​

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

↑ ('a')가 들어간 alist 전부를 파우더블루색상으로 적용​

​

콘솔에서 만든 것을 atom에 적용하면 수정 끝

​

<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');
      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>