노마드코더 실습 코드 (4강)

yiseonline·2023년 5월 7일
js노마드코더
0

nomadCoder

목록 보기
3/8
post-thumbnail

4.0 Input Values

querySelecotr()와 getElementById 차이점
querySelecotr() = 대상이 id인지 명확히 해줘야함
getElementById = 이미 id를 찾고있다는걸 알기 때매 명확히 안해도 됨

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

=둘은 같다=

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

-last code-

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

function onLoginBtnClick()
{
    console.dir(loginInput.value);
}

loginButton.addEventListener("click",onLoginBtnClick)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Momentum App</title>
    </head>
    <body>
        <div id="login-form">
        <input type="text" placeholder="What is your name?"/>
        <button>Log In</button>
        </div>
        <script src="app.js"></script>
    </body>
</html>

4.1 Form Submission

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

function onLoginBtnClick()
{
    const username = loginInput.value;
    if(username==="")
    {
        alert("Please write your name");
    }
    else if(username.length>15)
    {
        alert("Your name is too long.");
    }
}

loginButton.addEventListener("click",onLoginBtnClick)

ㄴ로그인 예제

<body>
        <form id="login-form">
        <input required maxlength="15" type="text" placeholder="What is your name?"/>
        <button>Log In</button>
        </form>
        <script src="app.js"></script>
    </body>

html에 이렇게 아예 maxlength를 설정할 수 있다
required처럼 정해놓는거는 꼭 <form></form> 속에 있어야 한다 div아님!

-last code-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Momentum App</title>
    </head>
    <body>
        <form id="login-form">
        <input required maxlength="15" type="text" placeholder="What is your name?"/>
        <input type="submit" value="Log In"/>
        </form>
        <script src="app.js"></script>
    </body>
</html>

<button>Log In</button>

-> <input type="submit" value="Log In"/> 으로 고치면

p.js:10 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at app.js:10:13
(

이러는 에러가 뜬다 이걸 다음 강의에서 고치신다함

4.2 Events

const loginInput=document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
function onLoginSubmit()
{
    const username = loginInput.value;
    console.log(username);
}

loginForm.addEventListener("submit",onLoginSubmit);

ㄴ submit event는 잘 하고 있지만 새로고침 부분에서 아직도 문제가 있음

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

function onLoginSubmit(tomato)
{
    tomato.preventDefault();
    console.log(tomato);
}

loginForm.addEventListener("submit",onLoginSubmit); 
//we don't do () browser press function automatically

ㄴ function이 하나의 argument(tomato)를 받도록 하고 그걸 JS에 넘겨주고 있음

-last code-

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

function onLoginSubmit(event)
{
    event.preventDefault(); //browser의 기본 동작을 막아줌
    console.log(loginInput.value);
}

loginForm.addEventListener("submit",onLoginSubmit); 
//we don't do () browser press function automatically

preventDefault() - browser의 기본 동작을 막아줌

4.3 Events part Two

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

const link=document.querySelector("a");

function onLoginSubmit(event)
{
    event.preventDefault(); //browser의 기본 동작을 막아줌
    console.log(loginInput.value);
}

loginForm.addEventListener("submit",onLoginSubmit); 
//we don't do () browser press function automatically

function handleLinkClick()
{
    alert("clicked!");
}
link.addEventListener("click",handleLinkClick);

ㄴ 로그인 버튼 누르면 alert뜨고 링크 페이지로 이동시켜주는 코드

function handleLinkClick(event)
{   
    event.preventDefault();
    console.dir(event);
}

event.preventDefault(); 기본 동작을 막아주는 함수를 넣어주면 링크 페이지로 넘어가지 않는다

  • addEventListener 안에 있는 함수는 직접 실행하지 않는다 ! 브라우저가 해준다 ! (가장 중요)

4.4 Getting Username

  • 하고 싶은 것 : username 작성하면 form이 아예 없어지는거
<form id="login-form" class="hidden">


.hidden{
    display: none;
}

추가 했는데 왜 나는 안 사라지냐?!!?

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

const HIDDEN_CLASSNAME="hidden";

function onLoginSubmit(event)
{
    event.preventDefault(); //browser의 기본 동작을 막아줌
    console.log(loginInput.value);
    const username=loginInput.value;
    loginForm.classList.add("hidden");
    console.log(username);
    greeting.classList.remove(HIDDEN_CLASSNAME);
}
greeting.innerText="Hello "+username;

loginForm.addEventListener("submit",onLoginSubmit);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Momentum App</title>
    </head>
    <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>
        <a href="https://nomadcoders.co">Go to courses</a>
        <script src="app.js"></script>
    </body>
</html>
.hidden{
    display: none;
}

왜 난 안되냐고 !!

이 둘은 같은 방법이다

4.5 Saving Username

localStorage.setItem("username") //local storage에 저장
localStorage.removeItem("username") //local storage 삭제
localStorage.getItem("username") //local storage에 저장한 값 불러내기

값이 저장되는 것을 볼 수 있다

-last code-

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

const HIDDEN_CLASSNAME="hidden";

function onLoginSubmit(event)
{
    event.preventDefault(); //browser의 기본 동작을 막아줌
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username=loginInput.value;
    localStorage.setItem("username",username);
    greeting.innerText="Hello "+username;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit",onLoginSubmit);

4.6 Loading Username

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

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

function onLoginSubmit(event)
{
    event.preventDefault(); //browser의 기본 동작을 막아줌
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username=loginInput.value;
    localStorage.setItem(USERNAME_KEY,username);
    greeting.innerText="Hello "+username;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername=localStorage.getItem(USERNAME_KEY);
//유저 정보가 local storage에 없다면 null을 반환하자
if(savedUsername===null){ 
    //savedUsername 값이 null 이라면 form의 hidden class명을 지워주자 
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
}
else{
    //show the greetings
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Momentum App</title>
    </head>
    <body>
        <form class="hidden" 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>
        <a href="https://nomadcoders.co">Go to courses</a>
        <script src="app.js"></script>
    </body>
</html>

난 왜 log in 창이 안뜨는 것인가,..

이렇게 되어야되는데

난 <form class="hidden" ...>이 안 없어짐..
짜증!!!!!난다@!@!@!!@#!!

-last code-

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

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

function onLoginSubmit(event)
{
   event.preventDefault(); //browser의 기본 동작을 막아줌
   loginForm.classList.add(HIDDEN_CLASSNAME);
   const username=loginInput.value;
   localStorage.setItem(USERNAME_KEY,username);
   paintGreetings(username);
}
function paintGreetings(username)
{
   greeting.innerText="Hello "+username;
   greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savedUsername=localStorage.getItem(USERNAME_KEY);
//유저 정보가 local storage에 없다면 null을 반환하자
if(savedUsername===null){ 
   //savedUsername 값이 null 이라면 form의 hidden class명을 지워주자 
   loginForm.classList.remove(HIDDEN_CLASSNAME);
   loginForm.addEventListener("submit",onLoginSubmit);
}
else{
   paintGreetings(savedUsername);
}


ㄴ 헤헤 성공했드아
코드에 문제는 아닌거 같고 local storage에 초기화를 안해서 그런듯하다..ㅎㅎ

4.7 Super Recap

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

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

function onLoginSubmit(event)
{
    event.preventDefault(); //browser의 기본 동작을 막아줌
    loginForm.classList.add(HIDDEN_CLASSNAME); //form 을 다신 숨겨준다
    const username=loginInput.value; //loginInput.value을 username이라는 변수로 저장
    localStorage.setItem(USERNAME_KEY,username);//username 값을 username이라는 key와 함께 local storage에 저장
    paintGreetings(username); //paintGreetings 함수 호출
}
function paintGreetings(username)
{
    greeting.innerText="Hello "+username;//비어있는 h1 요소 안에 "Hello "+username라는 text추가
    greeting.classList.remove(HIDDEN_CLASSNAME);//h1요소로부터 hidden이란느 클래스 제거
}
const savedUsername=localStorage.getItem(USERNAME_KEY);
//유저 정보가 local storage에 없다면 null을 반환하자
if(savedUsername===null){ 
    //savedUsername 값이 null 이라면 form의 hidden class를 지워서 form이 화면에 표시되게 해줌
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
}
else{
    paintGreetings(savedUsername); //화면에 출력
}

마지막 강의는 복습 강의였드아
나두 한 줄씩 주석 달아주었드아

profile
yiseonline
이전 포스트

노마드코더 실습 코드 (3강)

다음 포스트

노마드코더 실습 코드 (5강)

0개의 댓글