카테고리 없음

로그인 예제

김딸기* 2024. 9. 10. 17:12

 

<body>
    <div id="login-form">
    <input value="33" type="text" placeholder="name?">
    <button>log in</button>
    </div>
    <script src="app.js"></script>
   
</body>

1) HTML 코드 작성하기
1. 사용자가 이름을 작성할 수 있도록 input 태그를 작성한다.
안에 텍스트를 넣을 거니까, type="text"해주고, 안에 미리 작성할 말은 placeholder 안에 써주기
2. 그리고 Log In 버튼을 만든다.
3. div태그로 위의 것들 묶어주고, id="login-form"을 해준다.
->둘을 묶은 다음, 저 id를 통해서 자바스크립트에서 내가 원하는 태그들을 쉽게 찾기 위해서 묶어주는 것 

2)input 안에 뭔가를 작성하고 로그인 버튼을 누르면 저장해야 되니까 자바스크립트로 기능 구현하기

그냥 html 태그를 가져올 수 없으니까 변수 안에 넣고 거기서 텍스트 받기

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

 

const loginform=document.getElementById("login-form")//html의 엘리먼트를 JS로 가져옴
const loginInput=loginform.querySelector("input")//loginform내부에서 엘리먼트 가져옴
const loginButton=loginform.querySelector("button")

 

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

 

document 안에서 찾기. id="login-form"인 곳에서 input요소를 loginInput 안에 넣어주기

2. 버튼을 클릭하면, 내가 작성한 값을 콘솔에 보여주는 기능

loginButton.addEventListener("click, onLoginBtnClick);

3. 함수 만들기
function onLoginBtnClick(){
console.log(loginInput.value);
}

input의 내용을 가져오려면 value라는 property를 찾아봐야 됨.

 

    <!--form으로 형식을 바꾸자 button을 누르면 새로고침되고 정보가 submit됨-->
    <form id="login-form">
    <input required maxlength="15" type="text" placeholder="name?">
    <button>log in</button>
    </form>
    <script src="app.js"></script>
   

 

 

  • 클릭 이벤트와 console.log() 사용:
    사용자가 버튼을 클릭하면, loginInput 요소에 대한 값을 얻고 콘솔에 출력합니다. console.log(loginInput.value)는 입력된 값을 출력합니다.
  • console.dir()로 요소 내부 확인:
    loginInput의 내부 속성을 확인하기 위해 console.dir(loginInput)을 사용합니다. 이렇게 하면 해당 요소가 가진 속성을 모두 볼 수 있습니다.
  • 클릭 시 입력값 출력:
    클릭 이벤트로 함수를 실행하고, loginInput에 입력된 값을 가져와 출력합니다. 입력 창에 입력된 문자가 출력됩니다.
  • console.log()를 통해 값 확인:
    console.log("hello", loginInput.value)로 값을 확인하는데, 만약 값이 없으면 아무것도 출력되지 않습니다. 이를 해결하기 위해 if else 조건문을 사용하여 값이 없을 때와 있을 때의 동작을 설정합니다.
  • 유효성 검사 설명:
    username 입력값이 비어 있거나 너무 길지 않도록 유효성 검사를 합니다. 값을 입력하지 않았을 때는 경고 메시지를 띄우고, 15자 이상의 긴 입력은 제한합니다.
  • 입력값 유효성 검사:
    if문을 사용하여 value.length로 입력된 문자의 길이를 검사합니다. 15자 이상이면 입력이 너무 길다는 조건을 추가합니다.
  • 경고창을 사용한 출력:
    console.log() 대신 alert()로 사용자에게 메시지를 띄우고, 값을 입력하지 않았을 때는 "Please write your name"이라는 경고 메시지를 표시합니다.
  • 문자열 길이 확인:
    username.length로 입력된 문자열의 길이를 확인하고, if (username.length > 15) 조건을 설정하여 15자 이상의 입력을 제한합니다.
  • 제출 유효성 검사 대체:
    if else문을 대신하여 HTML의 input 요소에 required 속성을 추가하고, maxlength="15" 속성으로 최대 입력 길이를 설정합니다.
  • HTML 속성으로 검증:
    if else문을 없애고, required와 maxlength="15"로 입력값을 검증합니다. 유효한 입력값을 제출한 후 값을 콘솔에 기록합니다.
  • 새로고침 문제 해결:
    값을 제출할 때마다 페이지가 새로고침되는데, 이는 원하지 않는 동작입니다. 이를 막기 위해 form의 기본 제출 동작을 차단합니다.

 


function onLoginSubmit(tomato){//로그인 제출시 이벤트 함수
    //form을 submit하면 브라우저는 기본으로 새로고침한다
    tomato.preventDefault()//브라우저 기본 동작을 막는 함수
    console.log(tomato)
}

loginForm.addEventListener("submit",onLoginSubmit)
//form의 submit이벤트를 감지=>입력값 출력함


//submit 이벤트가 발생시 JS는 onLoginSubmit함수를 호출하고 wvent 오브젝트를 argument로 전달
//


form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. << 우리가 원하는 것이 아님!
preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!

이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다. 첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다. ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음

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

 

 

const greeting=document.getElementById("greeting")

//여러개의 string이 사용되므로 이를 저장하기 위한 변수 선언->대문자로 표기
const HIDDEN_CLASSNAME="hidden"

function onLoginSubmit(tomato) {//로그인 제출시 이벤트 함수
    const value = loginInput.value;
    tomato.preventDefault()//브라우저 기본 동작을 막음
    loginForm.classList.add(HIDDEN_CLASSNAME)//loginForm엘리먼트에 hidden이라는 클래스명 더해 form을 숨김
    greeting.innerText="hello,"+value //h1안에 greeting에 있는 텍스트 추가
   
    greeting.classList.remove(HIDDEN_CLASSNAME)//h1은 hidden을 해제해 숨겨지지 않도록 함
    //id가 greeting인 h1엘리먼트를 불러와 클래스리스트 중 hidden이 있으면 제거함
}
.hidden{
    display: none;
}

HTML의 어느 한 부분을 잡고 거기에 class 를 추가하거나 빼고 싶을 때는
classList.add.('classname')
classList.remove.('classname') 를 사용한다.

=>클래스를 마음대로 붙였다 뗄 수 있게 해준다. 위에서는 display:none;이 되어 있기 때문에 해당 html 태그를 hide or show 할 수 있다.

visibility:hidden은 공간은 그대로 두고 보이지만 않는것이지만, display:none은 잡아둔 공간도 사라진다

 

localStorage 설명

localStorage는 브라우저에서 데이터를 저장하고, 페이지를 새로고침하거나 브라우저를 닫아도 데이터가 유지되는 저장소입니다. 데이터를 문자열로 저장하며, 키-값 쌍으로 데이터를 관리합니다.

주요 메서드 설명:

  1. localStorage.setItem("key", "value"):
    • 이 메서드는 localStorage에 데이터를 저장합니다.
    • 첫 번째 인수는 키(key), 두 번째 인수는 **값(value)**입니다.
    • 예시: localStorage.setItem("username", "nico")
      여기서는 "username"이라는 키로 "nico"라는 값을 저장합니다.
  2. localStorage.getItem("key"):
    • 저장된 데이터를 가져옵니다.
    • 인수로 키(key)를 전달하면 해당 키에 저장된 값을 반환합니다.
    • 예시: localStorage.getItem("username")
      위에서 "username"이라는 키로 저장된 "nico"를 가져옵니다. 만약 해당 키가 없다면 null을 반환합니다.
  3. localStorage.removeItem("key"):
    • 특정 키에 저장된 데이터를 삭제합니다.
    • 예시: localStorage.removeItem("username")
      "username"이라는 키에 저장된 값을 삭제합니다.

사용 예시

javascript
코드 복사
// 데이터 저장 localStorage.setItem("username", "nico"); // 저장된 데이터 가져오기 const username = localStorage.getItem("username"); console.log(username); // "nico" // 데이터 삭제 localStorage.removeItem("username"); // 삭제 후 다시 가져오면 null이 반환됨 console.log(localStorage.getItem("username")); // null

요약

  • setItem: 데이터를 저장할 때 사용.
  • getItem: 저장된 데이터를 불러올 때 사용.
  • removeItem: 저장된 데이터를 삭제할 때 사용.

localStorage는 브라우저에서 데이터를 지속적으로 유지하기 위한 간단한 방법으로, 페이지가 새로고침되거나 브라우저를 닫았다가 다시 열어도 저장된 데이터는 남아 있습니다.