[Clone]オイルチューブクローンコード-動的出力JSON格納データ

14528 ワード
JavaScript CSS toy project テキストリンク

追加されたJavaScript機能

  • JavaScript Fetch APIを使用してJSONファイルのデータをロードし、Up Nextに動的に表示する
  • ビデオタイトルの長さが2行を超えるとサムネイルが表示され、addEventListenerボタンをクリックして隠し文章を表示する機能(CSSクランプ+JavaScript)

    • コード#コード#


    data/dataList.json

    {
  "items": [
    {
      "source": "./imgs/thumbnail.jpeg",
      "title": "Clone Coding: YouTube Mobile Website 유튜브 모바일 웹사이트 따라 만들기 | 프론트엔드 개발자 입문편: HTML, CSS, JavaScript",
      "name": "드림코딩 by 엘리",
      "views": "82K views"
    },
    {
      "source": "./imgs/thumbnail2.jpg",
      "title": "매일 아침 꼭 해야하는 15분 기상 스트레칭｜혈액순환, 피로회복, 신진대사 향상 (Morning stretch)",
      "name": "빵느 Seoyeonprofile",
      "views": "392,787회"
    },
    {
      "source": "./imgs/thumbnail3.jpg",
      "title": "🎵 오마이걸 노래모음 추천곡 🎵 (살짝 설렜어, Dolphin, 비밀정원, 다섯번째계절, 불꽃놀이, 한 발짝 두 발짝, CLOSER ..)",
      "name": "박승오리 Box",
      "views": "463,811회"
    }
  ]
}

    JSONファイルを読み込みます(main.js)

    function loadJSON() {
  return fetch("data/dataList.json")
    .then((res) => res.json())
    .then((data) => data.items)
    .catch((error) => console.log);
}

loadJSON()
  .then((items) => {
    displayUpNext(items);
  })
  .catch((error) => console.log);

    displayUpNext(items)関数の作成

    function createElement(items) {
  // HTML 태그 생성
  const li = document.createElement("li");
  ...

  // 클래스 속성 설정
  li.setAttribute("class", "item");
  ...

  // 태그 안에 텍스트 넣기
  title.innerText = items.title;
  ...

  // 부모 태그 안에 자식 태그로 넣기
  li.append(imgBox, info, button);
  imgBox.append(img);
  info.append(title, name, views);
  button.append(i);

  return li;

}

function displayUpNext(items) {
  const element = items.map(createElement);
  const container = document.querySelector("#list");
  return container.append(...element);
}

    ボタンイベントの追加(main.js)

    loadJSON()
.then((items) => {
  displayUpNext(items);
  
  const moreBtn = document.querySelector(".moreBtn");
  const title = document.querySelector(".title");
  
  moreBtn.addEventListener("click", () => {
    moreBtn.classList.toggle("clicked");
    title.classList.toggle("clamp");
  });
})
.catch((error) => console.log);

    結果


    JSONファイルの読み込みによる動的出力



    ボタンイベント



    今日新しく学んだもの


    ≪イベント｜Events｜ldap≫


    Webブラウザは、「ある要素にイベントが発生した場合、ブラウザからの通知が受信される」と、そのイベントが発生したときに「実行されるアクション」を登録できます.
  • 行動:イベントハンドラ

    • addEventListenerメソッド


    addEventListenerメソッドを使用して、DOM要素にイベントハンドラを登録します.
    これはアクティブ登録方式の中で最も推奨される方法です.
    addEventListenerには3つのパラメータがあります.target.addEventListener(type, listener[, options]);
  • type:イベントのタイプ
    https://developer.mozilla.org/ko/docs/Web/Events
  • listener:typeイベント発生時に実行する関数を指定
    • function onButtonClick(event) {
  const title = document.querySelector(".title");
  this.classList.toggle("clicked"); // this : 함수 내부에서 선언되면 이벤트에 바인딩된 요소를 가리킴(=currentTarget)
  title.classList.toggle("clamp");
}

const moreBtn = document.querySelector(".moreBtn");
moreBtn.addEventListener("click", onButtonClick);

    Element.ClassList


    タグクラスを操作する方法を使用できます.
  • add(String):クラス値の追加
  • remove(String):クラス値の削除
  • item(Number):インデックスを使用してクラス値を返す
  • toggle(String):クラスが存在する場合は削除、クラスが存在しない場合は追加(切り替え)
  • ・contains(String):指定したクラス値がタグのクラス属性に存在するかどうかを検証
  • replace(oldClass, newClass):既存のクラスを新しいクラスに置き換える
    • 🍓TSGクラスタ
    SQL with MySQL