Minicours JavaScript
Cours hors-cadre de fin d’année
Stéphane Perret
Version 1.30
Table des matières
JavaScript est utilisé dans des millions de pages web afin d’améliorer leur conception. Il s’agit d’une couche de programmation supplémentaire qui vient s’ajouter au langage HTML. Le code HTML est le langage de base que toute page Internet se doit d’utiliser : en plus de son roˆle proche d’un traitement de texte, ce langage permet de surfer graˆce aux liens hypertextes. Quant a` JavaScript, il a été conc¸u pour donner plus d’interactivité aux pages HTML. Le mot script indique qu’il s’agit d’un langage de programmation simplifié qui s’exécute en local sur l’ordinateur qui est en train de lire la page web. Ce langage, comme l’HTML, ne nécessite l’achat d’aucune licence pour pouvoir l’utiliser.
Initialement, JavaScript a été développé par Netscape, mais maintenant la plupart des explorateurs permettant de naviguer sur Internet sont compatibles avec JavaScript.
Il est important de bien préciser que même si les noms sont très proches, Java et JavaScript sont deux langages bien distincts, autant du point du vue de leurs concepts que de leur conception. Java est développé par Sun Microsystems et est un langage de programmation bien plus puissant et complexe que JavaScript. Java peut se comparer au langage C++.
Les possibilités de JavaScript sont multiples.
1. JavaScript livre aux concepteurs de pages web un outil de programmation avec une syntaxe élémentaire. Contrairement a` un vrai langage, presque tout le monde peut insérer un petit bout de code JavaScript dans leur page web.
2. JavaScript permet l’utilisation de textes dynamiques dans une page web. Un texte dynamique est un texte qui change selon les conditions de son environnement (on peut par exemple afficher la date d’aujourd’hui).
3. JavaScript peut réagir a` un événement particulier. Par exemple quand une page a terminé son chargement ou quand un utilisateur clique sur un élément HTML.
4. JavaScript peut lire et écrire des éléments HTML.
5. JavaScript peut être utilisé pour valider des données sans utiliser un serveur.
6. Les cookies peuvent être créés et lus par un programme en JavaScript.
Certains vieux explorateurs n’ont pas les mêmes capacités d’interprétation du code JavaScript que ceux d’aujourd’hui. Ainsi, un bon script JavaScript devrait contenir des commandes qui indiquent si la version de JavaScript n’est pas a` jour. Néanmoins, dans ce document et ceci dans le but d’alléger le code présenté, on se passera de ces commandes. Le lecteur trouvera tout de même certaines de ces commandes en annexe.
Voici le contenu complet d’un fichier qui affiche le texte Hello World!. Pour créer ce programme, if faut :
1. Un navigateur Internet (par exemple Internet Explorer ou FireFox).
2. Un éditeur de texte (comme notepad (sur PC) ou simpletext (sur Mac)).
Dans le fichier appelé , on tape le texte suivant (depuis l’éditeur de texte). Ensuite en l’ouvrant dans l’explorateur, le programme s’exécute tout seul. Voici le code : pour découvrir son effet, il suffit de suivre la démarche ci-dessus.
<html>
<body>
<script language="javascript"> document.write("Hello World!");
</script>
</body>
</html>
La balise <html> </html> indique qu’il s’agit d’un document HTML. La balise <body> </body> indique qu’il s’agit du corps du document HTML.
La balise <script language="javascript"> </script> encadre le code Java-
Script.
Lorsqu’on programme, il faut décrire a` l’aide de commentaires ce que le programme fait. Si on laisse de coˆté du code pendant 6 mois, il est peu probable que l’on se souvienne exactement de ce qu’on a fait (a` quoi correspond ce nom de variable, que fait cette fonction de 30 lignes de codes).
Or, un commentaire est facile a` mettre : tout le texte qui suit // n’est pas interprété par JavaScript.
Or, // ne fonctionne que pour une ligne. Si on veut écrire un commentaire de plusieurs lignes, on peut aussi utiliser /* pour commencer le commentaire et */ pour le finir. Voici les deux fac¸ons d’écrire un commentaire sur plusieurs lignes.
|
|
Attention a` ne pas confondre avec les balises de commentaires du langage qui sont les suivantes et qui fonctionnent indépendamment du nombre de lignes.
<!-- Ceci est un commentaire en HTML -->
Règle d’or des commentaires
Il n’est jamais inutile de commenter un programme!!!
Dans le premier exemple, on a utilisé le script suivant afin d’écrire ”Hello World!”.
document.write("Hello World!");
Si on désire écrire des guillemets, on doit faire comprendre a` JavaScript qu’il s’agit d’un caractère a` afficher et non a` interpréter. On utilise pour cela le caractère \.
document.write("Le titre est \"l\’algue \& le poisson\".");
Lorsqu’on veut un programme qui doit s’exécuter avant que la page web s’affiche, on met le code JavaScript dans l’entête du document HTML (balise <head> </head>).
<html>
<head>
<script language="javascript"> lignes de code
</script>
</head>
Lorsque le code JavaScript doit générer un bout de page web, on doit l’insérer dans le corps du document HTML.
| <html> <head> </head> <body> <script language="javascript"> lignes de code </script> </body> |
Les deux types de scripts peuvent être mélangés (des bouts de scripts peuvent être mis dans l’entête et d’autres dans le corps d’une page web).
| <html> <body> <script src="/"></script> </body> </html> En page 6, se trouve un fichier externe, appelé msgerreur, qui renvoie une alerte en cas d’erreur dans le code JavaScript. Les variables sont les éléments clés d’un langage de programmation. On conc¸oit une variable comme un tiroir contenant une information. La valeur de la variable peut être appelée a` changer. Pour se référer a` la variable, on y donne un nom. Les noms de variables obéissent aux règles usuelles suivantes. 1. Les noms de variables doivent commencer par une lettre ou éventuellement le caractère _. 2. Il faut faire attention aux majuscules et aux minuscules. Par exemple X et x sont deux noms de variables différents (cette contrainte est générale a` toute programmation HTML). En langage JavaScript, on crée une variable de la même manière que l’on change sa valeur. var strname = valeur ou strname = valeur Attention, contrairement au symbole = en mathématique, dans un langage de programmation le symbole = ne doit se lire que dans un sens. Ci-dessus, il faut comprendre que le tiroir appelé strname contient l’objet valeur. Il faut bien faire la différence entre le tiroir (le nom de la variable) et son contenu (la valeur de la variable). Par exemple si x = 5 (il faut penser que dans le tiroir appelé x, il y a la valeur 5), alors le code suivant va faire en sorte que x = 6 (il faut penser que dans le tiroir appelé x, il y a la valeur 6).
Voici l’image mentale qu’il faut avoir : x = 5 =? x + 1 = 5 + 1 = 6 On retrouve les opérations mathématiques de base. L’opération modulo permet de calculer le reste de division. Par exemple, 7 modulo 2 est le reste de division de 7 par 2, il vaut 1 (car 7 = 2 ? 3 + 1)
La puissance est dans l’extension Math, elle s’obtient par la commande (attention a` la majuscule). Voici un petit code qui affiche le résultat de 330 : document.write( (3,30) ); D’autres commandes mathématiques se trouvent en page 8. Une opération de comparaison renvoie la valeur de vérité (true pour vrai et false pour faux) de la proposition correspondante. L’opération de négation renverse les valeurs de vérité (vrai devient faux et vice-versa).
le XOR (ou exclusif) paraˆ?t manquant, mais on peut utiliser ^ qui livre 1 (au lieu de true) ou 0 (au lieu de false). On peut aussi utiliser les ET ou OU logique pour reconstruire le XOR. On peut ainsi programmer le XOR facilement. Un programme requiert bien souvent une information de la part de l’utilisateur. reponse = prompt("question","re´ponse par de´faut"); document.write(reponse); Les commandes parseInt et parseFloatLa réponse de la commande prompt est toujours une chaˆ?ne de caractère. Si on désire la convertir en nombre il faut utiliser la commande parseInt (pour la convertir en un nombre entier) ou parseFloat (pour la convertir en nombre a` virgule flottante). Par exemple : n = parseInt(prompt("Que vaut l’entier n ?","0")); x = parseFloat(prompt("Que vaut la valeur de x ?","3.1416")); On peut aussi demander une confirmation a` l’utilisateur (choix entre ok ou annuler). confirmation = confirm("demande de confirmation"); document.write(confirmation); La commande suivante permet d’ouvrir une fenêtre d’alerte contenant un certain message, afin d’avertir l’utilisateur (pendant que la fenêtre d’alerte est affichée l’utilisateur doit d’abord cliquer sur OK avant de continuer). alert("message d’alerte"); Voici un script externe qui peut s’avérer très utile pour traquer une majorité d’erreurs.
Il est conseillé d’enregistrer ce script dans un fichier que l’on peut appeler par la ligne de code HTML suivante (a` insérer avant tout script dans une page HTML) : <script src="/"></script> Voici comment on implémente une fonction.
Une fonction sans argument doit tout de même comporter des parenthèses.
Voici une fonction qui additionne deux nombres et qui renvoie le résultat de l’addition.
Voici une fonction qui affiche un message d’alerte.
Pour appeler une fonction, on utilise simplement le nom de la fonction. Lorsque la fonction renvoie un nombre, on peut l’assigner dans une variable. Ici, on assigne le résultat de l’addition de 2 et de 3 dans la variable 5. somme = addition(2,3); Si la fonction n’a pas d’arguments, on met tout de même les parenthèses. Le script suivant ouvre la fenêtre d’alerte définie dans la fonction danger(). danger(); Dans ce cas, les variables contiennent des nombres. On peut appliquer des fonctions mathématiques a` ces nombres. Les fonctions mathématiques les plus célèbres sont contenues dans l’extension Math. Voici un inventaire de ces fonctions (qui renvoie toute un nombre). (x) (x) (x) (x) (x) (x) (x) Math.floor(x) (x) (x,y) (x,y) (x,y) Math.random() Math.round(x) (x) (x) (x) Même si ce ne sont pas des fonctions, on trouve aussi les constantes mathématiques. Math.E La commande with (Math) { code } permet de se passer de taper Math. avant chaque commande mathématique. Cette commande se traduit par si si sinon. Seul le premier si et sa conséquence sont nécessaires. Les autres si (else if) ne sont nécessaires que si l’utilisateur en a besoin. Il en va de même pour le sinon (else).
Cette commande en une ligne peut s’avérer pratique pour l’utilisateur avancé. variable=(condition)?valeur1:valeur2; Si la condition est vraie, alors la valeur1 est assignée dans la variable, sinon c’est la valeur2 qui est assignée. Un exemple de structure non condenséeVoici une structure de controˆle permettant de saluer l’utilisateur par un texte dynamique (dépendant de l’heure de l’ordinateur).
Un exemple de structure condensée utilisée dans une fonctionVoici un exemple de structure de controˆle condensée qui se trouve a` l’intérieur d’une fonction qui permet de saluer une personne :
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
