8일차 : 배열과 반복문, 배열과 반복문의 활용, 함수예고

8일차 : 배열과 반복문, 배열과 반복문의 활용, 함수예고

 

배열과 반복문의 시너지?

 

지난 시간에 배열과 반복문이 각각 무엇인지에 대해 간단하게 배웠습니다.

오늘은 배열과 반복문을 함께 사용하면 어떤 시너지 효과가 있는지에 대해 알아보고, 활용도 해보겠습니다.

 

우선 자바스크립트 없이 예제를 만들어 보도록 하겠습니다.

Loop & Array라는 html 파일만 하나 먼저 준비해 볼게요.

 

만약 아래처럼 동료들의 이름을 나열하고 싶다고 하면,  원래는 <li></li> 마다 이름을 적어줘야 했습니다.

물론 이렇게 4개만 있을 때는 하나씩 적을 수 있겠지만 만약 수십명, 수백명이 있고 모두 나열을 해야한다면 어쩌죠?

지난 시간에 배운 반복을 시켜주면 됩니다.

 

일단 리스트를 4개 먼저 반복해 봅시다.

변수 i를 지정해주고, while을 사용해서 0부터 4까지 4번 반복합니다.

리스트 안에 이름은 어떻게 넣어야 할까요?

위에서 coworker 그룹을 설정해 두었으니, li 안에 넣어주면 됩니다.

간단하게 coworkers 그대로 입력 후 []안에 i를 넣어줍니다.

배열은 0부터 세기 때문에, 0번에 있는 아이템부터 차례로 나오겠죠.

document.write 괄호 안 부분을 보면, li는 따옴표로 감싸고 coworkers[i]를 + 를 이용해서 묶어주었습니다.

이렇게 넣으면, coworker 안의 아이템이 문자들이었기 때문에 문자+문자 형태로 삽입이 됩니다.

 

그런데 여기서 코워커 배열 안에 만약 멤버를 추가하면 어떻게 될까요?

아무것도 나오지 않습니다. while 문 안의 숫자를 4에서 5로 변경해 주어야 리스트가 추가됩니다.

반대로 한명이 빠지면 어떻게 될까요?

태호가 빠지니, undefined가 나왔습니다.??

이 코드는 이처럼 데이터를 바꾸니 그 데이터에 따라 로직을 바꿔줘야하는 불편함이 있습니다.

 

이런 문제를 해결하기 위해서는, while 문에 나오는 숫자를 그냥 coworker 배열의 개수로 변경해 주면 됩니다.

개수를 세는 명령은 length이므로, coworkers.length로 변경해주면 됩니다.

그러면 자동으로, 배열의 아이템만큼, 리스트가 표시됩니다.

이제는 배열 안에 아무리 많은 아이템이 들어있어도, 반복문을 활용해서 단 몇 줄만 작성하면 간단히 표현할 수 있습니다.

<li>문 안에 <a>를 삽입하면 이 리스트에 각각 링크도 설정할 수 있습니다!

 

간단하게 배열과 반복문을 어떻게 함께 사용하는지 알아보았습니다.

이제는 이를 웹브라우저에서 활용하는 방법에 대해 조금 더 자세히 알아봅시다.

 

 

배열과 반복문의 활용

 

지난시간에 만든 나이트모드 페이지 기억나시나요?

버튼을 클릭하면 페이지의 배경색과 글자색이 변경되도록 했는데요.

 

이번에는 그 파일에 하이퍼링크를 추가한 후, 데이모드와 나이트모드에 색상이 바뀌도록 설정해 보겠습니다.

지난번과 차이점은 한번에 body 전체의 색상을 변경하는 것이 아니라, 하이퍼링크만 선택해서 변경하는 것입니다.

 

만약 하이퍼링크가 하나가 있다면, 쿼리선택자에서 그 하나의 하이퍼링크를 선택한 후 변경하면 되겠지만, 만약 하이퍼링크가 100개, 1000개 있다면 어떨까요?

 

우선은 나이트모드 페이지에 간단히 몇 개의 하이퍼링크를 추가해 보겠습니다.

body 부분에 제목과 1~4번까지 리스트를 추가해서 하이퍼링크를 ex1.html로 똑같이 걸어두었습니다.

모든 하이퍼링크를 한꺼번에 선택하기 위해 우선 쿼리선택자에서 같은 종류의 쿼리를 모두 선택하는 명령문을 검색!

document.querySelectorAll 을 찾아냈습니다.

검색을 통해 다양한 클래스를 한번에 선택하는 여러가지 방법들을 함께 배울 수 있었습니다.

 

일단 간단하게 document.querySelectorAll('a')를 이용해서 하이퍼링크를 모두 선택해 보았습니다.

이렇게 선택한 하이퍼링크를 하나의 그룹으로 만들어 보겠습니다.

var = alist = document~를 만들어서 넣어주면 됩니다.

일단 var alist를 만들어주고, i도 만들어 줍니다.

night버튼을 클릭하게 되면 i는 alist의 전체 개수가 되기 전까지 계속 증가하면서 모든 하이퍼링크의 색을 powderblue로 바꿉니다. day모드를 클릭하게되면, pink로 색상이 변경되구요.

위에 있는 버튼 안에 이러한 명령을 넣어주었기 때문에, 아래에 있는 버튼은 눌러도 색상이 변하지 않습니다.

day 상태에서 아래의 day를 누르거나, night 상태에서 아래 night 를 누르면 정 반대의 상황이 나오곤 합니다. 왜냐면 아래의 버튼은 배경색과 글자색만 바꿀 뿐, 하이퍼링크의 색상은 변경되지 않기 때문입니다.

 

이렇게 html에서 배열과 반복문을 함께 사용하면서 활용하는 방법을 배웠습니다.

저는 쉬운듯 어려운듯 아직은 잘 와닿지는 않는 것 같아요ㅠㅠㅎ 아무래도 활용을 좀 더 해봐야 할 것 같습니다.

 

 

함수예고

 

반복문예고에 이어 이번에는 함수예고입니다. 함수도 학교 다닐 때 쉽지 않았죠?

반복문과 함수는 이처럼 예고편이 필요한 만큼 중요하고 복잡한 내용이라고 생각합니다.

 

함수는 영어로 function 이며 코드가 많아질 때 잘 정리정돈하기 위한 수납상자라고 생각하면 됩니다.

만약 우리가 방금 만든 버튼과 똑같은 기능을 하는 버튼이 수십개가 있다고 생각해 봅시다.

 

우리 예제에는 단 두 개의 버튼이 있는데, 같은 내용을 적지 않아서 위 버튼과 아래 버튼이 각각 다르게 작동했습니다.

버튼이 수십개가 있는 경우에, 저 긴 코드를 모두 복사해서 붙여넣고, 색상을 수정하고 싶을 때마다 각각의 코드를 수정해야 합니다. 그렇게되면 절망적인 상황에 빠지겠죠.

 

반복되는 코드에 function을 이용해 nightdayhandler라는 이름을 붙여주고, 반복된 부분을 모두 제거해 줍시다.

편하게 분리하기 위해 head 안에 script를 넣어주었습니다.

(html과 css를 따로 분리하는 것처럼 복잡한 자바 명령을 넣을 때에는, 자바용 파일을 따로 만들어 주는 것이 좋아요!)

일단 nightdayhandler라는 새로운 function을 만들고, 이름은 self로 넣어주었습니다.

이렇게 따로 함수를 만들어 놓으면, body 안의 onclick 부분은 너무 간단해지죠?

그럼 더 자세한 내용은 함수 본편에서 배우도록 합시다.