JS 편 - 5일차

 

5일차

 

 

 

---

19. 반복문 예고

• 기존 예제에서 불만족스러운 부분을 찾아보자.
• night 버튼을 누르면 링크들이 너무 어둡다. 반면 밝은 색으로 바뀌었을 때는 링크가 선명하게 보이는 것을 볼 수 있다. 즉. 버튼을 누를 때마다 어두운 경우는 조금 밝게, 밝은 경우에는 조금 어두운 색으로 링크가 표현되었으면 좋겠다는 것이다.
• 모든 링크에 대해 style 속성의 값을 조절해서 코드를 작성해도 되겠지만, 링크가 1억 개라면 1억 번 반복해야한다. 그러면 코드의 양이 늘어나며, 유지보수가 힘들어진다.
• 이런 문제를 해결해주는 기능이 바로 반복문이다.
• 기존 예제를 수정하는 것은 나중이 될 것이고, 일단 다음 시간부터 자바스크립트의 기능으로 맨 먼저 배열을 알아보고 그 다음으로 배열을 이용해 반복문을 살펴볼 것이다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=ANDqF-NlWqQ

 

---

 

 

 

20. 배열

• 데이터가 많아짐에 따라 그 많은 데이터를 그냥 둘 수 없기 때문에 데이터 중에서 서로 연관된 데이터를 잘 정리 정돈해서 담아두는 일종의 수납상자를 배열(array)이라 한다.
• 문자열은 따옴표로 시작해서 따옴표로 끝나게 된다. 배열은 대괄호로 시작해서 대괄호로 끝난다. 그리고 대괄호 안에 값들을 여러 개 적을 수 있으며, 값과 값 사이는 콤마(,)로 구분한다.
• 먼저 coworkers라는 배열을 만들고 배열에 들어있는 항목을 가져오는 방법을 살펴보자.

<h1>Array</h1> 
<h2>Syntax</h2>
<script>
   var coworkers = ["egoing", "leezche"];
</script>

<h2>get</h2>
<script>
   document.write(coworkers[0]); // egoing
   document.write(coworkers[1]); // leezche
</script>

• 위의 코드와 같이 coworkers[0]이라고 쓰면 'egoing'이 나온다. 즉, 첫 번째 자리에 있는 값은 0번째라는 뜻이다. 이를 인덱스(index)라고 한다. 그러므로 인덱스 1은 'leezche'라는 데이터를 가르킨다.

 

• 다음으로는 배열에 들어있는 값이 몇 개인가를 체크해보자.

<h2>count</h2>
<script>
   document.write(coworkers.length); // 2
</script>

• 위의 코드와 같이 배열에 length를 지정하면 배열 안에 값이 몇 개 있는지 알려준다. 즉 coworkers 배열의 length의 값은 2이다.

 

• 다음으로는 배열에 데이터를 추가하고 싶을 경우를 알아보자.

<h2>add</h2>
<script>
   coworkers.push('duru');
   coworkers.push('taeho');
</script>

<h2>count</h2>
<script>
   document.write(coworkers.length); // 4
</script>

• push( )를 통해 배열에 데이터를 추가할 수 있고, 위의 코드에서는 2개를 추가하였고 length를 알아보면 값은 4이다.
• push( )는 배열의 끝에 데이터를 추가하는 역할을 한다. 만약 데이터를 앞쪽에 추가하고 싶거나 중간에 넣고 싶다면 어떻게 해야 할까? 
• 다 외울 필요없이 나중에 직접 코드를 작성하면서 필요성이 생길 때 검색 엔진에 'javascript array'로 검색하여 공부하면 된다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=aBJzzhQ6y-o

 

---

 

 

 

21. 반복문

• 반복문(loop, 루프)에 대해서 살펴보자.
• 위에서부터 아래로 순서대로 코드를 실행하는 것이 프로그램의 기본적인 실행 순서이다. 필요에 따라서는 2번째와 3번째로 실행되어야 하는 명령을 여러 번 반복해야 할 경우가 있다.
• 이를 위한 기본적인 방법은 반복적으로 코드를 복사해서 붙여넣는 식으로 작성하는 것이다.
• 하지만 복사해야할 코드가 1억 개라면 아마 붙여넣는 것이 불가능할 것이다.
• 아래의 예제를 보자.

<h1>Loop</h1>
<ul>
    <script>
        document.write('<li>1</li>');
        var i = 0;
        while(i < 3){
            document.write('<li>2</li>');
            document.write('<li>3</li>');
            i = i + 1;
        }
        document.write('<li>4</li>');
    </script>
</ul>
<!--
1
2
3
2
3
2
3
4
-->

• 위의 코드는 2번과 3번 코드를 3번 반복한 코드이다.
• 여기서 while이라는 것은 반복문의 키워드이며, 그 밖에 for 문도 있지만 먼저 while만 다루기로 한다.
• while 괄호 안에는 불리언 데이터 타입이 들어오며, 만약 괄호 안의 내용이 true인 동안에는 while 문 안의 코드가 반복적으로 실행된다, 그리고 괄호 안의 내용이 false가 될 때 멈추게 된다.
• 즉, 반복문이라는 것은 순서대로 실행되는 프로그램의 흐름을 제어하는 제어문이라고 할 수 있다.
• 그래서 항상 반복문이 언제 종료될 것인가를 잘 지정하는 것이 중요하다.
• 몇 번 반복시키기 위해서는 변수가 필요하며, 관습적으로 변수 i에 그런 역할을 부여한다. 그리고 반복문이 실행될 때마다 i의 값을 1씩 증가시키는 것이다. i = i + 1은 '기존의 i의 값에 1을 더한 결과를 i의 새로운 값으로 준다'라는 뜻이다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=ZupPmuWPSdE 

 

---

 

22. 배열과 반복문

• 배열과 반복문을 함께 활용해 각각의 개념과 기능이 결합해서 어떤 강력한 시너지를 내는지 살펴보자.
• 서로 연관된 데이터들을 담는 방법은 배열이었다. 그리고 그 배열에 담긴 데이터를 순차적으로 꺼내서 만드는 역할을 반복문이 할 수 있다.
• 다음 예제를 보자.

<h1>Loop & Array</h1> 
<script>
   var coworkers = ['egoing', 'leezche', 'duru', 'teaho'];
</script>
<h2>Co workers</h2>
<ul>
   <script>
        var i = 0;
        while(i < coworkers.length){
            document.write('<li><a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>') ;
            i = i + 1;
        }
   </script>
</ul>

• coworkers라는 배열을 만들고 반복문이 실행될 때마다 원소값을 하나하나 가져와 <li>태그 안에 배치된다.
• 그리고 while문의 조건도 coworkers.length를 사용하여 배열의 원소 갯수가 바뀌더라도 더이상 로직을 바꿀 필요가 없게 되었다.
• 바로 이것이 배열과 반복문이 결합했을 때 얻을 수 있는 폭발적인 효과이다.
• 즉, 배열이라는 것은 순서대로 연관된 데이터를 잘 정리 정돈하는 것이고, 반복문은 순서대로 배열에 담긴 데이터를 하나씩 꺼내서 자동화된 처리를 할 수 있는 문법이기 때문에 이 두 개의 기능은 '환상의 콤비' 같은 역할을 할 수 있다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=BjkfkKdlvLo

 

---

 

23. 배열과 반복문의 활용

• 기존 예제에 야간 모드일 때는 링크들이 밝게 표시되고, 주간 모드일 때는 다소 어두운 계열로 링크가 표시되게 해보자.
• 먼저 기존 예제에서 개발자도구를 키고 console에서 아래와 같이 작성한다.

document.querySelector('a') // <a href="index.html" style="color: blue;">WEB</a>

• CSS에서 a는 이 웹 페이지의 모든 <a> 태그를 가져오라는 의미인데, 결과적으로 하나만 가져온다. 그래서 다른 명령어가 필요하다.
• 'javascript get element by css selector multiple' 로 검색해보면 검색 결과에서 querySelectorAll을 사용하라고 하며 이것도 검색하여 보면 사용 방법을 알 수 있다.
• 그리고 아래와 같이 작성한다.

document.querySelectorAll('a') // NodeList(4) [a, a, a, a]

• 여기서 대괄호는 배열이다. 물론 querySelectorAll( )의 결과는 배열이 아니고 노드 리스트지만 배열이라고 생각하자.
• 그럼 다음과 같이 사용할 수 있다.

var alist = document.querySelectorAll('a');
console.log(alist[0]); // <a href="index.html" style="color: blue;">WEB</a>
console.log(alist[1]); // <a href="1.html" style="color: blue;">HTML</a>
console.log(alist.length); // 4

• 이것을 이용하여 반복문으로 모든 링크를 출력해보자.

var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
    console.log(alist[i]);
    i = i + 1;
}
/*
<a href="index.html" style="color: blue;">WEB</a>
<a href="1.html" style="color: blue;">HTML</a>
<a href="2.html" style="color: blue;">CSS</a>
<a href="3.html" style="color: blue;">JavaScript</a>
*/

• 이것을 응용하여 기존 예제에서 <a> 태그들의 style값이 어떻게 바뀌는지 보자.

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

• 이렇게 입력하면 <a>태그들의 텍스트 색상이 powderblue로 변경되는 것을 볼 수 있다.
• 이것을 기존 예제에 작성하면 아래와 같다.

<!--3.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>WEB1 - JavaScript</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </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;
                }
            }
        ">
        <div id="grid">
            <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>
            <div id="article">
                <h2>JavaScript</h2>
                <p>
                    JavaScript, 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).
                    The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O.
                    JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js.
                    Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.
                </p>
            </div>                          
        </div>
    </body>
</html>

• 이처럼 반복문을 이용하면 아주 많은 일을 손쉽게 처리할 수 있다. 그렇기 때문에 중요한 개념이다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=hZdBDoYHd7E

 

 

 

---

해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---