Written by java-style
on 2021-11-08

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

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

JavaScript로 CSS 조작하기 - classList 활용

사용자가 이름을 입력하고 버튼을 클릭해 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 값이다.

from http://friedegg556.tistory.com/28 by ccl(A) rewrite - 2021-11-08 00:28:10

Top