[바닐라 js로 크롬 앱만들기] 인강정리 (#4)

728x90

#4강 (실습위주)

id와 class
document.getElementByid()
input박스
버튼이 눌리는 이벤트추가해보기
div가 아닌 form을 사용해보자.
submit은 새로고침되는 특징이있다.
새로고침하지않도록 submit조작하기
링크의 동작을 막는 조작하기
hidden을이용한 숨기기
스토리지 사용하기

1. document.querySelecor("#login-form") <- querySelector의 경우 모든 요소를 다 검색할수 있으므로 내가 원하는 요소가 무엇인지 명확한 명시가 필요하다. #(id) .(class)등.

2. document.getElementById("login-form")의 경우는 id로 검색하는것이 명확하므로 id를 바로 적어주면 됨.

3. input박스와 버튼만들기 -> 버튼클릭시 이벤트 발생 -> 값을 입력하면 console에 찍히도록 추가

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="login-form">
      <input type="text" placeholder="What is your name?">
      <button> Log in</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

script.js

//input과 button을 가져와봅시다.
const loginForm = document.getElementById("login-form");

const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

//위의 코드를 줄여봅시다.
const loginInput2 = document.querySelector("#login-form input");
const loginButton2 = document.querySelector("#login-form button");



//클릭이벤트를 만들어봅시다.
function onLoginBtnClick(params) {
  console.log("click!!!");
}

loginButton2.addEventListener("click", onLoginBtnClick);



//input창에 입력한 값을 클릭이벤트로 찍어봅시다.
function onLoginBtnClick(params) {
  console.log("click!!!");
  console.log(loginInput2.value);
}


//값을 입력했을때만 동작하도록 수정해 봅시다.
function onLoginBtnClick(params) {
 const username = loginInput2.value;
  if (username === "") {
    alert("Please write your name");
  } else if(username.length >15) {
    alert("oh..no..")
  }  
}

loginButton2.addEventListener("click", onLoginBtnClick);

4. 값을 입력했을때만 버튼이 눌리도록 조건추가

5. html가 가진 자체기능을 사용할수도 있는데, 위에서 우리가 <div id="login-form">로 지정한것을

아예 <form id="login-form">이라고 바꾼다면,
- required :필수입력

- maxlength :최대 입력길이(이 이상은 아예 입력이 안되도록 막아줌)

등을 사용할수 있다. 이때, form안에는 <input>태그안에 다음과 같은 기능을 쓰면된다.

.
.
<body>
	<form id="login-form">
    	<input 
        	required  <!--필수입력-->
            maxlength="15" <!--최대길이 15-->
            type="text"
            placeholder="What is your name?"
         />
     <button> Log in </button> <!--버튼대신 아래의 input으로 같은효과를-->
     <input type="submit" value="Logggggg in" />
    </form>
    <script src="script.js"></script>
  </body>
  .
  .

form안에서 엔터를누르고 input이 더이상 존재하지 않는다면 자동으로 submit됨.

6. submit이 된다는것은 클릭을 신경쓸 필요가없어졌다는것. 단, sumit은 브라우저가 새로고침된다.

7. 하지만 우리는 새로고침하고 싶지않다. 이제할건 submit을 조작해보는것.

-> preventDefault()는 기본동작을 막아준다.

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

function onLoginSubmit() {
	const username = loginInput.value;
  	console.log(username);

}
loginForm.addEventListener("submit", onLoginSubmit);


////onLoginSubmit를무언가를 받는 함수로 만들어보자.
function onLoginSubmit2(t) {
  t.preventDefault();
  console.log(t);

}
loginForm.addEventListener("submit", onLoginSubmit2);


//기본동작을 막아보자.
function onLoginSubmit3(e) {
  e.preventDefault();
  console.log(loginInput.value);

}
loginForm.addEventListener("submit", onLoginSubmit3);

함수() -> 함수를 바로 실행시킴, 함수->함수를 호출함

8. 링크동작을 막아보기

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <form id="login-form">
    </form>
    <a href="https://nomadcoders.co">go</a>
    <script src="script.js"></script>
  </body>
</html>

//alert창을 띄워 바로 링크로 넘어가는것을 막아보자.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

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

function onLoginSubmit(event) {
  event.preventDefault(); //preventDefault()는 기본동작을 막아준다.
  console.log(loginInput.value);
}

function handleLinkClick(e) {
  console.log(e);
  alert("click!!!!")
  
}
loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);




//alert창이 아닌 링크를 눌러도 넘어가지않는것을 확인해보자.
function handleLinkClick2(e) {
  
  e.preventDefault();
  console.log(e);
}

9. username을 받은뒤 form을 안보이도록 없애보기 (css를 이용한 숨기기)

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
	<form id="login-form">
    	<input 
        	required  <!--필수입력-->
            maxlength="15" <!--최대길이 15-->
            type="text"
            placeholder="What is your name?"
         />
     <button> Log in </button> <!--버튼대신 아래의 input으로 같은효과를-->
     <input type="submit" value="Logggggg in" />
    </form>
    <script src="script.js"></script>
  </body>
</html>

css

.hidden {
  display: none;
}

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

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

const HIDDEN_CLASSNAME ="hidden";

function onLoginSubmit(event) {
  event.preventDefault();
  const username= loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);

  greeting.innerText = "Hello " + username; //string을 더하기
  greeting.innerText = `Helloo ${username}`; //변수를 String과 이을수있다. 백틱사용. ``
  greeting.classList.remove(HIDDEN_CLASSNAME);
  
}


loginForm.addEventListener("submit", onLoginSubmit);

10. 스토리지사용하기

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
	<form id="login-form"  class="hidden">
    	<input 
        	required 
            maxlength="15" 
            type="text"
            placeholder="What is your name?"
         />
    
     <input type="submit" value="Logggggg in" />
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="script.js"></script>
  </body>
</html>

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

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

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

function onLoginSubmit(event) {
  event.preventDefault();
  const username= loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);

  localStorage.setItem(USERNAME_KEY, username);
 
  greeting.innerText = `Helloo ${username}`; 
  greeting.classList.remove(HIDDEN_CLASSNAME);
  
}



const saveUsername = localStorage.getItem(USERNAME_KEY);

if(saveUsername === null) {
  //show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
}else {
  //show the greetings
   
  greeting.innerText = `Helloo ${saveUsername}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

728x90

저작자표시 비영리 변경금지

'개발공부 > JavaScript' 카테고리의 다른 글

[바닐라 js로 크롬 앱만들기] 인강정리 (#7) (0)	2022.04.02
[바닐라 js로 크롬 앱만들기] 인강정리 (#5, #6) (0)	2022.03.26
[바닐라 js로 크롬 앱만들기] 인강정리 (#3) (0)	2022.03.20
[바닐라 js로 크롬 앱만들기] 인강정리 (#1~#2 까지) (0)	2022.03.17
[표현정규식] 아이디, 이름, 비밀번호,이메일, 휴대폰번호 유효성검사 (0)	2021.10.12

오키도키, 공부하는 블로그.

[바닐라 js로 크롬 앱만들기] 인강정리 (#4)

'개발공부 > JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

[바닐라 js로 크롬 앱만들기] 인강정리 (#4)

'개발공부 > JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바