[TIL] #8 pagination

14610 ワード
TIL JavaScript バックエンド テキストリンク

D-7


上のコード師は勉強を続けていますが、今はまだ1週間あります.
その前によく勉強したい.
うまくいかなかったみたい

javascript


JavaScript passition



道具の数が少ないので、類名で作りました.
何百もの品物があれば、クラス名を変えることができます.
非効率的な方法のようです.

html

<body>
    <main>
        <div class="item_box">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
          	.
         	.
          	.
        </div>
    </main>
    <div class="pagination">
    </div>

    <script src="app.js"></script>
</body>
JavascriptでPageNationを作りたい
どこかで...🐒🐒
const pagination = document.querySelector(".pagination")
const contents = document.querySelector(".item_box")

const itemCount = 12
const lastItemNumber = Object.keys(contents.children).length
const maxPage = Math.ceil(lastItemNumber / itemCount)
第1部では、オブジェクトの長さをどのように取得するかを考えています.
子供たちを連れてきて歌えばいいと思って出てきました.
ページを個別に配置していないので、項目数によって
maxpageを取得してページ番号を設定します.
let paginationNumber = []
let paginationHTML = "";

/*  여기는 상관 없는 부분입니다.
for (let index = 0; index < 10; index++) {
    const element = contents.children[index]
    itemId = element.id
}
*/

for (let index = 0; index < maxPage; index++) {
    paginationNumber.push(index + 1)
}

paginationNumber.forEach(number => {
    paginationHTML += `<span class="pagination__number" style="cursor:pointer">${number}</span>`
});

pagination.innerHTML = paginationHTML
上はページをクリックしたときにIDを区別するために入れたコードです.
初めてのforeachなので練習してみたいと思います
forゲートを2回使っても大丈夫みたいです.
最後の行にページ番号を生成します
for (let index = 0; index < maxPage; index++) {
    pagination.children[index].addEventListener("click", handleClickNumber = (e) => {
        page_number = e.target.innerText
        for (let index = 0; index < lastItemNumber; index++) {
            contents.children[index].className = "hiding"
        }
        for (let index = 0; index < itemCount; index++) {
            contents.children[((page_number - 1) * itemCount) + index].className = "item"
        }
    })
}
これはコードの中で最も修復したい部分です.
ドアをあんなに回すと、あまり効率が悪いのではないかと思ったので、直したいと思います.
for文で各ページ番号にイベントを送信します.
イベントターゲットを使用して、アイテムが表示される順序を決定します.
昨日テスト用のファイルを実際に適用しました.
まずは結果から.

思ったより効果が良かったので満足でしたが、もっと正確な方法を知りたいです.
ページをクリックすると、画面の一部が揺れます.
ドアをたくさん回したせいか、それだけの被害が出てしまいます.
だから処理のスピードが遅くなったと思います.
もっと画期的な方法を知りたいです.🤩
バックエンドにページを作成したいと思っていました.
カナダでページをクリックして移動すると、ページが移動していないことがわかります.
私はマスターしました.私もフロントでこれを処理します.
だからやりました.
ページ移動はなく、より清潔な感じですが、
私のかわいいコードは骨が折れるので、もう一度考えなければなりません.

バックエンド


バックエンドに興味があり、フロントにやりたいものがあります.
フロントができなくてできないと私の性格は受け入れられません...
JavaScriptでいろいろ作っています.😁😁
学習ページは新しい機能を作成し、維持することができます.
私に何が欠けているか知っているかもしれませんが、
年取ったので急いで選んだ部分もありますが、
あなたはよく選んだと思います.

django


今日作ったものの中に増えた
ソーシャルログインセクションを追加しましたが、どのように実現されているのか知りたいです.
主にauth 2に関する内容を紹介した.
クライアント
クライアント------通貨------>ココア
クライアント
リクエストと応答はこのように行われる.
あなたが持ってきた情報を使用して新しいユーザーを作成します.
ログイン方式です
今は検索やコメント機能を作成する予定です.

の最後の部分


The Life Cycles of Enterprise Beans
Linux Upskill 1. サーバ接続とディレクトリのコマンドについては、マニュアルを参照してください.