#04 annotation - azureun/JS-Chrome-App GitHub Wiki

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

const link = document.querySelector("a");   //태그<a> anchor 불러옴.

function onLoginSubmit(event) {
    //preventDefault() : 어떤 event의 기본 행동이든지 발생되지 않도록 막음. 브라우저 기본 동작 막아줌.
    event.preventDefault();

    //console.log(event);             //evnet object들 출력
    //console.log(loginInput.value);  //Log In 버튼 여러번 눌러도 저장된 값 유지함을 알 수 있음.
    
    const username = loginInput.value;
    //greeting.innerText = "Hello " + username;
    greeting.innerText = `Hello ${username}!`;      //같은 표현
    greeting.classList.remove(HIDDEN_CLASSNAME);    
}

function handleLinkClick(event){
    event.preventDefault(); //google링크 가지 못하도록 막음.
    console.dir(event);
    //console.log(event);     //클릭한 위치 (X, Y)좌표 확인 가능.
    //alert("clicked!");      //버튼 누르면 링크 접속 전, 이 팝업 먼저 뜸.(사용자 입장)
}

loginForm.addEventListener("submit", onLoginSubmit);    //JS가 event object를 담은채로 fuction을 호출함.
//브라우저는 addEventListener를 활용할 때 바로 실행하지 않음.
// onLoginSubmit()을 호출하고,
// onLoginSubmit() 안에 event object 정보를 가지고 있는 상태에서 실행.

link.addEventListener("click", handleLinkClick);    //google링크 누르면 팝업창 뜸.