form

<form id="login-form">
        <input required maxlength="15" type="text" placeholder="What is your name?" />
        <input type="submit" value="Log In" />  <!--button과 같은 역할. Enter를 눌러도 동작// 전송할 때마다 새로고침을 함(form과 input으로)-->
    </form>

보통 input에 기능을 넣어줄 때 사용.

form 안에 input을 만들어 주면 엔터로도 submit이 가능하다.

input

input이 server에 전송을 할 것이 있다면, 무조건 require을 넣어준다.
그렇지 않으면 아무것도 입력 안 하고 유저가 서버에 전송을 할 수 있기 때문이다.
require을 넣어준다면 브라우저에서 그것을 막아준다.

        <input type="text" placeholder="Write a To Do and Press Enter" required/>

document

head, body, title은 document.body 이런식으로 바로 불러올 수 있지만 그 외는 querySelector나 getElementsByClassName 등으로 불러야 한다.

const h11 = document.querySelector(".hello h1")
html에 있는 h1 tag에서 hello라는 class 가진 h1 tag를 h11이라는 변수에 넣어 javascript에서 접근할 수 있게 한다.

js에서 html class 변경 가능

function handleTitleClick(){
    const activeee = "active"
    if(h11.className === activeee) {
       h11.className = "";
   } else {
       h11.className = activeee
   } 

Event

h11.addEventListener("click", handleTitleClick) === h1.onclick = handleTitleClick;

"click" -> EVENT 이름. onclick을 eventlistener를 이용하면 저렇게 쓴다.
hadleTitleClick -> 내가 만든 함수.
클릭을 하면 함수를 실행한다.

특정 Tag를 불러와서 console.dir()로 보면 on이 붙어있는 것은 전부 Event 함수

preventDefault()

html에서 form tag 안에 input을 넣어 설정해줘야 함

<form id="login-form">
        <input required maxlength="15" type="text" placeholder="What is your name?" />
        <input type="submit" value="Log In" />  <!--button과 같은 역할. Enter를 눌러도 동작// 전송할 때마다 새로고침을 함(form과 input으로)-->
    </form>

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

function onLoginSubmit(event){
    // const username = loginInput.value;
    event.preventDefault(); // 어떤 event의 기본 행동이든지 발생되지 않도록 막는 것.
    console.log(loginInput.value)
}

loginForm.addEventListener("submit", onLoginSubmit) // click이 아니고 submit을 쓴다.

loginForm으로 html 파일에서 id가 login-form인 것을 불러온 후 eventlistener로 "submit"(form tag 안에서 input으로 submit을 만들면 굳이 click 및 button tag를 안만들어도 버튼이 만들어지고 submit이 된다.)을 설정한 후 onLoginSubmit 함수를 실행하면 누를 때마다 화면이 새로고침이 된다.
그래서 그것을 막기 위해 사용하는것이 preventDefault()이다.
handleClickLink()에 매개변수를 줘서 (여기서는 event) event에서 event 함수가 실행될 때 주는 정보를 받은 후 event.preventDefault()로 html에서 form tag 안에 input type=submit이 실행될 때 기본적으로 실행되는 것을 막는다.
즉, preventDefault()는 기본적으로 자바스크립트 및 html에서 제공하는 작동을 막는다

classList

const h11 = document.querySelector(".hello h1")

function handleTitleClick(){
     const activeee = "active"
     if(h11.classList.contains(activeee)) {  //h11의 class로 activeee가 있는지 확인한다
        h11.classList.remove(activeee); //h11의 class에 activeee가 있다면 activeee를 제거한다.
    } else {
        h11.classList.add(activeee); //h11의 class에 activeee가 없다면 추가한다.
    } 
 }

중요 포인트는 기존에 어떤 class가 h11에 있든 건들지 않고 그 뒤에 추가 및 제거

위 코드와 같은 역할을 하는 것이 있다.

function handleTitleClick(){
    h11.classList.toggle("active")
}

class는 띄어쓰기로 여러개의 class를 넣을 수 있다.

<title class="홍왕열1 홍왕열2">Momentum</title>