バニラJSを使用したクロムアプリ作成::復習4.0~4.7(作成中)

11894 ワード
JavaScript テキストリンク

4.0


htmlを作成して入力ウィンドウを作成します.

jsからinputとbuttonをインポートするには2つの方法があります.
1) 
const loginForm = document.getElementById("login-form");
const loginInput=loginForm.querySelector("input");
const loginInput=loginForm.querySelector("button");
2) 
const loginInput=document.querySelector("#login-form input");
const loginButton=document.querySelector("#login-form button");
->ボタンとログインウィンドウを作成します.
≪ターゲット｜Target｜ldap≫:入力値をコンソール・ウィンドウに保持します.
->変数として指定したloginInputについて
console.dir(loginInput);表示されたオブジェクトを表示すると、valueエントリに「蒸らし」と表示されます.したがって
解決する
const loginInput=document.querySelector("#login-form input");
const loginButton=document.querySelector("#login-form button");

function loginClick(){
  console.dir(loginInput.value);
}

loginButton.addEventListener("click", loginClick);

4.4


1.hidden classを勉強しました.
まず、hidden classはcssファイルで次のように定義されます.
.hidden{
    display:none;
}
(1)ログインウィンドウを入力するときに、ウィンドウを消去したい場合->hiddenをform classListに変換します.addで追加します.
(2)非表示にしたい非表示テキストが入力登録ウィンドウで表示される.
->index.htmlで
<h1 id="greeting" class="hidden"></h1>
h 1タグのhidden classを追加し、jsから削除します.
2.``backtic記号と${}を勉強しました.
innerTextで必要な文を記述するには、stringと変数を結合する2つの方法があります.
greeting.innerText="Hello "+ username;
greeting.innerText=`Hello ${username}`;
後者は前後の文が便利なので、もっと人気があります.ここでは「」と「二重引用符」を混同しないように注意します.

4.5 Saving


ユーザーの情報保存機能は、よく使われるため内蔵されています.
localStorage.setItem("username","jo");
これにより、「マネージャ・エントリ」(F 12)->「アプリケーション」タブにusernameという名前のキーとjoという名前の値が保存されていることがわかります.まだあります.
localStorage.removeItem("username");
これにより値が削除されます.そして.
localStorage.getItem("username");
やれば「jo」と呼ぶことができます.
Problem:ユーザー値は保存されますが、リフレッシュ後もフォームが表示されます.次のレッスンでユーザー名が保存されている場合は、フォームではなくh 1ラベルから表示されます.

4.6 Loading


localStorageにユーザー名が存在しない場合、localStorage.getItem(「username」)はnull値を返します->この点を利用する.
まずhtmlではformとgreetingにhiddenクラスが適用される.既存のloginFormもあります.addEventListenerはif文に条件を追加します.getItemの値がnullの場合、formのhidden classを削除し、addEventListenerを読み込みます.nullでない場合は、挨拶情報のhidden classを削除し、文を追加します.ここでは,挨拶情報のhidden classを削除し,複数回文を追加する動作を用いるため,それを個別の関数として管理する.また、string値にも重複する値がある場合は、変数として使用するのが便利です.(エラーが発生したときにすぐにエラーを知るために)個人的にはNo Mad Coderで少しjsを知るのも面白いですが、このような符号化を見たときに身につけた小さな習慣を見て、多くのことを学びました.
問題を解決するコードを添付します.
js code
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 loginSubmit(event){
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add(HIDDEN_CLASSNAME);
    localStorage.setItem(USERNAME_KEY,username);
    paintGreetings(username);

}



function paintGreetings(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", loginSubmit);
}
else{
  paintGreetings(savedUsername);
}
html code 
<!DOCTYPE html>
<html lang="en">
<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.css"/>
    <title>Momentum App</title>
</head>
<body>
    <form id="login-form" class="hidden">
        <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
        />
        <input type="submit" value="Log In"/>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
</body>
</html>
css code
.hidden{
    display:none;
}

4.7


第四章総復習.
ディープラッパー⛳
[伯俊]#1007後マッチング