[JS] 004. Saving User Name (1)

10256 단어 jsjs

<오늘 알게 된 것들>

  • querySelector : 원하는 셀렉터를 다 가져오는 것, 클래스 & css 방식으로
    => 찾은 첫번째를 가져온다

  • querySelectorAll : 모든 걸 다 가져온다
    => 자기가 찾은 모든 엘리먼트의 array를 줄 것이다
    -찾은 것이 하나의 클래스명이라도 이를 array에 넣어준다,

  • getElementbyID : 아이디로 찾아서 가져오는 것

  • getElementbyTagName : 태그로 엘리먼트 가져오는 것 (input, body, html, div, section)

  • 한 요소에 클래스를 적용할 때는 class="" 따옴표 안에 클래스명을 작성
    여러 클래스를 적용하고 싶을 때는 각 클래스 이름을 띄어쓰기로 구분한다.
    class="js-form form" 이 있으면 js-form이라는 클래스랑 form이라는 클래스가 있는 것이다

  • 클래스명을 자바스크립트에서 이름만 똑같이 기입해준다면 따로 html창처럼
    querySelector 같은 함수를 이용안하고도 쓸 수 있다

  • local storage
    :작은 자바스크립트 정보들을 저장해주는 곳

(1) html

</head>
<body>
    <div class="js-clock">
        <h1>00:00</h1>
    </div>
    <form class="js-form form">
        <input type="text" placeholder="What is your name" />
    </form>
    <h4 class="js-greetings greetings"></h4>

    <script src="clock.js"></script>
    <script src="greeting.js"></script>
</body>
</html>

(2) js

const form = document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting=document.querySelector(".js-greetings");
const User_LS="namewhichisentered",
showing_cn="showing"; //block으로 보이게 하는 것

function paintGreeting(text){
    form.classList.remove(showing_cn);//입력이 되면 폼 없애야 함 안 보이게
    greeting.classList.add(showing_cn);
    greeting.innerText=`Hello ${text}`;
}

function loadname(){
    const currentUser=localStorage.getItem(User_LS);
    if(currentUser===null){

    }else{
        paintGreeting(currentUser);
    }   
}
function init(){
    loadname();
}
init();

=> 일단

(3) css

/*기본 값을 null로 해준다*/
.form,
.greetings{
    display:none;
}

.showing{
    display : block;
}
/*showing 이 있는 html요소를 화면에 보이게 한다 */

=> 일단 이름 입력하는 폼이랑, 안녕 사용자~해주는 greeting 부분의 디폴트 값은
none으로 해서 안보이게 해준다 화면에서
만약 사용자가 이름을 입력해서 그 이름이 local storage면
form을 안보이게 하고, greeting은 보이게 해준다

이 사용자 인풋을 로컬스토리지에 저장하는 것은 다음 과정에서 마무리

당신에게 가장 적합한 도구 여덟 개.네트워크 개발자
nested exception is org.apache.ibatis.builder.BuilderException Error invoking SqlProvider method

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage