1.イベント検出

html/JSでeventとは、ユーザーが要素をクリックしたり、値を入力したりする動作です.JSにhtml上でイベントが発生したときにそれを検出させ、特定の動作を実行させることができます.

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

function userFuncClick() {
  console.log("User clicked .hello <h1>")	// click 발생시 작동하고 싶은 함수
}

title.addEventListner("click", userFuncClick)	// click을 감지하면 userFuncClick을 실행

上記のコードでは、userFuncClick()ではなく、userFuncClickであることに注意してください.()は直接関数を使用するので、addEventLinstnerに関数を使用させるには、()のほかに、それを渡さなければなりません.userFuncClick()を超えたら?
常にclickイベントとは無関係であるため、コンソールを開くと関数の結果が出力されます.その後、関数をクリックしても実行されません.
イベントの種類は何がありますか?console.dir(elementYouGet)を作成し、elementYouGetオブジェクト内のプロパティを抽出します.ここの前にonが付いているpropertyはeventです.例えば、onclick、oncopy、onmouseleave等である..addEventListenerと.onXXの比較
次の2つのscriptは同じ動作です.しかし、.addEventListenerを使用する場合、逆に.removeEventListenerを使用することができるので、より一般的に使用される.

element.addEventListener("click", userFunc);
element.onClick = userFunc;

2.constとletを使う

△NomadCoder JS-3.6 CSS in Javascript課の追加説明です.constは値が不変の変数(定数と呼ぶべき)であり、letは値が可変な変数を定義するために使用される.使い分けることはよくあるかもしれませんが、関数などを作成するときに役立ちます.
htmlからmyVarという要素を取得し、イベントが発生したときにmyVar色を青、赤、青に変更できる関数を作成するとします.

function ChangeColor(){
    if (myVar.style.color === "blue"){
        myVar.style.color = "red";
    }
    else {
        myVar.style.color = "blue";
    }
}

// .addEventListener은 생략

次に、重複するmyVar.style.colorを変数として宣言します.
このときif条件としてのcolorは固定値を受けているので変更はない.したがって、const currentColor = myVar.style.colorと定義することができる.
逆にif寺内のcolorは変動しているので、letを使うべきです.もしそうなら、上のようにlet newColor = myVar.style.colorを使ってもいいですか?

// 함수 속에서 변수 선언하기 (잘못된 방법)
function ChangeColor(){
    const currentColor = myVar.style.color;	// 정해진 값을 받아오므로 const
    let newColor = myVar.style.color;	// 값이 변동하므로 let?
    if (currentColor == "blue"){
        newColor = "red";
    }
    else {
        newColor = "blue";
    }
}

そうすればいいようですが、実際にコードを実行するのはだめです.その理由は、newColorの値を変更することは、myVar.style.colorには適用されないからである.

let newColor = myVar.style.color; 
console.log(newColor)	// 출력값: blank(myVar 색상이 정해지지 않은 경우)
newColor = "blue";	
console.log(newColor);	// 출력값: blue
console.log(myVar.style.color);	// 출력값: blank

コードでは、式(=)は、実際には両者が常に連動していることを意味するのではなく、右項から左項に値を伝達する方法である.したがって、myVarの値を変更すると、myVarではなくmyVar.style.colorの値のみが変更される.
正しい修正コードは次のとおりです.

// 함수 속에서 변수 선언하기 (옳은 방법)
function ChangeColor(){
    const currentColor = myVar.style.color;
    let newColor;	// 어차피 바꿀거니까 굳이 myVar.style.color을 받아올 필요가 없다
    if (currentColor == "blue"){
        newColor = "red";
    }
    else {
        newColor = "blue";
    }
  myVar.style.color = newColor;	// 이렇게 해야 newColor의 새로운 값이 myVar에 적용된다.
}

3.HTML機能によるJSの置き換え

htmlを適切に使う機能は、JSですべての機能を実現するよりも有利です.たとえば、JSを使用してinput変数と長さを入力するかどうかをチェックすると、次のようになります.

const username = loginInput.value;
if (username==="") {
    alert("Please write your name.");
}
else if (username.length > 10){
    alert("Your name is too long.");
}
... 
}

HTMLは、上記の条件をinput自体からrequired、maxlengthに直接作成することができる.(ただし、formを使用してください.

<form id='login-form'>
        <input required maxlength="10" type="text" placeholder="What is your name?" />
        <button>Log In</button>
</form>

このようにbuttonまでformの中に入れると、inputの変数が自動的に伝達されるので、JSはbutton.addEventListenerに渡す必要はありません.

4.ローカルストレージのIDを削除するためのログアウトボタンの作成

NomadCoder JS-4.6 Loading Usernameレッスンでは、localStorageに保存されているユーザー名がない場合はログイン画面が表示され、ユーザー名がある場合は「Hello Username!」が表示されます.これが出てくるページを作りました.ここにログアウト機能が追加されました.
必要なログアウト機能
(0.usernameが存在しない場合、名前を入力するlog-in画面が表示されます.)
1.ユーザー名がある場合「Helloユーザー名!」log-outボタンが表示されました.
2.log-outボタンを押すと、loclaStorageに格納されているユーザ名が消えます.
3.では、Webページを再起動し、最初の段階に戻ります.

const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");
const logoutForm = document.querySelector("#logout-form");	// log-out form 추가
const greeting = document.querySelector("h1");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

const savedname = localStorage.getItem(USERNAME_KEY);

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.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);
    logoutForm.classList.remove(HIDDEN_CLASSNAME);	// log-out form이 나오도록 "hidden" 클래스를 삭제한다.
    logoutForm.addEventListener("submit", onLogoutSubmit);	// log-out form이 submit 되기를 기다린다.
}

function onLogoutSubmit(){
    localStorage.removeItem(USERNAME_KEY);	// log-out이 submit되면 username을 삭제한다.
    location.reload();	// 페이지를 다시 로드해서 처음으로 되돌아간다.
}

if (savedname === null) {
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
}
else {   
    paintGreeting(savedname);  
}

最初は、logoutForm.classList.remove(HIDDEN_CLASSNAME);を一番下のelseドアに置いて、ifの場合(つまり保存されていない名前、ユーザーが直接入力した場合)、log-outボタンはありません.そのため、painGreeting関数に追加し、ユーザーが入力しても元のものでも、常に「Hello」と一緒に現れるように変更しました.

ログアウトは正常に動作しています.