4.3 Getting Username

講義
私たちがしなければならないのはプレイヤーが名前を提出して、フォームを削除することです.
これを実現するには、2つの方法があります.
1.HTML要素自体を消去します.
or
2.CSSで非表示にします.
CSSでhiddenというクラス名を作成!

.hidden {
  display: none;
}

任意の要素にclassnameを与えると、その要素が非表示になります!もちろんプレイヤーが名前を出した後だけです.
(可視性:hiddenは見えませんが、display:noneも消えます.)

function onLoginSubmit(event){
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add("hidden");
    console.log(username);
}
loginForm.addEventListener("submit",onLoginSubmit);

クラスリストでクラス名を付けます.formは消えますが、入力値はコンソールに書き込まれています.

<h1 class="hiden"></h1>

新しいh 1を作成し、デフォルト値が非表示に設定します.
(これは後でHello「user」が加わる部分です.)
私たちがしなければならないのはformを隠して、h 1を表示させることです!
=名前を入力して提出すると、ログインフォームが消え、「こんにちは」という文が出てきます!
ただし、h 1に表示するテキストがある場合にのみ表示されます.
=スペース
整理:基本動作の実行を阻止し、hiddenというclass nameを付けてformを隠し、プレイヤーの名前を変数として保存し、h 1に入れる.

<h1 id="greeting" class="hiden"></h1>

idの追加
=h 1要素を変更するためidが付与される.JSで働くから.
JSコードの修正が必要です.ただし「hidden」は2回以上使うので変数として指定します
Q)では、なぜ大文字で書くのでしょうか.const HIDDEN_CLASSNAME = "hidden";=これは習慣です.通常、stringのみを含む変数は大文字でマークされ、stringを保存したい場合に使用されます.また,loginFormやloginInputのように重要な情報を含むのではなく,大文字で記入する.
=わずかなものだけが大文字で格納されます.こんな感じ??

const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    console.log(username);
    greeting.innerText = "Hello " + username;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit",onLoginSubmit);

これでプレイヤーに声をかけることができます.ヾ(^▽^*)))
+)
greeting.innerText = "Hello "+ username;
上のコードは間違った方法ではありませんが、あなたの次男が好きな方法ではありません.
greeting.innerText = Hello ${username} ;
同じ結果が出てきましたが、後者は更新の仕方です.

変数を文字列に結合したい場合、または変数を文字列に入れたい場合は、2つのルールがあります.
1)${変数名}としてマークします.
2)`backtic記号を使用します.

プレイヤーに挨拶...ミッション成功!
しかし、問題はプレイヤーを完全に覚えられないことです.
更新のたびに再ログインする
これは次のビデオでやりましょう!