들어가기 전에
드디어 위코드에서 JacaScript를 활용한 제일 기초적인 활용을 하게 되었다.
아직까지 JS에 대해 설명하라면 하지도 못하겠지만 부딪혀가며 직접 기억에 우겨넣도록 하자!
우선, 키보드 입력과 연관 된 이벤트들을 알아보자
- onekeyup : 사용자가 키보드에서 키를 놓을 때 생기는 이벤트
- onekeydown : 사용자가 키보드에서 키를 누를 때 생기는 이벤트
- onekeypress : 글씨가 써질 때 생기는 이벤트(shift, ctrl, backspace, tab 한글 등을 인식 못 함)
<input type="text" onkeyup="myFunction()">이런 식으로 input 혹은 button 태그에 관련 함수를 생성하여 넣는 식으로 사용할 수 있다.
➕ button 태그의 disabled 속성 활용
<button> 태그의 disabled 속성은 해당 버튼이 비활성화됨을 명시한다.
disabled 속성이 명시된 버튼은 사용할 수 없으며, 사용자가 클릭할 수도 없다.
따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 버튼을 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 버튼을 다시 사용할 수 있도록 조절할 수 있다.
disabled 속성은 불리언(boolean) 속성입니다. 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다.
참조 : http://www.tcpschool.com/html-tag-attrs/button-disabled
<body>
<input type="id" placeholder="id" id="id" onkeyup="isEmpty()"><br>
<input type="password" placeholder="password" id="password" onkeyup="isEmpty()"><p></p>
<p></p>
<button id="btn" >activate</button>
<button id="btn" disabled>disabled</button>
</body>
그럼, id와 password가 모두 입력되었을 때 버튼 활성화는 어떻게 하면 될까?
프로그래밍에 있어 컴퓨터적 사고가 매우 중요하다고 하는데, 습관을 기르기 위해 풀어서 생각해보자.
1. id와 password가 모두 입력되었을 때는 어떻게 표현할까 ?
1-1) id와 password가 입력되었다는 것을 알려면 해당 값value을 가져와야 한다.
1-2) 입력되었을 때라는 조건을 위해서 if문을 사용하고,
1-3) 모두 입력되었는지라는 조건은 ‘빈칸이 없다’ 라는 표현과 &&(논리곱)으로 쓸 수 있다.
2. 버튼 활성화는 ?
2-1) 앞서 입력한 비활성화disabled 속성을 없애면 된다.
그럼 코드를 써 보도록 하자!
1. id와 password의 값(value)을 가지고 와서
let id = document.getElementById("id").value;
let password = document.getElementById("password").value;2. 각각에 입력된 값이 모두 있다면
if (id != "" && password != "") {}3. btn에 적용되어 있는 disabled 속성을 삭제
document.getElementById("btn").removeAttribute("disabled");종합하자면 이렇다
<script>
function isEmpty() {
let id = document.getElementById("id").value;
let password = document.getElementById("password").value;
if (id != "" && password != ""){
document.getElementById("btn").removeAttribute("disabled");
}
}
</script>
우리가 원했던 모습으로 출력되는 것을 볼 수 있다 ✨
진행 중이던 westagram에 적용하려던 찰 나...
위 방법대로 기존 파일에 코드를 넣었지만 작업해놓은 로그인 버튼이 disabled 처리가 되지 않았다 🥲
<button id="btn" disabled>로그인</button>
<!-- 왜 적용되지 않는거니 왜... -->
아직 정확한 이유를 찾지 못했지만.. CSS 파일에 button:disabled 스타일을 별도로 추가하여 해결은 하였다!
(하지만 괜히 쓸데없이 CSS 파일이 길어진 것 같아 기분이 별로 좋지 않다..)
한 가지 더, 추가로!
기존의 인스타그램 홈페이지 확인을 위해 로그아웃 페이지를 확인해보았다.
그런데 이게 웬걸 왠지 내가 구현한 페이지는 버튼스러운 느낌이 없었는데 그 이유를 찾을 수 있었다.
인스타그램 페이지에는 로그인 버튼이 활성화되면 :hover 했을 때 귀엽고 깜찍한 아이콘이 나온다.
이는 CSS에 cursor 속성을 통해 구현할 수 있다.
나는 활성화/비활성화 버튼 두가지 모두에 속성을 주었다.
참조 : https://developer.mozilla.org/ko/docs/Web/CSS/cursor
호버로 보이는 아이콘은 스크린샷을 통해 캡쳐할 수 가 없어 사진으로 찍어보았다.
이렇게 짜잘한 디테일을 통해 완성도를 높여나가는 맛이 있다! 🏋️♀️
'🛠 JavaScript' 카테고리의 다른 글
| About Class (0) | 2022.05.02 |
|---|---|
| About Object (0) | 2022.04.29 |
| 생활코딩 WEB2 - JavaScript (2) (0) | 2022.01.21 |
| JavaScript - function (0) | 2022.01.16 |
| JavaScript - for (0) | 2022.01.15 |
댓글