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

19386 ワード

レッスン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 = ''
    [下に移動]