Javascript et le DOM

Exemple :

Sommaire

  • Rappels généraux
    • HTML : l'outil du maçon !
    • CSS : le pinceau de l'artiste !
  • Javascript : un peu de dynamisme ?
    • Le Document Object Model (DOM)
    • Les fonctions classiques
    • Les événements
    • Voir plus loin !

Le langage HTML

L'outil du maçon !

HTML

HyperText Markup Language permet de structurer les éléments d'une page web.

 

Ces éléments sont structurés sous forme de balises et organisés dans un arbre (une racine et des noeuds imbriqués)

Côté client

Le HTML est envoyé par le serveur puis interprété par le navigateur selon un certain nombre de règles sémantiques.

 

Nous sommes aujourd'hui à la version 5 de HTML, dite HTML 5

<!DOCTYPE html>
<html lang="fr">
    <head>
      <meta charset="UTF-8">
      <title>Ma page HTML</title>
    </head>
    <body>
      <h1>Ma première page HTML</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Quasi ducimus dicta in doloremque natus. Qui, atque adipisci 
        fuga fugiat exercitationem quam molestiae aut ad maxime!
      </p>
      <a href="http://www.google.com">
        Voici un lien !
      </a>
    </body>
</html>

Le CSS

Le pinceau de l'artiste !

Le CSS

Cascading SteelSheets (ou feuilles de styles en cascades) est un langage de description qui permet de styliser les éléments d'une page HTML.

 

Côté client

Comme le HTML, le CSS est téléchargé par le client (le navigateur) puis interprété afin de styliser les éléments de la page HTML.

h1 {
  color: red;
  font-size: 22px;
}

p {
  color: blue;
  font-style: italic;
}

a {
  border: 1px solid red;
  color: red;
  padding: 5px;
  text-decoration: none;
}

Javascript

Langage de script créé en 1995 par Netscape et standardisé par ECMA International.


Il permet principalement de créer du dynamisme et de l’interactivité au sein de pages web

Petit rappel

  • HTML sert à structurer les données d'une page
  • CSS sert à présenter les données au sein d'une page
  • Javascript sert à créer du dynamisme au sein d'une page

Un langage ...

Javascript est un langage de développement "comme les autres" :

  • Variables de différentes portées
  • Fonctions
  • Structures de contrôle et boucles
  • Création d'objets par prototypage

... torturé !

Les différents navigateurs n'implémentent pas tous Javascript de la même façon !

 

Il en résulte parfois des incompatibilités d'un même script Javascript en fonction du navigateur sur lequel la page est affichée !

Javascript et le DOM

Dynamiser une page web

Le DOM

Le Document Object Model c'est la façon dont votre navigateur voit les éléments de votre page HTML

 

Javascript permet d’interagir avec le DOM afin de modifier les éléments, d'en ajouter ou même d'en supprimer

Mais aussi

DOM est aussi une norme de programmation qui est indépendante des langages. On peut donc l'utiliser en Javascript mais aussi en PHP, en Java, en Ruby, etc.

 

C'est simplement un ensemble de fonctions qui permettent d’interagir avec les éléments HTML / XML

Quelques fonctions du DOM

// sélectionne l'élément dont l'id est 'monBouton'
document.getElementById('monBouton') 

// sélectionne les éléments qui ont la classe 'bouton'
document.getElementsByClassName('bouton') 

// sélectionne les éléments qui sont des paragraphes (<p>)
document.getElementsByTagName('p') 

// ajoute un élément dans le document
document.appendChild(...) 

// créé un élement de type paragraphe (<p>)
document.createElement('p') 

// sélectionne le premier élément trouvé qui a la classe 'bouton'
document.querySelector('.bouton') 

// sélectionne tous les éléments qui ont la classe 'bouton'
document.querySelectorAll('.bouton')

Quelques fonctions du DOM

// renvoie la (les) classes css de l'élément
var classes = document.getElementById('monBouton').className;

// modifie la (les) classes css de l'élément
document.getElementById('monBouton').className = 'bouton rouge';

// modifier le style d'un élément directement
document.getElementById('monBouton').style.fontSize = '20px';
document.getElementById('monBouton').style.fontWeight = 'bold';

// voir le code HTML au sein d'un élément
document.getElementById('monParagraphe').innerHTML;

// modifie le code HTML au sein d'un élément
document.getElementById('monParagraphe').innerHTML = '<h2>Bonjour</h2>';

Quelques fonctions du DOM

// selectionne une liste désordonnée sur ma page dont l'ID est 'monUL'
var ul = document.getElementById('monUL');

// récupère les enfants de l'élément <ul> (les <li> qu'il contient)
var enfants = ul.children;

// récupère le nombre d'enfants du <ul>
var nombre = ul.childElementCount

// récupère le premier <li> dans le <ul>
var premier = ul.firstElementChild

// récupère le dernier <li> dans le <ul>
var dernier = ul.lastElementChild

// récupère l'élément d'avant si il existe
var previous = dernier.previousElementSibling

// récupère l'élément d'après si il existe
var suivant = premier.nextElementSibling

// récupère l'élément parent du <ul>
ul.parentElement

Les événements

Un des avantages de l'utilisation du DOM est l’existence des événements !

 

Lorsqu'il se passe quelque chose au niveau des éléments du DOM, des événements sont déclenchés !

On peut "écouter" ces événements et déclencher ainsi des actions précises (quand on clique sur tel lien, faire ceci, quand la page est chargée, faire cela).

 

Chaque élément HTML peut déclencher des événements propres !

Les événements

Evénements page et fenêtre

  • onload — après la fin du chargement de la page
  • onresize — quand la fenêtre est redimensionnée

Evénements souris

  • onclick — sur un simple clic
  • ondblclick — sur un double clic
  • onmousedown — lorsque le bouton de la souris est enfoncé, sans forcément le relâcher
  • onmousemove — lorsque la souris est déplacée
  • onscroll — lorsque le scroll de la souris est utilisé

Evénements formulaire

  • onblur — à la perte du focus
  • onchange — à la perte du focus si la valeur a changé
  • onfocus — lorsque l'élément prend le focus (ou devient actif)
  • onsubmit — quand le formulaire est validé (via un bouton de type "submit" ou une fonction submit())

Les événements

Brancher une action

<a id="monBouton" href="#!" onclick="alert('Bonjour !');">
    Voici un lien !
</a>

<!-- ou -->

<script>
    document.getElementById('monBouton').onclick = function(){
      alert('Bonjour !');
    }
</script>

Aller plus loin !

Les librairies (jQuery, jQuery UI, Modernizr, etc)

 

Les frameworks (Angular2, React.js, etc)

Le but de nos 2 jours ?

Gérer un panier de produits

Javascript et le DOM

By Lior CHAMLA

Made with Slides.com

Javascript et le DOM

Javascript et les éléments HTML : Le DOM

  • 1,250

More from Lior CHAMLA