無コードハーブJSを使用してChromeアプリケーションを作成するログイン

19019 ワード
レコーダなし CSS 名学習 ハーブ js html テキストリンク

mvcモードではなく、javascriptとcssを使用してChromeページにラベルを非表示にし、値を保存するログイン機能を実現しました.Javascriptの基本概念を勉強していた時に作ったので、基礎が弱い私には良かったです!
ユーザーがローカルストレージに保存されていない場合はformラベルが表示され、ユーザーのユーザー名がローカルストレージに保存されている場合はhelloの「名前」の値のみが表示されます.

1.htmlの作成


<!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</title>
</head>
<body>
<form id="login-form">
    <input type="text" placeholder="What is your name?">
    <input type="submit" value="Log In">
</form>
<h1 id="greeting"></h1>
    <script src="app.js"></script>
</body>
</html>


먼저 이름을 입력해서 전송하는 form태그를 만들었다.

2.JavaScriptの作成


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

function onLoginSubmit(event){
   event.preventDefault(); //자동 새로고침하는 기본기능을 막음
   const username = loginInput.value;
   greeting.innertext=`Hello ${username}`; //"Hello " + username
   console.log(greeting.innertext);
}

loginForm.addEventListener("submit", onLoginSubmit);




h1태그의 내용을 입력받은 이름을 넣어줬다. 오류를 줄이기위해 변수를 이용했다. 
오늘 알게 된 문법(?)은 항상 "Hello " + username을 백틱기호(`)를 이용해 값을 넣어 줄 수 있다는 것이었다.
`Hello ${username}`으로 적으면 javascript가 알아서 변경해주는 것이다. 아주 간편하다!


이름을 입력하고 전송하면 콘솔에 h1태그에 넣어준 값이 나올것이다.

3.ページにh 1タグの内容を表示する


html h1태그에 hidden이라는 클래스를 지정해준다.
<h1 id="greeting" class="hidden"></h1>




hidden클래스의 css를 정해주자. 페이지에 나타나지 않게하는 display:none; 설정했다.
.hidden{
    display: none;
}




페이지를 실행하면 이름을 입력하는 form태그는 보이고 h1태그는 보이지않는다.

자바스크립트에서 submit이벤트의 함수를 고쳐준다.
이름을 전송하면 폼태그는 화면에서 사라지고 h1태그가 나타나게 해주기위해 classList를 사용했다.
폼태그는 add(hidden)을 h1태그는 remove(hidden)을 추가해줬다.

const HIDDEN_CLASSNAME = "hidden"; 
function onLoginSubmit(event){
   event.preventDefault(); //자동 새로고침하는 기본기능을 막음
   loginForm.classList.add(HIDDEN_CLASSNAME);
   const username = loginInput.value;
   greeting.innerText=`Hello ${username}`; //"Hello " + username
   greeting.classList.remove(HIDDEN_CLASSNAME);
}

名前を入力する前に、フォームタグにはhiddenクラスはなく、h 1タグにのみhiddenクラスがあります.
今、名前を書いて送ったら!

フォームラベルにクラスが作成され、入力ウィンドウが消えました.
h 1ラベルにはクラスがなく、値はhello josoで、ページにも表示されます.👍🏻👍🏻
もしあなたが今名前を受け取ったら、私はそれをページの内部に保存して、localStorageを使用します.多くの関数がありますが、setItem()とgetItem()を使用して値を格納および取得します.

4.名前を保存


localStorage.setItem(USERNAME_KEY, username)을 입력해서 키와 값을 저장해준다.

const USERNAME_KEY = "username";
function onLoginSubmit(event){
   event.preventDefault(); //자동 새로고침하는 기본기능을 막음
   loginForm.classList.add(HIDDEN_CLASSNAME);
   const username = loginInput.value;
   localStorage.setItem(USERNAME_KEY, username);
   greeting.innerText=`Hello ${username}`; //"Hello " + username
   greeting.classList.remove(HIDDEN_CLASSNAME);
}



페이지를 실행시키면 로컬스토리지에 잘 저장되어있다.
最後に、ストレージに値が格納されている場合はhello josoのみがページに表示され、値が格納されていない場合はページが作成され、名前を入力して値が保存されます.文を使用している場合は、まずフォームタグとh 1タグにhiddenクラスを指定します.
その後、ローカルストレージから値を取得し、値が空であるかどうかを確認する論理を作成して終了します.

5.完成ページ


html

<!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</title>
</head>
<body>
<form id="login-form" class="hidden">
    <input 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

.hidden{
    display: none;
}

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(); 
   const username = loginInput.value;
   localStorage.setItem(USERNAME_KEY, username);
   paintGreetings(username);
}

function paintGreetings(name){
   greeting.innerText=`Hello ${name}`;
   greeting.classList.remove(HIDDEN_CLASSNAME);
}

//로컬스토리지에 저장된 값 가져오기
const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername==null){//폼태그에 이름입력해 값 저장하게 하기
   loginForm.classList.remove(HIDDEN_CLASSNAME);
   loginForm.addEventListener("submit", onLoginSubmit);
}else{
   paintGreetings(savedUsername);
}
iftop のインストール
[programmers][Python]スポーツウェア