Le langage JavaScript
JavaScript ou ECMAScript ?
* Standard ECMAScript
* Défini par l'organisme ECMA
* European Computer Manufacturers Association
* Organisme de standardisation pour l'informatique
* Langages reposant sur ce standard
* JavaScript
* Développé par Netscape
* JScript
* Développé par Microsoft
* ActionScript
* Développé par Adobe
* Par abus de langage, on utilise le terme JavaScript
* Aucun rapport avec le langage Java
* Langage de script
* Permet la manipulation simple d'objets
* En particulier, les objets qui composent une page Web
Portabilité du code JavaScript
* Important qu'un code JavaScript soit portable
* Destiné à être exécuté sur n'importe quelle machine
* Mauvaise exécution ==> mauvais affichage de votre site
* Problèmes de compatibilité entre les navigateurs
* Malgré le standard, différences entre les implémentations
* Evolution du standard ==> différences entre les versions du langage
* Pour un développement propre
* Développer selon le standard de l'ECMA
* Tester vos scripts avec différents navigateurs
* Conseils sur les navigateurs à tester
* Mozilla Firefox
* Dernière version
* Utilisateurs souvent à jour
* Internet Explorer
* Idéalement, versions 6 et 7
* Utilisateurs pas toujours à jour
* Beaucoup d'incompatibilités détectées de cette manière
Langage JavaScript
* Inclusion dans code HTML
* <script type="text/javascript">...</script>
* Syntaxe similaire à Java
* Instructions terminées par ";"
* Commentaires
* "//" pour une seule ligne
* "/*...*/" pour plusieurs lignes
* Opérateurs identiques
* Structures de contrôle identiques
* Sensible à la casse
* Variables faiblement typées
* Pas de type prédéfini
* Type peut changer en cours d'exécution
* Manipulation d'objets prédéfinis
* Accès à l'objet navigateur
* Accès à l'objet fenêtre
* Accès au document et à ses composants
Variables (1/2)
* Déclaration implicite
* nom_variable = valeur;
* Portée illimitée de la variable
* Variable globale
* Accessible de n'importe où
* Déclaration explicite
* Utilisation du mot-clé "var"
* var nom_variable = valeur;
* Portée de la variable limitée au bloc d'instructions
* Bloc d'instructions = zone entre "{" et "}"
* En dehors de tout bloc = variable globale
* Dans le bloc d'une fonction = variable locale
* Conseil: toujours utiliser "var" pour la déclaration
Variables (2/2)
* Exemple de manipulation de variables
var a = 7;
var b = 3;
function fois2(n) {
var a = 2 * n;
return a;
}
document.write("Double de " + b + " = "
+ fois2(b));
document.write("Valeur de a = " + a);
* Résultat de l'exemple
Double de 3 = 6
Valeur de a = 7
* Modification de la fonction
function fois2(n) {
a = 2 * n;
return a;
}
* Résultat avec la modification
Double de 3 = 6
Valeur de a = 6
Types de données
* Variable sans type de données au moment de sa déclaration
* var x; ==> type inconnu
* Type déterminé à l'initialisation de la variable
* Booléen
* x = true;
* x = false;
* Entier
* x = 27;
* Flottant
* x = 27.13;
* Chaîne de caractères
* x = "Nawouak";
* x = "27";
* Le type d'une variable peut changer en cours d'exécution
var x = 5;
...
x = "cinq";
Opérateurs
* Opérateurs classiques
* Arithmétique: +, -, *, /, %
* Incrémentation / décrémentation: --, ++
* Affectation: =, +=, -=, *=, /=, %=
* Logique: && (et), || (ou), ! (non)
* Comparaison: ==, <, >, <=, >=, !=
* Chaînes de caractères
* Délimiteurs: ' ou "
* Opérateur de concaténation: +
* Permet de fusionner deux chaînes
* var nom = "Nawouak";
chaine = "Bonjour " + nom;
* chaine = "Bonjour ";
chaine += nom;
* chaine = "Bonjour Nawouak"
Structures de contrôle (1/4)
* Bloc d'instructions délimité par "{" et "}"
* Facultatif si une seule ligne
* if (x == 1) y = 2; ? if (x == 1) { y = 2; }
* Structures conditionnelles
* if (test1) action1
else if (test2) action2
else action3
* switch (variable)
case value1: action1
case value2: action2
default: action3
* Structures de boucle
* while (test) action
* do action while (test)
* for (depart; test; suivant) action
Structures de contrôle (2/4)
* Exemple: coût à partir d'un volume d'essence
* Version 1
if (litres < 0) {
etat = "negatif";
litres = 0;
}
else {
if (litres == 0) { etat = "nul"; }
else { etat = "positif"; }
}
document.write("Etat de la variable: " + etat);
cout = litres * prix;
* Version 2
if (litres < 0) {
etat = "negatif";
litres = 0;
}
else if (litres == 0) { etat = "nul"; }
else { etat = "positif"; }
Structures de contrôle (3/4)
* Exemple: conversion d'un chiffre en lettres
* Version avec "if" imbriqués
if (x == 1) texte = "un";
else if (x == 2) texte = "deux";
...
else if (x == 9) texte = "neuf";
else texte = "zéro";
* Version avec "switch"
switch (x) {
case 1: texte = "un"; break;
case 2: texte = "deux"; break;
...
case 9: texte = "neuf"; break;
default: texte = "zéro";
}
Structures de contrôle (4/4)
* Exemple: somme des 9 premiers entiers
* Calcul avec boucle "for"
var s = 0;
for (var i = 0; i < 10; i++) { s += i; }
* Calcul avec boucle "while"
var s = 0;
var i = 0;
while (i < 10) { s += i; i++; }
* Calcul avec boucle "do...while"
var s = 0;
var i = 0;
do { s += i; i++; } while (i < 10);
Chaînes de caractères (1/2)
* Comment mettre un délimiteur dans une chaîne ?
* "comment mettre "un" entre guillemets ?"
* Plusieurs possibilités
* Alternance des délimiteurs "'" et """
* 'Voila comment mettre "un" entre guillemets ?'
* Rendre les délimiteurs inopérants avec "\"
* "Voila comment mettre \"un\" entre guillemets ?"
* Exemple: générer le code HTML d'une image
* Code HTML à générer
* <img src="nawouak.gif"/>
* Nom de l'image dans une variable
* image = "nawouak.gif";
Chaînes de caractères (2/2)
Tableaux simples (1/2)
* Déclaration d'un tableau
* var tab = new Array();
* Remplissage d'un tableau
* Numérotation des indices commence à 0
* tab[0] = "lundi";
tab[1] = "mardi";
...
tab[6] = "dimanche";
* Déclaration accélérée
* var tab = new Array("lundi",...,"dimanche");
* Connaître le nombre d'éléments
* nb = tab.length;
Tableaux simples (2/2)
* Parcours des éléments
* Code JavaScript
document.write("<p>Il y a " + tab.length + " jours");
document.write(" dans une semaine:</p>");
document.write("<ul>");
for (var i = 0; i < tab.length; i++) {
document.write("<li>jour no " + (i+1) + ": ");
document.write(tab[i] + "</li>");
}
document.write("</ul>");
* Code HTML généré
<p>Il y a 7 jours dans une semaine:</p>
<ul>
<li>jour no 1: lundi</li>
<li>jour no 2: mardi</li>
...
<li>jour no 7: dimanche</li>
</ul>
Fonctions (1/3)
* Permettent de factoriser / réutiliser du code
* Portions de code associées à un nom
* Reçoivent des arguments en entrée
* Retournent une valeur en sortie
* function nom(arguments) {
action;
return resultat;
}
* Exemple
function produit(a,b) {
var p = a * b;
return p;
}
Fonctions (2/3)
* Déclaration: function f(x)
* Exécution: y = f(a);
* L'argument "x" est une copie de "a"
* Modification de "x" limitée à "f"
* Le retour est aussi une copie
* function produit(a,b) {
var c = a * b;
return c;
}
* w = produit(u,v);
Fonctions (3/3)
<head>
<script type="text/javascript">
var jours = new Array("lundi",...,"dimanche");
function afficher_jour(numero) {
document.write("<li>jour no " + (numero+1) + ": ");
document.write(jours[numero] + "</li>");
}
</script>
</head>
<body>
<script type="text/javascript">
document.write("<p>Il y a " + jours.length + " jours");
document.write(" dans une semaine:</p>");
document.write("<ul>");
for (var i = 0; i < jours.length; i++) afficher_jour(i);
document.write("</ul>");
</script>
</body>
Tableaux associatifs
* Tableaux indexés par des chaînes
* Association d'une clé (chaîne) à un élément
* Tableau simple: association entier-élément
* Remplissage d'un tableau
* tab["lundi"] = "Monday";
tab["mardi"] = "Tuesday";
...
tab["dimanche"] = "Sunday";
* Parcours des éléments
* Code JavaScript
for (var i in tab)
document.write("<li>" + i + " = " + tab[i] + "</li>");
* Code HTML généré
<li>lundi = Monday</li>
<li>mardi = Tuesday</li>
...
<li>dimanche = Sunday</li>