Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
developpement:javascript:doc [2019/02/12 22:41]
open1024jc [Une autre façon de trouver un élément]
developpement:javascript:doc [2019/03/05 22:52] (Version actuelle)
open1024jc [Faire Scroller la page]
Ligne 336: Ligne 336:
  
 ==== Let ==== ==== Let ====
-  * Let à un scope de block+  * Let un scope de block
   * Let dans une fonction est local à la fonction   * Let dans une fonction est local à la fonction
   * Let respecte la chronologie du script   * Let respecte la chronologie du script
Ligne 757: Ligne 757:
  
 ===== Ajouter et supprimer des classes CSS ===== ===== Ajouter et supprimer des classes CSS =====
 +<file html>
 +<​!DOCTYPE html>
 +<html lang="​fr">​
 +<​head>​
 +    <meta charset="​UTF-8">​
 +    <​title>​Tuto</​title>​
 +    ​
 +    <​style>​
 +        .fbi {
 +        ​color:​ #fb1;
 +        }
 +    </​style>​
 +    ​
 +</​head>​
 +<​body>​
 +    ​
 +    <​h1>​TITRE</​h1>​
 +    <a href="#">​Add</​a>​
 +    <a href="#">​Remove</​a>​
 +    <a href="#">​Toggle</​a>​
 +    ​
 +    <script type="​text/​javascript"​ src="​main.js"></​script>​
 +</​body>​
 +</​html>​
 +</​file>​
 +
 <file JavaScript>​ <file JavaScript>​
 const titre = document.querySelector("​h1"​);​ const titre = document.querySelector("​h1"​);​
Ligne 770: Ligne 796:
 }); });
 </​file>​ </​file>​
 +{{:​developpement:​javascript:​exoaddrmclasscss1.png|}}
 +{{:​developpement:​javascript:​exoaddrmclasscss2.png|}}
 +
 +===== Faire Scroller la page =====
 +<file html>
 +<​!DOCTYPE html>
 +<html lang="​fr">​
 +<​head>​
 +    <meta charset="​UTF-8">​
 +    <​title>​Tuto</​title>​
 +    ​
 +    <​style>​
 +        div {
 +        ​max-width:​ 500px;
 +        ​margin:​ auto;
 +        ​font-size:​ 18px;
 +        ​text-align:​ justify;
 +        }
 +    </​style>​
 +</​head>​
 +<​body>​
 +    ​
 +    <div>
 +        <​h1>​Titre 01</​h1>​
 +        <​p>​Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis adipisci velit iusto at optio molestias accusamus ipsam quia rem. Quos nam quaerat molestias commodi voluptatum consectetur cum, rerum qui provident.</​p>​
 +        <​p>​Officia sequi explicabo laboriosam fuga! Sunt molestiae, reprehenderit,​ repellat natus dignissimos cupiditate iure odio ad. Pariatur placeat facere voluptatum qui, optio cumque eum, quibusdam reiciendis esse voluptate consequatur,​ consectetur omnis!</​p>​
 +        <​p>​Totam iure quam hic! Accusamus pariatur, aspernatur ea dolorum exercitationem illum expedita veritatis vitae, error reiciendis possimus rerum numquam dolorem, suscipit animi adipisci reprehenderit non ducimus cumque. Dicta ab, explicabo.</​p>​
 +        <​h1>​Titre 02</​h1>​
 +        <​p>​Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit temporibus id ipsam dignissimos libero, autem porro hic quibusdam similique ad nihil non, numquam totam expedita est perspiciatis rem praesentium veniam.</​p>​
 +        <​p>​Molestiae amet commodi ratione expedita. Vitae nisi aspernatur odio impedit rem cupiditate adipisci libero consequatur totam quia delectus, necessitatibus,​ ut laboriosam a commodi voluptate, vel quos nostrum fugiat in similique.</​p>​
 +        <​p>​Provident amet a minus praesentium,​ id eligendi nam assumenda molestias incidunt. Incidunt eaque esse odio maxime ipsam totam dolorem iusto error iste? Architecto deserunt velit dolorem rerum possimus laudantium neque.</​p>​
 + 
 +[...]
 +
 +        <​h1>​Titre 10</​h1>​
 +        <​p>​Lorem ipsum dolor sit amet, consectetur adipisicing elit. In reprehenderit,​ asperiores delectus aut, voluptas dolores molestias consequatur,​ enim repellendus laborum earum sunt rem facere! Quibusdam sequi tenetur vitae minima illum.</​p>​
 +        <​p>​Quaerat ex consequatur aperiam porro numquam non accusantium,​ deleniti rerum modi aliquid distinctio autem doloremque id, iste deserunt quo iure illo! Sapiente pariatur, consectetur inventore, odio ducimus dolore tempore iure.</​p>​
 +        <​p>​Cumque eius magni, mollitia harum aperiam cupiditate alias, nulla voluptatum sunt accusamus recusandae ab explicabo sed maxime, minima. Maxime nemo fuga dolor eos porro consectetur error facilis excepturi, mollitia possimus?</​p>​
 +    </​div>​
 +    ​
 +    <script type="​text/​javascript"​ src="​main.js"></​script>​
 +</​body>​
 +</​html>​
 +</​file>​
 +<file JavaScript>​
 +const titles = document.querySelectorAll("​h1"​);​
 +function goToTitle(title){
 +    const distance = title.offsetTop;​
 +    window.scrollTo(0,​ distance); // horizontale,​ verticale
 +}
 +
 +goToTitle(titles[7]);​
 +</​file>​
 +{{:​developpement:​javascript:​exoscroll.png|}}
 +<note important>​Le tableau commence en indice zéro</​note>​
 +
 +===== Faire déplacer un texte =====
 +<file html>
 +<​!DOCTYPE html>
 +<html lang="​fr">​
 +<​head>​
 +    <meta charset="​UTF-8">​
 +    <​title>​Tuto</​title>​
 +    ​
 +    <​style>​
 +        * {margin:0;}
 +
 +        body {
 +            display: flex;
 +            justify-content:​ center;
 +            min-height: 100vh;
 +            align-items:​ center;
 +        }
 +
 +        div {
 +            width: 500px;
 +            height: 500px;
 +            border: 10px solid #FB1;
 +        }
 +
 +        h1 {
 +            width: 200px;
 +            height: 40px;
 +            border: 5px solid #BADA55;
 +            color: #C55;
 +            margin: 0;
 +            text-align: center;
 +        }
 +    </​style>​
 +</​head>​
 +<​body>​
 +    ​
 +    <​div><​h1>​Mon texte</​h1></​div>​
 +    ​
 +    <script type="​text/​javascript"​ src="​main.js"></​script>​
 +</​body>​
 +</​html>​
 +</​file>​
 +
 +<file JavaScript>​
 +const titre = document.querySelector("​h1"​);​
 +const cadre = document.querySelector("​div"​);​
 +const maxHeight = cadre.clientHeight;​
 +const maxWidth = cadre.clientWidth;​
 +
 +titre.style.position = "​relative";​
 +let topPos = 0;
 +let leftPos = 0;
 +let forceH = -2;
 +let forceW = -2;
 +
 +function animation() {
 +    // gestion repond en hauteur
 +    if (topPos == 0) {
 +        forceH *= -1
 +    }
 +    else if (topPos == maxHeight - titre.offsetHeight ) {
 +        forceH *= -1
 +    }
 +    // gestion repond en largeur
 +    if (leftPos == 0) {
 +        forceW *= -1
 +    }
 +    else if (leftPos == maxWidth - titre.offsetWidth ) {
 +        forceW *= -1
 +    }
 +    // Déplacement
 +    topPos += forceH;
 +    leftPos += forceW;
 +    titre.style.top = topPos + "​px";​
 +    titre.style.left = leftPos + "​px";​
 +    // Appelle de l'​animation récursivement
 +    requestAnimationFrame(animation);​
 +}
 +// Appelle de l'​animation
 +requestAnimationFrame(animation);​
 +</​file>​
 +{{:​developpement:​javascript:​exorebond.png|}}
 +