My Boundary As Much As I Experienced

이벤트위임이란? 버블링 캡처링을 통한 이벤트 전파를 통해 상위 요소에서 이벤트 핸들링을 하는 것을 말한다. event.target을 통해 어떤 위치에서 이벤트가 일어났는지 특정할 수 있다. 예시 1 Bagua Chart: Direction, Element, Color, Meaning Northwest Metal Silver Elders ... ... ...2 more lines of this kind... ...2 more lines of this kind... table이 있고 tr, td들이 들어있는 테이블 구조가 있다고 하자. 여기서 원하는 cell(td)을 클릭하면 색상이 바뀌도록 바꾸고 싶다고 하자. 이때 td들에 일일이 다 이벤트 리스너를 부여하는 방식은 매우 코드가 많아지고 반복적인 요소가 ..

가상 클래스 선택자 :checked 를 사용하여 체크된 체크박스들만 모두 선택할 수 있다. 선택자로 선택된 node를 찾아 조작할 수 있다. const checked = document.querySelector("input[type='checkbox']:checked") 또한, 프로퍼티 속성을 다루듯이 사용할수도 있다. 아래 예제는 내가 전체 체크박스를 눌렀을 때, 다른 체크박스들을 모두 선택되게 하거나, 모두 해제하게 하는 로직을 구현한 방법이다. input type="checkbox"인 노드는 .checked 식으로 프로퍼티 속성을 다루듯이 사용할 수 있다. const primeCheckbox = document.querySelector("input[type='checkbox']") // 맨 첫번째 ..

some 리턴 값이 하나라도 true라면 true값 반환. (빈 배열에서 사용하면 false값 반환) const array = [1, 2, 3, 4, 5]; // checks whether an element is even const even = (element) => element % 2 === 0; console.log(array.some(even)); // expected output: true every 모든 인자들이 콜백함수 테스트를 통과하면 true를 반환. 콜백함수를 하나라도 통과하지 못할 시 false 반환. every함수와 부정연산자(!)를 사용하여 콜백을 짜면 하나라도 참일 시 false를 반환하는 로직을 짤 수 있다. (빈 배열에서 사용하면 true값 반환) const isBelowT..

버블링Bubbling이란? 특정 요소를 선택했을 때, 그 요소 뿐만이 아니라 상위 요소들의 이벤트 리스너도 작동하는 것을 말한다. 이동하기 //JS const divEl = document.querySelector("div") const pEl = document.querySelector("p") const aEl = document.querySelector("a") divEl.addEventListener("click", ()=> console.log("div")) pEl.addEventListener("click", ()=> console.log("p")) aEl.addEventListener("click", ()=> console.log("a")) //클릭 시 //a //p //div 한 요소에 이..

공통점 .append()와 .appendChild() 모두 대상 객체에 자식 노드를 추가하는 메소드이다. .append() append메소드를 사용하면 노드 객체(Node Object)나 DOMstring을 사용할 수 있다. 1. 바로 텍스트를 추가할 수 있다. 2. 여러 개를 한꺼번에 추가할 수 있다. .appendChild() 1. 텍스트를 추가하려면 createTextNode를 만들어서 첨부해야 된다. 2. 한 번에 하나의 요소만 추가 가능하다. 결론 여러모로 append를 쓰는게 낫겠다. appendchild를 여러번 쓸걸 한 번에 처리할 수 있을거같다.

자료형을 생성하는 2가지 방식 프로토타입을 만들기 전에 예시로 배열을 만드는 데는 2가지 방법을 사용해보자 const fruits = ["Apple", "Banana", "Cherry"]; //배열 리터럴 방식 const fru2 = new Array("Apple", "Banana", "Cherry"); //사실 리터럴로 입력해도 컴퓨터는 생성자 함수 방식으로 생성한다. 하나는 배열 리터럴 방식으로, []을 이용해서 직관적으로 자신이 넣고싶은 데이터들을 넣을 수 있다. 나머지 하나는 생성자 함수를 사용하는 방법이다. new 연산자와 맨 앞글자가 대문자인(파스칼 표기법) 생성자 함수를 사용하는 방식이다. Array뿐만 아니라, Object도 이와 같이 생성할 수 있다. 생성자 함수(틀)에서 내가 원하는 객..

1. 화살표 함수란? 전통적인 함수 선언 방식의 간편한 대안입니다. - MDN // 기존 익명 함수를 만드는 방법 function (a, b) { return a + b; } // 기존 기명 함수를 만드는 방법 function sum(a,b) { return a + b } 전통적인 함수 선언 방식은 위처럼 생겼고, 간단한 기능 하나만 만들어도 3줄은 잡는다. // 화살표 함수로 익명 함수 만드는 법 (a, b) => a + b // 화살표 함수로 기명 함수 만드는 법 const arrowSum = (a,b) => a + b 화살표 함수를 만들면 짧은 코드로 함수를 쉽게 만들 수 있다. 한 줄 처리인 경우 중괄호나 return을 생략 가능하다. // 한 행으로 처리가 안 될 시 중괄호 스코프를 사용할 수 ..

호출 스케줄링이란? 일정 시간이 지난 후 원하는 함수를 예약 실행할 수 있게 해주는 것 1. setTimeout (일정시간 이후에 함수 실행하기) setTimeout(()=> { console.log("time!") }, 1000) 기본형: setTimeout(함수, 밀리세컨드) 1초 이후 함수 실행 const setTime = setTimeout(()=>{ console.log("time!") }, 1000) setTimeout은 변수에 담기만 해도 예정대로 실행된다. 왜 변수에 담기만 해도 실행되는지... (추가 조사 필요) 2. clearTimeout ( 셋타임아웃 예약 취소하기) clearTimeout(setTime) clearTimeout을 하려면 앞서 setTimeout을 변수 지정하여 활용해..

함수를 선언할 때 매개변수를 쓰는 방법도 여러가지가 있다. 1. 매개 변수에 기본값을 지정 function sum(a, b = 1) { //기본값을 매개변수 선언 시 지정해놓을 수 있음. return a + b; } console.log(1) // 2 // a은 1, b가 지정되지 않을 시 1이 되어서 2가 되었다. console.log(sum(3, 4)); // 7 // b에 해당하는 값을 넣어주면 설정값대로 계산된다. 2. 매개 변수에 객체 구조 분해 할당 지정 const user = { name: "bumang", age: 85, }; function getName({ name }) { // 받은 객체를 매개 변수에서 바로 구조분해 할 수 있다. return name; } function getEm..

호이스팅이란? 함수 선언부가 유효범위의 최상단으로 끌어올려지는 효과를 말한다. 자바스크립트 파일을 컴파일러가 컴파일할 때, 함수 선언과 변수 선언들을 스크립트 최상단에서 해석한다. 함수 선언 이전에 함수를 호출할 시: console.log(hello()) // hello function hello() { return "hello" } 만약 함수 '선언'을 아래에다 하고, 함수 호출을 위에서 할 시, 참조 에러가 뜨지 않는 이유는 함수 선언들을 미리 호이스팅하기 때문이었다. 함수 표현식을 쓰기 전에 호출할 시: console.log(hello()) // Reference Error const hello = () { // var, let, const 뭘로 하든 함수 표현식은 호이스팅이 안 된다. return..