マウスでクローン!1

💥 JavascriptによるWebページの実装

Nomad Coderの「Vanilla JSでChromeアプリを作成する」に従って、私が学んだことを整理した文章です。

「ハーブJS->関連フレームワーク->バックエンド」を使用して、Web開発プロセスをすばやくレビューします。

文章が下手だ。

🙄 ヴァニラJavascriptとは?

VanillaJavascriptフレームワークまたはライブラリが適用されていない純粋なJS

🙄 どうして勉強しますか。

純粋なJSを学習し、今後学習するフレームワークとライブラリをより深く理解し、利用することができます.しっかりした基礎があってこそ、これからは揺るがないと思います.

各機能は複数のJavaScriptファイルに分けて実現できます。

Greeting.js:ユーザーが入力した値をローカルストレージに格納し、ユーザーを記憶します.

Clock.js:現在時刻をページに表示します.

Quotes.js ,Background.js:名言と背景をランダムに画面に表示します.

Todo.js:ユーザーがやるべきことを入力したら、すぐに画面に表示されます.また、Greetingなどのローカルストレージに保存し、ユーザーが再アクセスしたときに以前のtodoリストを表示するようにします.

Weather.js:navigator現在の座標を受信した後、Open Weather APIを使用して現在の位置の天気を画面に表示します.

1. Greeting.js

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

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


const savedUsername = localStorage.getItem(USERNAME_KEY);

 
if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);    
}else{
    paintGreeting(savedUsername);
}

💻実行

localstorageに保存されている名前がない場合は、これらのログインウィンドウが表示されます.

ログインする人の名前を入力し、EnterまたはLoginボタンを押してlocal storageに保存します.

このlocal storageでは、ログインしたユーザーを覚えて、次回の再接続時にログインしないようにします.

学んだことはJavascriptファイルからHTML idを抽出することです

Document.getElementsBy~:HTMLをID、ClassName、TagName、Nameとして波形テーブル部分にドラッグ＆ドロップできます.

Document.QuerySelector():カッコ内の表現に応じてclass、Id、Tagを呼び出すことができます.

querySelector("#login-form input");
해석 > querySelector("login-form라는 ID의 밑에 있는 input 태그");

上記のフォーマットではlogin-formというIDの下にあるinputタグが引かれます.

学んだこと2:addEventListener()は、プレイヤーの行動を聞く。

loginForm.addEventListener("submit",onLoginSubmit);
addEventListener("액션 종류",액션했을때 실행할 함수);

上のコードはinputタグのsubmit動作を待ち,ユーザがコミットするとonLoginSubmit関数を呼び出す.Actionの種類は非常に多様でgooglingで知ることができます.

学んだ点3:preventDefault()はブラウザのデフォルトの動作をブロックします。

event.preventDefault(); 

上記のコードは、デフォルトではブラウザで実行される操作をブロックします.たとえば、デフォルトではpreventDefault()を使用して現在のウィンドウ(submitなど)をリフレッシュすると、これらの動作はブロックされます.

学んだこと4:classList。add, classList.使用するタグクラスの挿入、削除

loginForm.classList.add(HIDDEN_CLASSNAME); 
greeting.classList.remove(HIDDEN_CLASSNAME);

上記のコードは、HIDDEN CLASSSNAMEを追加および削除します.また、値が存在する場合は値を削除し、存在しない場合は値を追加します.

学んだこと5:localStorageのsetItemとgetItem

localStorage.setItem("키 값","저장할 값");  
localStorage.getItem("키 값");

setItemを使用して、ランダムに値を削除しない限り、値を「キー:値」としてlocalStorageに保存します.保存した値をgetItem(「キー値」)として受信することもできます.

以前はあまり勉強していませんでしたが、初めて勉強したような気がします。残りのコードも整理してアップロードします。