[4일차] #23. 배열과 반복문의 활용

---

4일차

---

수업의 목적

HTML과 JavaScript의 만남 1 (script 태그)

HTML과 JavaScript의 만남 2 (이벤트)

HTML과 JavaScript의 만남 3 (콘솔)

데이터타입 - 문자열과 숫자

변수와 대입 연산자

웹브라우저 제어

CSS 기초

제어할 태그 선택하기

프로그램, 프로그래밍, 프로그래머

조건문 예고

비교 연산자와 Boolean 데이터 타입

조건문

조건문의 활용

리팩토링(refactoring)

반복문 예고

배열

반복문

배열과 반복문

배열과 반복문의 활용

함수예고

함수

함수의 활용

객체예고

객체

객체 활용

파일로 쪼개서 정리 정돈하기

라이브러리와 프래임워크

UI vs API

수업을 마치며

---

#23. 배열과 반복문의 활용

---

▲ 예제 가져오기

---

<a href="1.html" style="color: blue;">

---

▲ 콘솔창 열고 <a>태그 가져오기

---

document.querySelector('a')

---

▲ 다중의 <a>태그 가져오기

---

□ 검색 : Javascript get element by css selector multiple

□ 검색 : document.querySelectorAll

□ 예제확인 후 적용 

- document.querySelectorAll('a') ⇒ Nodelist(4) [a,a,a,a] : <a>태그가 4개 있음을 보여줌 

- var alist = document.querySelectorAll('a');   
  console.log(alist[0]);  ⇒  <a>태그 순서대로 보여줌

---

▲ <a>태그 리스트 보여주기

---

var alist = document.querySelectorAll('a');
var i = 0;
while(1 < alist.length){
    console.log(alist[i]);
    i = i + 1;
    }

---

▲ <a>태그 글자색 일괄 바꿔주기

---

var alist = document.querySelectorAll('a');
var i = 0;
while(1 < alist.length){
    console.log(alist[i]);
    alist[i].style.color = 'powderblue';
    i = i + 1;
    }

---

▲ html 파일에 '복사 + 붙여넣기'

▲ 주간모드 / 야간모두 글자색 설정 후, 변경되었는지 확인하기

Chrome Console Clear Shortcut ⇒ Ctrl + L

---