TD JAVASCRIPT 0 TD de dèpart de programmation en javascript De quoi aurez-vous besoin? Les ressources nècessaires sont toutes disponibles gratuitement sur Internet. Il y a : Un navigateur supportant JavaScript : Netscape Communicator et Internet Explorer conviennent parfaitement ; d autres aussi sans doute.. Un bon èditeur HTML : tout èditeur de texte (comme le bloc-notes de Windows) peut convenir ; il existe des èditeurs spècialisès qui fournissent des possibilitès supplèmentaires comme la coloration syntaxique, l accés aux balises HTML par menus ou boutons, la possibilitè de visionner le document èditè dans un navigateur,... Les ordinateurs ne font qu exècuter des suites d instructions qui ont ètè ècrites par des programmeurs. Il suffit de leur demander poliment d exècuter autant de fois que nècessaire des t?ches simples pour qu ils le fassent sans broncher. Le probléme du programmeur est donc d une part de savoir comment s adresser poliment à son ordinateur pour Ítre entendu, et d autre part de traduire ses attentes en une succession de t?ches simples. Ceci se fait en utilisant un langage de programmation ; celui que nous allons explorer est JavaScript. 1 Le premier script Traditionnellement on commence à ètudier un langage de programmation en lui faisant afficher le message "Bonjour!". C est ce que nous allons faire ici, pour dècouvrir les liens entre les langages JavaScript et HTML. 1.1 JavaScript et HTML Le langage HTML est un langage de description de pages Web. Il permet mettre des textes en forme, d insèrer des images, de crèer des liens hypertextes, etc... Cependant, lorsqu un document HTML est ècrit, il affiche toujours les mímes choses de la míme faáon. Le langage JavaScript est une extension du langage HTML qui permet de calculer ce qui doit Ítre affichè en fonction des circonstances. Par exemple, si nous dèsirons crèer un document HTML qui affiche la date, nous devons modifier le fichier 1.0 2012 1/10
HTML utilisè chaque jour. Gráce à JavaScript nous pourrons au contraire indiquer une seule fois comment calculer la date et donc l afficher correctement. En ce sens, JavaScript permet de gènèrer dynamiquement du code HTML. 1.2 Dire bonjour avec HTML CommenÁons par ècrire le fichier bonjour.html qui affiche le texte "Bonjour tout le monde!" en gras. Il prendra la forme suivante : <HTML> <HEAD><TITLE> Bonjour < / TITLE>< /HEAD> <BODY> <B>Bonjour t o u t l e monde! < /B> < /BODY> < /HTML> 1.3 Dire bonjour avec JavaScript Pour obtenir la míme chose avec JavaScript, nous gardons la míme structure de fichier, il nous suffit de demander à JavaScript d afficher le code HTML de la ligne contenant "Bonjour tout le monde!". Cela se fait à l aide de l instruction document.write suivie de parenthéses contenant le code HTML entre guillemets. Cependant nous devons commencer par indiquer au navigateur que nous allons utiliser une instruction JavaScript. Cela se fait en utilisant la balise HTML <SCRIPT LAN- GUAGE="JavaScript"></SCRIPT>. <HTML> <HEAD><TITLE>Bonjour en JavaScript< / TITLE>< /HEAD> <BODY> document. w r i t e ( " <B>Bonjour t o u t l e monde! < /B> " ) ; < /BODY> < /HTML> 1.0 2012 2/10
Nous pouvons faire une premiére constatation : programmer en JavaScript suppose que l on ait au moins des connaissances èlèmentaires sur le codage HTML. D abord pour insèrer les instructions JavaScript, ensuite et surtout parce que les opèrations d affichage se font en gènèrant du code HTML. 1.4 Mettre le code JavaScript dans un fichier Il est possible d ècrire le code JavaScript dans un fichier externe d extension.js. Pour l exemple prècèdent, il suffit de crèer un fichier nommè bonjour.js contenant la ligne : document.write("<b>bonjour tout le monde!</b>") ; Dans le fichier html, l appel à JavaScript se fera simplement avec la ligne : <SCRIPT LANGUAGE="JavaScript" SRC="bonjour.js"></SCRIPT> Cette possibilitè se rèvéle utile lorsqu on a des portions de code qui se rèpétent souvent. 1.5 Diffèrents types d expressions Nous avons utilisè l instruction document.write pour afficher une expression ècrite entre guillemets. Celles-ci indiquent que ce qu elles entourent est du code HTML que le navigateur va interprèter. Il est aussi possible d utiliser des expressions sans guillemets. Dans ce cas JavaScript va essayer de les interprèter directement avant de les transmettre au navigateur. Les expressions mathèmatiques permettent de comprendre ce processus. L instruction document.write("12+5*3") ; provoque l affichage du texte 12+5*3. Par contre, l instruction document.write(12+5*3) ; provoque l affichage du texte 27. Dans le 1er cas JavaScript a interprètè "12+5*3" comme un texte quelconque envoyè sans changement au navigateur. Dans le 2éme cas JavaScript a interptètè 12+5*3 comme un calcul à effectuer, c est le rèsultat de ce calcul qui a ètè envoyè au navigateur. Pour programmer on est souvent amenè à utiliser un autre type d expression appelè expression boolèenne. Celle-ci ne peut prendre que deux valeurs, true (vrai) ou false (faux). On obtient simplement des expressions boolèennes en comparant des expressions mathèmatiques. Par exemple, 1.0 2012 3/10
l expression 5*7==35 (il y a bien 2 signes =) est une expression boolèenne qui a la valeur true car 5*7 est bien ègal à 35. L instruction document.write(5*7==35) ; va donc provoquer l affichage de true. document. w r i t e ( " <BIG><B>B</B> </BIG>onjour t o u t l e monde! " ) ; document. w r i t e ( " <BR>Un p e t i t c a l c u l : " ) ; document. w r i t e ( " 12+5 3 = " ) ; document. w r i t e (12+5 3) ; document. w r i t e ( " <BR>Un peu de logique : " ) ; document. w r i t e ( " 5 4=19?? " ) ; document. w r i t e (5 4==19) ; On obtient l affichage suivant : Bonjour tout le monde! Un petit calcul : 12+5*3 = 27 Un peu de logique : 5*4=19?? false? Retenons que l instruction document.write permet d afficher diffèrents types d expressions : des chaines de caractéres : elles sont ècrites entre guillemets et transmises directement au navigateur des expressions mathèmatiques : ce sont des calculs numèriques, c est le rèsultat qui est transmis au navigateur des expressions boolèennes : ce sont des expressions dont la valeur est true ou false L instruction document.write() peut contenir plusieurs arguments qui seront affichès les uns derriére les autres. Il existe aussi une instruction document.writeln() qui ajoute un retour chariot au code html gènèrè. 2 Les types de variables On utilise des variables pour inscrire des informations dans la mèmoire de l ordinateur et pouvoir facilement les retrouver et les modifier (les faire "varier"). Chaque variable est donc caractèrisèe par un nom qui permet de la dèsigner et par un contenu qui est ce qui est inscrit dans la mèmoire. On peut classer les variables selon le type de leur contenu : chaine de caractéres 1.0 2012 4/10
valeur numèrique valeur boolèenne objet Pour utiliser une variable, il est conseillè de la dèclarer et de lui donner un contenu initial. Cela se fait en utilisant le mot var et le signe =. Par exemple : var v1="henri"; La variable nommèe v1 contient la chaine de caractéres "Henri". var v2=18; La variable nommèe v2 contient la valeur numèrique 18. var v3=true; La variable nommèe v3 contient la valeur boolèenne true. Lorsqu une variable est interprètèe dans une instruction JavaScript, elle est automatiquement remplacèe par son contenu. Ainsi, l instruction document.write(v1) provoquera l affichage du mot Henri. Attention, l instruction document.write("v1") provoquera l affichage du mot v1 et non Henri entre guillemets, dans ce cas JavaScript considére qu il faut afficher une chaine de caractéres et n essaie pas d interprèter son contenu. 2.1 Opèrations sur les variables Les variables numèriques peuvent Ítre utilisèes dans des expressions mathèmatiques faisant intervenir les quatre opèrations èlèmentaires. Les variables contenant des chaines de caractéres peuvent Ítre ajoutèes, cette opèration se nomme la concatènation, elle consiste à construire une nouvelle chaine de caractéres en en assemblant deux. Ainsi, si v1="bonjour " et v2="henri", alors v1+v2 est la chaine de caractéres contenant "bonjour Henri". Les variables boolèennes peuvent Ítre combinèes à l aide des opèrations logiques non, et, ou respectivement notèes!, &&,. Observons le comportement de l opèrateur + lorsqu il est en prèsence d expressions de types diffèrents en exècutant le script suivant. var v1= " 12 " ; 1.0 2012 5/10
var v2 =5; document. w r i t e ( " La v a r i a b l e v1 c o n t i e n t : ", v1, " <BR> " ) ; document. w r i t e ( " La v a r i a b l e v2 c o n t i e n t : ", v2, " <BR> " ) ; document. w r i t e ( " Avec v1+v2 on o b t i e n t : ", v1+v2, " <BR> " ) ; document. w r i t e ( " Avec v2+v1 on o b t i e n t : ", v2+v1, " <BR> " ) ; On obtient l affichage suivant : La variable v1 contient : 12 (chaine de caractéres) La variable v2 contient : 5 (nombre) Avec v1+v2 on obtient :125 Avec v2+v1 on obtient : 512 JavaScript a converti la variable numèrique v2 en une chaine de caractéres pour la concatèner à la variable v1. 2.2 La fonction eval Il arrive souvent que l on doive interprèter une chaine de caractéres (par exemple une saisie de l utilisateur) comme ètant une valeur numèrique. JavaScript permet de rèaliser cette opèration avec la fonction eval. Observons l effet du script suivant. var v1= " 12 " ; var v2 =5; document. w r i t e ( " La v a r i a b l e v1 c o n t i e n t : ", v1, " <BR> " ) ; document. w r i t e ( " La v a r i a b l e v2 c o n t i e n t : ", v2, " <BR> " ) ; document. w r i t e ( " Avec v1+v2 on o b t i e n t : ", v1+v2, " <BR> " ) ; document. w r i t e ( " Avec eval ( v1 ) +v2 on o b t i e n t : ", eval ( v1 ) +v2, " <BR> " ) ; On obtient l affichage suivant : La variable v1 contient : 12 La variable v2 contient : 5 Avec v1+v2 on obtient :125 Avec eval(v1)+v2 on obtient : 17 1.0 2012 6/10
L expression eval(v1) a bien ètè interprètèe comme ètant le nombre 12 et c est l opèration mathèmatique 12+5 qui a ètè effectuèe. La fonction eval de JavaScript est trés puissante, elle permet aussi d èvaluer des chaines de caractéres contenant des opèrations. Par exemple eval("12-8") fournira 4 comme rèsultat. 2.3 La fonction prompt Il arrive souvent que le contenu d une variable doive Ítre choisi par l utilisateur du programme, et non par le programmeur. La fonction prompt() fournit une faáon de rèaliser cette opèration avec JavaScript. Elle attend en paramétre deux chaines de caractéres : la premiére servira de message d invite et la seconde de rèponse proposèe par dèfaut. Observons le script suivant. var nom; nom=prompt ( " Quel est ton nom? ", " " ) ; document. w r i t e ( " <BIG><B>B</B> </BIG>onjour " +nom+ "! <BR> " ) ; Une boite de dialogue a permis à l utilisateur de choisir le contenu de la variable nom. Celle-ci contiendra une chaine de caractéres qui sera affichèe par l instruction suivante. Dans le cas o? l utilisateur clique sur le bouton "Annuler", le rèsultat renvoyè est la valeur particuliére null, qui signifie que la variable nom n a pas de contenu. 3 Les objets JavaScript permet d utiliser des variables contenant des objets. Nous allons essayer de comprendre ce que sont ces objets et comment on les utilise en prenant comme exemple l objet Date. On peut dire qu un objet est formè par l assemblage de plusieurs variables (appelèes champs) et de plusieurs fonctions (appelèes mèthodes). Les mèthodes effectuent des opèrations sur les champs et sont susceptibles de fournir certains rèsultats. 1.0 2012 7/10
L initialisation d une variable contenant un objet se fait en utilisant un constructeur et le mot new. Par exemple, pour initialiser une variable v contenant un objet Truc, on ècrira : var v=new Truc() ; Si l objet Truc contient un champ nommè valeur, on aura accés à ce champ en L objet Dateècrivant : var val=v.valeur ; Si l objet Truc contient une mèthode nommèe fonc(), on aura accés à cette mèthode en ècrivant : v.fonc() ; Les noms de mèthodes sont toujours suivis de parenthéses, il peut y avoir des paramétres entre les parenthéses. Lorsqu une mèthode fournit un rèsultat, celui-ci doit Ítre recueilli dans une nouvelle variable. Nous avons dèj? fait appel à l objet document et sa mèthode write() à chaque fois que nous avons utilisè l instruction document.write(). 3.1 L objet Date Etudions l objet Date pour voir comment il nous permet d afficher la date courante. Initialisation d une variable de type Date Pour créer une variable de type Date nommée "maintenant" qui contient la date actuelle, c est à dire la date du moment de l ouverture du fichier html, on écrira l instruction : var maintenant=new Date(); Voyons ce que donne le script suivant. var maintenant=new Date ( ) ; document. w r i t e ( maintenant ) ; On obtient l affichage du type suivant : Sat Dec 15 19:58:32 GMT-0500 (EST) 2001 L objet Date contenu dans la variable maintenant a été converti en une chaîne de caractères donnant la date et l heure dans un format complet mais peu lisible. Quelques méthodes de l objet Date L objet Date possède un certain nombre de méthode permettant d afficher la date sous une forme plus classique. 1.0 2012 8/10
Méthode getdate() : elle renvoie le numéro du jour dans le mois, donc un nombre entier entre 1 et 31. Méthode getmonth() : elle renvoie le numéro du mois dans l année, mais attention ce numéro est un entier entre 0 (pour janvier) et 11 (pour décembre) ; il faudra donc ajouter 1 pour obtenir le numéro usuel. Méthode getfullyear() : elle renvoie le numéro de l année en 4 chiffres. Méthode gethours() : elle renvoie le numéro de l heure. Méthode getminutes() : elle renvoie le numéro des minutes. Méthode getseconds() : elle renvoie le numéro des secondes. 3.2 Exemple d utilisation des mèthodes Observons le script suivant qui permet d afficher la date sous une forme classique. var maintenant=new Date ( ) ; var j o u r =maintenant. getdate ( ) ; v a r mois= maintenant. getmonth ( ) +1; var an=maintenant. getfullyear ( ) ; document. w r i t e ( " Nous sommes l e ", jour, " / ", mois, " / ", an, ". " ) ; On obtient un affichage du type suivant : Nous sommes le 15/12/2001. 4 Exercices 4.1 Calculette Utiliser les fonctions eval et prompt pour écrire une petite calculatrice. 4.2 Date et heure Ecrire une page HTML qui affiche la date et l heure courante. 1.0 2012 9/10
4.3 Conversions euros/francs Ecrire une page HTML permettant de convertir en Francs des valeurs données en Euros. (taux 1Euro=6.56 Francs) 4.4 Périmètre et aire du carré Ecrire une page HTML permettant de calculer le périmètre et l aire d un carré. 1.0 2012 10/10