2021. 11. 5. 03:00ㆍNomadCoders/바닐라JS 챌린지
# 학습 전 나의 상태
오늘은 다시 노마드 코드로 와서 크롬 앱 만들기를 이어서 한다.
집중해서 정말 알아야할 내용들을 잘 정리해 놓고 싶다.
# 오늘의 학습 내용
input 태그
- 이름을 입력하고 로그인 버튼을 누르는 기능을 만들려고 한다.
- 먼저 html을 아래와 같이 작성했다.
<body>
<div id="login-form">
<input type="text" placeholder="What is your name?" />
<button >로그인</button>
</div>
<script src="./app.js"></script>
</body>- 그리고 버튼을 눌렀을 때 input의 값을 넘겨주기 위해 javascript 를 아래와 같이 작성했다.
const loginInput = document.querySelector('#login-form input');
const loginButton = document.querySelector('#login-form button');
function handleLoginBtnClick() {
const username = loginInput.value;
if (username === "") {
alert('이름을 입력해주세요!')
} else if (username.length > 15) {
alert('이름은 15글자를 초과했어요!')
} else {
console.log(username)
}
}
loginButton.addEventListener('click', handleLoginBtnClick)- handleLonginBtnClick 함수 안에 username 을 변수로 놓고 loginInput.value 값을 담아주었다.
- 그리고 if, else if, else로 유효성 검사를 할 수 있도록 해주었다.
그런데 이 방법은 최상의 방법이 아니란다.
그럼 어떻게 해?!
input 태그를 활용하는 방법이다.
현재 input 태그 안에 속성은 아래와 같다.
<input type="text" placeholder="What is your name?" />여기에 필수 값을 지정하는 required로 input이 비어있을 때 알림창을 띄워주고,
maxlength 로 최대 글자 길이를 입력해 줄 수 있다.
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>이렇게 했는데 html은 로그인을 눌렀을 때 아무런 동작을 하지 않고 있다.
왜 그럴까?
이유는 input의 유효성 검사를 작동시키기 위해서는 form 태그 안에 input 태그가 있어야 한다.
현재 작성된 html에서는 div 태그 안에 input 태그가 있기 때문에 작동이 되지 않는다.
그래서 div를 form 태그로 변경해준다.
<body>
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<button >로그인</button>
</form>
<script src="./app.js"></script>
</body>이렇게 하면 아래와 같이 빈 칸일 때 알림창이 뜨고, 글자가 15자이상 입력이 되지 않는다.
그런데 로그인을 클릭하거나 엔터를 누르면 새로고침이 실행된다.
이유는 form이 submit 되고 있기 때문이다.
input 안에 button을 누르거나 type이 submit 인 input을 클릭하면 새로고침 된다.
그러면 우리는 JavaScript에서 이벤트로 click을 줄 필요가 없다.
왜냐하면 이미 form이 submit 되고 있기 때문이다.
그런데 나는 입력하고 그 값을 저장해주고싶다.
하지만 submit 되서 새로고침이 되기 떄문에 이렇게 되지 않게 하기 위해서 다른 무언가를 해줘야한다.
이것은 내일 이어서 공부할 것이다.
# 학습을 마치며
오랜만에 html을 공부한 것 같다.
왠지 내가 교만했다는 생각이든다.
html 뭐 거기서 거기.. 아니겠는가.. 그냥 하면 된다 생각했는데 의외로 배움이 컸다.
form 태그 안에 input이 있을때 submit 이 된다는 것, 또 유효성 검사를 input에 속성을 주어 한다는 점..
다시금 상기시켜주는 것 같다.
내일 이어지는 공부에서도 잘 배워나가고 싶다.
# 참고
[html]input의 필수값을 지정하는 required
개발자가 의도한 대로만 사용자가 움직여주면 좋겠지만 실상은 그렇지 않습니다. 예상치도 못한 버그를 많이 생산? 해내며 이를 사전에 예방 해줘야 합니다. input 태그가 있지만 사용자가 무시
ssungkang.tistory.com
'NomadCoders > 바닐라JS 챌린지' 카테고리의 다른 글
| 2021. 11. 10. (수) TIL - 바닐라 JS로 크롬 앱 만들기 - weather / Finish (0) | 2021.11.10 |
|---|---|
| 2021. 11. 09. (화) TIL - 바닐라 JS로 크롬 앱 만들기 - ToDoList (0) | 2021.11.09 |
| 2021. 11. 08. (월) TIL - 바닐라 JS로 크롬 앱 만들기 - Clock & Quotes (0) | 2021.11.08 |
| 2021. 11. 06. (토) TIL - 바닐라 JS로 크롬 앱 만들기 - loaclStorage, innerText, classList (0) | 2021.11.07 |
| 2021. 11. 05. (금) TIL - 바닐라 JS로 크롬 앱 만들기 e.preventDefault() (0) | 2021.11.06 |