javascript-26: greeting

greeting

1. click 이벤트 주기

addEventListener()

  <div class="hello">
    <h1>Grab me!</h1>
  </div>

const title = document.querySelector("div.hello h1")

function handleTitleClick() {
  console.log("title was clicked!");
}

title.addEventListener("click", handleTitleClick) 

↓↓↓ browser에 나와있는 grab me! 클릭 시 ↓↓↓

---

2. click으로 색깔 바꾸기!

const title = document.querySelector("div.hello h1")

function handleTitleClick() {
  title.style.color = "blue";
}

title.addEventListener("click", handleTitleClick) 

---

3. onmouseenter (커서를 위에 올려놨을때 발생)

1. WebAPIs 사이트 접속 https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadingElement

2. js관점에서의 html을 볼수있음. (각종 property 있음)

3. on이 붙어있는건 event 줄수 있다는 뜻

const title = document.querySelector("div.hello h1")

function handleMouseEnter() {
  console.log('mouse is here!')
}

title.addEventListener("mouseenter", handleMouseEnter);

---

4. onmouseleave(커서가 grab me에서 떠났을때)

const title = document.querySelector("div.hello h1")

function handleTitleClick() {
  title.style.color = "blue";
}

function handleMouseEnter() {
  title.innerText = "mouse is here!"
}

function handleMouseleave() {
  title.innerText = 'mouse is leave!'
}


title.addEventListener("click", handleTitleClick) 

title.addEventListener("mouseenter", handleMouseEnter);

title.addEventListener("mouseleave", handleMouseleave);

---

5. window의 event

• event를 줄수있는 방법 2가지 ```js title.addEventListener(“click”, handleTitleClick)

title.addEventListener(“mouseenter”, handleMouseEnter);

title.addEventListener(“mouseleave”, handleMouseleave);

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

```js
title.onclick = handleTitleClick 

title.onmouseenter =  handleMouseEnter

title.onmouseleave = handleMouseleave

addEventListener을 선호하는 이유는 나중에 .removeEventListener을 사용 할 수있기 때문

---

6. resize

function handleWindowResize() {
  document.body.style.backgroundColor = "tomato";
}

window.addEventListener("resize", handleWindowResize);

---

7. copy

function handleWindowCopy() {
  alert("copier!");
}
window.addEventListener("copy", handleWindowCopy)

ctrl+c 입력시,

const h1 = document.querySelector("div.hello h1")
function handleTitleClick() {
  if(h1.style.color === "blue"){
    h1.style.color = "tomato"
  } else {
    h1.style.color = "blue";
  }
}
h1.addEventListener("click", handleTitleClick) 

8. 응용 및 css와 상호작용

const h1 = document.querySelector("div.hello h1")
function handleTitleClick() {
  const currenColor = h1.style.color;
  let newColor;
  if(currenColor === "blue"){
    newColor = "tomato"
  } else {
    newColor = "blue";
  }
  h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick) 

  <div class="hello">
    <h1> Grab me!</h1>
  </div>

body {
  background-color: beige;
}
h1 {
  color: cornflowerblue;
}
.active {
  color: tomato;
}

function handleTitleClick() {
  h1.className = "active"
}
h1.addEventListener("click", handleTitleClick);

↓↓↓↓↓↓↓↓↓↓↓Click↓↓↓↓↓↓↓↓↓↓↓

* h1의 class가 click하는 순간 active로 바뀜!

• 클릭하면 다시 class제거하기

function handleTitleClick() {
  if(h1.className === "active") {
    h1.className = "";
  } else {
    h1.className = "active";
  };
}

• 은은하게 변하기

  h1 {
  color: cornflowerblue;
  transition:color .5s ease-in-out
  }
  

↓↓↓↓↓↓↓↓↓↓↓개선↓↓↓↓↓↓↓↓↓↓↓

.clicked {
  color: tomato;
}

• active → clicked

function handleTitleClick() {
  const clickedClass = "clicked"
  if(h1.className === clickedClass) {
    h1.className = "";
  } else {
    h1.className = clickedClass;
  };

• click라는 string을 clickedClass라는 변수에 저장해두어 실수를 줄일 수있음
• clicked를 clickedClass로 바꿈

---

9. aa.class list.contains(??) 사용하기

• aa안에 ??가있는지 확인하는것. ```js

const h1 = document.querySelector(“div.hello h1”) function handleTitleClick() { const clickedClass = “clicked”; if (h1.classList.contains(clickedClass)) { h1.classList.remove(clickedClass); } else { h1.classList.add(clickedClass); } } h1.addEventListener(“click”, handleTitleClick);

### 10. classlist.toggle(token) 사용하기
- toggle은 h1에 clicked라는 class가 있는지 확인해서 없으면 추가해주고 있으면 삭제함
- 토근을 toggle한다. 토큰이 존재한다면 토큰을 제거하고 존재하지않는다면 토큰을 추가한다
```js
const h1 = document.querySelector("div.hello h1")
function handleTitleClick() {
  h1.classList.toggle("clicked");
}
h1.addEventListener("click", handleTitleClick);

8. local storage

• 새로고침할때도 form 볼 필요없이 이름이 저장되게 하기 (local storage.)

• 저장하기

• 불러오기

• 제거하기

• local sotrage에 유저정보 유무를 확인/ 유저정보가 없다면 form을 보여주기

<!DOCTYPE html>
<html lang="en"> 
  <head> 
    <meta charset = "UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="./project4.css"> 
    <title>Momentum App</title> 
  </head> 
  <body> 
    <form id="login-form" class="hidden"> 
      <input 
      required maxlength="15" type="text" 
      placeholder="what is your name?"
      /> 
      <button>login</button>
    </form> 
    <h1 id="greeting" class="hidden"></h1>
    <script src="./project4.js" defer></script>
  </body> </html>

const loginForm = 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();
  const username = loginInput.value;
  localStorage.setItem(USERNAME_KEY, username)
  loginForm.classList.add(HIDDEN_CLASSNAME)
  paintGreetings(username);
}
function paintGreetings(username) {
  greeting.innerText = `Hello! ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME)
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME)
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  const username = loginInput.value;
  paintGreetings(savedUsername);
}