JavaScript코딩 - 생활코딩 19 ~ 23강
주제 : JavaScript
교재 : 생활코딩
내용 :
19강 반복문 예고
문제의식 : 버튼을 누를 때 링크가 야간모드에서 조금 밝게, 주간모드에서 조금 어둡게 표현되면 좋겠다. 링크가 몇개든 자동으로 적용될 수 있도록 말이다.
그래서 모든 <a>태그에 대해 하나하나 powderblue 색상 지정을 하는 반복문을 반들어 볼 예정이다.
20강 배열
배열(array)이 왜 필요한가? 시간이 지나면 데이터가 점점 많아짐 -> 이 때 배열은 서로 연관된 데이터를 정리해서 담아두는 수납상자 역할을 함
배열은 대괄호로 구분하며, 값과 값 사이에는 콤마(,)가 들어간다. ex) ["egoing", "leezche"]
배열을 수납상자에 담고 싶을 때는? var coworkers = ["egoing", "leezche"]를 이용해 변수 coworkers(수납상자)에 egoing, leezche이라는 배열이 담길 수 있다.
수납상자에 담긴 배열의 값을 가져오고 싶을 때는? document.write(coworkers[0]); 을 이용해 가져오고 싶은 배열의 번호를 입력하면 번호에 해당하는 값인 인덱스(egoing)가 화면에 나타난다.(인덱스 0번은 egoing, 1번은 leezche ~ )
수납상자에 들어있는 배열의 값이 몇개인지 알고 싶다면? document.write(coworkers.length);를 이용해 coworkers에 들어있는 배열 값의 개수(length)를 알 수 있다.
수납상자에 들어있는 배열에 새로운 값을 추가하고 싶다면? coworkers.push('duru')와 같이 coworkers 수납상자에 push를 이용해 새로운 값을 추가할 수 있다.
이외에도 값을 추가하는 여러방식이 있는데, 그것은 필요할 때마다 검색을 통해서 찾으면 된다!
21강 반복문
배열의 구체적인 용도 알아보기 step1.
특정 명령을 여러번 반복해야 할 경우 반복문 (Loop) 사용
while을 이용해 값이 true인 동안(false되기전)에는 while 코드 반복 실행 가능(*코드가 끝나도 반복문 값이 true라면 처음부터 다시 반복!)
이처럼 반복문은 프로그램의 실행 순서의 흐름을 제어하는 제어문(if조건문과 함께)
반복문을 종료하고 싶다면 조건을 지정할 수 있음
조건을 지정하고 싶을 때는 우선 변수를 쓸 수 있다. while문 위에 var i = 0; / while 문 안에 i = i + 1; / while(i < 3) 으로 설정해주면, 0부터 시작하는 i의 값이 while문 끝에 이르러 1씩 더하게 된다. i값이 0,1,2일 때는 while문의 i<3이 true이므로 총 3번 반복된다고 할 수 있다.
<li>태그의 2,3을 while문과 if문을 통해 3번 반복되도록 설정!
22강 배열과 반복문
이제 배열과 반복문의 시너지 알아가보자
목록을 만드는 데 있어 그 수가 엄청 많거나 수시로 수정을 해야하는 상황이라면 어떻게 할까? -> 배열과 반복문 이용!
배열 : 서로 연관된 데이터 잘 정리정돈
+ 반복문 : 배열된 데이터를 꺼내서 자동으로 순서대로 처리 가능
-> 배열에 담긴 데이터를 순서대로 꺼내서 <li> 태그를 만들 수 있음!
egoing, leezche, duru, taeho를 자동으로 목록화하려면 어떻게 해야 할까?
우선 var coworkers = ['egoing', 'leezche', 'duru', 'taeho']와 같이 변수를 이용해 배열을 만들어준다.
그 다음 21강에서 배웠듯이 var i = 0;로 변수를 설정해주고, / while(i < coworkers.length)와 document.write('<li>'+coworkers[i]+'</li>');와 i = i + 1; 를 입력해주자. 그러면 0부터 시작하는 배열의 번호가 배열의 총 갯수보다 적을 때까지 배열 안의 index가 자동으로 반복해서 출력되게 할 수 있다.
나아가 ,<li>태그 뒤에 <a href="http://a.com/'+coworkers[i]+'">를 붙여주면 각 리스트에 http://a.com/ + 배열의 index값 이 오는 링크를 자동으로 걸어둘 수도 있다!
이처럼 배열과 반복문을 이용해 한 번에 많은 수를 담으면서도 수정도 용이한 리스트를 만들 수 있다!!
23강 배열과 반복문의 활용
문제의식 : 배열과 반복문을 이용해 문제(버튼을 누를 때 링크가 야간모드에서 조금 밝게, 주간모드에서 조금 어둡게 표현되면 좋겠다) 해결해보자!
document.querySelectorAll('a');를 이용해 모든 <a>태그 가져오기 가능, 이 때 가져오는 방식을 잘 보면 배열의 형태로 가져온다! 이 말인 즉슨 배열을 이용해 모든 <a>태그에 효과를 줄 수 있다는 이야기를 의미한다! (All없으면 <a>태그 맨처음 하나만 가져옴 ㅠ)
콘솔 상의 아래와 같은 명령을 통해 시험적으로 <a>태그 테스트를 해볼 수 있는데, 우선 console.log(alist[숫자); 로 n번째 태그를 가져오거나 console.log(alist.length); alist의 몇개의 <a>태그가 있는지 알 수 있다.
또한 반복문으로 alist에 담긴 태그 순서대로 꺼내서 style속성 지정하기가 가능하다. while문을 이용해 모든 링크 나오게 + alist[i]style.color = 'powderblue'; 추가해서 색 입히면 모든 <a>태그에 powderblue 색의 효과를 입히는 것을 확인할 수 있다.
이제 콘솔 명령 코드는 빼고 이 코드를 직접 비쥬얼 스튜디오 코드에 입력해보자. 그러면 배열과 반복문을 활용해 (while값이 ture일 때까지 색상적용이 반복되며) 모든 <a>태그에 야간모드 시 powderblue색상이, 주간모드 시 blue색상이 적용됨을 확인할 수 있다!
이처럼 반복문을 통해 많은 일을 자동화해서 처리할 수 있게 된다!
그리고 다양한 데이터를 배열의 형태로 정리할 수 있다는 것도 잊지 말자~
느낀점
고생했던 조건문에 비해 반복문은 수월하게 끝난 느낌이다. 하나하나 다 따지고 드는 사고방식을 조금 내려놓기도 했고, 완벽하게 이해가 되지 않아도 코드가 직접 입력하고 구현되는 것을 봐야지 하는 생각 덕분이기도 한 것 같다. 이전같으면 반복문에 있는 코드를 하나하나 왜 이렇게 되는지 확인하고 넘어가야지라고 생각했을 것이다. 이제는 a를 통해 b를 활용할 수 있고, b를 적용해 c라는 값을 내놓을 수 있구나의 선에서 넘어가게 되는 것 같다. 물론 아직도 정리하는 데에 시간이 꽤 걸리기는 하지만, 점점 나만의 방법을 찾아가지 않을까 하는 생각이 든다!