javascript8 addEventListenser 총정리 자바스크립트는 동적인 언어이기때문에 이를 잘 활용하기 위해서는 내 기준 event 메소드를 쓰는 것이 중요한 것 같다. 다른 문법들을 같이 섞어 써야하지만 addEventListenser 메소드로 사용자의 행동을 이끌어줄 수 있기 때문이라고 생각한다. 그래서 오늘은 자바스크립트의 addEventListenser를 샅샅히 살펴보려고 한다. 먼저 addEventListenser의 구조는 아래와 같다. DOM의 타겟.addEventListenser(event타입, 실행될 함수, 옵션) 하지만 우리는 리액트를 사용하고 있고 그런 경우 더 쉽게 이벤트를 적용할 수 있다. 중괄호 안에는 콜백함수도 들어갈 수 있고 함수를 따로 넣어줄 수도 있는데 함수명만 넣어주는 경우 별도의 따옴표 없이 함수명만 넣어주면 된다. a.. 2023. 6. 25. 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. 댓글, 좋아요, 삭제 기능 구현하기 main 페이지에서 처음으로 자바스크립트 활용한 과제이다. 4번과 6번이 연관이 있어서 한번에 진행했다. 댓글 입력 후 엔터키를 누르거나 게시 버튼 클릭 시 댓글이 추가될 수 있도록 구현해주세요. 댓글 마다 좋아요, 삭제 버튼을 추가해 버튼을 누를 시 각각의 기능이 실행되도록 구현해주세요. 먼저 필요한 값들을 DOM으로 불러왔다. ID값은 전체 파일 중 1개라 불러내면 1개만 나오지만 class는 여러개일 수도 있어서 배열로 나오기때문에 index를 적어줘야한다. const inputComment = document.getElementById("input"); const buttonComment = document.getElementById("button"); const newComment = docum.. 2023. 6. 13. 이전 1 2 다음
