내가 지금까지 한 일 2부 (JS)

반응형

과거 블로그를 통해 현재 프로젝트를 진행하고 있는데, 이것이 제가 시간을 들여 작업한 것입니다. HTML, CSS, 자바스크립트로 만든 Roster`s의 간단한 메뉴입니다. 자바스크립트를 현대 영어로 번역할 때 경험이 부족해서 제가 설명하기가 좀 복잡할 것 같습니다. 제가 수탉 메뉴에 자바스크립트를 추가하는 것에 대해 설명하려고 하는 동안 양해해 주세요.

제가 만든 메뉴는 최대한 단순하면서도 우아한 느낌을 더하고 싶었습니다. 그래서 저는 간단한 메뉴를 만드는 대신 클릭할 때마다 페이드 인과 페이드 아웃을 애니메이션화하는 것을 추구했습니다. 이 애니메이션을 하기 위해서는 CSS와 JavaScript를 함께 만들어야 제대로 동작할 수 있었습니다. CSS 부분은 페이드인 및 페이드아웃의 원인이며, JavaScript 버전은 원하는 동작을 트리거하기 위해 버튼을 클릭하면 동작 또는 "이벤트"가 생성됩니다. 아래는 메뉴를 클릭할 때마다 이벤트를 트리거하기 위해 작성한 코드입니다.

코드의 첫 부분부터 시작합시다. 클릭을 기다린 다음 HTML 코드 내에서 내가 심은 위치를 보여줄 "데이터 드롭다운 버튼"의 이벤트 대상과 일치하는 드롭다운 버튼을 만드는 이벤트 수신기를 만든다. 자바스크립트 코드의 두 번째 줄은 데이터 드롭다운에 가장 가까운 대상이 작동하지 않을 때 우리는 아무것도 반환하지 않습니다. 프로그램에는 아무 일도 일어나지 않을 것입니다.

여기서 우리가 하는 것은 dropDown 버튼 안에 현재 드롭다운이 있는 경우입니다. 따라서 기본적으로 드롭다운 버튼이 활성화되면 "활성" 상태가 됩니다. 예를 들어 이 기능의 의미를 더 자세히 보여드릴 수 있습니다. querySelector가 활성화된 상태로 각 루프에 현재 드롭다운이 있는 경우 아무 것도 반환하지 않습니다! 일치하지 않을 경우 활성 상태를 제거하겠습니다. 즉, 링크가 있는 상자를 클릭하면 아무 일도 일어나지 않고 사라지지 않습니다. 그러나 옵션 상자 외부를 클릭하면 classList.remove(active)가 적용됩니다.

 

그것이 내 메뉴 프로젝트의 자바스크립트를 설명하는 가장 좋은 방법이야! 최선의 설명이 아니라면 미안하지만, 이런 것들을 어떻게 더 잘 표현할 수 있을지 피드백을 받고 싶습니다. 다시 한번 들러서 제 블로그를 읽어주셔서 정말 감사합니다! 좋은 하루 되시고 계속 코딩하세요!