[JS]2021-1107 localStorage - CSS,HTML 조작

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다.

JavaScript로 CSS 조작하기 - classList 활용

<form id="login-form" class="hidden">
        <input required maxlength="15" type="text" placeholder="What is your name?"/>
        <button>Log in</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>

사용자가 이름을 입력하고 버튼을 클릭해 submit을 하는 동시에, 로그인 폼이 사라지고 인사말이 뜨도록 해야 한다.

form과 h1 모두 hidden이라는 클래스를 주고, 아래와 같이 css를 작성해 주었다.

.hidden {
  display: none;
}

classList를 사용해 html의 class를 추가, 삭제, 변경할 수 있다.

반복해서 사용되는 string의 경우, 철자 오류 방지를 위해 변수로 선언해주는 것이 바람직하다.

const HIDDEN_CLASSNAME ="hidden";

function onLoginSubmit(event) {
    event.preventDefault();
    const username = loginInput.value;
    localStorage.setItem("username", username);
    
    loginForm.classList.add(HIDDEN_CLASSNAME);	
}

JavaScript로 HTML 조작하기 -. innerText 활용

function paintGreetings(username) { //인삿말을 띄워주는 함수
    greeting.innerText = `Hello, ${username}`; //h1안에 사용자가 입력한 이름을 넣어 인삿말 string을 만든다.
    greeting.classList.remove(HIDDEN_CLASSNAME); //인삿말이 만들어진 h1의 hidden class를 지워, 화면에 뜨도록 한다.
}

submit 이벤트가 발생하면, paintGreetings라는 함수가 실행되는데, 이 함수는 username을 인자로 받아

화면에 Hello, '사용자 이름'- 형태의 문장을 만든다. 동시에 hidden class를 지워 이 내용에 화면에 출력되도록 한다.

 

변수를 사용해 화면에 띄워줄 string을 만드는 것은 두 가지 방법이 있다.
1. "Hello " + username
2. `Hello ${username}` → ${} 안에는 변수명을 넣어주고, 모든 내용을 `` 백틱으로 묶어준다.

${variableName} : 공식문서에서 찾아보니 이러한 방식을  Template literals라고 부른다고 한다.
따옴표를 쓴 string과 변수를 + 로 묶어주는 기존 방식을 단순화시킨 방식인 것 같고,
제이쿼리와는 연관이 없는 자바스크립트 문법이라고 한다.

 

function onLoginSubmit(event) { //form에 추가된 submit 이벤트 리스너가 실행시키는 함수
    event.preventDefault(); // submit시 새로고침되는 기본 행동을 억제한다.
    const username = loginInput.value; //username 변수에 사용자가 input에 입력한 value를 담고
    localStorage.setItem("username", username); //이를 브라우저의 로컬 스토리지에 저장한다.
    loginForm.classList.add(HIDDEN_CLASSNAME); //정보입력이 완료된 로그인 폼을 hidden시키고,
    
    paintGreetings(username); //인삿말을 띄워주는 함수를 실행한다.
}

loginForm.addEventListener("submit",onLoginSubmit); //submit 이벤트가 발생하면 함수를 실행시키는 이벤트리스너

paintGrettings함수의 인자 값인 username은 앞서 선언해 주었던 input의 value 값이다.