📝 今日作った

親クローンエンコーディングの開始

event.preventDefault()

📖 学習資料

レコーダなし「バニラJSを使用したクロムアプリケーションの作成」

📚 学識

1. Log In

1）フォーム検証

JavaScript if構文ではなくHTMLを変更

const loginInput = document.querySelector('#login-form input');
const loginButton = document.querySelector('#login-form button');

function onLoginBtnClick() {
  const username = loginInput.value;
  if (username === '') { // form ⊃ input(required 속성 추가)
    alert('Please write your name.');
  } else if (username.length > 15) { // maxlength="15"
    alert('Your name is too long.');
  }
  console.log(username);
  loginInput.value = '';
}

loginButton.addEventListener('click', onLoginBtnClick);

<form id="login-form">
  <input required maxlength="15" type="text" placeholder="what is your name?">
  <button>Log In</button>
</form>

2)submitイベント

フォームタグにsubmitイベントが発生するたびに、ページがリフレッシュされます.
解決策
event.preventDefault():イベント発生時にブラウザのデフォルト動作をキャンセル

function onLoginSubmit(event) {
  event.preventDefault();
}

loginForm.addEventListener('submit', onLoginSubmit);

3）フォームラベルを非表示にし、h 1ラベルを表示する

HTML

<h1 id="greeting" class="hidden"></h1> <!-- h1은 기본적으로 안 보임 -->
<form id="login-form">
  <input required maxlength="15" type="text" placeholder="what is your name?">
  <button>Log In</button>
</form>

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';
// string을 저장하는 변수는 관습적으로 대문자로 표기한다

function onLoginSubmit(event) {
  loginForm.classList.add(HIDDEN_CLASSNAME); // form 태그 숨김
  const username = loginInput.value;
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME); // h1 태그 보임
}

loginForm.addEventListener('submit', onLoginSubmit);

明日作った

クローン符号化は

に続く.