JSP独学Nomard Cother ChromeアプリケーションV 6の作成

12755 ワード
JavaScript レコーダなし テキストリンク

Getting UserName


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

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);
classList.addでhidden classを追加した.classList.removeにクリア
入力先
値を取得し、h 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 app</title>
  </head>
  <body>
    <form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <button>Log IN</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
  </body>
</html>
greeting.innerTextを追加して挿入します.
css
.hidden {
  display: none;
}
<h1 id="greeting" class="hidden"></h1>というクラスを生成して、クラスアプリケーション項目を非表示にすることができます.
ブラウザ実行時


前述のようにusername変数に入力した内容
greeting.innerText = .hidden { display: none; } ;理由を表す
入力が正しいことを確認できます.

Saving Username


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

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  localStorage.setItem("username", username);
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);
Hello ${username}の使用
ブラウザの内部にあるAPIというローカルストレージを使用して、
key値とvalue値として保存し、setItemを使用して各値を指定します.
ブラウザ実行時

初期ログインフォームに名前を入力します.
key値にはusernameが含まれ、valuer値にはkimが含まれます.

Loading Username


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);
  paintGreetings(username);
}

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

loginForm.addEventListener("submit", onLoginSubmit);

const saveUsername = localStorage.getItem(USERNAME_KEY);

if (saveUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  paintGreetings(saveUsername);
}
localStorage.setItem("username", username);という名前の関数を作成します.paintGreetings番バスsaveUsernameとして指定されたローカル・リポジトリ
usernameという名前のキー値を取得し、条件文の値が空の場合、
loginFormをロードして値を入力します.
値が存在する場合、localStorage.getItem(USERNAME_KEY)関数が実行されます.
ブラウザ実行時
ブラウザのローカルストレージに格納されている値はありません.

ブラウザのローカルストレージに格納されている値.

条件文が正常に動作していることがわかります.

Intervals


clock js
const clock = document.querySelector("h2#clock");

function sayHello() {
  console.log("Hello");
}

setInterval(sayHello, 5000);
const USERNAME_KEY = "username";関数を使用すると、指定した時間に必要な関数を実行できます.

次のコンソールを見ると、5秒ごとにHelloが出力されます.

Timeouts and Dates


clock js
const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

getClock();
setInterval(getClock, 1000);
ブラウザに組み込まれているdateオブジェクトとその方法を使用してクロックを作成できます.paintGreetingsは、まずDateという新しいオブジェクトをもたらすことを明確に指摘し、setIntervalによって内部コンテンツをconst date = new Date();、clock.innerText、date.getHours()、date.getMinutes()を用いてクロック形式で表示することができる.

PadStart


ただし、上記のdate関数として入力される値は、1のような数値です.
19:12:5このように1つの位置しか現れず、一般的なクロックフォーマットを超えています.
この場合、stringタイプのデータの最大長を指定するdate.getSeconds()を使用します.最大値が不足している場合は、入力する文字を入力し、前から入力します.
clock js
const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock();
setInterval(getClock, 1000);
以上のように、時間、分、秒を変数に分離し、それぞれpadstartを使用して文字列に変換した後、padstartを適用して2ビットを最大に指定し、不足した位置に0を入力するように指定します.

その後、上のように1つの位置が現れ、0が前に埋め込まれているのも見えます.
入力したデータを簡単にロードし、表示機能とクロック機能を実現することを学びました.
後で完了する動量クローンアプリケーションを期待します.
CSS-1(午前)
最初のFlutter app、最初のセクションの作成