🍀오늘도 삽질 중🍀/Javascript11 addEventListenser 총정리 자바스크립트는 동적인 언어이기때문에 이를 잘 활용하기 위해서는 내 기준 event 메소드를 쓰는 것이 중요한 것 같다. 다른 문법들을 같이 섞어 써야하지만 addEventListenser 메소드로 사용자의 행동을 이끌어줄 수 있기 때문이라고 생각한다. 그래서 오늘은 자바스크립트의 addEventListenser를 샅샅히 살펴보려고 한다. 먼저 addEventListenser의 구조는 아래와 같다. DOM의 타겟.addEventListenser(event타입, 실행될 함수, 옵션) 하지만 우리는 리액트를 사용하고 있고 그런 경우 더 쉽게 이벤트를 적용할 수 있다. 중괄호 안에는 콜백함수도 들어갈 수 있고 함수를 따로 넣어줄 수도 있는데 함수명만 넣어주는 경우 별도의 따옴표 없이 함수명만 넣어주면 된다. a.. 2023. 6. 25. 자바스크립트 파일에서 html 문법 쓰기 우리는 자바스크립트에서 동적으로 html 문법을 만들어줘야할 때 dom에 접근해서 createElement, classList, innerHTML, appendChild를 써서 직접 하나하나 설정을 해주었다. html을 직접 작성하면 코드가 이렇게 길지 않을텐데 dom에 직접적으로 조작을 하려하니 아래와 같이 코드도 길어지고 그에 따라 신경써야할 것도 늘어나면서 코린이인 나는 좀 헷갈리기도 했다. 그러다 구글링을 하면서 알게 된 훨씬 간단하면서도 친숙한 코드를 발견했다. const comment = document.createElement("div"); const userID = document.createElement("span"); const commentText = document.createEle.. 2023. 6. 23. 3항연산자로 if문 간단하게 만들기 첫 과제에서 3항연산자를 쓰라고 했는데 조건이 3개인 if문인줄 알고 썼던 초기 코드이다. 그리고 리뷰를 하면서 알게된 3항연산자를 쓰니까 이렇게 길던 코드가 단 3줄로 바뀌었다. function handleBtn(btnValue) { if (btnValue) { loginBtn.disabled = false; loginBtn.style.opacity=1; loginBtn.style.cursor = "pointer"; } else { loginBtn.disabled = true; loginBtn.style.opacity = 0.5; loginBtn.style.cursor = "default"; } 3항연산자의 기본 구조는 아래와 같다. 이때 true와 false 자리에는 truthy와 falsy의 값으로.. 2023. 6. 22. Console.dir이 뭘까? https://developer.mozilla.org/en-US/docs/Web/API/console/dir console: dir() method - Web APIs | MDN The method console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects. developer.mozilla.org 먼저 공식문서를 첨부했다. 그 이후는 내가 이해한 내용을 쉽게 풀어내려고 한다... 2023. 6. 14. form 태그란 뭘까? https://www.w3schools.com/tags/tag_form.asp HTML form tag W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 먼저 공식문서를 첨부했다. 그리고 내가 이해한 내용을 써보려고한다. 사용자가 input 창에서 댓글을 쓰면 포커스가 input 창에 있어서 enter를 눌러도 댓글이 올라가지지 않았다. 포커스가 버튼에 있어야만 enter .. 2023. 6. 14. addEventLister 중 Blur와 Focus는 어떻게 쓸까? https://ko.javascript.info/focus-blur focus와 blur ko.javascript.info 기술에 대해 제일 잘 써져 있는 것은 공식 문서기때문에 제일 앞에 첨부를 하고 Blur와 Focus에 대해 내가 이해한 내용을 쉽게 풀어서 써보려고 한다. Blur와 Focus는 addEventListener의 한 종류로써 focus는 이벤트를 쓴 요소에 포커스를 두었을때 발생하고 blur는 이벤트를 쓴 요소에 포커스를 잃었을때 발생한다. 모든 태그에 쓸 수 있는 줄 알았는데 사용자와 상호작용하는 태그들에만 사용이 가능하고 div, span 같은 태그에는 적용이 안된다고 한다. 하지만! 하고 싶을 때는 html의 tabindex 속성을 쓰면 된다. 속성값은 숫자로 표현되며 1에 포커.. 2023. 6. 14. 이전 1 2 다음
