TIL #5

jinsu·2023년 3월 8일

목록 보기

5/6

class에서 띄어쓰기

<div class="units box"></div>

div는 units와 box 두 개의 클래스를 가진다. 띄어쓰기로 구분한다.
하나의 클래스를 가지게 하려면 "units-box" 또는 "unitsBox"로 입력해야 한다.

클래스를 여러개 가지고 있는 경우, 호출하는 법이 ID를 사용해서 호출만 가능한 줄 알았는데 우선 제일 상위의 클래스를 호출한 후에 그 클래스의 하위 클래스를 불러오는 형식으로 진행하니 정상적으로 실행이 됐다.

const parent = document.getElementsByClassName('select');
const e1 = parent.one;		//class = "select one"
const e2 = parent.two;		//class = "select two"
const e3 = parent.three;	//class = "select three"

.toggle()

toggle(token):
toggle(token, force);

Element.classList.toggle("class");

toggle() method of the DOMTokenList interface removes an existing token from the list and returns false. If the token doesn't exist it's added and the function returns true.
나는 toggle을 element에 class를 추가하고 빼는 용도로 사용했다.
리스트에 존재하면 리스트에서 제거하고, 없으면 추가해주는 의미로 생각하면 될거 같다.

반환값: boolean(false-존재, true-없음)

.innerText vs .innerHTML

.innerText: element 안의 text 값들만을 가져온다.
.textContent: 입력된 문자열을 그대로 넣는다.
.innerHTML: innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져온다.

Events

MDN reference

EventTarget.addEventListner(type, listener);

페이지의 events 항목에 가면 이벤트 목록들을 확인할 수 있다. 예시) mouseenter, click...
필요한 이벤트를 찾아서 addEventListner 첫번째 매개변수에 넣어주면 사용이 가능하다.

이벤트 발생객체

event.target: () => {}, function() {}
this: function() {}

// 1
node.addEventListner("click", (event) => {
 	 const num = event.target.value; // event.target = node
});

// 2
function listener(event) {
  const num = this.value; // this = node
}

node.addEventListner("click", listener);

setInterval

setInterval(code);
setInterval(code, delay);

setInterval(() => {
  ...
}, ms);

어떤 코드를 일정한 시간 간격을 두고 반복해서 실항하고 싶을 때 사용한다.

매개변수
- code: 실행할 코드
- delay: ms(milliesecond, 시간 간격)

.reduce(), reduceRight()

Reference

const arr = [1, 2, 3];

// 합계
const sum = arr.reduce((sum, currentNum) => {
  return sum + currentNum
});

// 평균값
const average = sum / arr.length;

배열의 합계를 구하는 메서드이다. 이 함수를 통해서 쉽게 평균을 구할 수 있다.

readline

const readline = require("readline");	//commonJS
import readline from "readline";


const rl = readline.createInterface({
  input: stdin,
  output: stdout,
});

console로부터 입력값을 받아오는걸 도와주는 모듈이다. C로 개발을 하면서 stdin, stdout 개념을 배워서 그런지 쉽게 이해가 됐다(실제로 콘솔에서 값을 받아오는 프로젝트를 한적도 있다).

isNaN()

isNaN("value")

NaN: "Not a Number"
return: true(Not a Number), False(Number)

window 객체

Reference
1. 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기에 어디서든 접근이 가능하다고 해서 전역 객체라고도 부른다.
2. 일반적으로 우리가 열고 있는 브라우저의 창(browser window)을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다.

var 키워드로 변수를 선언하거나 함수를 선언하면, 다 이 winodw 객체의 property가 된다. window를 앞에 붙이지 않는 이유는 말 그대로 window는 전역 객체로 페이지 내에 있는 모든 객체를 다 포함하고 있기 때문에 생략이 가능하다.
let, const 키워드로 선언한 변수는 블록 스코프이기 때문에 window 객체 내부의 블록에서 선언된 것으로 평가되어 전역 객체의 property로 활용되기는 어렵다.