노마드코더 6일차

링규 2021. 11. 15. 21:45

classList

element의 class 내용물을 조작하는 것을 허용한다.

#classList의 function

* contains() : 명시한 class가 HTML element의 class에 포함되어있는지 알려준다.

ex) if(h1.classList.contains(clickedClass)) { }

-> classList가 clickedClass를 포함하고 있는지 확인

*remove()

ex) h1.classList.remove(clickedClass);

-> h1 classList의 clickedClass를 제거함

*add()

ex) h1.classListList.add(clickedClass)

-> clickedClass를 추가함

*toggle() : click이벤트가 일어나면 css로 style을 준 클래스명을 on/off 처리한다.

toggle을 이용하면 저번시간에 만들었던

function handleTitlelick(){
    console.log("click!");
    const clickedClass = "clicked";
    if(h1.className === clickedClass){
    h1.className = "";
    } else {
        h1.className = clickdClass;
    }
}

이 코드를 아래와 같이 고칠 수 있다.

function handleTitlelick(){
    console.log("click!");
    h1.classList.toggle("clicked");
}

toggle이 h1의 classList에 clicked class 가 있는지 확인 한 후 있다면 삭제(remove), 없다면 추가(add)해준다.

(출력 결과는 같다)

시작하기

가장 먼저 화면을 구성할 element들을 HTML을 통해 구성한다

HTML의 <body> 안에 아래 코드를 추가하면 입력창(intput)과 placeholder(입력창 안의 회색 글씨), login 버튼이 생성된다.

<div id="login-form">
	<input type = "text" placeholder="What is your name?" />
	<button>Log In</button>
</div>

앞으로 여러 버튼과 input들을 작성할 것이기 때문에 묶여다닐 친구들을 <div>안에 넣어준다

id는 앞으로 이 부분을 호출할 때 사용할 id이므로 겹치지 않게 작성한다. (id말고 classname을 써도 ok)

JS로 가서 querySelector나 getElementById를 사용하여 이 element를 불러온다. querySelector는 classname, id, tagname 모두를 검색할 수 있으므로 검색 대상을 반드시 명시해야한다.

방법 1

//login-form을 검색하여 불러오기
const loginForm = document.getElementById("login-form");

//다시 document를 검색하는 것이 아닌 이미 검색된 loginForm을 검색한다.
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

방법 2

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

사용자가 입력창에 내용을 입력하고 Login을 클릭하면 사용자가 입력한 내용을 개발자가 사용할 수 있도록 (화면에 표시하거나 콘솔에 출력하는 등) 하려면 버튼 클릭을 인지할 EventListener와 input 안의 value이다.

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

loginButton.addEventListener("click", loginButtonClick);

로그인 버튼을 클릭 할 때마다 loginInput(=입력창)의 value(=입력한 내용)이 console에 출력된다.

여기서 하나 더 필요한 작업은 입력창의 입력된 내용이 공백은 아닌지 너무 길지 않은지 확인하는 유효성 검사이다.

function에 if-else 문을 통해 조건에 따라 알맞은 팝업이 뜰 수 있도록 한다.

function loginButtonClick() {
    const username = loginInput.value;
    if (username === "") { //아무것도 입력되지 않은 경우
        alert("이름을 입력해주세요.");
    } else if(username.length > 15) {  //15글자를 초과한 경우
        alert("15글자 미만의 이름을 입력해주세요.");
    } else {
        alert("Hello " + username + " :)");
    }
}

loginButton.addEventListener("click", loginButtonClick);

if - else문 외에 브라우저 자체 기능을 통하여 이런 과정을 대신 할 수도 있다.

유효성 검사를 작동시키기 위해서 input은 반드시 form 안에 존재해야 한다.

-> form 안에서 enter을 누르고 input이 더이상 존재하지 않는다면 자동으로 submit된다.

HTML의 Input을 required(반드시 입력되어야하는 field)로, maxlength를 15로 설정하면

#HTML

<body>
    <form id="login-form">
        <input 
            required 
            maxlength="15" 
            type = "text" 
            placeholder="당신의 이름을 알려주세요" 
        />
        <button>Log In</button>
    </form>
    <script src ="app.js"> </script>
</body>

#JS

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

function loginButtonClick() {
    const username = loginInput.value;
        console.log(username); //입력 확인 용
}

loginButton.addEventListener("click", loginButtonClick);

log in을 클릭하거나 엔터를 누르면 console에 값이 뜨자마자 새로고침이 일어난다 (submit 됨)

-> 클릭 이벤트가 일어나지 않아도 엔터를 입력하기만 하면 form이 submit된다!

다음 회차는 브라우저를 새로고침 시키지 않고 user정보를 저장하는 방법 부터!