Abréviation de Dynamic HTML.
Ensemble de technique associées à une page HTML pour :
Techniquement, on va utiliser un language de programmation, le Javascript, pour interagir avec le navigateur Web.
JavaScript est un langage de programmation normalisé (ECMAScript). On le place généralement dans une page HTML ou en liaison avec celle-ci.
Permet de :
Tout les navigateurs traduisent une page HTML en arbre.
La consultation ou la modification de cet arbre en Javascript se fait au travers d'une interface de programmation normalisée nommée DOM.
Javascript est :
Pour simplifier l'usage du Javascript, sont nés des Frameworks Javascript. Ils permettent :
Il en existe plusieurs que l'on peut divier en 2 groupes :
Le plus utilisé est Prototype, il permet d'enrichir Javascript en proposant plusieurs modules de bases notamment :
Il existe plusieurs complèments à Prototype. Ils permettent :
Utiliser des frameworks nécessite quand même de connaitre un minimun de notions de Javascript :
Permet de stocker, sous un nom, une ou des valeurs en mémoire.
Les variables possédent un type caractèrisant leur contenu : (chiffre, tableau, chaîne de caractères ...)
Pour utiliser une variable on doit la déclarer :
var une_variable;
var une_autre_variable = 1;
var une_chaine = "de caractere";
var un_tableau = new Array("donnée 1", "donnée 2", "donnée 3");
var un_autre_tableau = ["donnée 1", "donnée 2", "donnée 3"];
var une_date = new Date();
var un_objet = $('idt');
Javascript possède plusieurs objets standards.
Ils permettent de traiter des types complexes (ex : une date, une balise HTML).
On peut tester le contenu d'une variable.
Pour cela on utilise des opérateurs :
| De comparaison | Logique |
|
|
Les opérateurs permettent de faire des tests, ils s'utilisent dans des instructions.
L'instruction la plus utile est IF / ELSE
if ( /* CONDITIONS */ ) {
/* TRAITEMENTS */
}
Exemple
if ( (a == b && a >= 1) || (b == 3) ) {
alert('La condition est vrai !');
}
else {
alert('La condition est fausse !');
}
Certaines variables sont composées de plusieurs valeurs.
Exemple : un tableau à plusieurs lignes.
Il existe plusieurs méthodes pour réaliser des boucles, la plus simple est la boucle FOR.
var un_tableau = new Array("donnée 1", "donnée 2", "donnée 3");
for(i = 0; i < un_tableau.length; i++) {
alert(un_tableau[i]);
}
// Autre forme d'itération avec Prototype
un_tableau.each(function(value) {
alert(value);
});
Les fonctions vont permettre de factoriser et de déporter des traitements.
function ma_fonction(/* ARGUMENTS */)
{
/* TRAITEMENTS */
}
Exemple
function affiche_message(a, b)
{
var msg = a+" et "+b; // On concaténe des chaînes de caractères
alert(msg);
}
affiche_message("Prototype", "Scriptaculous");
On précise l'URL de chaque fichier Javascript.
<html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js"> </script> <script type="text/javascript" src="mes_fonctions.js"> </script> </head> <body> <script type="text/javascript"> une_de_mes_fonctions(); </script> </body> </html>
On peut placer des attributs spécifiques à l'intérieur des balises HTML.
Ces attributs permettent d'intervenir lors des actions de l'internaute.
Plusieurs attributs sont disponnibles :
onclick, onmouseover, onmouseout, onchange, onfocus, onselect, onblur, etc...
<a id="ancre" href="fichier.html" onclick="une_autre_fonction()">Click</a> <div onmouseover="Element.toggle('ancre')"> ... </div>
Il est conseillé de mettre dans ces attributs HTML seulement des appels de fonctions.
Cela permet de déporter les traitements dans un fichier Javascript externe à la page.
Pour déporter un traitement, tout en gardant un lien avec la balise html, on utilisera le mot clé this
Pour désactiver l'action d'origne (s'il y en a une) en ajoutera return false;
// en Javascript
function mafonction(balise) {
alert(balise.href);
}
//en HTML
>a href="fichier.html" onclick="mafonction(this); return false;"<Click>/a<
Apprendre à utiliser la documentation