5/9 생활코딩

오늘의 진도:

 WEB2 - JavaScript

  반복문 예고~배열과 반복문의 활용

 

1. 반복문 예고

night 버튼의 불만족 하나 더

- night 모드에서 링크 글자 색깔이 너무 어두워서 잘 안 보인다.

 

→ 얘를 클릭했을 때, 이 웹페이지에 있는 모든 링크의

style 속성값을 밝게 바꿔주는 코딩을 할 것이다.

 

이 웹 페이지에 있는 모든 태그를 가져온 다음에

그 태그 하나하나에 대해서

반복적으로 powder blue 컬러를 지정한다는 내용의 코드이다.

 

다음 시간부터는 배열과,

배열을 이용해서 반복적인 작업을 처리하기 위한 반복문을 배울 것이다.

 

2. 배열(array)

집에 살림이 늘어나면 점점 마음이 힘들어지고

책장이나 수납상자 등을 사거나

방이 여러개 있는 집으로 이사를 갈 수도 있다.

 

이런 식으로 집에 있는 사물이 많아질수록

우리는 그 사물들을 잘 정리정돈할 필요성이 생기고

그 필요성에 따라 그것을 정리정돈할 수 있는

여러가지 수납공간들을 마련하게 된다.

 

코딩과 프로그래밍도 마찬가지이다.

 

프로그래밍을 하면 굉장히 많은 데이터를 다루게 되는데,

그 데이터들은 제각각 성격이 다 다르다.

데이터가 많아짐에 따라

그냥 코딩을 하는 걸 통해서는 너무 너무 복잡해서

결국에는 인간의 한계에 도달하면서

코딩, 프로그램을 더 복잡하게 못하는 순간에 도달한다.

즉, 사람이 감당할 수 없는 소프트웨어가 된 것이다.

 

그럼 어떻게 해야 될까?

집으로 다시 돌아오면

우리는 음식들은 냉장고에 넣고

그 다음부터는 냉장고 하나만 생각하면 된다.

또는 특정 사물들은 수납상자에 넣고

그 다음부터는 그 수납상자만 생각하면 된다.

→ 머릿속이 단순해지는 효과

 

배열도 비슷하다.

데이터가 많아짐에 따라서

그 많은 데이터를 그냥 둘 수가 없기 때문에

그 데이터 중에 서로 연관된 데이터를 잘 정리정돈해서

담아 두는 일종의 수납상자, 그것이 배열(array)이다.

 

문자는 큰 따옴표로 시작해서 큰 따옴표로 끝난다. "

배열은 대괄호로 시작해서 대괄호로 끝난다. []

이 안에 여러가지 값을 적을 수 있고, 콤마로 구분한다.

두 가지 값을 만들었고

이 배열을 coworkers라는 변수에 담았다.

 

= 새로운 수납상자를 집에 갖다 놓으면서

그 안에 물건을 2개 넣어 놓은 것과 같은 상황이다.

위와 같은 형식으로 배열의 데이터를 가져올 수(get) 있다.

※ 첫번째가 1번이 아니고 0번이다.

이것을 index 0번, index 1번,.. 이렇게 부른다.

 

배열 안의 값이 몇 개인지 알아보기

검색어: javascript array count

length를 사용하면

 

숫자 2가 출력된다.

 

배열에 데이터 추가하기

검색어: javascript array add data

push를 사용하여 두 명을 추가하였다.

총 4명이 되었다.

 

이외에도 여러가지 기능이 있는데, 검색해서 찾으면 된다.

검색어: javascript array

여러가지 기능이 나온다.

3. 반복문(Loop)

이렇게 순서대로 실행되는 것이

프로그램의 기본적인 실행 순서이다.

 

두 번째와 세 번째 명령을 세 번 반복해서 실행하려면?

 

반복문의 키워드는 while이다. (for도 있다.)

 

if문에서는 if 뒤의 괄호 안에

true나 false, 즉, 불리언 데이터 타입이 들어간다.

 

while문도 마찬가지다.

괄호 안에 true나 false 둘 중에 하나가 들어갈 수 있고

그것이 true인 동안은 중괄호 안에 있는 코드들이 반복적으로 실행된다.

그것이 false가 될 때까지.

이대로 실행시키면 무한 반복 되므로 종료를 지정해준다.

 

세 번만 반복하기 위해서 이 두 줄의 코드가 몇 번 실행됐는지를 변수에 적어놓는다.

관습적으로 그 변수 이름은 i로 한다.

i의 초기값을 0으로 하고,

이 반복문이 한 번 실행될 때마다 i 값을 1씩 증가시킨다.

4. 배열과 반복문

JavaScript 없이 하는 방법

JavaScript로 배열과 반복문을 사용하는 방법

coworkers라는 변수를 만들고,

이 변수가 가리키는 배열에 데이터들을 넣었다.

※ 배열의 각 항목들을 원소(element)라고 한다.

 

이 때 i 값이 index 값과 일치하므로 다음과 같이 입력하면 된다.

그런데 문제는 멤버가 한 명 더 추가되면 while 뒤의 괄호를 i < 5로 바꿔줘야 한다는 것이다.

 

그리고 멤버가 줄어들면 undefined로 뜬다.

 

데이터가 바뀌면 그 바뀐 데이터에 따라서

유연하게, 다이나믹하게, 일래스틱하게

바뀌는 것이 좋다.

 

5 대신에 'coworkers 배열에 담겨있는 원소의 수'

즉, coworkers.length를 입력하면 된다.

또한 다음과 같이 입력하면

http://a.com/egoing

http://a.com/leezche

http://a.com/duru

http://a.com/taeho

각각의 링크가 입력된다.

 

5. 배열과 반복문의 활용

ex09.html

이제 1.에서 말한 night 모드에서 링크 글자 색깔을 밝게 하는 것을 해볼 것이다.

 

검사 - 개발자 도구에서 Elements 탭에서 esc를 눌러서 밑에 콘솔 탭이 나오도록 했다.

 

document.querySelector('a');

이것은 이 웹페이지에 있는 모든 a태그라는 CSS 셀렉터이다.

그런데 엔터를 치면 하나만 가져온다.

 

왜냐하면 querySelector라는 메소드=함수=명령은

a태그에 해당되는 태그 중

첫 번째 등장하는 것 하나만 가져오는 특성을 가지고 있기 때문이다.

 

그러면 여러개 가져올 수 있도록 검색을 해보자.

검색어: javascript get element by css selector multiple

 

이건가? 싶으면 다시 querySelectorAll을 검색해본다.

검색어: javascript querySelectorAll

https://www.w3schools.com/jsref/met_document_queryselectorall.asp

HTML DOM querySelectorAll() Method

이걸 참조해서 다음과 같이 치고 엔터를 친다.

document.querySelectorAll('a');

(위쪽 화살표키를 누르면 다시 타이핑할 필요 없이 아까 썼던 것이 나타난다.)

대괄호는 배열을 의미한다.

(querySelectorAll의 결과가 정확히는 배열이 아니고 노드 리스트이지만, 배열이라고 생각하면 된다.)

 

이렇게 만들어진 결과를 alist라는 변수에 담고 쉬프트+엔터키를 눌렀다.

console.log()를 하면 ()안의 결과가 이 콘솔 창에 출력된다.

alist의 첫 번째 태그가 출력되었다.

 

그리고 배열답게 .length를 이용해서

몇 개의 a 태그를 찾았는지를 출력할 수 있다.

 

그러면 이제 반복문을 이용해서

alist라는 변수에 담겨있는 태그들을 하나하나 꺼내서

그것의 style 속성을 지정할 수 있을 것이다.

 

이렇게 모든 a 태그를 출력해보았다.

 

(위쪽 화살표키를 누르면 다시 타이핑할 필요 없이 아까 썼던 것이 나타난다.)

모든 a 태그들의 color 값을 파우더블루로 바꾸도록 했다.

위의 화면에서 color 값들이 파우더블루로 바뀐 것을 볼 수 있다.

 

그러면 이것을 그대로 복사해서 야간모드에 붙여넣기를 한다.

console.log(alist[i])는 필요 없으니까 지운다.

 

그리고 주간모드에도 붙여넣기를 하고 색깔은 blue로 한다.

 

검사 - 개발자 도구의 elements 창을 보면

night 모드가 되면 파우더블루로 바뀌고,

day 모드가 되면 블루로 바뀌는 것을 볼 수 있다.