［TIL］DREAM符号化−フロントエンド必須ブラウザ101

27011 ワード
テキストリンク
https://github.com/Ryanromaris/dreamCoding
1年前、DREAMコードのフロントエンドの授業も受けたことがある.
DREAMコードで学んだ内容は、Webページの開発を理解するのに本当に役立ちます.でも当時勉強していた内容も忘れてしまい、整理していなかったので復習して襟に置くことにしました.今日勉強した内容はネットAPIです.

APIとは?


アプリケーションプログラミングインタフェースの略!
ウィンドウが提供するAPIを利用すると、ウィンドウアプリケーションを簡単に作成できます.
YouTubeが提供するAPIを利用して、関連機能を簡単に導入できます.
これにより、APIは、オペレーティングシステムまたはプラットフォーム上で提供されてもよい.

WEB APIもそうです


Webブラウザで簡単に使えるAPIがたくさんあります!
最上階に存在するのはwindowです.
コンソールウィンドウでこのボタンをクリックすると、ウィンドウオブジェクトがすぐにポップアップします.
次はDOM、BOM、JavaScriptです.
それぞれのAPIをうまく利用できれば、本当にいろいろな機能が実現できます!
モジラでそれぞれの使い方を学べます!

Windowのx,y座標を利用した例!


これは、ターゲットポイントがマウスの位置に沿って移動する例です.狙撃手になったみたいで面白い!
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <style>
     body {
       background-color: black;
     }
     .x {
       width: 100%;
       height: 1px;
       position: fixed;
       background-color: white;
     }
     .y {
       width: 1px;
       height: 100vh;
       position: fixed;
       background-color: white;
     }
     .target {
       position: fixed;
     }
   </style>
 </head>

 <body>
   <div class="x"></div>
   <div class="y"></div>
   <img class="target" src="./target.png" />
   <script>
     const x = document.querySelector('.x');
     const y = document.querySelector('.y');
     const target = document.querySelector('.target');
     window.addEventListener('mousemove', (event) => {
       console.log('change', target.getClientRects()[0]);
       x.style.top = `${event.clientY}px`;
       y.style.left = `${event.clientX}px`;
       target.style.top = `${
         event.clientY - target.getClientRects()[0].width / 2
       }px`;
       target.style.left = `${
         event.clientX - target.getClientRects()[0].width / 2
       }px`;
     });
   </script>
 </body>
</html>

WindowsでのScrollの例


ウサギを見つけろ!ボタンを押してウサギの位置までスクロールする例.behavior:スムーズにスクロールする細部が面白いです. 
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Scroll</title>
   <style>
     body {
       text-align: center;
       background-color: black;
     }
   </style>
 </head>
 <body>
   <button class="findRabbit">Find a Rabbit!</button><br />
   <img src="./img/carrot.png" /><br />
   <img src="./img/carrot.png" /><br />
   <img src="./img/carrot.png" /><br />
   <img src="./img/carrot.png" /><br />
   <img src="./img/carrot.png" /><br />
   <img src="./img/carrot.png" /><br />
   <img src="./img/carrot.png" /><br />
   <img class="rabbit" src="./img/rabbit.png" /><br />
   <img src="./img/carrot.png" /><br />
   <img src="./img/carrot.png" /><br />
   <img src="./img/carrot.png" /><br />

   <script>
     const findRabbit = document.querySelector('.findRabbit');
     const rabbitY = document.querySelector('.rabbit');
     findRabbit.addEventListener('click', () => {
       console.log('here is ');
       // window.scrollTo(0, rabbitY.getClientRects()[0].y);
       rabbitY.scrollIntoView({ behavior: 'smooth', block: 'center' });
     });
   </script>
 </body>
</html>
AWS SNSのiOS向けPush通知(APNs)証明書の更新手順
秩序配列の二分ルックアップ実装