バニラJSを使用したクロムアプリケーションの作成:復習3.0～3.8

3.0

JavascriptとHTMLの接続を確認しました.htmlのドキュメントをdocumentでインポートできます.
ex.consoleウィンドウのdocument.title, document.body呼び出し
また、documentを呼び出してJSでhtml値を変更することもできます.

3.1

console.dir->JavaScriptからHTMLを読み込むことができます.
getElementById(string):htmlでidを使用して要素を検索できます.


これによりjsを使用してhtml内の要素をインポートおよび変換できます.

3.2

div tag->領域の設定に使用
要素をインポートする有効な方法

getElementsByClassName():多くの要素をインポートします.(arrayに戻る)

getElementsByTagName():名前を指定できます(arrayを返します)
->arrayを返すのでtitle.innerTextと同じ方法でエラーが発生しました.サブラベルを個別にインポートするのは難しいです.

querySelector()->要素はCSSで検索できます.
ex. document.querySelector(".hello h1");
いろいろ使うつもりです.複数のh 1タグがある場合、最初に見つかった要素のみが返されます.すべての要素を検索する場合はquerySelector Allを使用します.(arrayに戻る)

querySelector("#hello); == getElementById("hello");

3.3

elementの内部を表示する場合は、コンソールを使用します.dir();
ここからonで始まる->event、これらの項目はJavaScriptオブジェクトであることを理解してください.

活動は聴くことができます.
1) const title =document.querySelector("div.hello:first-child h1");
htmlタグをにインポートします.
2)関数の定義
イベントの実行時に何が起こるかを決定する関数を定義します.
ex.

function handleTitleClick(){
    hellos.style.color="blue"
}

3) hellos.addEventListender("click", handleTitleClick);
clickというイベントが発生した場合、上記で定義した関数を実行します.ここで重要なのはHandleTitleClick()ではありません.イベントが発生した場合、jsは私たちが実行するのではなく、実行する必要があります.
このようにして、任意のイベントが発生したときにこれらのイベントをリスニングし、関数を正常に動作させることができます.

3.4 event +

const hellos=document.querySelector("div.hello:first-child h1");

function handlehellosClick(){
    hellos.style.color="blue"
}

function handleMouseLeave(){
    hellos.innerText="mouse is gone!";
}

function handleMouseEnter(){
    hellos.innerText="mouse is here!";
}

hellos.addEventListener("click", handlehellosClick);
hellos.addEventListener("mouseenter", handleMouseEnter);
hellos.addEventListener("mouseleave", handleMouseLeave);

3.5 event ++

これまでeventを処理するには、次の構文が使用されています.

hellos.addEventListener("click", handlehellosClick);
hellos.addEventListener("mouseenter", handleMouseEnter);
hellos.addEventListener("mouseleave", handleMouseLeave);

しかし、これは次のような状況を変えることができます.

hellos.onclick= handlehellosClick;
hellos.onmouseenter=handleMouseEnter;
hellos.onmouseleave=handleMouseLeave;

(講演者は前者のほうが好きです)
いろいろな活動を学びました.

const hellos=document.querySelector("div.hello:first-child h1");

function handlehellosClick(){
    hellos.style.color="blue"
}

function handleMouseLeave(){
    hellos.innerText="mouse is gone!";
}

function handleMouseEnter(){
    hellos.innerText="mouse is here!";
}

function handleWindowResize(){
    document.body.style.backgroundColor="tomato";
}

function handleWindowCopy(){
    alert("copier!");
}

function handleWindowOffline(){
    alert("SOS no WIFI");
}

function handleWindowOnline(){
    alert("good WIFI");
}
hellos.onclick= handlehellosClick;
hellos.onmouseenter=handleMouseEnter;
hellos.onmouseleave=handleMouseLeave;

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

(不思議な機能がたくさんあって、すぐに反応しました.これは私個人が今までやった中で一番面白いことです)

3.6

ifおよびelseを使用して、イベント

をより詳細に記述する

const hellos=document.querySelector("div.hello:first-child h1");

function handlehellosClick(){
    const current=hellos.style.color;
    let newColor;
    if(current==="blue"){
        newColor="red";
    }
    else{
        newColor="blue"
    }
    hellos.style.color=newColor;

}


window.addEventListener("click", handlehellosClick);

(中間変数は表現をより明確かつ簡単にします.)

3.7

*js if文で同じかどうかを確認し、3つの等号を書き込む
-これまでのようにjsではhtmlにそれぞれ対応するのではなく,色に関する部分をcssに渡し,互いに分担してインタラクションできるように修正した.

jsでは、文字列を直接使用するよりも変数を使用するほうがよい.スペルが間違っていると見つけにくいからです.

**問題:このようにクラス自体を変更すると、色以外に既存のクラスが持つfontが存在します.etcさえ消えた.したがって、既存のクラスを保持しながら一部だけを変更する方法が必要です.

3.8

ClassListを使用して2つの問題を解決

const h1=document.querySelector("div.hello:first-child h1");

function handlehellosClick(){
    const clickedClass = "clicked";
        if(h1.classList.contains(clickedClass)){
         h1.classList.remove(clickedClass);
        } else{
            h1.classList.add(clickedClass);
        }
}


window.addEventListener("click", handlehellosClick);

contains->が存在するかどうか.remove除去追加{{remove:さくじょついか}}
これにより、既存のクラスを使用しながら上記の機能を実現できます.しかし、実際には、このような動作は実際の作業で非常によく見られるため、スイッチングと呼ばれる強力な関数があります.

const h1=document.querySelector("div.hello:first-child h1");

function handlehellosClick(){
        h1.classList.toggle("clicked");
}

h1.addEventListener("click", handlehellosClick);

上と下のコードは同じ役割を果たしています.切り替えとは、リストをクリックしたときに削除され、そうでない場合に追加されるロールです.