[TIL] 210926

24950 ワード
TIL JavaScript テキストリンク

📝 今日作った

  • WEB APIs/screen.width/outerWidth/innerWidth/document.documentElement.clientWidth/element.getBoundingClientRect()/offsetX(Y)/screenX(Y)/clientX(Y)/pageX(Y)/scrollBy()/scrollTo()/scrollIntoView()/DOMContentLoadead/load/defer

    • 📖 学習資料

  • ドリームコード『フロントエンド必須ブラウザ101』レッスン

    • 📚 学識


    1. WEB APIs


    1）メモ



    2）実習


    📌 ウィンドウサイズタグ(一番前のウィンドウは省略可能)


  • ディスプレイサイズ:window.screen.width (height)

  • ブラウザサイズ:window.outerWidth (outerHeight)

  • (スクロールを含む)Webページサイズ:window.innerWidth (innerHeight)

  • (スクロールなし)ページサイズ:document.documentElement.clientWidth(クライアントHeight)
    • const all = document.querySelector('.all');

function changeSize () {
  all.innerHTML = `
  window.screen: ${screen.width}, ${screen.height}<br/ >
  window.outer: ${outerWidth}, ${outerHeight}<br/ >
  window.inner: ${this.innerWidth}, ${innerHeight}<br/ >
  documentElement.clientWidth: ${document.documentElement.clientWidth}, ${document.documentElement.clientHeight}`;
}

changeSize();

window.addEventListener('resize', () => changeSize());

    📌 クリック先の座標タグ


  • element.getBoundingClientRect()
    DOMRectオブジェクトを返します.ここには、要素の大きさと、뷰포트를 기준으로 하는 '요소'의 상대적인 위치についての情報が含まれています
    トップ、left、bottom、rightの値をとります.bottomとrightは「要素」を表すbottomとrightで、CSSのbottomとrightとは違います.
    DOMRectオブジェクトの下部と右側の値は、ブラウザの左上隅に基づいて要素の距離を計算し、対応する距離値を有します.

  • mouseEvent.clientX(Y)
    「マウスイベント(クリック、ダブルクリックなど)が発生した位置」と브라우저のX軸、Y軸の距離はどれくらいですか

  • mouseEvent.pageX(Y)
    「マウスイベント(クリック、ダブルクリックなど)が発生した位置」は문서가 시작하는X軸、Y軸からどのくらい離れていますか?
    • const box_7 = document.querySelector('.box-7');

box_7.addEventListener('click', event => {
  console.log(box_7.getBoundingClientRect()); // 브라우저 기준, 요소의 위치 (클릭한 지점의 위치 x)

  console.log(`offset: ${event.offsetX}. ${event.offsetY}`) // 클릭한 요소 기준, 클릭한 지점의 위치
  console.log(`screen: ${event.screenX}, ${event.screenY}`); // 모니터 기준, 클릭한 지점의 위치
  console.log(`client: ${event.clientX}, ${event.clientY}`); // 브라우저 기준, 클릭한 지점의 위치
  console.log(`page: ${event.pageX}, ${event.pageY}`); // 문서 기준, 클릭한 지점의 위치
});

    📌 スクロールウィンドウ(特定の場所、特定の要素に移動)

    const by = document.querySelector('.by'); // by 버튼
const to = document.querySelector('.to'); // to 버튼
const into = document.querySelector('.into'); // into 버튼

by.addEventListener('click', () => scrollBy({top: 100, left: 0, behavior: 'smooth'}));
// y축으로 100px만큼 부드럽게 이동

to.addEventListener('click', () => scrollTo(0, 100));
// y축으로부터 100px 지점으로 한번에 이동

into.addEventListener('click', () => box_7.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'}));
// box_7 요소로 이동 → behavior: 부드럽게 이동, block: 수직 정렬, inline: 수평 정렬

    📌 座標を検索し、マウス座標に沿って移動する円を作成します(007)

  • position: absolute left(top)値=clientX(Y)値
    • 🔎 HTML
    <html>
  <body>
    <div class="line horizon"></div>
    <div class="line vertical"></div>
    <img src="img/target.png" class="circle">
    <span class="coord"></span>
  </body>
</html>
    🔎 CSS
    body {
  background-color: black;
}

.line {
  background-color: white;
  position: absolute;
}

.horizon {
  width: 100%;
  height: 1px;
  top: 50%;
}

.vertical {
  width: 1px;
  height: 100%;
  left: 50%;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 여기서 50%는 해당 요소의 크기의 50%를 말한다 */
}

.coord {
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(30px, 30px);
  font-size: 30px;
}
    🔎 javascript
    const horizon = document.querySelector(".horizon");
const vertical = document.querySelector(".vertical");
const circle = document.querySelector(".circle");
const coord = document.querySelector(".coord");

document.addEventListener("mousemove", (event) => {
  console.log(event.clientX, event.clientY);

  const x = event.clientX;
  const y = event.clientY;

  horizon.style.top = `${y}px`; // 수평선엔 top 값만
  vertical.style.left = `${x}px`; // 수직선엔 left 값만

  circle.style.left = `${x}px`;
  circle.style.top = `${y}px`;

  coord.style.left = `${x}px`;
  coord.style.top = `${y}px`;

  coord.innerHTML = `${x}px, ${y}px`;
});

    明日作った

  • 聴講
    • 効果
    Baekjun-カラーペーパーを作成[java]