LE LANGAGE JAVASCRIPT Activité 1 : 1. Créer dans votre répertoire un dossier nommé JVS. 2. On se propose d écrire le code HTML permettant de calculer la somme de deux nombres a et b strictement positifs. Enregistrer la page sous le nom act1.html. 3. Que constatez vous? Constatations : Le langage HTML présente les limites suivantes : o Absence des structures de contrôles algorithmiques (conditionnelles et itératives) o Un langage sans aucune logique de programmation procédurale o Absence de prise en charge d événements o Absence de possibilité d interfaçage avec les bases de données I. C est quoi le langage Java Script? Terminez le paragraphe par les mots qui conviennent de la liste. (Structuré, algorithmes, résoudre, programmer, navigateur, programmation, formulaire, vérifier, afficher, calculs) C est un langage de programmation interprété directement par le navigateur du client. Il est inspiré du langage «C». Il permet de résoudre les problèmes que HTML ne sait pas résoudre. Avec Java Script vous pourrez programmer, c'est à dire écrire des algorithmes effectués des calculs et afficher les résultats obtenus, vérifier la cohérence de données saisies dans un formulaire Java script est un langage Structuré (Boucles conditionnelles, structures de test, fonctions, etc..). Activité 2 : 1. En se référant à l exemple de l activité 2 du livre page 79, créer un nouveau fichier et saisir le code permettant d insérer l image lycée.jpg avec une largeur = 500 et une hauteur = 800 et d afficher un message d alerte contenant le message «BIENVENU AU LYCEE 15 NOVEMBRE». 2. Enregistrer le fichier sous le nom Act2JVS.html dans le dossier JVS. Testez le fichier. 3. Saisir le code résultat. 1
<HTML> <HEAD> <TITLE>ACTIVITÉ 2 JAVA SCRIPT </TITLE> </HEAD> <BODY> <IMG BORDER="0" SRC=" LYCÉE.JPG» WIDTH="500" HEIGHT="800"></P> <SCRIPT LANGUAGE ="JAVASCRIPT"> ALERT ("BIENVENU AU LYCEE 15 NOVEMBRE ") </SCRIPT> </BODY> </HTML> 4. Déterminez les délimiteurs du langage Javascript. II. Les délimiteurs du langage JavaScript : <SCRIPT LANGUAGE ="JAVASCRIPT"> </SCRIPT> fin du script Balise signale le début et fin du script III. Les commentaires. Lorsqu'on programme, il faut décrire à l'aide de commentaires ce que le programme fait. Un commentaire est facile à mettre : tout le texte qui suit // n'est pas interprété par JavaScript. // 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 façons d'écrire un commentaire sur plusieurs lignes. // Ceci est un commentaire // sur plusieurs lignes /* Ceci est un commentaire sur plusieurs lignes */ 2
IV. Les objets du langage JavaScript : a. La hiérarchie des objets d interface : (voir livre pages 80 et 81). b. Les propriétés des objets : Imaginez un arbre dans un jardin comportant une branche sur laquelle se trouve un nid. On suppose la hiérarchie d'objets est définie comme ceci : jardin o o arbre branche feuille nid largeur: 20 couleur: jaune tronc balançoire trapèze nid largeur: 15 couleur: marron Le nid sur l'arbre est donc désigné comme suit : jardin.arbre.branche.nid Contrairement au nid situé sur la balançoire : jardin.balançoire.nid Activité 3 : Soient le formulaire Form1 contenant le bouton (appelé checkbox) et le champ de texte suivants : Donner le code permettant de repérer le formulaire. (Window).document.form Bouton coché Donner le code permettant de repérer le bouton checkbox. (Window).document.form. checkbox Donner le code permettant de repérer le champ de texte. (Window).document.form. texte. Remarque : Pour accéder à une propriété il faudra donner le chemin complet de l objet en allant du contenant le plus extérieur de l objet à l objet référencé. c. Les méthodes des objets : Une méthode est une fonction associée à un objet, c'est-à-dire une action que l'on peut faire exécuter à un objet. Une méthode s'appelle un peu comme une propriété, c'est-à-dire de la manière suivante : w i n d o w. o b j e t 1. o b j e t 2. m e t h o d e ( ) 3
Activité 4 Activer le fichier Act2JVS.html. Afficher son code sources et saisir à la suite: a. Le code HTML permettant d afficher après l image le texte «Lycée 15 NOVEMBRE 1955» centré, de taille maximale et de couleur rouge. b. Le code JavaScript permettant de faire la même tâche de la question précédente. c. Le code JavaScript permettant d affecter aux variables Nbeleves = 972 et Nbprof = 110 et d afficher en résultat les messages suivants : Le nombre d élèves du lycée est = 972 Le nombre d enseignants du lycée est = 110 Constatations : Il est possible de générer du code HTML lors de l utilisation de la méthode write dans ce cas le code sera exécuté et non pas affiché L operateur «+» joue le rôle de concaténation lorsqu il est utilisé avec la méthode write Pour ne pas confondre avec les guillemets de write il sera judicieux de transformer les guillemets par des apostrophes V. Les différents emplacements du code JavaScript : En se référant au code source écrit dans la page 83 du livre essayez d identifier les différents emplacements du code JavaScript. Constatations : Il est possible de mettre plusieurs scripts javascript dans une même page web, soit dans la partie <BODY> ou <HEAD> et ce dernier est utilisé pour la déclaration des fonctions ou dans un fichier texte externe avec l extension.js Il est possible d insérer du code dans la partie <BODY> : -Soit insérer des instructions javascript entre <SCRIPT> </SCRIPT> - Soit à déclarer des fonctions puis les appeler entre <BODY> - utiliser un des gestionnaires d événements rattaché au balise HTML 4
VI. Les variables en JavaScript : Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. Une variables est, donc, définie par: Un nom (identificateur), un type, une valeur. 1) La déclaration des variables : Déclaration de façon explicite Exp : Var numero = 20 ; Var Prenom = Foulen ; Déclaration de façon implicite Exp : numero = 20 ; Prenom = Foulen ; Remarques : 1) En fait le Javascript n'autorise la manipulation que de 4 types de données: Des nombres: entiers ou à virgules Exercice 1 Afficher de nouveau le fichier Act2JVS.html et saisir le code JavaScript permettant d afficher à l aide de la méthode Write() le contenu de quatre variables nommées Prenom, Nom, Age et Adr contenant respectivement votre nom, votre prénom, votre age et votre adresse. Exemple : pour Prenom = foulen, Nom = Ben foulen, Age = 18, Adr = SFAX Le résultat est la suivante : Bonjour c est foulen Ben foulen j ai 18 ans et j habite à SFAX Des chaînes de caractères (string): une suite de caractères Des booléens: des variables à deux états permettant de vérifier une condition True: si le résultat est vrai False: lors d'un résultat faux Des variables de type null: un mot pour indiquer l absence d une valeur. <script langage="javascript"> prenom ="foulen"; nom ="ben foulen"; age ="18"; ville ="sfax"; document.write("bonjour c'est "+ prenom +nom +"j'ai "+age+"ans"+"et j'habite à "+ ville); 5
VII. Les opérateurs prédéfinis en JavaScript : ( V o i r l i v r e p a g e 8 7 e t 8 8 ) VIII. Les Entrées/Sorties en JavaScript : En observant le code JavaScript donné au niveau de l activité 6 du livre page 86 donner les syntaxes des codes permettant la lecture (l entrée) d une valeur et l affichage (sortie) d une variable dans le langage JavaScript. L e n t r é e Nom_variable = prompt ("texte de la boite d invite","valeur par defaut ") ; Exemple : Var a = number (window.prompt("a=","")); L a s o r t i e Document.write("message"+nom_variable) ; Alert ("message"+nom_variable) ; Exemple : Document.write ("après permutation a"+a) ; Alert ("après permutation a "+a) ; Exercice 2 Créer un nouveau fichier et saisir le code JavaScript permettant calculer et afficher la somme S de deux nombre a et b saisie au clavier. Enregistrer le fichier sous le nom somme.html. Exemple : pour a=12 et b = 20 le programme affiche comme résultat le message suivant : La somme de 12 et 20 est = 24 <script langage="javascript"> var a=number(window.prompt("a=","")); var b=number(window.prompt("b=","")); s=a+b; alert("somme de"+ a +"et"+ b+"="+s); 6
IX. Les structures de contrôle : 1 ) L e s s t r u c t u r e s c o n d i t i o n n e l l e s a. L a s t r u c t u r e «IF» Syntaxe : F o r m e r é d u i t e If (condition vraie) F o r m e c o m p l è t e If (condition vraie) { { Instruction1 ; { Instruction 1 ;} Instruction2 ; else { Instruction 2 ;} Instruction n ; } Activité 5 Créer un nouveau fichier nommé Parité.html et saisir le code JavaScript permettant de saisir un nombre entier et de vérifier sa parité. On suppose que le nombre saisit est positif. Exemple : pour x = 8 le programme affichera le message : 8 est un nombre pair Pour x = 5 le programme affichera le message : 5 n est pas un nombre pair <script langage="javascript"> var a=number(window.prompt("a=","")); if (Number(a)%2==0) alert( a +"est pair"); else alert( a +"est impair"); REMARQUES : Dans le cas où il n y a qu une seule instruction, les accolades sont facultatives. Il est possible d imbriquer des structures conditionnelles. (la forme généralisée). Une condition peut être exprimée de la manière suivante : (Expression)? instruction1 : instruction 2 7
Si l expression est vraie, l instruction1 est exécutée. Si l expression est fausse, c est l instruction2 qui est exécutée. b. L a s t r u c t u r e «SWITCH» Syntaxe : Switch (expression) { Case v1 : bloc1 ; Break; Case v2 : bloc2 ; Break;.. Default: bloc n; Break; } REMARQUE : break permet de quitter la structure switch après l exécution du block convenable. Si le résultat est différent de toutes les valeurs c est le block_ n relatif à default qui sera exécuté. La clause default (block_n) est facultative. Activité 6 Créer un nouveau fichier nommé Saison.html et saisir le code JavaScript permettant de lire un caractère puis d afficher un message d alerte présentant la saison correspondante selon le cas: " C est le printemps " si le caractère est "P" ou "p" " C est l hiver " si le caractère est "H" ou "h" " C est l été " si le caractère est "E" ou "e" " C est l automne " si le caractère est "A" ou "a" " Caractère non valide " si le caractère saisie ne correspond a aucune des précédentes. <script langage="javascript"> var c=window.prompt("entrer un carctére ",""); switch (c) { case"p":case"p":saison="le printemps";break; case"h":case"h":saison="l'hiver";break; case"e":case"e":saison="l'été";break; case"a":case"a":saison="l'automne";break; default : saison="caractére non valide"; break;} alert("saison est "+saison); 8
1 ) L e s s t r u c t u r e s i t é r a t i v e s a. L a s t r u c t u r e «F O R» Syntaxe : FOR ( initialisation ; condition ; progression) { Instructions ; } Initialisation : Exemple (i=5) Condition : condition de continuité. Exp (i<=200) Progression : c es le pas du compteur Exp (i++ ou bien i--) Activité 7 Créer un nouveau fichier nommé Premier.html et saisir le code JavaScript permettant d afficher tous les nombres premiers compris entre 2 et 100. Sachant qu un nombre est dit premier s il est divisible que par 1 et par lui même. <script language="jscript"> for (n=2;n<100;n++) { i=1; do {i=i+1; }while (n%i!=0 && i<=n/2); if (i>n/2) document.write("</br>"+n);} 9
b. L es s t r u c t u r e s i t é r a t i v e s à c o n d i t i o n d a r r ê t La structure «Do. While» La structure «While» Syntaxe : Syntaxe : DO { Instructions ; } While (condition(s)) While (condition(s)) { Instructions ; } REMARQUE : Activité 8 Do While est l équivalent de Repeat.. Until en pascal. La différence c est qu en Pascal la condition utilisée après Until est une condition d arrêt alors que la condition utilisée après While est une condition de continuité. Créer un nouveau fichier nommé parfait.html et saisir le code JavaScript permettant de saisir un nombre x avec 5 <= x < 20 et de vérifier si ce nombre est parfait ou non. Sachant qu un nombre est dit parfait s il est égale à la somme de ses diviseurs sauf lui même. Exemple : 6 = 1+2+3 donc 6 est un nombre parfait. Qu a t on besoin pour résoudre se problème? On a besoin d utiliser une structure qui permet de répéter l exécution d un bloc d instruction un certain nombre de fois et de répéter des instructions tant que la condition est vérifiée <script language="jscript"> do{ a=prompt("donner un entier",""); x=number(a); }while(x<5 x>20); for(n=x;n<=x;n++) {s=1; for(i=2;i<=n/2;i++) if(n%i==0) s+=i; if (s==n) {document.write(n+" <I><B>est un nombre parfait.</br><i><b>");} else {document.write(n+"<i><b> est un nombre non parfait.</i></b>");} } 10
X. Les fonctions en JavaScript 1 ) D é f i n i t i o n : Terminez le paragraphe par les mots qui conviennent de la liste suivante : (Méthodes, lisibilité, objet, window, améliorera, de code de programmation) Une fonction est un groupe de code de programmation destiné à exécuter une tâche bien spécifique et que l'on pourra l utiliser à plusieurs reprises. De plus, l'usage des fonctions améliorera grandement la lisibilité de votre script. En Javascript, il existe deux types de fonctions : Les fonctions propres à Javascript. On les appelle des " Méthodes". Elles sont associées à un objet bien particulier. Exp : la méthode Alert() avec l'objet window Les fonctions écrites par vous-même pour les besoins de votre script. 2 ) D é c l a r a t i o n d e s f o n c t i o n s : La déclaration d'une fonction se fait grâce au mot clé function selon la syntaxe suivante: Function nom_de _la_fonction(arguments) { code des instructions [ return nomvariable] } REMARQUES : Il est possible de définir des fonctions sans l utilisation de la clause return d ou l on retrouve ainsi l équivalent d une procédure. Il est prudent de placer toutes les déclarations de fonction dans l'en-tête de la page c-à-d.dans la balise <HEAD>... </HEAD>. un nom de fonction peut comporter des lettres, des chiffres et les caractères _ et & (les espaces ne sont pas autorisés!). Le nom de la fonction, comme celui des variables est sensible à la casse (différenciation entre les minuscules et majuscules). Exemple : function est différent de Function. Les arguments sont facultatifs, mais s'il n'y a pas d'arguments, les parenthèses doivent rester présentes. 11
Activité 10 Créer un nouveau fichier nommé somprod.html et saisir le code JavaScript permettant de calculer la et d afficher somme et le produit de deux nombres x et y saisies au clavier. Le programme affiche comme résultat deux messages d alerte. Le programme doit comporter deux fonctions la première nommée somme et le deuxième produit. <html> <head> <title>nouvelle page 1</title> <script> function somme(a,b) { s=a+b; return s; } function prod(a,b) { p=a*b; return p; } </head> <body> <script> var a=prompt("donner a",""); var b=prompt("donner b",""); s=somme(a,b); alert("somme de"+ a +"et"+ b+"="+s); p=prod(a,b); alert("produit de"+ a +"et"+ b+"="+p); </body> </html> XI. Les événements en JavaScript En Html classique, il y a un événement qui est bien connu: C'est le clic de la souris sur un lien pour passer sur une autre page Web. Hélas, c'est à peu près le seul. Javascript va en ajouter une bonne dizaine, pour mieux gérer le site. Afin de gérer un évènement, il est nécessaire de spécifier quel évènement on veut surveiller, et quelle action entreprendre quand l'évènement se produit. Ceci s'écrit à l'aide d'un attribut HTML. 12
Par exemple, la ligne suivante : <a href="page2.html" onclick="compte++">page suivante</a> Indique que l'on gère l'évènement "clic de souris" sur ce lien. Syntaxe : <nombalise OnEvénement="fonction()"> Activité 11 Exemple : onclick = " alert('vous avez cliqué sur cet élément') " <a href="" onclick="alert('vous avez cliqué sur cet élément')">ici</a> <a href="" onmouseover="alert('vous avez cliqué sur cet élément')">ici</a> Afficher le code source du fichier somprod.html et modifier le fichier en ajoutant deux boutons le premier porte le nom SOMME et le deuxième PRODUIT dont l action de clic sur le bouton SOMME permet d afficher la somme des deux nombres x et y et l action de clic sur le bouton PRODUIT affichera le produit des deux nombres. Le code source de l activité 14 du livre peut vous aider à résoudre ce problème. Vous pouvez vous référer aussi au tableau annexe des événements en JavaScript déjà distribués. <html> <head> <title>nouvelle page 1</title> <script> function somme() { var s=document.formulaire.a.value+document.formulaire.b.value; alert ("somme est"+s);} function prod() { var p=document.formulaire.a.value*document.formulaire.b.value; alert("prod est"+p);} </head> <body> <form name="formulaire"> <p>donner une valeur a <input type="text" name="a" size="20"></p> <p>donner une valeur b <input type="text" name="b" size="20"></p> <p> </p> <p> </p> <p><input type="submit" value="calcul somme" name="b1" onclick="somme()"> <input type="button" value="calcul produit" name="b3" onclick="prod()"> <input type="reset" value="rétablir" name="b2"></p> </form> </body> </html 13
XII. Le contrôle des formulaires en JavaScript 1 ) L e c o n t r ô l e z o n e d e t e x t e : Activité 12 1. Lancer le logiciel Frontpage 2003. 2. Activer le fichier Inscription. html déjà créé dans le chapitre précédent. Ecrire une fonction nommée Verif permettant de contrôler la saisie des champs nom et prénom qui doivent être obligatoirement non vide. D ou le clic sur le bouton «Envoyer» permet de faire appel à la fonction. <Html><Head> <script language="javascript"> </head> <body> <form method="post" action="--webbot-self--".. > </form> Nom: <p><input type="text" name=" " size="20"></p> Prénom: <p><input type="text" name=" " size="20"></p> 2 ) L e c o n t r ô l e d e s c a s e s à c o c h e r ( C h e c k b o x ) : Activité 14 Dans le même fichier Inscription. html. Modifier la fonction Verif en saisissant le code permettant. D ou le clic sur le bouton «Envoyer» permet de faire appel à la fonction 14
Suite de la fonction Verif Constatations </head> <body> <form method="post" action="--webbot-self--" name="f1"> <p><input type="checkbox" name="check1" value="on">winamp</p> <p><input type="checkbox" name="check2" value="on">java</p> <p><input type="checkbox" name="check3" value="on">pascal</p> <p><input type="checkbox" name="check4" value="on">html</p> <p><input type="checkbox" name="check5" value="on">delphi</p>. </form></body></html> 3 ) L e c o n t r ô l e d e s b o u t o n s r a d i o : Activité 15 Créer une nouvelle page Web formée par 3 boutons radio possédant respectivement comme valeur et libellé les textes suivants : " FEVRIER 2002 ", " FEVRIER 2004 ", " FEVRIER 2OO6". Et un bouton de type «button» ayant comme libellé «REPONSE». 1) Créer une fonction nommée «choisir» permettant à l utilisateur de répondre à la question suivante «Quant la Tunisie a remporté la coupe d Afrique des nations». 2) L appel de la fonction se fait dans le bouton REPONSE. 15
<Html><Head> <script language="javascript"> </head> <body> <form method="post" action="--webbot-self--" name="f1"> <p><input type="radio" name="check1" value="on"> FEVRIER 2002</p> <p><input type="radio" name="check2" value="on"> FEVRIER 2004</p> <p><input type="radio" name="check3" value="on"> FEVRIER 2006</p>. </form></body></html> Constatations 16