How TO - Clickable Dropdown / Navigation Bar (클릭하면 보여지는 메뉴바 / 메뉴검색기능)

버튼 클릭 시 숨겨진 내용이 Dropdown 되도록하는 예제를 공부하고 이를 활용해 Navigation Bar를 생성해보겠습니다.

https://www.w3schools.com/howto/howto_js_dropdown.asp

How To Create a Dropdown Menu With CSS and JavaScript

---

Dropdown.txt

0.00MB

ClassList 관련 메서드

1) classList.add(String) : 지정한 클래스 값을 추가.
만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

2) classList.remove(String) : 지정한 클래스 값을 제거.
존재하지않는 클래스를 제거해도 에러를 발생하지않는다.

3) classList.contains(String) : 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인.

4) classList.replace(oldClass,newClass) : 존재하는 클래스를 새로운 클래스로 교체.

---

NavigationBar.txt

0.00MB

---

검색기능이 추가된 menu bar.txt

0.00MB

 

 

여기서 잠깐!
더 자세히 알아보자

Study Point 1.

toUpperCase() : 대상 문자열을 모두 대문자로 변환하여 리턴.

toLowerCase() : 대상 문자열을 모두 소문자로 변환하여 리턴.

trim() : 대상 문자열의 앞/뒤 공백문자를 모두 제거하여 리턴.

 

Study point 2. 키를 입력할때마다 검색결과가 동적으로 변하기

<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">

input 태그에 onkeyup을 이용해 키보드를 누를때마다 filterFunction()이라는 함수를 실행시킨다.

 

Study Point 3. JavaScrpt에서 논리연산자

출처 : https://opentutorials.org/module/3921/23607

위와 같은 논리연산자는 보통 조건문 if와 함께 이용하여 true나 false를 반환하는 참과 거짓을 판단해주는 연산자로 생각하기 쉽지만, 사실 자바스크립트에서 논리연산자는 연산에 사용된 피연산자 중 하나를 반환하는 역할을 합니다.

위 예시에서 a[i].textContent || a[i].innerText; 논리연산자가 이용된 부분인데요.

|| 논리 OR 연산자는 좌측에서 우측 방향(→)으로 연산을 진행하고 가장 먼저 참(True)의 형태를 가진 value가 나오는 경우 그 피연산자를 바로 반환하고 연산을 끝냅니다.

즉 좌측 값이 참(True)이면 좌측값을 반환하고, 좌측값이 거짓(False)이면 우측의 값을 반환하기때문에 이점을 활용하여 매개변수에 디폴트를 할당할 수 있습니다.

 

 

Study Point 4. textContent, InnerText 차이점.

https://hianna.tistory.com/483

[Javascript] innerHTML, innerText, textContent 차이점

https://blog.naver.com/indi121/222081626201

textContent와 innerText의 차이

자바스크립트에서 엘리먼트 및 노드의 텍스트를 추가하거나 엘리먼트에 있는 텍스트를 가져올 수 있는 기능.

 

Study Point 5. IndexOf() : 일치하는 인덱스 값을 반환 / 존재하지않으면 -1 반환.

: 지정된 객체가 몇번째 인덱스에 있는지 찾아서 리턴.

위 예제에서 txtValue.toUpperCase().indexOf(filter) 로 볼 수 있습니다.

a = div.getElementsByTagName("a");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
txtValue =  a[i].textContent || a[i].innerText;

위 변수들을 참고해서 분석해보자.

indexOf(filter) : 배열에서 지정된 요소(filter)를 찾을 수 있는 첫번째 인덱스를 반환하고, 존재하지않으면 -1을 반환.

여기서 filter = 변수 input의 값을 대문자로 변환한 것이고 input의 값은 ID값이 'myInput'인 요소를 가리킨다.

예제를 살펴보면 ID : myInput은 <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">을 가리킨다.

즉, 텍스트 상자(myInput)에 입력한 값을 대문자로 변환한 다음, txtValue 배열 내에 일치하는 첫번째 인덱스를 반환하고, 존재하지않으면 -1을 반환한다.

추가로 해당 예제에서는 반복문으로 작성하였기 때문에 txtValue.toUpperCase().indexOf(filter)의 값이 -1보다 크면 위 작업을 반복실행하여, 첫번째 일치하는 인덱스를 반환한 뒤 반복문을 실행하여 배열에서 지정된 요소를 찾을 수 있는 모든 인덱스를 반환한다. ( i < a.length; 만큼 실행 )

---