[JS] 🐰기록하고 보기 위한 '놓치기 쉬운 부분들' (DOM요소, setInterval 함수, target, every(), substring)_엘리스3주차

✅ DOM요소

• getElement~ 함수

getElement~ 함수의 종류가 다양함.

그 중 "getElementByID"는 html에서 id를 찾는 함수로, html 파일당 id는 1번만 사용해야함 중복이 되면 안됨

  -> 's'가 붙지 않음 + 요소로 출력됨 + 인덱싱 불필요

이 외에 getElementsByTagName, getElementsByClassName, getElementsByName 등은 's'가 붙음

  -> 요소들의 모음으로 출력되어 인덱싱이 필요

 

---

✅ setInterval 함수

• setInterval(func/code, delay, arg0...N)

func/code: 밀리초(delay)마다 실행되는 함수나 선택적 구문을 사용한 문자열

delay: option으로 지정된 함수 및 코드 실행 사이 지연해야 하는 밀리초

---

✅ target을 통한 이벤트 위임

상위 요소에 이벤트를주면 하위 요소들에게도 위임을 하게 됨

 

 

---

✅ 이미지 크기 변경

• 이미지.style.transform = "scale(n)"

-> n배 만큼 이미지의 사이즈 변경

-> 여기서 transform은 css

 

---

✅ argument

함수를 만들 때 자동으로 만들어지는 객체로 이미 만들어져있는 예약어임

인덱스로 접근은 가능하나, forEach문은 사용 불가 -> argument는 유사배열객체

 

vs 나머지 매개변수

-> 인자들이 배열로 들어오기 때문에 배열 메서드가 가능하고 핸들링하기 쉬움

 

---

✅ 변수.toLocaleString()

숫자를 문자열로 바꾸면서 3자리 단위씩 컴마를 자동 생성해줄 수 있음

let num = 2974;
num.toLacaleString();
// 2,974

---

✅ substr() vs substring()

substr()은 마지막 인덱스까지 출력, substring()은 마지막 인덱스 전까지 출력

substr(시작 인덱스, 마지막 인덱스) -> 시작 인덱스부터 마지막 인덱스까지 출력

substring(시작 인덱스, 마지막 인덱스) -> 시작 인덱스부터 마지막 인덱스 전까지 출력

 

---

✅ Null 판단

"" ? true : false -> false로 판단

[] ? true : false -> true로 판단

배열이 Null인지 확인하기 위해서는 배열의 길이를 활용할 수 있음 -> array.length

 

---

✅ every()

: 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하는 함수. Boolean 값을 반환

 

 

스코프 - 선언할 때 결정

this - 호출할 때 결정

 

---

✅ getter, setter

메서드에서 값을 단순히 반환하는 메서드는 getter, 값을 변경하는 메서드는 setter