addEventListener4 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. opacity로 프로필사진 클릭시 메뉴박스 보이게 구현하기 프로필 박스를 누르면 메뉴박스가 나오게 하는건 금방했지만 메뉴 박스 바깥 영역 클릭 시에는 닫히는 것을 구현하는데 시간이 좀 걸렸다. 실제 인스타 페이지처럼 프로필 사진 클릭 시 메뉴 박스가 생성될 수 있도록 구현해주세요. 메뉴 박스 바깥 영역 클릭 시에는 다시 닫히도록 구현해주세요. 먼저 DOM으로 필요한 값들을 불러왔다. const man = document.getElementById("man"); 버튼을 누르면 나올 메뉴박스를 html에서 미리 만들어두고 css속성 중 opacity를 0으로 설정해두었다. 사실 display:none을 쓰고 싶었지만 display:flex로 요소들을 배치해둬서 opacity로 설정했다. 이것 또한 첫 설정값은 0이지만 조건에 0으로 설정해두면 첫 클릭이 먹히지 않아.. 2023. 6. 13. filter method 이용해서 아이디 검색 기능 구현하기 이번 과제 중에 제일 어려웠던것 같다. 다른것들도 하루종일 고민했지만 이건 하루종일 고민해도 너무 어려웠다. 다른 기능은 다 구현했는데 여기서 filter를 통해 원하는 검색결과만 보이게 하는 기능이 제일 어렵게 느껴졌다. 실제 인스타 nav 검색창에 아이디를 입력 시 검색 기능이 실행됩니다. 아이디 데이터를 담고 있는 배열을 선언해주세요. 검색 창에 텍스트 입력 시 배열의 요소 중 해당 텍스트에 일치하는 아이디만 보일 수 있도록 구현해주세요. for 문이 아닌 다른 array method를 사용해 구현해주세요. DB가 아닌 그냥 간단하게 보여줄 정도라서 javascript 파일 상단에 배열로 id list를 만들어준다. let userArray = [ { id: "wecode_bootcamp", sub.. 2023. 6. 13. 댓글, 좋아요, 삭제 기능 구현하기 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 다음