No.1バニラJSを使ったChromeアプリの作成

21080 ワード
バニラJavaScript レコーダなし nomad coder vanila script テキストリンク
🖥 学習reactを一時停止するため、Nomad coder js挑戦試合に挑戦し、js講義に移った.実は通過できるかどうか心配です...🙄
理論の授業は全部~~私は再び整理実習を始めます!
jsは基本的にhtmlを操作するelementなので、すべてhtmlから始めなければなりません!まずinput操作から始めましょう.運動量には多くの入力が必要なので、名前は直感的にしなければなりません.(運動量は下の写真と同じ!👇)
<!--html-->
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momentum</title>
</head>

<body>
  <!--login-form안에서 input과 button을 찾을 수 있게됐다!-->
    <div id="login-form">
        <input type="text" placeholder="your name?" />
        <button>Log In</button>
    </div>
    <script src="app.js"></script>
</body>

</html>
//js

//querySeletor는 id와 class 정확하게 넣어줘야하는 반면 
//getElementById는 이미 id를 사용한다는것을 알기때문에 생략가능
const loginForm = doument.getElementById("login-form");

//이렇게하면 loginForm에서부터 element를 찾을수있다.
const loginInput = loginForm.querySeletor("input");
const loginButton = loginForm.querySeletor("button");

//querySeletor로 한다면 다음과 같다.
const loginInput = document.querySelector("#login-from input");
const loginButton = document.querySelector("#login-from button");

//추후에 value를 click시 저장 할 수 있게 만들 함수이다.
//함수명이 길어도 알아볼 수 있게 만든다는게 중요하다!
function onLoginButtonClick() {
    console.log("click!");
}

loginButton.addEventListener("click", onLoginButtonClick)

Inputに文字を入力すると、コンソールで文字で出力されるコードをどのように記述しますか?まずコンソールです.dirを使用してinputタグのプロパティを検索する
💡 console.dir()
console.コンソールで指定したJavaScriptオブジェクトのすべてのプロパティを表示して、dir()開発者がオブジェクトのプロパティを簡単に取得できるようにします.
https://developer.mozilla.org/en-US/docs/Web/API/console/dir 
//js

function onLoginButtonClick() {
  //객체의 속성을 보려고 쓰는 코드
   console.dir(loginInput); 
}

もう少し下を見ると、価値のある財産が見つかります.これはhtmlに保存できます.次のように入力すればいいです.
<!-- html -->
<body>
    <div id="login-from">
        <input value="jetom" type="text" placeholder="your name?" />
        <button>Log In</button>
    </div>
    <script src="app.js"></script>
</body>

これで、inputのコンテンツをインポートするには、どのプロパティを検索し、これらのプロパティを使用してコンソールVauleを使用する必要があるかがわかります.ロゴを撮影する必要がある場合は、以下の内容を利用できます.
//js

const loginInput = document.querySelector("#login-from input");
const loginButton = document.querySelector("#login-from button");

//addEventListener의 click을 통해 click시 console.log에 input value를 가져오는것을 확인 할 수 있다.
function onLoginButtonClick() {
    console.log(loginInput.value);
}

loginButton.addEventListener("click", onLoginButtonClick);
ただし、このコードの問題は、値を入力する必要がなくコンソールに印刷できる場合、条件文を使用して置き換えることです.
//js

const loginInput = document.querySelector("#login-from input");
const loginButton = document.querySelector("#login-from button");

function onLoginButtonClick() {
    //loginInput.value을 username 변수로 만들어 호출하자!
    const username = loginInput.value;

    //빈 값이라면 if를 15보다 길다면 else if문을 출력한다.
    if (username === "") {
        alert("empty name!!");
    } else if (username.length > 15) {
        alert("too long!");
    }
}

loginButton.addEventListener("click", onLoginButtonClick)
(Null値の場合)

(15文字以上の場合)

上記のコードも機能しますが、ブラウザ自体の機能では最大文字数を15に調整することもできますので、次のコードを作成できます.
<!-- html -->
<!--input의 유효성 검사를 작동 시키려면 form안에 input이 있어야한다.-->
    <form id="login-from">
        <input required maxlength="15" type="text" placeholder="your name?" />
        <button>Log In</button>
    </form>
function onLoginButtonClick() {
    const username = loginInput.value;
  
	//username을 받는걸 확인하기 위해 console.log는 남겨둔다.
    console.log(username);
    // if (username === "") {
    //     alert("empty name!!");
    // } else if (username.length > 15) {
    //     alert("too long!");
    // }
}
jsの条件文を削除してhtmlにすると表示される画面です.

formにはもう一つの機能があります:submit、ボタンをクリックする必要はありません.Enterをクリックすれば自動的に提出されます.
submitがフォームをコミットする際に、ブラウザがリフレッシュせずにユーザー情報を格納できるようにする必要があることがわかりました.(コミットするとページが更新されるためです.)
TIL 023同期settimeout破壊
0907 TIL React, Event loop