コードレス-バニラJS(3)

<注意エラー>stringを繰り返し使用すると、変数になります

1.JSでvalueを覚える非常に簡単な方法

1.htmlの作成
2.要素のドラッグ＆ドロップ
3.jsで作業

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

function onLoginBtnClick() {
  //   console.log(loginInput.username);//user의 부정확한 정보기입 가능성
  //   console.log('click!');
  const username = loginInput.value;
  if (username === '') {
    alert('Please write your Name');
  } else if (username.length > 15) {
    alert('name is too longer!');
  } else {
    alert('hello ' + username);
  }
}

user入力値の有効性を検証するのは良い練習です!
でも.このような確認ではなく、ブラウザでサポートされている機能を使用することをお勧めします.

2. form

submit=ブラウザリフレッシュ→formのdefault動作
htmlのヘルプを使用するには、フォームに配置する必要があります.
ex)inputの検証操作=inputはformでなければならない

3. event

addEventListenerの関数は「直接」実行されません
ブラウザでは、実行+event情報も提供されます.
addEventListener()から関数を受信する場合は「()」を追加せず、関数の名前のみを記録します

直ちに/直接運転したくない

"()追加="即時"実行関数

指定イベントが発生すると、ブラウザはこの機能を実行し、

にスケールします.
<クリーンアップ>
1.イベント発生時にブラウザが関数を呼び出す
2.呼び出し時に「()」を最初のパラメータとする
=すべてのeventListener関数の最初の論証
=発生したばかりのイベントに関する情報を受信
→パラメータスペースを提供するだけでjsは自動的に入れる

preventDefault=ブラウザのデフォルト動作をブロック(default)
-form=リフレッシュ
-herf=別のページ

へ

4. localStorage

ブラウザのDB
ブラウザに一部のコンテンツを保存できます

setItem, getItem, removeItem

5. randamness

Math module
randam()=0～1の乱数
Math.random()を使用して配列から任意の値を選択
→0からxまでの乱数
= Math.random() *array.length

小数点を削除する方法

round()=四捨五入

ceil()=アップグレード

階()=

下がる

6.JSでhtml要素を作成する

document.createElement(「html tag」)/対応するtag要素の作成
document.body.appendChild(bgImage);//htmlに追加
→append=一番後ろ
→prepend=一番前