일반적으로 문자열(string)만 담고 있는 변수는 대문자(Upper Case)로만 적어주는 관습이 있다.
여러분 자판의 `` (백틱)이라는 게 있다 물결기호(~) 누를때 그 위치, ESC 바로 밑의 위치이다. (' , " 따옴표나 쌍따옴표가 아니다)
string 을 담은 변수를 다른 string 과 결합하고 싶을때 + 를 쓸 수도 있지만
`hello ${변수명}` 이렇게 백틱 안에서 변수명을 중괄호와 달러사인을 이용해 호출해 줄 수가 있다.
이렇게 하면 문자열에 변수값을 반영해준다.
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<form id="login-form">
<input type="text" placeholder="What is your name?" />
<button>Log In</button>
</form>
<h1 id="greeting" class="hidden"></h1>
</body>
<script src="app.js"></script>
</html>const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function handleSubmit(event) {
let inputValue = loginInput.value;
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
// greeting.innerText = "넌 최고야 넌 " + inputValue;
greeting.innerText = `넌 최고야22 ${inputValue}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", handleSubmit);.hidden {
display: none;
}
뭔가 이런게 있으면 좋겠다 할때 기본적으로 그러한 기능이 제공되는 것이 api 라고 할 수 있다?
유튜브에서 볼륨을 높이고 새로고침을 하여도 볼륨은 그대로를 유지한다.
브라우저에서는 이러한 정보를 저장하는 것을 API로 제공한다.
콘솔 창에 입력하면 이미 있다.
브라우저에서 뭔가를 저장할 수 있는게 바로 localStorage다.
아래와 같이 마우스 오른쪽 클릭 > 검사 > 애플리케이션 탭 > 로컬 스토리지 를 볼 수도 있다.
콘솔창에 localStorage.setItem("key","value")를 입력해주면
다음과 같이 값이 저장되어 있는 것도 확인할 수 있다.
이렇게 값을 set 하면
당연히 값을 get 할 수 있다.
localStorage.getItem("key")
삭제도 할 수 있다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 간단한 시계만들기 : setInterval(), setTimeout(), Date() (0) | 2022.03.02 |
|---|---|
| [JavaScript] 중복되는 string 값들은 하나의 변수로 관리하자/ innerText() (0) | 2022.03.02 |
| [JavaScript] event[2] - EventListener, preventDefault (0) | 2022.03.01 |
| [JavaScript] event : eventListener function,event, preventDefault() (0) | 2022.03.01 |
| [JavaScript] HTML classList.toggle()로 클래스 추가/수정 (0) | 2022.03.01 |
