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.parentElementLes é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)