🔐符号化なしVanilla JS LOGIN

27618 ワード
JavaScript レコーダなし JavaScript nomadcoder vanillajs テキストリンク
preventDefault
const link = document.querySelector("a");

function linkEvent(event){
    event.preventDefault();
    console.log(event);  
}

link.addEventListener("click", linkEvent);
preventDefaultはブラウザ自体の機能を排除します
たとえば、ブラウザ自体で設定したリンクリンクによって接続されたタグである要素を作成します.
javascriptでは、このリンクが接続されないことを阻止できます.その機能はpreventDefaultです.
LOGIN JSのクリーンアップ
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";
Stringを何度も使った時、
エラーが発生した場合は、javascriptが教えてくれないため、変数に設定したほうがいいです.
function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    //greeting.innerText = "Hello " + username;                    같은 코드
    //greeting.innerText = `Hello ${username}`;      반복되는 코드   같은 코드
    //greeting.classList.remove(HIDDEN_CLASSNAME);   반복되는 코드
    paintGreeting(username);
}
上の2つのinnerTextコードは同じロールです.`Hello ${username}` ;に注意
PreventDefaultを使用して、submit実行時にブラウザが自動的にリフレッシュされないようにします.
Formにログインします.hiddenを追加しsubmitタイプのボタンをクリックするとloginFormが消えます
loginInputのvalueを保存するためにusernameの変数を作成
USERNAME KEY変数「username」がlocalStorageに格納されていることを確認します(キー値の名前なので変更できます).
InnerText"Hello${username";Innerテキストを変更します.
ここでusernameは、上記で指定したconst username=loginInputです.value;値を保存して、挨拶中です.hiddenを削除して画面に表示
function paintGreeting(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 {
    //greeting.innerText = `Hello ${savedUsername}`;   반복되는 코드
    //greeting.classList.remove(HIDDEN_CLASSNAME);     반복되는 코드
    paintGreeting(savedUsername);
}
サイトはまず、localStorageにデータが格納されていることを確認します.
if文として表す場合、savedUsername==nullの場合、loginFormに表示されます.非表示の消去
loginFormでsubmitイベントが発生したときにonLoginSubmit関数が実行されることを確認します
HTML
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/style.css">
    <title>Momentum App</title>
</head>

<body>
    <div id="wrap">
        <div id="formTag">
            <form id="login-form" class="hidden">
                <input required maxlength="15" type="text" placeholder="What is your name?">
                <button type="submit">Log In</button>
            </form>
        </div>
        <h1 id="greeting" class="hidden"></h1>
    </div>
    <script src="script/greeting.js"></script>
</body>

</html>
CSS
@charset "UTF-8";

*{
    box-sizing: border-box;
}
.hidden{
    display: none;
}
div#wrap{
    width: 800px;
    height: 400px;
    border: 1px solid #f00;
    background-color: #000;
    margin: 0 auto;
    position: relative;
}
#formTag{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
button{
    color:#000;
    font-weight: bold;
    width: 80px;
    height: 30px;
    background-color:deeppink;
    border: none;;
}

input{
    width: 200px;
    height: 30px;
    padding: 10px;
}

h1{
    font-size: 60px;
    text-align: center;
    color:greenyellow;
    margin: 140px 20px;
}
JavaScript
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();
    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);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    paintGreeting(savedUsername);
}
JavaScriptの配列
mysql「=」記号と=記号の違い