본격적인 앱 만들기 강의에 들어갔다.
그래도 기초적인 부분은 다뤄야 하니 input과 button을 이용한 value를 테스트하는 시간을 가져보자
Input과 Button
# 설계
- 앱이 사용자에게 질문한다. 너는 누구인가? (이름, ... 등등)
- 해당 정보를 어떻게 받아올 것인가
- 받아온 정보를 어떻게 화면에 보여줄 것인가.
* 기초원리
user의 이름을 기억하는 것처럼 JavaScript에는 value(값)를 기억하게 하는 아주 쉬운 방법이 있다.
하지만 모든 것은 HTML에서 시작되어야 한다. HTML을 작성한 다음 그 안에 존재하는 element들을 가져오는 원리이다.
그리고 JavaScript에서 요론저런 작업들을 해주는 것
코드를 작성해보자 .
HTML (index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Momentum App</title>
</head>
<body>
<!-- id : login-form, ID input and Button Create-->
<div id="login-form">
<input type="text" placeholder="Your name"/>
<button>Log In</button>
</div>
<!-- id : login-form, ID input and Button Create End-->
<!-- Js Begin -->
<script src="app.js"></script>
<!-- Js End -->
</body>
</html>- input, button 생성
- <div> 태그로 감싸기
- div 태그에 class or id 지정 ("login-form")
* class나 id나 상관없지만 여기서 사용한 classname을 다시 사용하면 안된다는 것만 참고해두자.
JavaScript (app)
// querySelector(), getElementById() 로 element 가져오기
const loginForm = document.getElementById("login-form");
// const loginForm = document.querySelector("#login-form");
// classname, tagname 모두 검색이 가능하기 때문
// element를 접근
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");- querySelector(), getElementById() 로 element 가져오기
- querySelector()는 대상이 id인가 명확히 작성해줘야 한다. (classname, tagname 모두 검색이 가능하기 때문 )
- input과 button을 가져와야 한다. (2가지 옵션)
1. const logiInput 에 document를 찾는 대신 위에 작성한 loginForm에서 검색을 하는 방법 (현재 방법)
2. document를 이용해 한번에 찾는 방법
실행결과
흐름
- HTML에서 form을 찾고 있다. document.getElementById()를 통해서..
- JS가 이것을 찾았다면 loginForm은 HTML 내에 있는 element라는 뜻이다. (html에서 div태그로 감싸진 녀석들)
- 해당 element를 js로 끌고오고 input과 button을 찾아야 한다.
- 그리고 이것을 document가 아닌 loginForm안에서 바로 찾을 수가 있다.
- 보다시피 loginForm은 HTML element이다. 즉, HTML element 안을 바로 검색 가능하다는 얘기이다. (정밀조사)
- 우선 login-form이라는 id를 찾았고 그 안에서 input과 button을 찾았다.
이제 user가 해당 button을 클릭할 때 감지하는 방법을 알아냈다.
해당 방법을 가지고 value 값을 저장해야 하는데 button을 누르면 기억나는것이 있을것이다.
바로 click event를 이용하는 것이다.
참 들어가기 전에 코드를 약간 변경하도록 하겠다. (JS만)
- 위에서 사용했던 JavaScript 코드는 지우고 아래꺼로 교체하도록 하자.
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
버튼을 눌렀을때 addEventListener로 감지가 가능하도록 해보자.
JavaScript
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function onLoginBtnClick(){
console.dir(loginInput);
console.log("click!");
}
loginButton.addEventListener("click", onLoginBtnClick)
실행
콘솔에 나오는 것을 확인할 수 있다.
그리고 이렇게 click event를 생성하고 함수 안에 console.dir(loginInput)을 써 element의 object들을 확인해보자
여기서 봐야할것은 아래로 쭉 내려 보이는 value property이다.
loginInput안에 들어간 data가 value에 표시된다. 우리는 이것을 console로 출력이 되도록 바꾸어보자
우리는 input안에 value 프로퍼티 값을 가져올 것이다.
console.dir(loginInput.value);
- 이렇게 버튼(loginButton)을 눌러 event를 발생시키면 loginInput안에 들어간 value(값)을 확인 가능하다.
우리는 이제 이런식으로 input의 value를 얻게되는 방법을 알게 되었다.
hello랑 같이 입력한 값을 출력하게 소스를 수정해보자.
function onLoginBtnClick(){
console.log("hello",loginInput.value);
}
이렇게 잘 나오는 것을 확인했다
그런데 이건 문제가 하나 있다.
console.log("hello", loginInput.value); 를 한다고 했을 때
콘솔창에 보면 hello + value가 표시된다. 여기까지는 괜찮은데
문제는 아무런 값도 입력하지 않았을 때이다.
우리는 user가 이름을 입력했을 때만 button을 클릭해 값을 저장하게 만들고 싶기 때문이다.
if, else를 활용해서 만들어보자
(미리연습겸)
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function onLoginBtnClick(){
const inval = loginInput.value;
if(inval === ""){
alert("값을 입력하세요");
}
else{
console.log("hello",inval);
}
}
loginButton.addEventListener("click", onLoginBtnClick)
이런식으로 응용이 가능하다.
(해당 if, else 소스는 제가 직접 적어봤습니다. 다음 강의 때 해당 부분에 대한 내용이 나오니 다음 포스팅에 작성하도록 하겠습니다.)
'자바과정 > 자바스크립트' 카테고리의 다른 글
| 바닐라 자바스크립트 - 유효성 검사 (0) | 2021.09.24 |
|---|---|
| 바닐라 자바스크립트 - CSS와 JavaScript 분리하기 (0) | 2021.09.23 |
| 바닐라 자바스크립트 - Event listen하기 (0) | 2021.09.23 |
| 바닐라 자바스크립트 시작(3) (0) | 2021.09.23 |
| 바닐라 자바스크립트 시작 (2) (0) | 2021.09.08 |
댓글