1. 배열(Array)
이름과 인덱스로 참조되는 정렬된 값의 집합
배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다.
<script>
var animals = ["dog", "cat", "rabbit"];
</script>
1) 배열 안의 첫번째 값을 문서에 나타내기
<script>
var animals = ["dog", "cat", "rabbit"];
document.write(animals[0]);
</script>--> dog가 화면에 출력된다. ※ index는 0부터 시작함
2) 배열 안의 데이터 개수 세기 (length)
<script>
var animals = ["dog", "cat", "rabbit"];
document.write(animals.length);
</script>--> 3이 화면에 출력된다.
3) 배열 끝에 데이터 추가하기 (push)
<script>
var animals = ["dog", "cat", "rabbit"];
animals.push('lion');
document.write(animals);
</script>--> dog,cat,rabbit,lion이 화면에 출력된다.
2. 반복문(Loop)
<body>
<h1>Loop</h1>
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>4</li>');
</script>
</ul>
</body>
1, 2, 3, 4 네 개의 리스트로 이루어진 본문에서 2와 3을 세 번 반복하고 싶다면
즉, 1, 2, 3, 2, 3, 2, 3, 4 로 나오게 하고 싶은 경우 두 번째와 세 번째 리스트를 감싼 반복문을 써야 한다.
While문
while(조건) {
구문;
}
조건이 참이면 while문의 블록문을 계속 실행하게 된다.
반대로 거짓이라면 while문 안의 구문 실행을 멈추고 블록문을 벗어나
다음 구문을 실행하게 된다.
while(true): 계속 반복(무한 루프)
while(false): 아예 반복하지 않음
while(a < 3): 변수 a값이 3보다 작은 상태면 true가 되어 계속 반복하고
3과 같거나 크면 while문을 종료함
3. 배열과 반복문의 활용(1)
① 변수 animals에 4개 데이터 값을 가진 배열을 만든다.
② 변수 i의 값에 0을 주고, while 조건문의 조건을 i<4라고 쓰고, 조건문 끝에 i = i+1을 쓴다.
③ i가 순차적으로 0, 1, 2, 3이 되는 동안 i번째 인덱스 값이 나타나도록 <li> 사이에 '+animals[i]+'를 써준다.
데이터의 개수가 변할 수 있으므로 자동으로 처리해주기 위해서는
i < 4 대신 i < animals.length를 써준다.
나아가 animals 리스트들에 링크를 넣고 싶다면
4. 배열과 반복문의 활용(2)
1) querySelector와 querySelectorAll의 차이점
querySelector()와 querySelectorAll() 함수는 둘 다 HTML 문서 내에서 요소를 선택한다는 공통점이 있다.
그러나
querySelector() 함수는 HTML 문서 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소를 반환하지만,
querySelectorAll() 함수는 일치하는 모든 요소를 배열로 반환한다는 큰 차이점이 있다.
2) document.querySelectorAll('a')의 결과(배열)를 변수 'alist'에 담고 console.log(); 명령해서 결과 확인해보기
※ console.log는 괄호 안의 메세지를 콘솔창에 출력하는 명령어다.
가장 대표적인 디버깅 방법으로 쉽게 말해, 자바스크립트가 출력을 하도록 도와주는 기능이다.
3) while문 작성
4) alist[i]에 powderblue 색상 입히기
alist[i].style.color = 'powderblue';
5) Atom으로 돌아와서 코드 작성
console.log(alist[i])는 console에서 결과를 눈으로 확인하는 용도이기 때문에 Atom에서는 삭제
