배열
배열은 여러개의 데이터를 보관하는 역할을 수행하는 객체이다.
예를 들어
let numbers = [1, 2, 3]과 같이 대괄호 안에 여러개의 데이터를 입력할 수 있다.
number, string, boolean등 모든 자료형을 입력할 수 있으며 또다른 배열을 넣어 이중으로 데이터를 넣는 것도 가능하다.
배열은 2가지 방법으로 만들 수 있다.
const arr = [1, 2, 3, 4, 5]
const arr = new Array(1, 2, 3, 4, 5)- 첫번째는 배열 리터럴로 생성한 모습
- 두번째는 Array 생성자로 생성한 모습이다.
배열 객체의 특징들을 정리해보았다.
- 배열의 값 하나하나를 '배열 요소'라고 한다.
- 각 배열 요소는 인덱스 번호가 하나씩 있다. [0] 보통 이런식으로 순서로 사용한다.
- 인덱스는 0부터 시작하며 원하는 갯수만큼 포함시킬 수도 있다. 갯수가 0일경우 '빈 배열'이 된다.
배열 메소드 중 대표적인 몇개만 추려보자면
- push : 배열의 끝에 하나 이상의 요소를 추가한다.
- pop : 배열의 마지막 요소를 제거한다.
- indexOf : 가리킨 인덱스의 값과 일치하는 데이터를 반환한다. 없을 경우 '-1' 반환
- forEach: 배열 각각 요소에 대해 콜백 호출
- length : 배열의 길이 반환(메소드가 아닌 용어)
클래스리스트
classList속성은 웹 요소로부터 클래스 콜렉션을 반환하는 속성이다.
요약하면 한 엘리먼트에 적용된 클래스를 모아놓은 리스트라고 생각하면 된다.
내가 만든 예제 중 classList를 사용한 부분이있다.
여기서는 간략히 넘어가고 다음 페이지에서 자세히 공부해볼 예정이다.
popUp.classList.toggle('show');
console.log(popUp.classList.contains('show'));
});
show_btn.addEventListener('click', function () {
popUp.classList.add('show');
});- toggle과 add 메소드로 show라는 css가 담긴 클래스를 추가/제거를 조절하고 있다.
hyohyo