JavaScript (1)

JavaScript

window객체에서 자주 쓸 것

- window : 브라우저 전체를 담당하는 객체

- document : 화면을 담당하는 객체이다. 한 페이지를 생각하면 쉽다.

속성들과 메소드들이 들어있는 객체를 DOM객체라고 하며 document도 DOM 객체가 된다.

배열에서 요소 뽑기

- push : 배열 마지막에 추가

- pop : 배열의 마지막 요소 뽑아냄

- unshift : 배열 처음에 추가

- shift : 배열 처음 요소 뽑기

- splice(위치, 개수) : 위치로부터 개수만큼 요소를 뽑아냄. 이 때 배열의 형태로 뽑게 된다.

문자 나누고 합치기

- 문자.split(구분자) : 구분자로 나누어진 배열화

- 배열.join(구분자) : 구분자가 포함된 합쳐진 문자열

목표하는 태그 지정

- e.target : 클릭된 자신

- e.parentNode : 클릭된 개체의 부모 태그

- parentNode를 뒤에 계속 붙이게 되면 루트 태그에 도달할때까지 계속 부모를 찾아 올라가게 된다.

배열 관련

- forEach를 이용하면 배열 내부에서 반복문을 수행할 수 있게 된다.

- Array(숫자)를 이용하면 숫자만큼의 길이를 가지는 배열을 선언하게 된다. 이 때 각 인덱스는 empty로 채워져 반복문 수행이 불가하므로 fill 메소드를 이용해 undefined로 모든 요소를 채울 필요성이 있다.

- Array()를 통해 배열을 저장하는 것은 보통 효율적이지 않아 쓰이지 않지만 큰 크기의 배열을 한 번에 선언하고자 할 때는 예외적으로 쓰이곤 한다.

- sort메소드를 이용하면 배열의 각 요소들을 정렬할 수 있게되는데 기본적으로는 사전적인 순서에 따라 가장 앞의 숫자들의 크기부터 비교하게 된다. 이를 해소하기 위해서는 function(a, b) {return a - b;}와 같은 방시으로 크기에 따라 정렬을 한다고 따로 정의를 시킬 필요가 있다.

- 배열.includes() 메소드를 사용하게 된다면 ||를 통해 or관계를 찾을 필요 없이 배열 요소값을 포함하는 값이 비교문에 들어왔을 때 그에 따른 결과를 출력해줄 수 있게 된다.

HTML 태그를 찾는 방식

- getElementById : 태그에 미리 정의해둔 id를 이용해 태그를 찾는 방식이다.

- getElementByClass : 태그에 미리 정의해둔 class를 이용해 태그를 찾는데 이 때는 뒤에 [index]를 추가로 붙여 정확하게 어떤 태그를 불러오고자 하는지 표시해야 한다. 하나만 선언 가능한 id와는 다르게 같은 이름을 가지는 클래스가 여러개 있을 수 있기 때문이다.

class는 기능이 비슷한 태그들을 한데 묶을 때 자주 사용된다.

- getElementByTagName : 태그 이름 자체를 통해 태그를 찾는 방식. 이 방식 또한 class와 동일하게 뒤에 추가적으로 인덱스 번호를 지정하여 정확히 어떤 태그를 불러오고자 하는지를 표시해야만 한다.

- querySelector : 위 세가지 방법을 전부 통합해 검색할 수 있는 방법으로 위 방법과는 찾는 방식이 다르나 보통은 방식을 나눌 필요 없이 간편하다는 이유로 더 애용하는 방식이다.

- querySelectorAll : querySelector와 동일하게 작동하지만 차이점으로는 선택자에 해당하는 모든 요소를 가져온다는데 있다. 이 때 반환 객체는 nodeList이기 때문에 for문이나 foreach와 같은 반복문을 사용해야 한다. 다른 방식으로는 ,를 이용하는 것인데, 이 때는 여러 요소들을 한 번에 가져올 수 있게 된다.

이미지

- 과거에는 네트워크 자원을 아끼기 위해 작은 이미지들을 모아 하나로 이어 사용해왔다. (이미지 스프라이트)

- 이미지 스프라이트를 이용할 때는 한 이미지 파일을 같이 사용하되 화면 상에 보여주는 범위를 한정지어 마치 단독의 이미지인 것처럼 보이게 만들어준다.

사전

- 키와 값의 형태로 자료를 저장해 사용자가 더 편하게 데이터를 찾을 수 있도록 하는 자료구조이다.

- 키를 그대로 불러올 경우 값이 그대로 노출되어 보기에 이쁘지 않은 경우가 생긴다. 이를 해결하기 위해서는 각 값을 새로운 키로 해 따로 이름을 선언해주는 사전을 다시 만들어줄 필요가 있는데, 이 때는 한 사전에서 데이터가 변경되면 사람이 직접 수정을 해줘야 한다는 문제가 발생한다.

- Object.entries 메소드를 사용한다면 사전을 다차원 배열의 형태로 저장하게 되어 여러 번 사전을 선언할 필요가 없어진다.

- entries를 사용할 때 일차원 배열의 경우 indexOf를 주로 사용하고 이차원 배열의 경우 find와 findIndex를 사용하여 요소를 찾게 된다.