본문 바로가기
Javascript: to do list

15 Log in 로그인 화면 만들기

by From.h 2023. 6. 1.
728x90
반응형

 

 

로그인 화면을 만들어보자.

 

 

 

html에서 필요한 것

1. id 입력할  text field 1개

2. 입력을 확인할 button 1개

3. 이들을 묶어놓은 group의 id 이름

 

 

 

 

1. id 입력할  text field 

 

 

 <body> 내부에 다음과 같이 작성한다.

 

    <div id="login-form">
    <input type="text" placeholder="What is your name?" />
    <button>Log-in</button>
    </div>
 
 
div를 묶어서 하나의 id로 지정한다. 아이디 이름은 login-form이다.
input 이라는 입력필드를 만드는데 text 값으로 입력할 것이며,
placeholder는 힌트로서 미리 보여줄 문장을 what is your name이라 적었다.
그리고 button 하나 만들고 레이블을 Log-in 이라고 적었다.
 
 

 

html 화면에 이렇게 나올 것이다.

 

 

이제 js에서 불러와서 사용할 준비가 되었다.

버튼이 잘 눌러지는지, 입력한 텍스트가 잘 출력되는지 확인해 보자.

 

 

 

 

 

2. 입력을 확인할 button

 

js에 필요한 것

1. Input에 입력되는 text 값을 가져오기

2. button을 누르면 그 입력된 text 값을 출력하기

 

 

먼저 변수를 할당한다. 어떤 값을 가져와 사용할 것인가?

입력필드의 데이터와 버튼의 동작 이 두 가지를 가져올 것이다.

html에서 가져오는 방법은 이전에 살펴봤듯이 2가지 방법이 있다.

 

1. getElementById를 이용하는 방법

const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");
 

2. querySelector를 이용하는 방법

const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

 

1번의 경우 id를 통해 엘리먼트를 도큐먼트에서 가져오고

가져온 것으로부터 다시 input값과 button값을 가져오는 것이다.

 

2번의 경우 한 번에 id/ element 방식으로 각각 가져오는 것이다.

 

한 줄이라도 짧게 쓰려면 2번 방식을 사용하는 게 낫겠다.

 

 

 

 

 

 

3. 이벤트 리스너 만들기

 

 

이제, 이벤트 리스너를 하나 만든다. 

 

loginButton.addEventListener("click", handleLoginBtn);

 

버튼을 누르면 반응하는 function명을 지정할 것이다.

이것을 버튼에 씌울 것이므로, loginButton에 이벤트리스너를 add 붙였고,

클릭하면 handleLoginBtn이라는 함수를 실행시키도록 했다.

 

 

 

 

 

4. 함수 만들어 적용하기

 

 

그다음, 실행시킬 함수를 만들자.

콘솔에 버튼이 눌렸는지 확인도 하고, 입력된 글자를 출력하도록 해보자

 

function handleLoginBtn(){
    console.log("btnClicked");
    console.log("Hello" ,loginInput.value);
}
 
 
 
함수명을 그대로 가져와서 function을 하나 만들었고,
콘솔로그를 통해 버튼클릭되면 btnClicked라고 출력하도록하고
입력된 값 즉 loginInput이라는 입력필드에 실제로 입력된 value를 "Hello"와 함께 출력하도록 했다.
 
 
 

 
확인을 마쳤으면 불필요한 버튼확인 코드는 삭제하고 정리하자.

 

 

 

 

 

Tips. js 파일 내용 정리

 

const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

function handleLoginBtn(){
    console.log("btnClicked");
    console.log("Hello" ,loginInput.value);
}

loginButton.addEventListener("click", handleLoginBtn);
 

 

 

 

 

 BR. h

 

 
 
 
728x90
반응형

'Javascript: to do list' 카테고리의 다른 글

17 선택자 class와 id  (0) 2023.06.01
16 Validate 유효성 체크  (0) 2023.06.01
14 ClassName과 ClassList의 차이  (0) 2023.06.01
13 CSS로 Style 작성하기 기초 I  (0) 2023.06.01
12 Event 토글 버튼의 원리을 알자  (0) 2023.05.31

관련글

티스토리툴바