전체 글

(DOM)click이벤트로 HTML요소 텍스트와 CSS스타일 변경하기

const radioRow = document.querySelector('#cheat0-option1'); const radioRowReverse = document.querySelector('#cheat0-option2'); const radioColumn = document.querySelector('#cheat0-option3'); const radioColumReverse = document.querySelector('#cheat0-option4'); const flexDirection = document.querySelector('.day'); const dayBox = document.querySelector('.cheat0'); radioRow.addEventListener('click', ..

13주차 회고 - 나 이런것도 한다 이제

감정적으로 힘들었던 한 주를 흘러보내고 다시 열심히 내가 할 수 있는걸 했다. 자바스크립트의 아주 기본개념들을 (변수,연산자,제어문,함수)를 익혔다. 드디어 DOM을 사용해서 정말 일이 일어나게 만든다!!! 그리고 이 행위는 아주 즐겁고 짜릿하다!! 이런거 혹은 이런거 확실히 개념적이고 관념적인것을 배우다가 실제로 돌아가는걸 직접 구현하니 이렇게 재밌을 수가 없다. 강사님들과 경험있는 동료들의 간결하고 효율적인 코드를 볼 때에는 나도 곧 저렇게 되야지라고는 생각하지만 현재는 일단 돌아가게 하는것에 집중하며 코딩하려고 한다. 그게 지금 내가 할 일이다. 그럼에도 좋은 코드를 보고 또 봐야 한다는 생각은 든다. 무엇이 좋은코드고 별로인 코드인지 구별하는 눈을 갖는것도 목표중 하나이다. 코딩에 최대한 나의 감..

하드코드->forEach->이벤트 위임 [점점 나아지는 코드 맛보기]

버튼이 클릭될 때 마다 해당색깔로 상자의 background color가 변화되게 해보자. 전제조건 버튼을 다시 클릭하면 색깔이 없어져야한다. const colorBox = document.querySelector('.color'); const buttons = document.querySelector('.buttons'); buttons.addEventListener('click', (e) => { if (e.target.className === 'red-button') { colorBox.style.backgroundColor = 'red'; } else if (e.target.className === 'yellow-button') { colorBox.style.backgroundColor = 'ye..

문득, 나 개발이 재밌는 거 같애

금요일 밤, 몇몇 동기들은 음주코딩으로 뜨거운 밤을 보내고 있고 나는 괜시리 거기 끼지는 못하면서 취기오른 기분으로 글을 쓴다. HTML, CSS를 배우면서 이런 소리를 정말 많이 들었다. 진짜 프로그래밍은 JS부터야. JS들어가면 프로그래밍이 싫어질 수도 있어. 각오 단단히 해 왜들그리 요란법석을 떠나, 나는 오히려 그놈을 빨리 만나보고 싶었다. 내가 쥐어터지든, 걔가 쥐어 터지든 일단 만나서 담판짓자. 라는 마음으로. 그리고 역시 그놈을 만났을 때 쥐어 터진건 나였는데, 문제는 JS를 처음 접했다는게 아니였다. 문제는 프로그래밍 언어 자체를 처음 접했다는거였다. 귀에 꽃히는 모든 용어와 컨셉들이 난생 처음 들어보는 거였고 곧바로 수업진도를 놓쳤다. 절대 이 수업을 따라갈 수 없다고 빠르게 결론을 내렸..

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

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