개발(Web)/Web

[JavaScript] 생활코딩 WEB2 JavaScript 19~23강

shinyelee 2020. 7. 19. 01:59

ex6.html (배열)

배열을 생성했다. coworkers라는 상자 안에 egoing과 leezche를 담았다.
출력 화면.
인덱스 설명.
인덱스 0번 값과 1번 값이 나란히 출력됐다.
이번에는 길이(length)를 알아보자.
egoing, leezche가 있으니 2가 맞다.
push로 배열 안에 데이터를 추가할 수 있다.
길이를 다시 확인해보자.
출력값이 2에서 4로 바뀌었다.


ex7.html (반복문)

반복문을 쓰지 않으면 이렇게 일일이 노가다 쳐야 한다.
밑줄 친 부분을 3번 출력해보자.
i=0(1회차 출력) → i=1(2회차 출력) → i=2(3회차 출력) → i=3(3보다 작아야하므로 반복 종료, 미출력)
3번 반복 출력에 성공했다.


ex8.html (배열과 반복)

배열과 반복문을 쓸 줄 모르면 뺑이 치는 거다.
예시는 요소가 4개 뿐이지만 400, 4000개라면 그 때는 더이상 노가다를 할 수 없다.
배열과 반복문을 써 동료 목록을 출력하자.
아까와 결과는 똑같다.
하지만 수정한 코드에도 문제가 여럿 있다.
문제점 1. 데이터를 추가하면 i < n에서 n값을 바꿔야 한다.
문제점 2. 데이터를 삭제하고 i < n에서 n값을 수정하지 않으면 빈 자리에 undefined를 출력한다.
이렇게.
length를 써서 노가다를 줄였다. 이러면 유지보수하기 좋다.
뿌-듯.
아직 안 끝났다. 각 인덱스에 하이퍼링크를 걸어보자.
ㅇㅋ 여기까지.


3.html (배열과 반복문의 활용)

배열과 반복문의 활용을 위해 3.html 파일을 약간 수정했다.
하이퍼링크가 파란색이라 야간모드에서는 잘 보이지 않는다는 문제점을 개선해보자.
실행.
성공일까?
왜(Keep your head down)...
알고보니 주간모드로 돌아갔을 때 다시 파란색으로 바꿔주는 코드를 안 써서 그런 것이었다.
다시 주간모드로 돌아가보자.
굿.


출처

반응형