로그인 페이지
이벤트를 걸어주려면 해당 DOM에 접근을 해야 한다.
document.querySelector()로 접근을 했다.
그리고 접근한 DOM에 이벤트를 걸어줬다.
Phon Nuber 또는 Email을 입력하면 빨간색 텍스트가 없어지게 만들고
reset 하면 다시 빨간 색 텍스트가 보이게 만들자.
해당 입력창(DOM)에 아무 입력을 하지 않으면
밑에 text가 기본으로 보인다.
입력을 하면 밑에 text가 보이지 않게 만들자.
해당 입력창(DOM)에 입력을 하면
DOM에 setAttribute()를 사용해서
입력창 밑에 tex가 보이지 않게 css 속성을 추가해줬다.
입력창을 다시 reset하면 밑 text가 다시 보인다.
-------------------------------------------------------------------
입력창 2개에 입력을 하면 Log in 버튼 배경색을 변경해서
활성화되는 것처럼 보이게 만들자.
Log in 버튼 기본 배경색은 회색으로 설정되어 있는 상태고
입력창 2개에 입력을 하면 DOM에 setAttribute()를 사용해서
배경색을 변경해줬다.
입력창 1개를 입력하지 않으면
Log in 버튼 배경색은 기본으로 회색 그대로이고
입력창 2개를 다 입력했다가 1개를 reset 시키면
2개 입력했을 때 버튼 배경색이 바뀌었다가
1개를 reset 시키면 다시 기본 배경색으로 바뀐다.
이벤트는 2개의 DOM에 걸어줬는데 DOM에 접근한 개수는 총 4개다.
이벤트를 걸어주기 위해서만 DOM에 접근하는 것은 아니다.
DOM에 접근하는 이유는 해당 DOM을 컨트롤하기 위해서다.
코드 로직은 이벤트가 발생했을 때 실행시킬 코드를 함수를 만들어 작성하고
함수를 이벤트 리스너에게 넘겨주었다.(콜백 함수)
회원가입 페이지
DOM에 접근을 해서 입력창과 버튼을
컨트롤하겠다.
모든 입력창에 입력을 해야 Sign up 버튼이
색이 변경되면서 활성화되는 것처럼 보이는데
로직을 작성하려고 보니 이벤트 리스너와
이벤트가 발생했을 때 실행시킬 코드가
상당히 중복될 가능성이 있어 보인다.
모든 입력창 DOM에 class를 동일하게 주고
(class는 유니크하지 않아요!!)
getElementsByClassName으로 접근했다.
하지만 이 녀석은 DOM 객체를 반환하지 않고
DOM 객체들을 묶어 유사 배열 형태로 반환한다.
DOM 객체로 받으려면
getElementsByClassName().[index]로 콕 집어줘야 한다.
(index라고 그대로 쓰면 안 됩니다. 배열 또는 배열 형태가 가지고 있는 index 값을 줘야 해요~)
DOM 객체가 필요하지만 getElementsByClassName().[index]로 쓰면
결국 querySelector()로 각각의 해당 요소에 접근하는 방법과 같아진다.
나에게 필요한 건 getElementsByClassName()으로
유사 배열 형태로 이뤄진 DOM 객체들이다.
그리고 반복문을 돌려서 효율적으로 작성하려 한다.
어라????? 반복문을 돌리려 forEach를 사용했는데 에러가 발생한다!!
무슨 문제가 있나 보다… MDN 및 구글링~
오호라~ 좀 번외이긴 하지만 JS에서는 배열도 Object(객체)다. (typeof으로 검사해보면 object로 떠요~)
그래서 데이터가 배열인지 아닌지 확인하려면 Array.isArray() 메서드를 사용해서 확인해야 한다.
확인해보니 false라 뜬다. (배열이 아니구나… 근데 배열이 아닌데 배열처럼 묶여있네?? 이런 걸 유사 배열이라 하네)
유사 배열은 배열이 아니고, 배열처럼 index는 가진다.(배열이 아니라서 배열의 메서드들을 사용할 수 없다.)
그래서 유사 배열을 배열로 만들려고 한다.
Array.prototype.slice.call()을 사용해서 말이다.
Array(배열)가 가지고 있는 slice 메서드를 call이라는 녀석으로 호출했다. (slice는 받은 데이터를 복사해서 원본 데이터와 전혀 다른 새로운 데이터를 반환한다.)
그리고 () 안에 유사배열을 넘겨줬다.
이제 배열로 만들어줬으니 반복문을 돌려도 에러가 발생하지 않는다.
반복문으로 각각의 DOM 객체를 불러올 수 있게 됐다.
각각의 DOM 객체를 불러와 이벤트 리스너를 걸어주고 이벤트가 발생했을 때 실행시킬 코드를 작성했다.
이렇게 코드를 작성하니 중복이 없다.(개발자는 중복이 귀찮고 싫잖아요? 인정하셔야 돼요!! )
로그인 페이지에서는 컨트롤할 DOM이 적으니 1~2개 중복은 괜찮지만 확장되면서 중복이 되면 유지 보수하기 힘들 것 같다.(매우)
그래서 회원가입 페이지에서는 최대한 중복을 제외하는 로직으로 코드를 작성했다.
피드백 언제나 환영합니다 ~