Si le code javascript comporte des caractères "spéciaux" pour
HTML, comme '>', '< ou '&', les logiciels de
validations émettent un warning. En théorie, il faudrait
"protéger" ces caractères. Cependant, aucun des systèmes
existant n'est parfaitement supporté pour le XHTML. La seule
solution (à part d'ignorer superbement le problème, ce que
nous faisons ici) est d'utiliser de préférence l'inclusion de
code.
Appels javascript lié à des événements
On peut demander qu'un bout de code javascript soit exécuté lors de certains événements:
on a pressé un bouton donné (onclick)
le pointeur de la souris est passé sur un élément (onmouseover)
on a pressé une touche (onkeyup,...)
la page a terminé de se charger (onload)
Le code est alors écrit comme la valeur d'un attribut de l'élément concerné:
On écrira du code très court. idéalement un appel de fonction.
Pseudo-url
On peut aussi remplacer une URL
par du javascript, en précisant javascript: comme protocole:
comme pour les événements, on gardera le code le plus court possible.
Constructions de base
Le code JavaScript est une suite d'instructions, dont certaines peuvent être des déclarations de fonctions ou des affectations.
Variables en javascript
Les variables en javascript sont dynamiques et faiblement typées.
Si une variable n'existe pas, lui donner une valeur la déclare automatiquement
Une variable peut changer de type:
Il est conseillé de déclarer explicitement les variables à l'aide du mot-clef var :
<script type="text/javascript">
var a;
</script>
Notez que ça ne fixe pas son type pour autant.
les fonctions
Bout de code réutilisable, avec un nom.
Déclarées à l'aide du mot-clef function.
Une fonction peut retourner une valeur, à l'aide du mot-clef return
à noter:
on n'explicite pas le type des arguments
les fonctions sont uniquement identifiées par leur nom. On ne peut avoir deux fonctions qui s'appellent somme
Variables globale
Une variables déclarée en dehors d'une fonction est globale.
Dans cet exemple, la variable exempleVariable1 modifiée par la fonction est la même que la variable globale.
Variables locale
Une variable est locale si elle est déclarée dans une fonction.
On utilise var.
Types de données
Types de base : entiers, réels, booléens (true et false) ;
chaînes de caractères ;
les tableaux
fonctions !
les objets
les chaînes
sont des objets
constantes déclarées entre "..." ou entre '...'.
ont une propriété, length (leur longueur)
se comparent avec "==" !!!
de nombreuses méthodes:
charAt(pos) retourne une String
charCodeAt(pos) retourne le code ISO 88591 du caractère
split(separateur) : renvoie le tableau obtenu en découpant la chaîne.
s= "un,deux,trois";
t= s.split(",");
indexOf(sousChaine,index), indexOf(sousChaine): premier indice de la sous-chaîne, à partir de l'index donné, ou -1.
s= "un,deux,trois";
i= s.indexOf("tr"); // i vaut 8
substr(debut,longueur) : renvoie la sous-chaîne démarrant à "debut", de longueur "longueur".
toLowerCase() : renvoie la chaîne en minuscules ;
toUpperCase() : renvoie la chaîne en majuscules.
String.fromCharCode(c1,c2....) : permet de passer d'une suite de codes ascii à la chaîne correspondante.
Chaînes et nombres
Deux fonctions de javaScript sont particulièrement intéressantes:
parseInt(CHAINE) : analyse chaîne comme un entier. Renvoie la valeur NaN (not a number) en cas d'échec.
parseFloat(CHAINE) : analyse chaîne comme un entier. Renvoie la valeur NaN en cas d'échec.
Notez que ces deux fonctions sont très permissives. Elles acceptent
des chaînes qui commencent par un nombre, et, s'il y a du
texte après, elle l'ignorent. Pour tester si elles ont réussi, on
utilisera la fonction isNaN().
s="1234";
i= parseInt(s);
if (isNaN(i)) {
alert(s + " n'est pas un nombre");
}
les tableaux (Array)
doivent être créés, mais on n'a pas besoin de fixer leur taille:
tab= new Array(); // Création du tableau
tab[0]= 2;
tab[1]= 3;
s= 0;
for (i= 0; i < tab.length; i++) {
s= s + tab[i];
}
peuvent être initialisés à la création :
tab= new Array("un", "deux", "trois");
longueur donnée par l'attribut length
accès aux cases par la notation habituelle.
passage d'un tableau à une chaîne de caractères par "join":
l'argument de join est inséré entre les éléments.
s= tab.join(""); // s vaut undeuxtrois
s= tab.join(":"); // s vaut un:deux:trois
Structures de contrôle
if
if (CONDITION) {
ACTIONS1;
} else {
ACTIONS2;
}
for
for (INIT; TEST; INCREMENT) {
ACTIONS;
}
exemple
s= 0;
for (i= 0; i < tab.length; i++) {
s= s+ tab[i];
}
while
while (CONDITION) {
ACTIONS;
}
do...while
do {
ACTIONS;
} while (CONDITION);
switch
switch (VALEUR_A_TESTER) {
case VAL1:
ACTIONS;
break;
case VAL2:
ACTIONS;
break;
default:
ACTIONS;
}
Contrairement au C et au Java, la valeur à tester peut être une chaîne de caractères:
switch (reponse) {
case "oui":
alert("merci");
break;
case "non":
alert("au revoir");
break;
}
Manipulation de la page Web
But: pouvoir lire et modifier des éléments de la page web par programme.
Pour changer leur aspect
Pour lire et écrire des éléments de formulaire
On passe par le DOM « Document objets model ».
Première approche du DOM
On dispose d'un objet nommé document, qui représente la page web.
Pour manipuler un élément, on lui donne un identifiant.
On peut alors récupérer l'élément à l'aide de la méthode getElementById
Un texte
Propriétés des éléments
Un élément retourné par getElementById a plusieurs propriétés, que l'on peut lire et/ou écrire.
style : permet l'accès à toutes les caractéristiques graphiques
CSS de l'élément.
value : valeur d'un champ de formulaire. En lecture et en écriture.
innerHTML : propriété non standard, mais très généralement
utilisée, qui permet de modifier le contenu de l'élément. Ne
fonctionne pas pour tous les éléments.
id : l'id de l'élément
className : classe de l'élément (pour les CSS)
Nous allons les détailler.
DOM et CSS (Cascading Style Sheets)
Les attributs de style CSS d'un élément du DOM permettent de changer son aspect.
Ils sont accessibles par la propriété "style" des éléments.
Les caractéristiques de cet élément sont contrôlées par les CSS.
DOM et CSS (suite)
On utilise en particulier la propriété "display", et sa valeur "none",
pour faire apparaître et disparaître des éléments.
Vous le voyez ?
Exercice: écrire une fonction qui bascule l'élément entre l'état
"caché" et l'état visible, et vice-versa.
Manipulation des images
On peut changer ce qu'une image affiche en modifiant sa propriété "src":
