<Array>
1) 변수 fruits에 배열 만들어 원소 저장
var fruits = ["apple", "banana"];
2) 배열의 길이 측정
fruits.lenth
3) 인덱스를 이용해 배열의 원소 선택
fruits[0] fruits[fruits.length-1]: 배열은 0번째부터 시작하기 때문에 마지막 원소는 (length-1)번째에 위치한다. 따라서 fruits의 (fruits.length-1)번째 원소는 배열의 가장 마지막 원소를 뜻한다.
4) 배열의 끝에 원소 추가
fruits.push("orange");
5) 배열의 끝부터 원소 삭제 (마지막 원소 삭제)
fruits.pop();
배열의 앞부터 원소 삭제 (첫번째 원소 삭제)
fruits.shift();
+) document.write: 열린 문서에 텍스트 스트링 작성
<Loop>
- while문
- while(조건문)
실행문
- 조건문이 참이기만 하면 실행문을 반복해서 수행
- 무한 루프에 빠지지 않도록 조건문을 잘 설정할 필요가 있다.
<Array+Loop>
만약 배열의 원소 개수를 세서 while문의 i값, 즉 반복 횟수를 직접 조절하려고 한다면 (ex. while(i < 4)) 배열의 원소가 바뀔 때마다 직접 바꿔줘야 할 것이다.
이런 비효율적인 일을 피하기 위해 배열의 길이를 측정하는 메소드를 넣어주자.
→ fruits 배열에 원소를 몇 개를 추가하거나 삭제해 원소의 개수가 바뀌더라도 while문의 i값을 fruits.length로
조절하고 있기 때문에 원소의 개수가 바뀔 때마다 while문을 수정해줄 필요가 없다. (logic이 탄력적으로 조절된다)
<array와 loop 적용>
- night ver에서는 모든 a태그들의 폰트 색을 powderblue로, day ver에서는 모든 a태그들의 폰트 색을 blue로 설정
- alist라는 변수 선언해 querySelectorAll로 모든 a 태그들을 찾아 저장해준다.
cf) querySelector는 해당 결과값이 여러 개면 가장 앞에 있는 것을 찾는다.
querySelectorAll은 해당하는 모든 결과값을 찾는다.
- while문의 조건문을 i < alist.length로 설정해 나중에 배열의 원소 개수가 변경되더라도 탄력적으로 반응할 수 있도록 한다.
- alist[i].style.color = 'powderblue'; : alist의 모든 원소들의 color값을 powderblue로 설정 (반복문을 사용해
배열의 모든 원소들, 즉 모든 a 태그들에 적용)