FrontEnd/JavaScript

nomadcoders_바닐라JS로 크롬앱 만들기_day3

Leo.K 2023. 3. 14. 17:55 
const loginForm = document.querySelector("#login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");
function onLogInBtnClick(){
    console.log(loginInput.value);
}
loginButton.addEventListener("click", onLogInBtnClick)

2023.03.14
#4.0 Input Values
모든 것은 HTML에서 시작되어야 한다. HTML에서 태그를 작성하고 자바스크립트로 기능을 구현한다.
먼저, HTML 코드 작성하기
1. 사용자가 이름을 작성할 수 있도록 input 태그를 작성한다.
안에 텍스트를 넣을 거니까 type="text"해주고, 안에 미리 작성할 말은 placeholder 안에 써주며, value라는 속성을 가져오기 위해서 value=""까지 추가한다.

2. 입력받은 데이터를 전송하는 버튼을 만든다.

3. div태그로 위의 것들 묶어주고, id="login-form"을 해준다.

<!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</title>
</head>
<body>
    <div id="login-form">
        <input value="" type="text" placeholder="What is your name?">
        <button> Log In </button>
    </div>
    <script src="app.js"></script>
</body>
</html>



자바스크립트로 input 안에 작성한 텍스트를 읽어서 조절하는 기능 구현하기

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

2. 버튼을 클릭하면, 내가 작성한 값을 콘솔에 보여주는 기능
loginButton.addEventListener("click, onLoginBtnClick);

3. 함수 만들기
function onLoginBtnClick(){
console.log(loginInput.value);
}

2023.03.15
#4.1 Form Submission
console.log("hello",loginInput.value)를 통해서 hello loginInput.value값을 얻는다.
단, input 태그에 값을 입력안하면 hello만 로그에 찍힌다. 이것을 if else를 통해 유효성 검사를 해보자.
값을 입력하지 않은 경우와 너무 길게 입력한 경우 사용자가 볼 수 있도록 alert를 띄워줄 것이다.

if(userName === ""){
    alert("Please Write your name");
}else if(userName.length > 15){
    alert("Your name us too long");
}

String.length라는 함수를 통해서 문자열의 길이를 구할 수 있다.

if else 문은 선호하는 방식이 아니라서 지우고 html코드의  input 태그에 속성으로 required를 적고 maxlength="15"를 적는다. 유효성 검사 이후에 입력을하고 버튼을 누르면 새로고침이 실행되고 값이 사라짐.

<form id="login-form">
    <input required maxlength="15" value="" type="text" placeholder="What is your name?">
    <button> Log In </button>
</form>

+ button 태그 대신 input type="submit"을 사용하게 되면 별도의 클릭 이벤트 리스너가 필요없다. 클릭 혹은 엔터를 눌러도 입력받은 값이 전송된다.(핵심 : input 태그는 반드시 form태그의 자식으로 포함되어야 한다.)

하지만, 유저가 입력한 정보를 저장해야 하는데 페이지가 새로고침 되면 그럴 수 없다. 이 방법을 함께 알아보자.

#4.2 Events
function onLoginSubmit(event){
    event.preventDefault();
    // 브라우저가 기본 동작을 실행하지 못하게 막기 // event object는 preventDefault함수를 기본적으로 갖고 있다.
    console.log(event);
}

loginForm.addEventListener("submit", onLoginSubmit);
// submit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미이다.
// JS는 onLoginSubmit 함수 호출시 인자를 담아서 호출한다. 해당 인자는 event object를 담은 정보들이다.

★ 중요 ★
form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. << 우리가 원하는 것이 아니다!
preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!

이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다. 첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 방금 발생한 이벤트에 대한 기본 정보들을 제공하고 있다.
ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음

 

#4.3 Events Part Two
addEventListener 안에 있는 함수는 직접 실행하지 않는다. 브라우저가 실행시켜주고 브라우저에서 해당 이벤트에 대한
정보 즉, object(보통 event라고 변수명을 사용)를 가지게 된다.
addEventListener의 함수에서 object에 대한 자리만 할당해주면 해당 이벤트가 발생시킨 정보들에 대한 object들을 볼 수 있다!
이때 해당 이벤트가 가진 기본 Defㄴault값을 발생시키지 않기 하게 위해선 preventDefault를 이용하여 막을 수 있다.

 

#4.4 Getting Username 
const HIDDEN_CLASSNAME = 'hidden';
관습: String만 포함된 변수는 대문자로 쓴다.

String 합치기 or 변수에 String 대입하기
'hello!' + username + 'nice to meet you!'; 는
`hello ${username} nice to meet you `; 와 같으며 후자의 방법 사용하자. 

visibility : hidden VS display : none
전자는 보이는 것만 가리고 해당 태그가 차지한 영역은 지키고 있는다.
후자는 보이는 것도 가리지만 해당 태그가 차지한 영역 자체를 감춰버린다. 
즉, 눈에 안보이는 것은 똑같지만, 태그의 영역이 보존되느냐 안되느냐의 차이다.

const loginForm = document.querySelector("#login-form");
const loginInput = loginForm.querySelector("input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";

function onLogInSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const userName = loginInput.value;
    // greeting.innerText = "Hello " + userName; 스트링을 합치는 방법
    greeting.innerText = `Hello ${userName}`; //스트링에 변수를 대입시키는 방법
    greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLogInSubmit);

 

#4.5 Saving Username
페이지를 새로고침해도 사라지지 않도록 브라우저가 저장하는 아주 작은 DB의 개념. 
브라우저가 종료될때까지 유지된다.
localStorage.setItem(key, value);
- 로컬 저장소에 해당 키와 값을 저장함.
localStorage.getItem(key);
- 로컬 저장소에 해당 키에 해당되는 값을 불러옴.
localStorage.removeItem(key);
- 로컬 저장소에 해당 키에 해당되는 키, 값을 삭제함.

const loginForm = document.querySelector("#login-form");
const loginInput = loginForm.querySelector("input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
const link = document.querySelector("a");
const savedUsername = localStorage.getItem(USERNAME_KEY);

//페이지가 로드될 때 로컬 스토리지 내부의 값의 여부를 확인한다.
if(savedUsername === null ){
    // show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLogInSubmit);
}else {
    // show the greetings
    paintGreetings(savedUsername);
}

//값이 있다면 값을 그려주는 함수(for 중복 방지)
function paintGreetings(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

function onLogInSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);

    const userName = loginInput.value;
    localStorage.setItem(USERNAME_KEY, userName);
    paintGreetings(userName);
}

loginForm.addEventListener("submit", onLogInSubmit);
저작자표시

'FrontEnd > JavaScript' 카테고리의 다른 글

nomadcoders_바닐라JS로 크롬앱 만들기_day5  (0) 2023.03.17
nomadcoders_바닐라JS로 크롬앱 만들기_day4  (0) 2023.03.16
nomadcoders_바닐라JS로 크롬앱 만들기_day1  (0) 2023.02.21
jQuery정리  (0) 2022.08.17
Leo.K | To become a cooler Developer
프로필사진

티스토리툴바