본문 바로가기
Web/javascript

JavaScript 배열

by Devwon99

● 배열


JavaScript는 타언어와 마찬가지로 배열이 존재하며, 인덱스, 사용법 등이 유사하다.

var 배열명 = ['요소', '요소', ...] 으로 선언하며 선언과 동시에 초기화, 혹은 빈 배열 선언이 가능하다.

코드
결과

배열은 반복문과 함께 사용하면 더 효율적으로 코드를 작성할 수 있다. 

 

● 반복문과 배열을 활용한 프로젝트 개선


 

JavaScript를 활용한 웹 페이지 nightmode, daymode

위의 코드에서 document.querySelector()는 html문서 내에서 ()내의 값과 일치하는 첫번째 태그를 반환한다. ()내의 값과 일치하는 태그가 없다면 null을 반환한다. 이후의 .style.은 앞의 태그의 스타일 속

devwon-1999.tistory.com

해당 프로젝트에서 진행했던 코드 중에서 새로운 a태그(링크)를 추가하였을때 나이트모드에서 파란색과 검정색이 대비를 이뤄 너무 강하게 보이는 현상이 있어 배열과 반복문을 활용하여 개선하려 생각했다.

day mode 결과
night모드 결과

나이트모드는 사진과 같이 보기 안좋다. 해당코드의 조건문에서 각각의 조건별 상황을 더 부여해줬다.

변경된 코드

변경된 코드는 조건문의 if 절의 this.value = 'day'; 와 else 절의 this.value = 'night'; 뒷부분이다.

먼저  document.querySelectorAll('a'); 을 통해 모든 a태그를 불러와 alist에 배열형태로 담고, 반복문을 통하여 모든 a태그의 색상을 지정한 색상으로 변경해주는 방식이다.

'Web > javascript' 카테고리의 다른 글

JavaScript 함수  (0) 2024.03.24
JavaScript 반복문  (0) 2024.03.21
JavaScript 조건문  (0) 2024.03.15
JavaScript 자료형, 변수, 연산자  (0) 2024.03.15
JavaScript를 활용한 웹 페이지 nightmode, daymode  (0) 2024.03.15