Front-End Developer/JavaScript

blur와 click을 같이 쓸 때, 내 맘대로 안되는 이유

드롭박스를 만들면서, 꼭 옵션중 하나가 클릭되었을 때 만이 아니라 그냥 바깥공백을 클릭했을 때에도 저 드롭박스가 사라지게 하고싶었다. 그래서 드롭다운 버튼에 blur이벤트를 걸어 버튼이 포커스를 잃을 때에도 드롭박스가 사라지게 코드를 작성했다. 문제 저 드롭박스 안에 각각의 옵션들은 click이벤트가 발생했을 때 그 안에있는 text가 버튼 안에 들어가도록 해놨는데, blur이벤트를 추가한 뒤로는 그게 적용이 되지 않았다. 원인 이벤트가 일어날 때에는 아래의 순서를 가진다. mousedown blur mouseup click 사실 블러를 빼고 생각하면, 마우스가 눌러지는 순간(mousedown)이 그 어떤 이벤트보다 먼저 일어나고, 눌렸다 떼지는 순간(mouseup)이 일어난 뒤에 이 두개를 마무리한 모..

DOM이란 무엇인가

애초에 자바스크립트에게 HTML이란 문자열 그 이상 그 이하도 아니다. 돔은 이 문자일 뿐인 HTML을 의미있는 객체형태로 바꿔서(= 파싱) 우리가 추가적인 작업을 할 수 있도록 하는 녀석이다. 노드(node) 이 의미있는 객체형태를 node, 즉 '노드'라고 한다. 노드는 HTML의 각각의 요소보다 훨씬 더 넓은 의미인데, 예를들어 태그 사이사이의 띄어쓰기 공간도 node는 'text 객체'로 인식한다. 또한 태그 안에 들어있는 속성 하나하나도 하나의 'attribute 객체'이다. 우리가 돔을 사용할 때 가장 중요한 두가지는 내가 원하는 요소를 잘 선택해서 조작하는 것 선택한 요소에 일어날 이벤트를 핸들링하는 것 이다. 상속(inheritance) HTML이 기본적으로 중첩개념으로 되어있으니 파싱되는..

JS 이벤트 플로우 완벽이해

html>body>button 의 부모자식관계를 가지는 html구조가 있다고 치자. 눌러주세요 각 요소들에 click event를 만들고, button을 click하면 어떻게 될까? 우리는 입장에서는 어려울 것 없이 button이 먼저 실행된다고 생각하지만 아니다. 엄밀히 말해 우리는 html안에있는 body안에있는 button을 누른것이기 때문에 브라우저 입장에서는 이 세가지중 정확히 무엇을 누른건지 애매하다고 생각하기 때문이다. 그래서 button에 클릭이벤트가 일어났을 때, 만약 부모요소에도 이벤트가 적용되어 있다면 이 경우 브라우저는 전부 다 실행을 시켜버린다. (body와 html에 클릭이벤트가 없으면 아무상관없는 이야기) 어떤 순서로? 아래 event flow 순서로! [이벤트가 실행되면 브..

증감 연산자(Increment & Decrement Operators)

증감 연산자 (Increment & Decrement Operators) 변수에 적용할 수 있는 연산자 중 하나로, 복합대입연산자를 더(또?) 간략하게 사용한 형태이다 증감 연산자 설명 변수++ 기존의 변수 값에 1을 더합니다(후위) ++변수 기존의 변수 값에 1을 더합니다(전위) 변수-- 기존의 변수 값에 1을 뺍니다(후위) --변수 기존의 변수 값에 1을 뺍니다(전위) 아래 세 형태는 다 같은 의미이다. a = a + 1 a += 1 (복합 대입 연산자) a++ (증감 연산자) a++ 와 ++a, 뭐가 다른데? 직접 실행하면서 이해해보자. //변수를 선언한다 let a = 10; //출력해보자 console.log(a++); 이때에는 a++나 ++a 둘 다 결과가 같은데, 이렇게 한 줄에 독립적으로 ..

new Date() 란?

Date() MDN: 함수로 호출할 경우 new Date().toString()과 동일하게 현재 날짜와 시간을 나타내는 문자열을 반환합니다. *이 때 인수는 무시하고 항상 현재날짜와 시간을 나타내게 된다. 그럼 new Date() 는 무엇인가? MDN: 생성자로 호출할 경우 새로운 Date 객체를 반환합니다. 즉, 내가 입력하는 값과 인수의 타입에 따라서 여러가지 형태로 초기화시키고 그것을 객체로 만들 수 있다! new Date()는 현재 날짜 및 시간을 나타내는 문자열을 반환한다. new Date() Wed May 11 2022 11:35:05 GMT+0900 (Korean Standard Time) 인자값을 넣어주어 개별 날짜 및 시간을 객체로 생성할 수 있다. new Date(2022,12,26,0..

if 조건문 사용해서 홀수,짝수 구해보기

if (조건에 맞는다면) {이 코드를 실행해} let num = 2; if (num > 1) { console.log('yes'); } 결과 if (조건에 맞는다면) {이 코드를 실행하고} else {그게 아닌 나머지라면 이 코드를 실행해 } let num = -1; if (num > 1) { console.log('yes'); } else { console.log('no'); } 결과 if (조건에 맞는다면) {이 코드를 실행하고} else if (그게 아니라 이 조건에 맞는다면) {이 코드를 실행하고} else {그게 아닌 나머지라면 이 코드를 실행해} else if는 원하는만큼 무한대로 작성이 가능하다. console.clear(); let fruit = 'orange'; if (fruit === ..