개발공부 21일차 [노마드코드 앱만들기]

개인공부 2023. 2. 15. 16:40

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Momentum</title>
    <link rel="stylesheet" href="style.css" />
    <style>

    </style>
  </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>

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)

loginInput의 값을 username라는 변수로 두고 값이 없을 경우 “please write your name”가 쓰여있는

팝업창을 띄우고 값이 적혀는 있으나 값이 15글자를 초과할 경우 "your name is too long”가 쓰여있는

팝업창이 띄워진다.

위내용처럼 자바스크립트에서 실행 가능하지만 HTML에서도 from으로 직접 처리도 가능하다.

<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>

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

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

loginForm.addEventListener("submit", onLoginSubmit)

html에 원래 div자리에 form을 넣어주고 Input 속성값에 required, maxlength="15"을 넣어줄 경우

브라우저가 자동으로 작성해야한다는 메세지가 뜨고 (required), 글자를 입력했을때 15글자가 넘어가면 써지지 않게 자동 처리 된다.(maxlength="15")

브라우저는 form 안에 Input이 들어와있을때 도움을 준다. 다만 form은 입력하거나 버튼 등 실행을 하면 웹사이트 전체가 새로고침된다.

원래 있던 내용들이 사라짐.(자동으로 submit이됨.)

데이터를 저장하기 위해서는 자동으로 사라지지 않게 해야하는데

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

function onLoginSubmit(event) {
	event.preventDefault()
	console.log(loginInput.value)
}

logInFurm.addEventListener("submit", onLoginSubmit)

버튼에 대한 이벤트가 아닌 form의 submit을 막기위함이기 때문에 버튼변수는 없어도 된다.

함수에 argument를 event로 넣고 preventDefault()를 실행시키면 새로고침되는걸 막을 수 있다.

preventDefault

a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다.

preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다.

주로 사용되는 경우는

1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우

2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Momentum</title>
    <link rel="stylesheet" href="style.css" />
    <style></style>
  </head>
  <body>
    <a href="https://nomadcoders.co">go to courses</a>
    <script src="app.js"></script>
  </body>
</html>

const link = document.querySelector("a");
}
function handlecLickClick(event){
	event.preventDefault();
}
link.addEventListener("click",handlecLickClick)

원래는 'go to courses' 를 눌렀을때 a태그의 링크가 열려야하지만

event.preventDefault();를 넣어줌으로써 a태그를 눌러도 링크가 열리지 않게 된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Momentum</title>
    <link rel="stylesheet" href="style.css" />
    <style></style>
  </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>
    <script src="app.js"></script>
  </body>
</html>

.hidden{
  display: none;
}

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


function onLoginSubmit(event) {
	event.preventDefault()
	logInFurm.classList.add(HIDDEN_CLASSNAME);
	const username = loginInput.value;
	greeting.innerText = `Hello ${username}`
	// greeting.innerText = "Hello " + username;
	greeting.classList.remove(HIDDEN_CLASSNAME)
}

logInFurm.addEventListener("submit", onLoginSubmit)

1. 기본동작은 실행하지 않게 한다. (submit)

event.preventDefault()

2. hidden이라는 class이름을 더해줘서 form을 숨긴다.

logInFurm.classList.add(HIDDEN_CLASSNAME);

3. 유저의 이름을 변수로 저장해주고 그 이름은 h1 안에 넣어준다.

const username = loginInput.value;
greeting.innerText = `Hello ${username}`

4. h1에 있는 hidden이라는 클래스이름을 없애준다.

greeting.classList.remove(HIDDEN_CLASSNAME)

form태그에 hidden이라는 클래이름이 생겼고 h1태그에는 클래스네임이 지워진걸 확인 가능하다.

h1클래스이름이 없어졌으므로 Hello uri가 나타난다.

💡일반적으로 string만 포함된 변수는 대문자로 표기하고 sreing을 저장하고 싶을 때 사용

브라우저에 기억할 수 있게 하는 기능(API) - localStorage

.removeitem - 객체에 저장된 값을 삭제하다.

.getitem - 객체에 저장된 값을 반환

.setitem - 객체에 값을 저장하다.

locar storage에 유저정보가 없으면 form을 보여주고 유저정보가 있다면 form이 뜨지 않고 h1이 보이게 하기.

<기본로직>

const savedUsername = localStorage.getItem("username");

if(savedUsername === null){
	// show the form
} else{
	// show the greetings
}

savedUsername라는 변수가 null이면 form이 보이고 아니면 greetings가 보이게 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Momentum</title>
    <link rel="stylesheet" href="style.css" />
    <style></style>
  </head>
  <body>
    <form id="login-form" class="hidden">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="what is your name?"
      />
      <input type="submit" value="Log In" />
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
  </body>
</html>

const logInFurm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
	event.preventDefault()
	logInFurm.classList.add(HIDDEN_CLASSNAME);
	const username = loginInput.value;
	localStorage.setItem(USERNAME_KEY, username)
	paintGreeting(username)
}

function paintGreeting(username){
	greeting.innerText = `Hello ${username}`
	greeting.classList.remove(HIDDEN_CLASSNAME);
}

logInFurm.addEventListener("submit", onLoginSubmit)

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){
	logInFurm.classList.remove(HIDDEN_CLASSNAME)
	logInFurm.addEventListener("submit", onLoginSubmit)
} else{
	paintGreeting(savedUsername)
}

html 파일에 form에도 class="hidden"을 넣어준다.
local storage에 유저정보가 있으면 거기서 유저정보를 받아서 인자로 넣어준다.

const savedUsername = localStorage.getItem(USERNAME_KEY);
//local storage에서 유저정보를 받아옴

function paintGreeting(username){
	greeting.innerText = `Hello ${username}`
	greeting.classList.remove(HIDDEN_CLASSNAME);
}

paintGreeting(savedUsername)
//받은 유저정보를 인자에 넣어준다.

3. 만약 local storage에 유저정보가 없다면 form의 submit을 기다리고
form이 submit되면 input으로부터 유저정보를 받는다.

if(savedUsername === null){
	logInFurm.classList.remove(HIDDEN_CLASSNAME)
	logInFurm.addEventListener("submit", onLoginSubmit)
//유저정보가 없다면(null) "hidden"클래스를 지우고 submit되며 onLoginSubmit함수가 실행된다.

function onLoginSubmit(event) {
	event.preventDefault()
	logInFurm.classList.add(HIDDEN_CLASSNAME);
	const username = loginInput.value;
	localStorage.setItem(USERNAME_KEY, username)
	paintGreeting(username)
}
function paintGreeting(username){
	greeting.innerText = `Hello ${username}`
	greeting.classList.remove(HIDDEN_CLASSNAME);
}
//loginInput.value으로 username변수를 지정하고 
//paintGreeting(username)으로 정보를 호출한다.

clock

setInterval = 원하는 시간마다 함수가 반복되게 할 수 있다.

setInterval(호출하려는 함수의 이름, 호출이 걸릴 시간)

const clock = document.querySelector("h2#clock")

function sayHello(){
  console.log("hello");
}

setInterval(sayHello, 5000);
//5초마다 sayHello함수가 실행이 되서 콘솔에 hello가 찍힌다.

setTimeout = 원하는 시간 후에 함수가 나오게 할 수 있다.

const clock = document.querySelector("h2#clock")

function sayHello(){
  console.log("hello");
}

setTimeout(sayHello, 5000);
//5초뒤에 sayHello함수가 실행이 되서 콘솔에 hello가 한번 찍힌다.

.padStart() 함수는 출력된 string을 보다 길게 만들어야 할때 사용한다.

“1”.padStart(2, ”0”)

→ 문자열의 길이가 2가 되지 않는다면 앞쪽에 “0”을 추가 한다. “01”

“01”.padEnd(2, ”0”)

→ 문자열의 길이가 2가 되지 않는다면 뒷쪽에 “0”을 추가 한다. “10”

const clock = document.querySelector("h2#clock")

function getClock() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock();
setInterval(getClock, 1000);

String(new Date().getHours())

→ 숫자로 나오는걸 문자열로 변경 한다.

만약 오후 10시 2분 3초라면

22:02:03 으로 표시된다.

getClock();으로 바로 실행을 해주고 setInterval(getClock, 1000); 로 1초마다 재실행이 된다.

노마드영상 너무 재밌었다. 일단 다른강의 들으면서 자바스크립트가 아 저렇게 쓰이는구나 알았지만 전혀 청사진을 그릴 수 없었다.

근데 엄청 작게나마 아 ! 이럴때 쓰일 수 있겠구나 하는걸 배우는데 재미없을 수가 없었다.

근데 너무 마음은 조급하다.. 후딱 노마드 크롬앱 끝내고 리엑트 들어야하는데 🥹🥹🥹🥹🥹

'개인공부' 카테고리의 다른 글

개발공부 22일차 [노마드코드 앱만들기] (0)	2023.02.16
개발공부 21일차 [웹개발종합반 2주차 2회 완강] (0)	2023.02.15
개발공부 20일차 [노마드코드 크롭앱 만들기] (0)	2023.02.14
개발공부 19일차 [웹개발종합반 1주차 2회완강] (0)	2023.02.12
개발공부 18일차 [JavaScript 문법뽀개기] (0)	2023.02.12

ABOUT ME

투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

clock

'개인공부' 카테고리의 다른 글

티스토리툴바

ABOUT ME

clock

'개인공부' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바