JavaScript

Pour le Web

Introduction

  • JavaScript est un langage de programmation
  • Un langage implémente les mécaniques de l'algorithmique
  • … de façon plus ou moins cohérente

La navigateur

  • C'est le navigateur (Firefox, Chrome, Internet Explorer, Opera) qui exécute le JavaScript
  • Le code JavaScript est téléchargé depuis le serveur, mais est exécuté uniquement sur le client
  • Les navigateurs peuvent avoir des comportements différents
  • caniuse.com répertorie les différences JS + HTML + CSS
  • Le code exécuté est isolé dans l'onglet (sécurité)

Les API (interfaces de programmation)

Aller plus loin : https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction

Compatibilité

Support des navigateurs

https://caniuse.com/

Compatibilité : Modernizr

Détecte le support d'une fonctionnalité par le navigateur

https://modernizr.com/

  • Au moment d'afficher la page chez l'utilisateur, répond à la question : Le navigateur supporte t'il la fonctionnalité X ?
  • Pivot de l'amélioration progressive (progressive enhancement)
  • Plus fin que la détection de user-agent navigateur

Compatibilité : Polyfills

Ajoute en JavaScript une fonctionnalité native qu'un navigateur n'implémente pas 

                🔎 <nom_fonctionalité> polyfill <navigateur_cible>

Compatibilité : BabelJS

Permet de faire fonctionner une version récente de javascript (ES6) sur un navigateur qui ne le supporte.

https://babeljs.io/

Quelques mots clés

  • Bibliothèque (Library) : A utiliser en l'état
  • Framework : Impose une manière de faire
  • Boilerplate : Squelette d'application pré construit
  • Generators : initialise une appli sur mesure

Exercice : Devine le nombre

https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/A_first_splash

JavaScript pour le web

index.html


                <html>
                    <head>
                        <title>Ma Page</title>
                    
                        
                    </head>
                    <body>
                        <div>Le contenu de ma page</div>

                    
                        <script type="text/javascript" src="main.js"></script>

                    
                        <script type="text/javascript">
                            // ici mon code javascript
                        </script>
                    </body>
                </html>
  • index.html est par convention la première page chargée lorsqu'aucun document n'est précisé.
  • Par convention, on appellera notre fichier JS principal "main.js" ou "app.js".
    On pourra le ranger dans un sous dossier relativement à la page html.
  • Par convention, on appeller notre fichier CSS principal "styles.css".
    On pourra le ranger dans un sous dossier relativement à la page html.
  • On utilise des chemins relatifs pour rattacher les fichiers entre eux.
    • href="css/styles.css" pour accéder à styles.css depuis index.html
    • src="js/main.js" pour accéder à main.js depuis index.html
    • background-image: url(../images/header.jpg) pour accéder à une image depuis styles.css

Arborescence finale :
  • projet/index.html
  • projet/js/main.js
  • projet/css/styles.css
  • projet/images/<fichiers images>

Point de vue du navigateur web

  • Le HTML est transformé en DOM
  • Le DOM est un arbre, c'est à dire un objet qui contient des sous objets, et qui décrit ce que le navigateur doit afficher
  • Le DOM contient 100% des infos dont le navigateur a besoin pour calculer le rendu
  • Le DOM peut être modifié en JavaScript (et on ne va pas se priver !)
  • Un arbre contient des nœuds, chaque nœud a un parent (sauf le nœud racine). Chaque balise html sera transformée en nœud dans le DOM, on pourra ensuite accéder à son nœud parent (la balise englobante), et à ses enfants (les balises englobées).

Avant de démmarer, versionner !

  • Idéallement utiliser un outil de gestion de version (git, svn)
  • Sinon, faire des backups réguliers et datés

Réagir au clic

  • var domElement = document.querySelector('#someId'); pour obtenir la référence d'un nœud du DOM.
  • Les sélecteurs sont les même qu'en CSS (#id, .class).
  • domElement.addEventListener('click', nomDUneFonction); pour qu'une fonction soit appelée automatiquement lors d'un clic. La fonction devra être déclarée pour que cela fonctionne.
  • domElement.addEventListener('click', function() {/* instruction */}); pour exécuter des instructions sans nommer une fonction.

Toggle d'une classe

node.classList.toggle("myClassName");
  • animation CSS
    • Animation d'une image, d'une photo de fond,
    • Animation sur l'apparition du nom,
    • un fond écran qui apparait en quelques secondes après l'arrivee sur la page
    • Animation sur l'apparition du nom avec des mouvements
    • Apparition d'un logo quand on arrive sur le site
    • Animation d'une barre de compétence
  • transition CSS
    • Avoir des icons qui bougent,
  • changement de thème

TP1 : créer 2 thèmes et un bouton

CSS 

body {
    background-color: white;
    color: black;
}
body.dark {
    background-color: black;
    color: white;
}
JavaScript 

function toggleTheme() {
    document.body.classList.toggle('dark');
}
document.querySelector('.themeButton').addEventListener('click', toggleTheme);
HTML

TP2 : Déclencher une transition CSS

CSS 

.fromLeft {
    opacity:0;
    transform: translate(-100px, 0);
    transition: transform 150ms ease-out, opacity 150ms ease-out;
}
.fromLeft.visible {
    opacity:1;
    transform: translate(0, 0);
}
JavaScript 

function slideFromLeft() {
    var elementArray = document.querySelectorAll('.fromLeft');
    for (var i = 0; i < elementArray.length; i++) {
        elementArray[i].classList.toggle('visible');
    }
}
document.querySelector('.slideButton').addEventListener('click', slideFromLeft);
HTML 

                    
                    
                    
Mon élément

TP3 : Déclencher une animation CSS

(Slides à venir)

Animation

Transitions et transformations


                .spinButton {
                transition: transform 0.5s ease-in;
                }
                .spinButton:active {
                transform: rotate(270deg);
                }
                .spinButton.easeout {
                transition: transform 0.5s ease-out;
                }

Animations


                @keyframes alwaysSpinButtonAnimation {
                from {transform: rotate(0deg);}
                50% {transform: rotate(90deg);}
                to {transform: rotate(360deg);}
                }

                .alwaysSpinButton {
                animation-name: alwaysSpinButtonAnimation;
                animation-duration: 1s;
                animation-iteration-count: 10;
                animation-timing-function: linear;
                }