2021-11-12(金)5日目-2

レッスン4

Single Page Application
下にスクロールするには、メニューをクリックします.
Multi Page Application
プロジェクトではガイドバーが使用されます

ガイド

material ui

構成部品
cssアニメーション効果の使用
script src=
外部ファイルに削除します.
外部ファイルフォーマットの利点
キャッシュを使用すると、ドキュメントのロード速度が速くなります.
JavaScriptコンテンツを再受信する必要はありません
複数のhtmlドキュメントで同じjsコードを使用する場合に便利です
個々のjsファイルに移動
jsフォルダでlotto.jsファイルの作成
console.log("-----------lotto-------------")
lotto.htmlファイルの下部<script src="js/lotto.js"></script>それをjsファイルに入れたほうがいいです.
初心者にはおすすめできません
lotto.jsファイルの内容を変更するには、すぐに反映する必要があります.
ネット嵐がそれを手伝ってくれた.
以降のプロジェクトでは、Tomcatという名前のサーバを使用する場合がありますが、これらのサーバは正しく反映されない場合があります.
ブラウザキャッシュ
jsファイルを再インポートしていないためです.
jsファイルを安全に書き込むには、「ネットワーク」タブのlottoを使用します.jsを右クリック
「Clear browser cache」をクリックします.

レッスン5

<button class="btn btn-primary">CLICK</button>
主なメカニズム
「jsイベント処理」の検索
Event Handling
イベントプロセッサ
イベントリスナー
Don't call us, we will call you.
ハリウッドの原則
callback
コールバック関数=イベントリスナー=イベントプロセッサ
コールバック関数の登録
JavaScriptフィーチャー:関数はパラメータとして渡すこともできます
これが合図
これがイベント
イベントもオブジェクトです
事件が起こる
無限に回り続けるという意味です.
ボタンをクリック
ユーザーがボタンをクリックしたかどうかを監視し続ける必要があります.
ブラウザの監視を続行
ユーザーがボタンをクリックしたかどうかを確認します.
開発者は何ができるのか
このボタンをクリックすると、コードを書いてどうすればいいですか.
ブラウザに情報(関数)を提供する必要があります
JavaScriptは関数をパラメータとして渡すことができます
これがイベント処理です
イベントはオブジェクト
ブラウザでのイベントのキャプチャ
すべてのブラウザを監視
開発者
もし私が望んでいる活動が起こったら、あなたは何でもすることができます.
ブラウザに渡す
このような論理を実行してください.
イベントハンドラの登録
イベントリスナーの登録
イベントハンドラの登録
コールバック関数の追加
どのボタンですか.
クリックしますか?マウスは通り過ぎましたか?(イベントのタイプ)
ループの回転を続ける必要はありません
何かをクリックすると
図書館請求書記号=識別キー
データベース内のプライマリ・キー
そのボタンをクリック
ドキュメントでgetで始まる方法
Elements:複数
Element:一つだけ

idは1つしかありません
二つあっても間違いない警告のみ
すべてのラベルにidとclassプロパティを書くことができます.<button class="btn btn-primary" id="btn">CLICK</button>クラスid順序に関係なく
lotto.js移動const btn = document.getElementById("btn")変数名に関係なく
キャッシュのパージと実行

初級開発者が開発したばかりの頃はhtml内でscript内で書くのは安全でした

矢印関数
コールバック関数の入力を容易にする関数を作成します.
矢印関数は、キーワードの代わりに矢印functionを使用して関数を生成する.

(매개변수) => 리턴값

イベントをクリック

btn.addEventListener("click", () => {
    
})

btn.addEventListener("click", function () {

})

function doA() {
    
}

btn.addEventListener("click", doA)

このようにwindow個人に登録するのはあまりよくないと思います

btn.addEventListener("click", (e) => {

})

アクティビティリングという子供がずっと回っています.
パラメータで関数にイベントを渡す

btn.addEventListener("click", (event) => {

})

これはイベントループによって実行されます.
これが実行できるかどうかを確認しなければなりません.

btn.addEventListener("click", (event) => {
    console.log(event)
})

イベントを表示するには、ボタンをクリックします.
ディフェンスゲーム
最後に出るのが遅くなります
ゲームサイクル
オブジェクトが多いほど速度が遅くなります
後ずさりする
ブラウザにはイベントループがあります
Node jsサイクル

事件が起きたらどうする
あとにfalseをもう一つ入れたほうがいいです.

btn.addEventListener("click", (event) => {
    console.log(event)
}, false)

これが最も標準的な方法です
htmlでデータのみを表す
JavaScript
cssスクリーンを飾る
BP (Best Practice)
ボタンをクリックしてロット番号を作成
この関数を実行すると、ロット番号の関数が表示されます.

function makeLottoNum() {
    const numArr = [2, 13, 21, 32, 35, 40]

    return numArr
}

書類にどこに撒くか.
6つの番号をページのどの位置に表示しますか.
現在のドキュメントをリフレッシュするには、メモリにオブジェクトを作成する必要があります.
JavaScriptによるDOM構造の変更
DOM構造を変更すると、ブラウザが塗り直す必要があります.
このタスクは重複しています
この仕事をして、動的に何かを創造します.
document
タグの作成
element
createElementのような子供がいます
document.createElement()
https://developer.mozilla.org/ko/docs/Web/API/Document/createElement

var newDiv = document.createElement("div");

var newContent = document.createTextNode("환영합니다!");

newDiv.appendChild(newContent);

消去、塗装、消去、塗装
私が物を変えるたびに、ファイル全体が変わるので、少し遅くなるかもしれません.
応答は仮想DOM
セクションのみ変更
document.createElement()
私が作ったラベルをどこに置きますか.
DOM処理を行うことは、データ構造を処理することを意味する.
その他
Facebook無限スクロール
lotto.htmlでタグの位置を指定する
divラベルにロット番号を出力=> <div id="resultDiv"></div>メモリ上
球の配列
平敷きなのでリングを回すことができます
くりかえし文
for in反復文の反復変数には、要素のインデックスが含まれます.配列要素にアクセスできます.

for (const 반복 변수 in 배열 또는 객체) {
  문장
}

for (const i in array) {
    console.log(array[i]) // 인덱스로 요소에 접근한다.
}

const object = { a : 1, b : 2, c : 3 };

for (const property in object) {
    console.log(object[property]);
}
--------------------------------------
1
2
3

const target = document.getElementById("resultDiv"):タグを作成する

    for (const num in balls) {
        const tag = document.createElement("h3")
    }

var newDiv = document.createElement("div");

var newContent = document.createTextNode("환영합니다!");

newDiv.appendChild(newContent);

document.createElement()メモリにh 3タグが作成されました
lotto.htmlに貼り付けdocument.createElement("h3")サブフォルダを作成して貼り付けます.

    for (const num in balls) {
        const tag = document.createElement("h3")
        target.appendChild(tag)
    }

動的HTML
きらめき
構造が変わった
すべてのh 3ラベル

text node
資料構造では,次の子をノードと呼ぶ.
h 3ラベルにロット番号を追加する
アルファベット付きh 3
複文
for of繰返し文の繰返し変数には要素の値が含まれます.

for (const 반복 변수 of 배열 또는 객체) {
  문장
}

for (const fruit of fruits) {
    console.log(fruit)
}

    for (const num of balls) {
        const tag = document.createElement("h3")
        const textNode = document.createTextNode(num)
        tag.appendChild(textNode)
        target.appendChild(tag)
    }

「≪続行｜Continue｜emdw≫」をクリックして下に作成
月曜日に金額を入力
3000元を入力すると.
宝くじの番号が表示されます.
js element remove all child検索
innerHTMLの使用

// clear all <h3> tags
target.innerHTML = ''

[下に移動]