생활코딩 13일차 [21.01.28]

<배열과 반복문의 활용>

egoing님의 강의에서 배열과 반복문을 배운 이유는 우리가 만들어온 웹 페이지에서 night모드일 때 하이퍼링크 글자들이 너무 어둡기 때문에, 이를 밝은 색으로 설정하기 위해 배열과 반복문을 배웠다. 어느 포인트에서 배열과 반복문 개념을 활용할까?

 

이 디자인을

이렇게 바꾸기 위해서 어떤 수정을 해야할까?

※document.querySelector()

JS에서 CSS 선택자로 요소를 선택한다. 단, 주의할 점은 선택자가 여러개일 경우, 첫번째 선택자의 요소만 선택한다.

CSS 선택자의 모든 요소를 선택하는 코드 : document.querySelectorAll()

 

자, 우리는 모든 a 태그의 색깔을 각각의 모드에서 수정하려고 한다. 일단 모든 a 태그를 소환해보자.

document.querySelectorAll('a'); 에 의해서 모든 a 태그들이 배열의 형태로 선택되었다.

이 배열의 요소들을 반복문을 활용하여 색깔을 수정할 수 있지 않을까?

 

① 모든 a 태그 배열로 설정하기

alist 라는 이름으로 모든 a 태그들을 배열로 만들어준다.

 

② 반복문 설정해서 배열의 요소들 소환 후 색깔 지정해주기

현재 night 모드일 때의 색상만 powderblue로 수정했기 때문에, else 문의 day 모드에서도 색상을 blue로 수정해주자.

 

이렇게 IF문과 else문 각각에 배열과 반복문을 설정하여 삽입(?)시켜서 a 태그의 색상을 수정해주었다.

 

<함수 예고>

우리는 반복문, 배열, if문 등을 이용하여 night, day 모드로 변환하는 버튼을 만들었다. 

만약에 이 버튼이 1억 개가 있다고 가정해보자. 그리고 우리는 powderblue의 색상을 pink로 수정하고 싶다. 그렇다면 우리는 어떤 난관에 봉착하는가? 1억 개의 코드를 하나씩 다 수정해야한다. 그리고 대략 25줄의 코드가 일일이 맞는지 눈으로 확인하는 것은 불가능하다.

이러한 비효율성을 없애기 위해 우리는 함수(funtion)를이용한다.

 

버튼을 만드는 코드를 위로 빼서 하나의 함수로 지정하고, 버튼이 필요한 곳마다 함수의 이름 코드로 대체하면 된다. 

이론적으로, 구체적으로 어떻게 할까?

 

<함수>

• Basic

위의 사진처럼 숫자들이 나열되어 있고, 2-1과 2-2를 여러번 반복하고 싶다면 우리는 어떤 것을 이용하면 될까? 반복문을 이용하면 된다.

만약 2와 3을 반복하고 싶은데, 차례대로 반복되는 것이 아닌 랜덤으로 반복된다면 어떻게 해야 할까? 함수를 이용한다.

 

문법 : function name () { } 

함수를 설정하고, 함수 이름을 대체해서 작성하면 함수의 내용이 나온다.

 

 

• Parameter(매개변수) & Argument(인자)

매개변수(x,y)를 통해 함수를 설정하고, 이 함수에 우리가 원하는 인자(대입값 ex. 상수)를 대입하면 값이 인자에 따라 나온다 .

합의 함수 sum을 만들어보자.

sum ( left, right ) : Parameter (매개변수)

sum ( 3, 4 ) : Argument (인자)

 

 

• Return(변환)

sum의 함수에서 sum(2,3) 은 5이다. 이때 5라는 수치대신 sum(2,3)을 가지고 다닐 수 있게 만드는 것을 return이라고 한다. 

 

-문법

Return의 문법

-쓰임

function에서 return 처리를 해주었기 때문에, 구체적인 수치인 5를 들고다니지 않고, sum(2,3)을 들고 다닌다. 

만약, 엄청나게 복잡한 함수라고 가정하고, 그리고 이 결과값이 늘 변동되는 상황이라면, 변환값을 이용하면 효율성이 증폭된다.