JS: 노마드코더 4강 정리

ChoHyerin·2023년 5월 14일
0

Javascript

목록 보기
3/7

4.0 Input Values

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Momentum App</title>
  </head>
  <body>
    <div id="login-form">
    <!-- div태그로 묶고 id 생성, 원하는 태그 찾기위해 -->
      <input type="text" placeholder="What is your name?" /> 
      <!-- 사용자는 텍스트를 입력, type='text'로 지정해 줌 -->
      <!-- input박스 안에 미리보기로 작성할 말은 placeholder=""로 지정 -->
      <button>Log In</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

app.js

const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
//querySelector 로 id태그를 쓸때는 #를 써야함
//getElementById 로 id태그를 쓸땐 #를 안써도 OK
// console.dir() 불러온 함수의 내부(element)를 세부적으로 보여줌

function onLoginBtnClick() {
  console.log("hello", loginInput.value);
}

loginButton.addEventListener("click", onLoginBtnClick);

4.1 Form Submission

4.0과 다르게 input에 추가적으로 속성을 지정해줌
→ required maxlength="15"

index.html

<!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"></link> 
    <title>Moment App</title>
</head>
<body>
    <script src="app.js"></script>
    <form id="login-form">
        <input required maxlength="15" type="text"
          placeholder="What is your name?"
        />
      <!-- input에 입력하는 text의 길이를 15로 제한함 -->
        <input type="submit" value="Log In" />
      </form>
</body>
</html>

→ 이 방법은 browser에서

>>if<<
위 html에서 maxlength가 없다면, js코드에서 조건 설정을 해줘야 함, 근데 이 방식 별로임;
_절대 user를 믿지마. 절대 믿으면 안 돼

app.js

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

function onLoginBtnClick() {
    console.log("hello", loginInput.value);
    const username = loginInput.value;
    
    if (username === "") {
      alert("제발 니 이름써");
    } else if (username.length > 15) {
      alert("니 이름 너무 길어.");
    }
}
  loginButton.addEventListener("click", onLoginBtnClick);

4.2-3 Events

1) part 1

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가 기본 정보들을 제공하고 있음

2) part 2

  • addEventListener 안에 있는 함수는 직접 실행하지 않음
    → 브라우저가 실행시킴, 브라우저에서 해당 이벤트에 대한 정보 즉, object를 가지게 됨
  • addEventListener의 함수에서 object에 대한 자리만 할당해주면 해당 이벤트가 발생시킨 정보들에 대한 object들을 볼 수 있음
    → 해당 이벤트가 가진 기본 Default값을 발생시키지 않기 하게 위해선 preventDefault를 이용하여 막을 수 있음

4.4 Getting Username

1) .hidden

style.css

.hidden{
  display: none
}

app.js

function onLoginSubmit(event) {
  event.preventDefault(); //자동 새로고침 방지
  const username = loginInput.value; 
  loginForm.classList.add("hidden"); //로그인 폼 숨김
  console.log(username);
}

loginForm.addEventListener("submit", onLoginSubmit);

>> 사용자에게 이름을 입력받고 새로고침되지 않은 채로 로그임 폼을 숨김

* visibility:hidden은 공간은 그대로 두고 보이지만 않음 / display:none은 잡아둔 공간도 사라짐

2) remove

index.html

  <body>
    <form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <input type="submit" value="Log In" />
    </form>
    <h1 id="greeting" class="hidden"></h1> 
    <!-- 추가한 부분^ -->
    <script src="app.js"></script>
  </body>

app.js

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


const HIDDEN_CLASSNAME = "hidden"; //"hidden"을 두 개 이상 사용하기 때문에

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  
  greeting.innerText = "Hello " + username; //h1태그로 표시될 내용
  greeting.classList.remove(HIDDEN_CLASSNAME);//h1태그에서 hidden class를 제거함
}

loginForm.addEventListener("submit", onLoginSubmit);

>> greeting.classList.remove(HIDDEN_CLASSNAME); 코드를 통해 hidden 됐던 문구가 나타남

"Hello " + username; ===Hello ${username};
되도록 이면 후자의 방법을 사용

const HIDDEN_CLASSNAME = 'hidden';
관습: string만 포함된 변수는 대문자로 쓴다 + 중요한 변수가 아니기 때문에

4.5 Saving Username

1) localStorage.setItem(key, value)
: 로컬 저장소에 해당 키와 값을 저장함

2) localStorage.getItem(key)
: 로컬 저장소에 해당 키에 해당되는 값을 불러옴

3) localStorage.removeItem(key)
: 로컬 저장소에 해당 키에 해당되는 키, 값을 삭제함

app.js

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

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  
  localStorage.setItem("username", username);
  // 로컬 저장소에서 "username"이라는 키값과 값을 저장함
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

4.6 Loading Username

index.html

<body>
    <form class="hidden" id="login-form">
    <!-- class hidden 추가함 -->
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <input type="submit" value="Log In" />
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
  </body>

app.js

const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

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

function paintGreetings(username) {  
  greeting.innerText = `Hello ${username}`;
  // username을 받고 greeting 아이디를 갖고 있는 태그 안에 Hello username이 뜨게 만듦
  greeting.classList.remove(HIDDEN_CLASSNAME);
  // greeting 아이디를 갖는 태그에 있는 class 값을 제거함
}

const savedUsername = localStorage.getItem(USERNAME_KEY); 
// 저장되어 있는 username이라는 키에 들어있는 값을 불러옴

if (savedUsername === null) { // 저장된 username값이 없을 때 
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  paintGreetings(savedUsername);
}

<완성본>

  1. 이름을 적을 수 있는 input form이 나온다.
  2. 이름을 입력하면 이 사라지고 이름과 함께 Hello가 붙어서 화면에 출력된다.

    로컬 저장소에 저장된 유저이름을 볼 수 있다.
profile
ChoHyerin
이전 포스트

JS: 노마드코더 3강 정리

다음 포스트

JS: 노마드 코더 5강 정리

0개의 댓글